WP Rochester - Design for Non-Designers

DesignTipsforNon-Designers
Tips, Tricks, and “Rules” to help your business and marketing
@AndyStaple StapleCreative.com

Andy Staple
FOUNDER | UI & UX DESIGNER
I’m the Founder, and a UX Designer at Staple Creative, also the Co-Founder of
the Buﬀalo WordPress Users Meetup.
Web: staplecreative.com
Twitter: @AndyStaple

@AndyStaple
WHATISDESIGN?
D I V I N G I N :

@AndyStaple
Art is interpreted.
Design is understood.
A R T & D E S I G N
Art is expressive.
Design is functional.

@AndyStaple
One could describe Design as a
plan for arranging elements to
accomplish a particular
purpose.”
— C H A R L E S & R A Y E A M E S
“

@AndyStaple
GOALSFORTHISDISCUSSION
D O N ’ T F A L L A S L E E P Y E T !
To help you learn a bit more about design, and realize it isn’t a
stuffy highbrow club full of elitists.
… oh, and also to help you and your website, marketing efforts,
articles, etc… have a higher impact with visitors.

@AndyStaple
I already have a WordPress Theme. The Design is
Done. Why the heck do I need to listen to you, you
blabbering idiot!?
I K N O W W H A T Y O U ’ R E T H I N K I N G
• You’re making design decisions every time you decide on bolding, italicizing,
changing colors of elements, or placing photos on a page a certain way. This is all
deliberate design.
• A basic knowledge of these design basics means you’ll better understand how to help
your visitors.
• You’ll know more ways to influence your visitors.
“
”

@AndyStaple
Design takes practice. Keep designing. The good news is, there is
no barrier to entry and even the most “un-creative” of you are
already making design decisions every day.
LET’SFOCUSONTHEBASICSANDEASYWINS
D E S I G N W I T H O U T D E S I G N S C H O O L

@AndyStaple
BASICBUILDINGBLOCKSOFDESIGN

@AndyStaple
Typography
BUILDING BLOCKS OF DESIGN
H I G H L E V E L I N T R O
Grid & Layout Color Whitespace Hierarchy

@AndyStaple
TYPEFACESHAVEDIFFERENTMOODS
T Y P O G R A P H Y
Pinstriping
Masters
SINCE 1958
Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Integer
posuere erat a ante venenatis
dapibus posuere velit aliquet.
Maecenas faucibus mollis interdum.
Your choice in typefaces can help show visitors what personality your brand
may have, and further verify your niche.
Handmade
Earrings
Morbi leo risus, porta ac
consectetur ac, vestibulum at
eros. Integer posuere erat a ante
venenatis dapibus posuere velit
aliquet. Maecenas faucibus mollis
interdum.
Dewey
Cheatem
&Howe
Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Integer posuere erat a
ante venenatis dapibus posuere velit
aliquet. Maecenas faucibus mollis
interdum.

@AndyStaple
TYPEFACESHAVEDIFFERENTMOODS
T Y P O G R A P H Y
Performance Racing
Performance Racing
Performance Racing
You’re managing the graphics for a Sports Car Racing Team, what type of
headings would you think ﬁt?

@AndyStaple
READABILITY-HOWEASYISITTOREAD?
T Y P O G R A P H Y
Keep your main paragraph text on your page easy to read. This typically means a
medium-large x-height and simple letterforms.

@AndyStaple
READABILITY-HOWEASYISITTOREAD?
T Y P O G R A P H Y
Keep line-lengths in check. Near 60 letters per line when possible.
Nulla vitae elit libero, a
pharetra augue. Integer
posuere erat a ante
venenatis dapibus posuere
velit aliquet. Vestibulum id
ligula porta felis euismod
semper. Nullam quis risus
eget urna mollis ornare vel
eu leo. Nullam id dolor id
nibh ultricies vehicula ut id
elit. Nullam id dolor id nibh
ultricies vehicula ut id elit.
Donec sed odio
dui.llamcorper nulla non
metus auctor fringilla.
Aenean eu leo quam.
Pellentesque ornare sem
lacinia quam venenatis
vestibulum. Nullam id dolor
id nibh ultricies vehicula ut
Nulla vitae elit libero, a pharetra augue. Integer posuere erat a
ante venenatis dapibus posuere velit aliquet. Vestibulum id
ligula porta felis euismod semper. Nullam quis risus eget urna
mollis ornare vel eu leo. Nullam id dolor id nibh ultricies
vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut
id elit. Donec sed odio dui.llamcorper nulla non metus auctor
fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Nullam id dolor id nibh ultricies
vehicula ut id elit. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Curabitur blandit tempus porttitor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
Donec ullamcorper nulla non metus auctor fringilla. Cras
mattis consectetur purus sit amet fermentum. Nullam id dolor
id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum
nulla sed consectetur.
Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit
aliquet. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare
vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies
vehicula ut id elit. Donec sed odio dui.llamcorper nulla non metus auctor fringilla. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies
vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit
tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia
bibendum nulla sed consectetur
Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis
euismod semper. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget
urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.

