Slides and Summary of Web Application Visual Design Session for Boston CHI

Layout, type, color, imagery and identity are key to communicating in any medium. Because web apps are interactive and often need to help people get things done, these five elements have a big effect on usability – if they are present, they automatically communicate a message. They are the "tools" that the designer has to establish the UX goals of consistency, hierarchy and personality.

Our session at the Boston CHI Professional Development Day was designed to contextualize these core visual design principles for web applications. While there are tons of articles on the web and in print about web design and user experience, a lot of application interfaces are designed without visual expertise, and there are few resources that get into the nitty-gritty of applying these principles to complex web application design.

The session, like some of our blog posts, attempted to provide guidelines to help developers and non-designers avoid common mistakes, make informed decisions, and ideally, elevate the ordinary. When creating the session, I thought 5.5 hours of instructional time was a lot. In practice, I found it wasn't nearly enough to provide the kind of framework I'd hoped to. There's too much to talk about, and most of it takes practice to master the basics. In hindsight, I wish I'd kept the focus to common mistakes and ways to avoid them.

Web Application Visual Design for Non-Designers

View more presentations from Nimble Partners

In the session exercises, participants started off with a simple dot exercise similar to what's shown in our post on Visual Hierarchy and Why It Matters, and moved to analyzing a sample scenario to tease out interface elements. Participants listed and prioritized the implied interface elements based on their reading of the scenario, and then sketched designs, applying the principles of proximity, alignment, grouping and nesting.

Mastering positioning and layout (not to mention color, type and imagery) takes a lot of trial and error. We could have used the whole session just creating simple prototyped layouts, testing them with each other and changing the layout (position of buttons, position and juxtaposition of features, etc.) to experience how seemingly small changes can affect perception and use.