Visual details like fonts, colors, and alignment create a usable experience and express brand traits (such as friendliness or reliability).
It’s easy to look at a design and notice it looks good. It’s often much harder to pinpoint why it looks good. In this article we analyze three user-interface designs and discuss the visual-design principles that make them attractive.
Our first example is from Medium.com. This design utilizes a grid, white space, and a typographic system to create a comfortable, yet beautiful reading experience.
Alignment to a grid. To start, there is a column grid (the pink lines in the image above). A column grid provides vertical anchoring lines to which objects are aligned. Because the sidebar content is left aligned to the leftmost grid line, the design looks crisp and the sidebar content is easy to scan. The article text is also left aligned to a column grid line.
In your design, set up a column grid and keep alignment consistent across your different pages and elements. Any alignment inconsistencies should be purposeful — define clear rules to guide you (and remember that left alignment supports scannability).
Typographic variance. Medium uses different type styles from within the same font family (small caps, bold, italic, underlined) and slight changes in color (black versus gray) to differentiate between different types of content. While too much variety can disrupt consistency and make a design look haphazard, Medium’s variants are applied consistently and with purpose. For example, the small caps in WRITTEN BY indicate that it is a section heading. This variance keeps the design from feeling flat, but still feels cohesive with the rest of the text. As a rule of thumb, identify a typographic system and limit your design to 1-2 fonts; always use the same type variant (italic, bold, small caps) for the same purpose (even across webpages or areas of your interface).
Extra space between lines of text. The leading, which is the distance between the baseline of each line of paragraph type, is slightly increased from the default spacing (which is typically 2px greater than the font size). In this case the leading is 4–6px greater than the font size, helping to create an airy and open text block. Reducing the standard line spacing would have resulted in uncomfortable collisions between ascenders and descenders, and a dense read. Consider increasing the default +2px leading if you have several paragraphs of text, which may otherwise feel visually dense and heavy.
Kerning and tracking adjustments. The designer has also considered the awkward spacings created between letterforms as a result of their particular shapes. Kerning and tracking are usually applied to bigger type, like headlines, where the spaces are more apparent. Gaps typically occur around letters that form an angle, like W, Y, V, or T. For example, in the title What Exercise Looks Like in Japan, the spacing between the letters W and h in the word What has been slightly compressed. While most font families automatically adjust kerning (it is built into the type style), consider manually adjusting kerning for large headlines or logos where the space between letters is noticeable.
Collectively, these design details make the design beautiful, while accomplishing the primary purpose of the webpage — to be easily read.
Our second example is from Ritual.com, a vitamin company. This design uses hierarchy, color, and imagery to create an attractive visual experience.
Refined color palette. The color palette is limited to two basic colors: blue and yellow, classic complementary colors. The specific blue and yellow chosen contribute to the attractiveness of the design — the yellow isn’t too bright and the blue is dark enough to read on a white background. If the yellow and blue had been primary CMYK colors (cyan and highlighter-yellow), the design would not look as sophisticated as it does (and more like a website design from the early 90s). When choosing color shades for your design, create a color palette and iterate — switch in and out different colors to see what looks good together. Stay away from anything too similar to a highlighter. Adjusting the color just slightly from a primary color will refine your color choice. For example, the screenshot above has been altered (below) to demonstrate what the design would look like if primary colors had been used.
We like to use Adobe Color for color palette inspiration. If you like the colors on another website, try to pinpoint why — is it the specific color combination, the tones, or the saturation levels? By limiting the color palette to a few colors, you provide focus to the design, as there are few elements to consider (and, thus, fewer distractions). The design will create a stronger brand representation.
Clear visual hierarchy. Visual hierarchy guides the eye and signals the important page elements. In this example, the eye is first drawn to the biggest typographic element, the large heading “Essential for Women,” which gives the user a quick, concise overview of the page content. Our attention is then shifted to the yellow images and Add to Cart buttons.
Note the mixed typographic treatment in the heading: “Essential for Women,” which presumably strives to emphasize both the importance of the products and the fact that they are customized for women.
In your own designs, when mixing type treatment, be sure to:
- Use a maximum of two different font treatments in a single headline. (By font treatments we mean regular, italic, and multiple weights of bold, each with an italic variant). Use bold or underline for the most important word(s) and italic for secondary word(s). Less is more — for example, the design would look haphazard if “Women” was also underlined. It would compete with the bold treatment of “Essential” and disrupt reading hierarchy.
- Keep styles consistent across pages. Since “Essential” is bolded in this heading, it should be bolded on the “Essentials for Men” category landing page.
After reading the heading, our attention is shifted to the large product images and yellow Add to Cart buttons.
Use of high-quality imagery. Imagery can add valuable information to a product description. The direct style of the photo, with no extra clutter to distract from the product, impacts the overall visual design as well. The image backgrounds blend seamlessly with the background of the product card in which they appear and make the page look sophisticated. The photos in your design should help users visually understand the product or concept instead of being there just for decoration. To elevate your design, allow your images to blend in with the rest of the design by matching their background color with the background color of their surrounding space.
Our third example is from the Spotify mobile app. This design effectively uses consistency in visual treatment to create a cohesive listening experience across the app.
Consistent visual treatment. A design will look unprofessional and lack polish when visual elements are used inconsistently or sporadically. In Spotify, many visual elements remain consistent across different areas of the app. First, the spacing between columns (the left and right gutters) are all the same size, across all app screens. More, within genres, the top grid lines (and, thus, the alignment and positioning of the headers at the top of the screens) and the typographic treatment remain consistent. While the gradient color changes from genre to genre, it retains a consistent hue and saturation.
Second, each category has a tile with custom artwork. Although each category has a specific color and graphic, the tiles are consistent in layout and hierarchy. For example, the name of each category (e.g., Pop, Rock, Educational on the Search screen) is in the same position on each tile. The image in the tile (i.e., the album cover art) is consistently on the right, bleeding off the tile. These details make the overall design feel cohesive and polished.
In your designs, you should aim to create a visual system and stick to it throughout different areas of the experience. For example, make the interelement spacing around your webpage be the same or a multiple of the same unit (e.g., if the base spacing between heading and body is 5px, 2 base-spacing units could be used to separate different sections, and so on).
Space to create groupings. Proximity, or the spacing around elements help establish groups. In our example, the minimal space between the content tiles in Your top genres (Pop and Rock) signals that they belong together, while Educational and True Crime belong to Popular podcast categories. When creating groupings in your design, use less space between the header and its content and more space between groups.
Designs do not look good by chance. Each decision in a design should be made with intention, ideally backed up by a visual-design system. While there is not one single thing that explains whether a design looks good or not, following a few principles increases the likelihood that it does:
- Align typography (and other graphical elements) to a grid. Anchor each element to a line in your grid system.
- Establish a clear hierarchy and color palette. Decide what is most important in your design and intentionally apply a specific visual treatment (size, color, placement) to it, so that users see it first.
- Stay consistent. Define clear visual rules and apply them consistently throughout your design.
It is the application of these design principles that collectively make a design beautiful and contribute to a usable experience.