What is good visual design? “As little design as possible,” according to influential designer, Dieter Rams. However, what Rams does not explain is that good visual design needs foundation—principles that are followed rigorously to accommodate innovation and aesthetic. At Impekable, we, too, have adopted design principles to reach what Dieter Rams calls “good design.”
Good design is as little design as possible.
Consistency means creating an interface that fits together in a family of different resolutions and mobile apps—making sure that the same elements are being repeated to match each page. For repetition to be effective, the same typeface, color or gradient style must be used in each application. For example, compare Facebook’s website to their mobile app; the banner is familiar but look at the the icons. They’re not only the same icons but they’re also lined up in the same way in both the mobile app and website. Because of Facebook’s design consistency, anyone that has viewed their website can use their mobile app with ease.
You’d be able to recognize Facebook’s branding anywhere.
Alignment is when two elements are connected by an invisible path or a visual connection. Alignment acts as a visual guide that your eye follows unknowingly.
Twitter has two notable columns in their web app. They’re not haphazardly placed on the page but lined up next to each other. A closer look shows that even profile pictures are lined up to names and Twitter handles. An even closer look shows that the profile pictures are aligned to each other as are the tweets!
Lined up and pretty.
Elements need to be grouped in a logical manner. Grouping elements helps the user browse faster—reducing work to complete the task they are attempting on a webpage or mobile app. Grouping means creating headers, columns, rows. With grouping, the user doesn’t have to think. Proximity speeds up your thousand tweet read of the four hundred people you’re following.
Put a grid on it!
Contrast happens when two related elements are different. Great difference means great contrast. To make contrast work, the differences between the two elements must be obvious. Elements can range from size, color, type and texture to shape, alignment, direction and movement.
When designing for web and mobile, readability of text becomes difficult and downright impossible without good color contrast. A dark color on a light background must be used or vice versa. A mistake that designers make is preferring aesthetics over readability contrast because low contrast colors may look compositionally nicer than black on grey. Sometimes good design means sacrificing aesthetics so users can read your website.
Good color contrast will also attract the user’s eye to the most important aspect of the page (as seen here on Spotify). Turn up the contrast!
See that button? They really want you to click it.
Hierarchy guides the user from the most important to the least important aspect of the product. In web design, the first thing a user might see is a hero image with a caption then the designer might lead the user to scroll to the next portion of the website or visually direct the user to use the navigation bar.
A foolproof way to test hierarchy is the blur test. The blur test is a technique for testing UI design. The idea is that if an image is blurred by squinting or otherwise, the user should be able to navigate through the product without any problems thanks to the hierarchy in design.
Giving your user good hierarchy means that the designer respects that the user does not have time to mull through the entire product so instead, designers are straightforward. We use these principles to solve problems—like how roads and signs are used to guide from point A to B.
Go try it!
Watch for these traits the next time you’re browsing the internet. Which of your favorite sites are using them? Which ones are breaking the rules? How would you do it different? Share your favorite examples and thoughts below.