The Anatomy of a Good Design: An Analysis of 4 Sites

Summary: Visually pleasing designs use consistent type styles and spacing, create a visual hierarchy, and utilize an underlying grid structure.

In a previous article we broke down why three designs look good. In this article we will analyze three additional user-interface designs and discuss the visual-design principles that make them attractive. Afterall, how something looks affects the perception of how well it functions.

Example 1: Comfortable Editing Experience

Our first example is from Dovetail , a data-analysis platform. This design used a grid, a type system, and consistent iconography to create a comfortable editing and reading experience.

Alignment to a grid. A 3-column grid acted as a base to which elements are aligned. The leftmost grid line provided a vertical anchor for the sidebar navigation. The middle column of text was also left aligned to a grid line, and the rightmost grid line separated the tags and comments area. Setting up a grid in your designs will keep elements aligned consistently across different screens.