Find out how to turn merely adequate experiences on the web into more meaningful ones with an intelligent interface designed using Adobe Fireworks. People often complete tasks despite the fact that many interfaces seem intent on thwarting us; understanding how people perceive, think, learn, and remember can help us make better design decisions. In this session we will identify common UX problems, discuss how people actually think, and show how to modify the design with Fireworks to craft a better user experience.

Understand what interaction design is and how the five essential principals of interaction design could help you make better interaction design decisions. This quick introduction will help you get started thinking about how to design your interfaces in the most effective way with the behavior of the user in mind.

Now that you understand the five principals of Interaction Design, it’s time to learn how to apply those concepts to craft effective navigational systems for digital interfaces. At the end, follow along a quick tutorial in Adobe Flash Catalyst to see some ways dropdown navigation bar elements can be presented.

See how the five essential principals of interaction design apply to the presentation and the delivery of text, and understand how people tend to view and consume text on a digital device. Then follow a quick exercise in Adobe Flash Catalyst to take a look at an example of creating a liquid layout.

In this episode, David explores how interaction design is applied to the delivery of images and media through the use of patterns, timing, size and more. Then he switches over to Adobe Flash Catalyst to show an example where some of this is applied to a light box project.

In this final lesson, David wraps things up by teaching you how to effectively design interactions for forms and dialogs including ways to smoothly guide users through a good user experience using the same essential principals discussed in this series.

Information designer David Hogue adds placeholders for slideshows and video in the visual design, then quickly modifies the exported CSS and HTML in Dreamweaver CS4 to make the web page complete.

Information designer David Hogue uses HTML component symbols from the common library and shows the 3-slice technique to make a clean CSS and HTML export from Fireworks CS4.

Information designer David Hogue turns a wireframe into a web page by defining the divs, images, and text objects to make a clean CSS and HTML export from Fireworks CS4.