uxdesign.cc – User Experience Design — Medium | Jules Cheung

Quick tips for visual design newbies

I’ve noticed a trend after screening dozens of junior designer portfolios. Designers (mostly from bootcamps) were heavily focused on UX and evangelizing the Design Thinking mindset popularized by consultancies like IDEO. What lacked was the ability to breath life into designs, and portfolios fell flat in showcasing visual design fundamentals taught in art school.

As of April 2017, a quick search on Glassdoor reveals that companies are hiring more Product Designers capable of end-to-end design.

I started off my career as a graphic designer and through trial and error, learned the art of layout and composition. Reflecting upon my journey, I’ve come a long way since my first school project:

Even for Kanye…its a bit too powerful

Luckily visual design skills can be learned over time! Here’s one of my recent projects:

Layout and composition matters

Today I’ll share 3 tips to improve your visual design skills.

1 — Establish visual hierarchy

Visual hierarchy is organizing information by order of relative importance, and its established by arranging components (typography, lines, shapes, images, color, and space) on a layout. Designs with strong visual hierarchy and composition will communicate a message by seamlessly guiding your eyes. For example, let’s look at how Airbnb arranges components on their website:

Where do your eyes look first and in what order? If you’re not sure, try converting the page to black and white. Notice how your eyes are drawn to larger and darker (more saturated) components.

Visual hierarchy is established by arranging components to convey high-priority information first and low-priority information last. This is often an exercise of balancing user needs with business goals. For Airbnb, the business goal is to increase signups for work-related accounts, while user needs are to search for places to stay. In other words, business goals trump user needs on this page.

Strong visual hierarchy and composition will guide your eyes fluidly across a layout. Poor visual hierarchy will result in miscommunication or confusion.

Feast your eyes on these bad boys:

Photos submitted to r/crappydesign by ibegross, JoJoeyJoJo, and jaapgrolleman

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.
• Lines — 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.
• Shapes —Simply shapes (circle, triangles, squares) are generally more aesthetically pleasing.
• Images — 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 sentence character count— 66 characters

The number of characters per sentence is key to ensure readability in design. Sentences too long are hard to follow, while sentences too short break reading rhythm. Many designers regard The Elements of Typographic Style as industry standard for 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 sentences should contain “…no more than 80 characters or glyphs.”

Other visual design tips

• Learn the fundamentals of color theory
• Consider color standards for universal accessibility
• Unless you really like illustration, its much faster to use free icon libraries like Material Icons, Ionicons, or Noun Project.
• When vertically centering objects, place it slightly higher than the true center to adjust for optical illusion

If you liked what you read please give a ❤️ below! It gives me ?? to share more stories with you ??

3 ways to improve your visual design skills was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.