Virtual Seminar

Visual Design for Web Applications

November 2010 90 minutes

You’ll learn to…

  • Use key points to use as a checklist or to plan your visual design
  • Incorporate brand into your design
  • Recognize when you should be consistent, and when it’s important to be inconsistent
  • Consider new terms—Stage, interaction planes, and affordances—what they mean and why they’re important
  • Start down in the trenches of your application, rather than the dashboard or home screen
Topics:

Web applications live in this strange world, half application, half web site. Something as simple as making a command look like a command, quickly becomes a critical decision. Do you make it a button? Should it be a link?

Sometimes, in web application design, it feels like every pixel matters. This isn’t just a question about the application’s aesthetics. Visual design can have a huge impact on how the application communicates its use.

When visual design isn’t clear and concise, the user’s focus strays. It forces the users to guess at what the designers are trying to tell them.

There are countless books and presentations about visual design that talk about alignment and white space, and even some color theory. While these may provide a foundation for creating successful screen designs, they don’t address many of the real world constraints of application designs.

In this seminar, David Rivers discusses a number of considerations for creating or updating your application’s visual design. He’ll show you how to make it successful and delightful. As is typical of Two Rivers’ presentations, this Virtual Seminar is loaded with real-world examples and insight that you won’t want to miss!

Web sites are all about conveying information, about consumption. Web applications are all about accomplishing work. That distinction is important because accomplishing work requires things that consuming information doesn’t: repetitive tasks, multiple and even sometimes conflicting goals, work flows, multiple inputs, and state machines, just to name a few. Much of the material David will cover is applicable to web applications and to web sites.

David will cover several important points of visual design for web applications. Taken together, these points can help you form a visual style guide for the screens of your application. Individually, each will take your app up a notch in several dimensions: appeal, usability, comfort and comprehension. David’s talking points include: the “stage,” interaction planes, branding, color and lighting, consistency, borders, boxes and alignment in the real world, fonts, affordances, and mock ups with real data.

Visual design problems affect an application’s success in a variety of ways. In the mildest form, they slow users down and distract them from their task. In the worst cases, they confuse users to the point of giving up or needing assistance. If the application is in the organization’s revenue stream or helps reduce costs, we’ve seen visual design issues can dramatically affect the bottom line.

  • Use key points to use as a checklist or to plan your visual design

  • Incorporate brand into your design

  • Recognize when you should be consistent, and when it’s important to be inconsistent

  • Consider new terms—Stage, interaction planes, and affordances—what they mean and why they’re important

  • Start down in the trenches of your application, rather than the dashboard or home screen