@AndyStaple
READABILITY
T Y P O G R A P H Y
Leading / Line-Height

@AndyStaple
COMBININGFONTS
T Y P O G R A P H Y
Choosing fonts that work well for
one another is a interpretive dance.
It’s not easy, and takes practice. So
let smarter folks than us help out!
https://www.typography.com/techniques/
https://beautifulwebtype.com/
https://fontpair.co/
** A good rule of thumb is 2-3 fonts at most.
More than that can really muddy up an
experience.

@AndyStaple
PURPOSEFULPOSITIONINGAND
RELATIONSHIPS
G R I D & L A Y O U T
Be Careful when mixing
vibrant hues of colors together.
The red dot is the same color in
each of the 4 Boxes. Your eye likely
has a tough time ﬁnding the edges
of that red in some of those colors.

@AndyStaple
COLORTHEORY
C O L O R
Sounds intimidating, right? Don’t sweat it.
Complimentary Colors: 
Colors on opposite sides of the color wheel.
Tertiary Colors: 
3 Colors evenly spaced out around the wheel
(lines from each to the others make a triangle)
Monochromatic Colors: 
A single color, with multiple tints and shades

@AndyStaple
COLORRELATIONSHIPS
C O L O R
Be Careful when mixing vibrant hues
of colors together.
The red dot is the same color in each of the 4
Boxes. Your eye likely has a tough time
ﬁnding the edges of that red in some of those
colors.

@AndyStaple
COLORCONTRAST
C O L O R
It is very easy to create something “beautiful”, that is a
absolute pain to interact with. I’m sure we’ve all seen
something like the example below.
TRY OUR NEW COLD PASTRY! TRY OUR NEW COLD PASTRY!

@AndyStaple
COLORRESOURCES
C O L O R
Don’t sweat it! I’ve got resources for Colors as well.
https://www.colourlovers.com/palettes
https://color.adobe.com/create/color-wheel/
https://blinkux.com/blog/design-tips-non-
designers-using-color/
TRY OUR NEW COLD PASTRY!

@AndyStaple
Elements larger in scale
compared to similar items are
noticed by visitors. Use this to
your advantage.
SCALE
W H I T E S P A C E & S C A L E

@AndyStaple
Elements larger in scale compared to similar
items are noticed by visitors. Use this to your
advantage.
Header on Yelp Property Page
USINGSIZE&SCALE

@AndyStaple
I can guarantee your bounce rate on your website would be
magnitudes higher without a basic typographical scale.
USINGSIZE&SCALE

@AndyStaple
You use Typography essentials,
Size, Scale, and Colors already. Even
if you don’t know it.
USINGSIZE&SCALE
Sydney by ThemeIsle

@AndyStaple
Items with more whitespace (or
negative space) around them
feel more important.
WHITESPACE

@AndyStaple
WHITESPACE

@AndyStaple
COMBININGTHESEBUILDINGBLOCKS
H I E R A R C H Y

@AndyStaple
Snap Theme by The Theme Foundry
DON’TMAKEMETHINK
H I E R A R C H Y

@AndyStaple
A Page should have useful hierarchy
and whitespace. Your eyes should
naturally find items most important
to you.
• Focal points in the layout should match your
needs.
• Whitespace is not your enemy. The more space
around something, the more important.
Airbnb Property Page
SHOWCASETHECALLTO
ACTION
H I E R A R C H Y

@AndyStaple
• You make design decisions already, just be more aware of them,
and practice good basics. You’ll grow into a better designer each
time.
• Keep It Simple; Less is usually more.
• Find your purpose for each page or graphic, and prioritize based
on that purpose.
• Remember that legibility and readability are more important than
being too fancy.
• For the love of all things that may or may not be holy, do not use
QUICKREVIEW
F O R A N Y O N E S T I L L A W A K E

@AndyStaple
EXAMPLEWEBSITES&GRAPHICS
T H E R E A L W O R L D !
https://stripe.com/environment https://www.grammarly.com/edu

@AndyStaple
EXAMPLEWEBSITES&GRAPHICS
T H E R E A L W O R L D !
https://truebill.com/
by Jessica Hische

@AndyStaple
QUESTIONS?
LET’SCRITIQUEYOURSITE,LIVE!
F O R T H E B R A V E :
Web: staplecreative.com
Twitter: @AndyStaple
Andy Staple
FOUNDER | UI & UX DESIGNER

WP Rochester - Design for Non-Designers

Recommended

Recommended

More Related Content

Similar to WP Rochester - Design for Non-Designers

Similar to WP Rochester - Design for Non-Designers (20)

Recently uploaded

Recently uploaded (20)

WP Rochester - Design for Non-Designers