Design for Non-Designers

37designs.com / @37designs / fb.com/37designs
DESIGN
FOR NON-
DESIGNERS
BY ROSS JOHNSON / @3POINTROSS

@3POINTROSS / 3.7DESIGNS.CO / SNAPORBITAL.COM
JANUARY
12TH IN 
HAWAII

WALKIE-
TALKIE 
SKYSCRAPER
BUILT
IN 2014

CROSS THE
STREET?

WHICH
DIRECTION?

WE’RE ALL 
DESIGNERS

DESIGN IS
NOT ABOUT
MAKING
THINGS
LOOK GOOD

“
DESIGN IS NOT JUST
WHAT IT LOOKS AND
FEELS LIKE.

“
DESIGN IS HOW
IT WORKS.
— Steve Jobs

IDENTIFY WHAT YOU
ARE TRYING TO SOLVE.
1

“
HOW DO YOU BUILD A
PLANE THAT COULD BE
FIXED IN HOURS?
- Paul MacCready

GOSSAMER
CONDO 
FLEW 2,172
METERS

WHAT ARE WE
TRYING TO SOLVE?

ACCESS TO ACCOUNT
CALM MINDSET 
ACCOUNT RECOVERY
BRANDING / MESSAGING
EASIER RE-ACCESS
MINIMAL FRICTION
POSITIVE EXPERIENCE
MEMORABLE

DESIGN PRINCIPLE
2
VISUAL HIERARCHY

SHOW ME WHERE I
SHOULD LOOK AND IN
WHAT ORDER.

EVERYTHING
HAS A
PRIORITY
…SOME LESS THAN OTHERS

MORE VISUAL WEIGHT == MORE IMPORTANT

IMPORTANTNOT IMPORTANT

Build your brand. Sell more stuff.
Sign up free.
MailChimp is the world’s largest marketing automation platform.
It’s like a second brain that helps millions of customers—from
small e-commerce shops to big online retailers—ﬁnd their
audience, engage their customers, and build their brand.
Send better email
Whether you need to sell your products, share
some big news, or tell a story, our campaign
builder makes it easy to create an email
marketing campaign that best suits your
message.

MOST IMPORTANT
SECOND MOST

POSITION / ORDER
SIZE / WEIGHT 
COLOR OR CONTRAST
NEARBY ELEMENTS

IMPORTANT
IMPORTANT

IMPORTANTIMPORTANT

SIZE
COLOR
SHAPE

1ST
WHERE ARE WE?
2ND
WHAT DO I DO?
3RD
NEED TO FILL 
THESE OUT

DESIGN PRINCIPLES
3
WHITE SPACE & 
PROXIMITY

THE SPACE BETWEEN
AND AROUND ELEMENTS

TAKE YOUR
WHITE SPACE 
AND DOUBLE IT

CLOSELY RELATED ELEMENTS
10px apart
SEMI-RELATED / GROUPED ELEMENTS
15px apart
BETWEEN GROUPED ELEMENTS
30px apart
BETWEEN GROUPS
50px apart
BETWEEN SECTIONS
90px apart

Build your brand.
sell more stuff.
MailChimp is the world’s largest marketing automation platform. It’s like a
second brain that helps millions of customers—from small e-commerce
shops to big online retailers—find their audience, engage their customers,
and build their brand.
Send better email
Whether you need to sell your products, share some big news, or tell a
story, our campaign builder makes it easy to create an email marketing
campaign that best suits your message.
Sign Up Free

BDM False Alarm
Amber Alert (CAE) - Kauai County Only
Amber Alert (CAE) Statewide
1. TEST Message
PACOM (CDW) - STATE ONLY 
Tsunami Warning (CEM) - STATE ONLY
DRILL - PACOM (CDW) - STATE ONLY
Landslide - Hana Road Closure
Amber Alert DEMO TEST 
High Surf Warning North Shores

BDM False Alarm
1. TEST Message
Amber Alert DEMO TEST
DRILL - PACOM (CDW) - STATE ONLY
Amber Alert (CAE) - Kauai County Only
Amber Alert (CAE) Statewide
PACOM (CDW) - STATE ONLY 
Tsunami Warning (CEM) - STATE ONLY
Landslide - Hana Road Closure 
High Surf Warning North Shores

ELEMENTS THAT ARE
CLOSER TOGETHER 
WILL BE INTERPRETED
AS BEING RELATED

GROUPED, RELATED, SIMILAR
GROUPED, RELATED, SIMILAR

DESIGN PRINCIPLES
4
GRID & ALIGNMENT

DESIGN PRINCIPLES
6
CONTRAST & BALANCE

HIGH & LOW CONTRAST IS
VISUALLY INTERESTING

HIGH CONTRAST 
LOW CONTRAST

SMALL, MEDIUM & LARGE

EMPHASIZE & DEEMPHASIZE

DESIGN PRINCIPLES
7
CONVENTIONS

Logo in the top left
Search in top right
Links are underlined
Primary navigation across
the top or down the left
Buttons look clickable
Clear indicator of current
page / section

DESIGN PRINCIPLES
8
TYPOGRAPHY

YOUR GOLDEN RULE
LEGIBILITY

PICK ONE FONT.
AT MOST, TWO.

A Red Flare Silhouetted 
the Jagged Edge of a Wing
All their equipment and instruments are alive. I watched
the storm, so beautiful yet terrific. Almost before we
knew it, we had left the ground.

A Red Flare Silhouetted 
the Jagged Edge of a Wing
All their equipment and instruments are alive. I watched the
storm, so beautiful yet terriﬁc. Almost before we knew it, we
had left the ground.

WHEN IN
DOUBT, 
JUSTIFY 
LEFT

DOUBLE YOUR FONT SIZES
This ensures there is enough contrast and hierarchy
between different groups of type.
74px font
36px font

DESIGN PRINCIPLES
9
COMMUNICATION

ROSS
JOHNSON

Design for Non-Designers

Recommended

Recommended

More Related Content

Similar to Design for Non-Designers

Similar to Design for Non-Designers (20)

More from Ross Johnson

More from Ross Johnson (15)

Recently uploaded

Recently uploaded (20)

Design for Non-Designers