3 ways to improve your visual design skills
By: Jules Cheung
Tags: UI, User Experience, Typography, Design, UX

Practice establishing visual hierarchy by creating many variations of a design using different component styles, and use the black-and-white technique when you feel stuck. A few tips on components:

Fonts — Larger and bolder fonts capture attention and should be used sparingly for headers.

Larger and bolder fonts capture attention and should be used sparingly for headers. Lines — Lines help separate groups of information, serve as layout grids, and can fill awkward white space.

— Lines help separate groups of information, serve as layout grids, and can fill awkward white space. Color — Darker and more saturated colors draw more attention.

— Darker and more saturated colors draw more attention. Shapes —Simply shapes (circle, triangles, squares) are generally more aesthetically pleasing.

—Simply shapes (circle, triangles, squares) are generally more aesthetically pleasing. Images — Images can be enticing, but try to stay away from stock photography.

— Images can be enticing, but try to stay away from stock photography. Space — Space is your best friend. Use it to separate groups of information or to isolate (highlight) important things.

If you need help understanding the fundamentals of visual design components, Steven Bradley wrote some amazing posts on lines, color, shapes, and space.

2 — Use Gestalt principles

All designers should understand Gestalt Theory and the principles of visual perception. Gestalt Theory was developed in the early 1900s by German psychologists, who theorized ways in which humans organize visual experiences. Designers nowadays use Gestalt principles as a framework for more effective visual communication.

“By matching a target audience with selected high impact gestalt images we can shorten the distance to effective communications” — Gregg Berryman

Smashing Magazine already explains the fundamentals of Gestalt Theory, so I’ll focus on showing examples instead.

Figure/Ground

Typically the ground is the background in which the figure (object) exists upon. The goal is to maintain focus on the figure and clearly differentiate it from the ground. Designs with high-contrast colors will establish a stronger figure/ground relationship, while designs with low-contrast colors will have a weaker relationship. Newbies should keep backgrounds simple (light colors or subtle textures) and limit the number of colors for figures.

Proximity

Objects in proximity will visually unite into groups. Proximity can be combined with color to make groups even more apparent. The opposite of proximity — space — can reinforce groupings or isolate unrelated objects.

Similarity

Similar looking objects are perceived to be related. Similarity in objects share the same color, shape, size, or direction. Use similarity to visually tie related objects together.

Photo submitted on r/crappydesign by UglyDuce

Continuity

The human eye continues to follow lines, curves, or objects placed in sequence. When objects in continuity intersect with other objects, our eyes naturally perceive these objects as distinct entities (not grouped). Use color to further reinforce continuity and flow.

We are naturally able to distinguish objects with continuity from other objects.

Closure

Incomplete objects, or space that is not completely enclosed, are perceived to be whole because our brain fills in the missing gaps. Designers can use the principle of closure to create visually compelling graphics.

3 —Check your fonts!

Designers should make sure that words are both legible and readable. The older I get, the less patience I have for deciphering tiny, ultra-thin, or lightly colored words. With typography there are a few best practices to follow:

Start with 2 fonts

A font is a typeface (aka font family) set at a specific size and weight. Jon Tan explains:

“Using the Georgia typeface example, the “Georgia Regular”, “Georgia Italic”, “Georgia Bold”, and “Georgia Bold Italic” in my library are all fonts of the Georgia typeface.”

Rule of thumb is to start with 1 header font and 1 body font of different typefaces, and to use no more than 2–3 typefaces per layout. The more headers or styles you have (quotes, links, etc), the more fonts you’ll need. This Medium post uses 2 typefaces (Lucida Grande and Cambria) and 7 fonts.

Check out Hongkiat’s font tools to find good font pairings. Many designers use Google fonts because it has 818(!) free typefaces to choose from. Other designers subscribe to paid services such as MyFonts or Fonts.com.

14px minimum body font size

I was once part of the ‘tiny words are cooler’ camp. After watching dozens of users struggle to read my designs with 12px font, I killed this mentality and found 14px to be the minimum size for readability. Web trend nowadays are to go even bigger, as evidenced by this 21px body font Medium post. The exception is when you want to deemphasize things like disclaimer text. Check out Christian Miller’s piece on Why your body text is too small.

Line height = 1.5–2x font size

Line height refers to the amount of space between sentences in a paragraph. Too small of a line height makes text feel crammed, and too big of a line height makes sentences feel disconnected.

“Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one .” — w3c.org

In addition to line height, paragraph height is the amount of space between paragraphs. According to W3c’s web content accessibility guidelines, you should set paragraph height to >1.5x the line-height.

Optimal line character count— 66 characters

The number of characters per line is key to ensuring readability. Lines that are too long are hard to follow, while lines that are too short breaks reading rhythm. Many designers regard The Elements of Typographic Style as industry standard for optimal character count:

“Anything from 45 to 75 characters is widely-regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.” — Robert Bringhurst

W3c’s web content accessibility guidelines reinforces this standard, asserting that lines should contain “…no more than 80 characters or glyphs.”

Other visual design tips