Howd They Do That?!

I totally love HBO Voyeur! So cool! I know I've only just started learning the basics, but hopefully, I get a cheat sheet on the action scripts to do this!

Click here for the rest of the 10 websites!

On Usability

Usability is to web design, as sustainability is to package design (and probably even to brand design on the whole). It is not enough that the web design is catching, it has to be usable. It has to function well, and function along with the user.

I found another reference article on the principles of usability which I feel we should always be aware of when designing a web interphase.

Here's the repost:

Overview

A well designed user interface is comprehensible and controllable, helping users to complete their work successfully and efficiently, and to feel competent and satisfied. Effective user interfaces are designed based on principles of human interface design. The principles listed below are consolidated from a wide range of published sources (Constantine & Lockwood, 1999; Cooper & Reimann, 2003; Gerhardt-Powals, 1996; Lidwell, Holden & Butler, 2003; Nielsen, 1994; Schneiderman, 1998; Tognazzini, 2003) and are based on a long history of human-computer interaction research, cognitive psychology, and design best practices.

Usefulness

• Value: The system should provide necessary utilities and address the real needs of users.
• Relevance: The information and functions provided to the user should be relevant to the user's task and context.

Consistency

• Consistency and standards: Follow appropriate standards/conventions for the platform and the suite of products. Within an application (or a suite of applications), make sure that actions, terminology, and commands are used consistently.
• Real-world conventions: Use commonly understood concepts, terms and metaphors, follow real-world conventions (when appropriate), and present information in a natural and logical order.

Simplicity

• Simplicity: Reduce clutter and eliminate any unnecessary or irrelevant elements.
• Visibility: Keep the most commonly used options for a task visible (and the other options easily accessible).
• Self-evidency: Design a system to be usable without instruction by the appropriate target user of the system: if appropriate, by a member of the general public or by a user who has the appropriate subject-matter knowledge but no prior experience with the system. Display data in a manner that is clear and obvious to the appropriate user.

Communication

• Feedback: Provide appropriate, clear, and timely feedback to the user so that he sees the results of his actions and knows what is going on with the system.
• Structure: Use organization to reinforce meaning. Put related things together, and keep unrelated things separate.
• Sequencing: Organize groups of actions with a beginning, middle, and end, so that users know where they are, when they are done, and have the satisfaction of accomplishment.
• Help and documentation: Ensure that any instructions are concise and focused on supporting the user's task.

Error Prevention and Handling

• Forgiveness: Allow reasonable variations in input. Prevent the user from making serious errors whenever possible, and ask for user confirmation before allowing a potentially destructive action.
• Error recovery: Provide clear, plain-language messages to describe the problem and suggest a solution to help users recover from any errors.
• Undo and redo: Provide "emergency exits" to allow users to abandon an unwanted action. The ability to reverse actions relieves anxiety and encourages user exploration of unfamiliar options.

Efficiency

• Efficacy: (For frequent use) Accommodate a user’s continuous advancement in knowledge and skill. Do not impede efficient use by a skilled, experienced user.
• Shortcuts: (For frequent use) Allow experienced users to work more quickly by providing abbreviations, function keys, macros, or other accelerators, and allowing customization or tailoring of frequent actions.
• User control: (For experienced users) Make users the initiators of actions rather than the responders to increase the users’ sense that they are in charge of the system.

Workload Reduction

• Supportive automation: Make the user’s work easier, simpler, faster, or more fun. Automate unwanted workload.
• Reduce memory load: Keep displays brief and simple, consolidate and summarize data, and present new information with meaningful aids to interpretation. Do not require the user to remember information. Allow recognition rather than recall.
• Free cognitive resources for high-level tasks: Eliminate mental calculations, estimations, comparisons, and unnecessary thinking. Reduce uncertainty.

Usability Judgment

• It depends: There will often be tradeoffs involved in design, and the situation, sound judgment, experience should guide how those tradeoffs are weighed.
• A foolish consistency...: There are times when it makes sense to bend or violate some of the principles or guidelines, but make sure that the violation is intentional and appropriate.

Emulate, Not Imitate

