Quick start guide: Good application visual design

Applications usually take a different approach to visual design than e.g. marketing websites. Here are some ways you can approach the visual design of applications.

Usability first, beauty second

Make the interface more dense if needed (e.g. lots of data that should all be visible at once)
Actions should be near what they affect, or clearly visually related if they’re not
It should be obvious which elements are interactive
The priority of actions (e.g. primary and secondary actions) should be clear
Denotive colour (it has a specific practical meaning in the interface, e.g. blue = interactive) over connotative colour (colour used to refer to cultural meaning, e.g. blue = calm)

Clear layout hierarchy

The layout structure should be clear at a glance to help people orientate
Content should be the focus over interface elements
The hierarchy/relationships of elements should be clear (e.g. which interface elements are more general, and which are more specific?)
Generally a hierarchical grid is used (the interface is split into sections, then those sections are split into sub-sections, etc.)
It should be easy to tell where one section ends and another beings (e.g. clear dividers)
Make use of depth/layering to help show the structure of the layout (e.g. shadows, overlapping)

Long term visual comfort

Plainer classical aesthetics is better than eye-catching expressive aesthetics. Expressive aesthetics get visually tiring over time
Visual weight/complexity should be reserved for when it’s needed
Elements that help structure the interface (e.g. section dividers) shouldn’t attract too much attention
Use a typeface that works well at smaller sizes (e.g. with a large x-height)
Remove visual paper cuts (small problems that annoy us more and more over time, e.g. bad alignment)