I was browsing for interesting website related news when I came across this informational site called Info Design (http://www.informationdesign.org/). It's a text-heavy portal of articles relating to the design and understanding of information.

One particular article is worth taking a closer look at. It's about how emulating the big, successful websites may not necessarily work all the time. (I think it's freakishly odd that the class has been doing just that - immersing ourselves in good site designs which we come across.)

The meat of the article is about usability. Here's a section of it, which is really a thought-provoking list of what to watch out for when building one's own site:

"There are many other reasons why a big-site design might not work for you:

• Scale: Sorting through millions of products or articles requires more UI horsepower than needed for a simpler site with a handful of offerings.
• Maintenance: Some design approaches — as simple as a company blog — require frequent updates to avoid going stale. Better not do it if you can't commit the resources to keep it working.
• Integration: I've often discussed the importance of total user experience. Design elements can't be examined in isolation; they should work together. So, if you take one element out and plug it into a different context, it might not play well with your site's other design elements.
• Domain: Government agencies often say they look to The White House as a role model for their websites. In addition to whitehouse.gov's occasional usability weaknesses, most government agencies offer a completely different set of services to their users. How to present nuclear safety regulations? Definitely differently than posting the president's latest speeches.
• Audience: Usability is always relative to two things: the users and their tasks. Maybe your users are more technically savvy than the general audience that typically dominates on the big sites. Often your users will have more specialized knowledge about your issues than general users — then again, the opposite might be true if you're offering basic education.
  • This last issue is particularly important for intranet design, where it's rarely appropriate to copy mainstream consumer-focused sites from the open Web. (That's why there are so many separate usability guidelines for intranets.) For example, even though there are many good uses of social features in the enterprise, don't copy Twitter, Facebook, and the like.
    • Web users = customers. Intranet users = employees.
    • Web tasks = shopping/having fun/etc. Intranet tasks = doing your job/cranking out deliverables.

For the complete article, click here.

The Digital Magazine

This is the first time I ever bothered to check a magazine's website alter ego. T Magazine does it so simply and so smoothly, I can't help think by spending some time on Flash, the webpage transition is attainable by the likes of a digital newbie like me.

Changing the Experience

This is a website that innovates the online travel booking experience, because it doesn't go by any airline. From the main page of Wanderfly, they let you choose why you are traveling - if it's for fun, for culture, for romance. That's getting at the heart of the reason for travel - the motivation to escape.

Click here to go to Wanderfly.

Matt and Kim's Kinetic Type Video

A return to flash.... or maybe this is done in AE. Anyway, I'm feeling nostalgic for the first project in digital design, that's why.

Click here.

Halloween Special: E.T. in After Effects

It's amazing how E.T. can come back to life even in 2D, as long as there's some sort of motion involved in the animation. Click here.

Wine Tasting and Finger-Tapping

Don't know if you've heard of this one before, but the iPhone/Minority Report touch screen phenomenon has affected even the way we dine and wine. Clo, an upscale wine bar in Time Warner is certainly one of the few who aren't too scared to set their drink near the computer (in fact, it's on the computer...). Click here for more on Clo.

Handmade yet Digital

Who knew we can exist in a world where opposites actually produce something cool? Here's a sample of a handmade style executed in a digital way. Click here.

The iPhone Apps Take Over the World

I think iPhone Apps are out to take over the world. It's what everyone wants to have, do, create, be the first one to own one, etc.

Luckily for us, designers on the go, we can now take advantage of one special app called myPantone!

If you're stuck on a debate with your client as to whether the color he okayed on the mechanical is teal or turquoise, HAVE NO FEAR! myPantone is here! Boy, where was this app when I most needed it!!!

The New Desktop

I've always liked TED Talks. Similar to MIT Media Lab, they're talking about the latest and greatest emerging innovation which should inspire people and businesses today. Here's one where this guy wasn't too happy with his digital desktop that he developed his own!

I think interactivity that really engages people are those that resemble real life, and he hits it on the head with this new desktop called Bump Top.

Click here.

Interactivity in Broadway and then some

Is MIT Media Lab out to make the next Facebook? That's only a rumor. What they made is the FaceSense. This tool is not Facebook at all. It's like the embodiment of the show "Lie to Me" which reinforces that people communicate through facial expressions. With a very simple interphase, FaceSense manages to measure the person's feelings through a streaming video of them.

Click here.

MIT Media Lab is certainly several leaps ahead of Broadway. In this video, the play, the plot, the actors interact with the setting it's almost as if the setting itself is another character.

Click here.

Animating the Logo using After Effects

This can be useful inspiration to me and Lena, because it explores logo animation using our concepts! Click here!

Inspirations for Project 2

Click here. This restless type treatment against a dimensional space is something I hope to capture for my project.

Click here.

It's so sublime! I can't wait to produce works like this! Click here.

War of the Wor(l)ds

Click here.

Handmade Type Animatics

I chanced upon this site which showcases a type animation all done raw! Click here.

Is This Flash or After Effects?

I saw this while I was brainstorming on a better approach to my kinetic typography.

It's incredible! I love the ability of type to be suspended in space like this, and for it not to look flat. I need help with mine! I want this kind of effect!

Click here.

Type Inspiration

Click here to get to the inspiration.

"Doodieman" Short Film

WARNING:

Do not watch this before eating!

This gives me ideas for animating my dream sequences. LOL.

I hope this helps us all!

8 Flash tips and tricks + one big cheat sheet

Wednesday, September 10, 2008

Flash, like many other computer programs, is full of hidden secrets to make work easier and faster. Whether you're a beginner or you've been working with tweens since the Clinton administration, here are helpful hints for the program.

Make animations more natural

Once a motion tween has been created, select anywhere in the shaded area and take a look at the Properties window. In the box marked "Ease," slide the value up to naturally decelerate the tween or down to speed it up.

Convert bitmap images to vector

Kirupa.com has a quick tutorial on optimizing your images using the "Trace Bitmap" function in Flash. The entire process can take less than a minute, depending on the size of the image.

Make your audio crisp

A common mistake among Flash beginners is creating Flash files that have audio tracks of someone speaking, but in the final project the audio quality is distorted and the speaker is rendered unrecognizable. To correct this, click anywhere in the audio on the timeline. In the drop down menu select File > Publish Settings... Click the "Set..." buttons next to "Audio Stream" and "Audio Event" and change the compression to "Speech."

Create invisible buttons

Sometimes creating invisible buttons on an existing background is necessary like inthis project where the movie posters were laid out in Photoshop. To create this effect, simply create a button with blank up, over and down frames, and create a polygon that corresponds to the hit state you desire. The empty button will show up as a light blue on the stage, but invisible in the final product.

Label everything

Instead of coding ActionScript to go to frame numbers, create frame labels so if the timeline is adjusted, the routing will still be consistent.

Move that symbol faster

To nudge something across the workspace faster, hold down the Shift key while pressing the arrow buttons.

Download what you need

Sites like FlashKit, iStockPhoto and VCL Components offer Flash components like menus, audio players and scrollers that can be downloaded for free or for a fee. These sites will easily cut down on the time spent putting together the little things.

Skip Flash altogether

The Effect Generator is an incredibly simple and useful online tool for creating slideshows, scrollers, effects and more. The irony of the site having a Flash-based interface shouldn't be lost on anyone.

Use a cheat sheet

Nothing makes life easier than a cheat sheet. Here is a Flash cheat sheet of keyboard shortcuts for PC, available in both PDF and in JPG formats.

Flash Could Do That?!

I'm looking forward to be able to tell stories, less morbid but entertaining nonetheless, like this:

The End of the World

I feel like I can do something like this. The illustration is crude (I'm not an illustrator at all), but the perfectly synced image to voiceover is the amazing thing about it. It has its stops and starts (not as seamless as film) but I think that adds to the character of the entire piece.

Animator vs Animation

First of all, I love the fact that it's you against the machine! It's a fluid story and I wonder how many hours it took to perfect this. I really am starting to think you don't need an elaborate design to convey a message, or inspire with humor.

Lady Noir

I think I found some inspiration from which to base my next project! I'm liking the color palette, and the mood, and the story has something to do with my theme too. It was very surprising to get to the ending.

Trial by Fire: Hell's Kitchen

Project I: 10-second Type Animation (8-10 frames)

1. Brand Name

2. Copy Content

3. Storyboard

4. Powerpoint Show

5. Design