Design for Non-Designers / PHPTek

P HP TEK
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make effective, lovely interfaces.

View Slide

P HP TEK
Hi, I’m Tracy!
@limedaring
(daring, not darling)
slides (also speakerdeck
username)

View Slide

P HP TEK
Thanks to our
Sponsors!

View Slide

P HP TEK

View Slide

P HP TEK
I will be tweeting all links:
@limedaring
(“daring” — not “darling”)
#talkpay

View Slide

P HP TEK

View Slide

P HP TEK
image credit: Dan Saffer

View Slide

P HP TEK
Design:
Making an interface that  
works well.

View Slide

P HP TEK
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

View Slide

P HP TEK

View Slide

P HP TEK
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

View Slide

P HP TEK

View Slide

P HP TEK
How can we create effective,
basic designs?

View Slide

P HP TEK
Let’s talk about clutter

View Slide

P HP TEK
Pay attention to
clutter
#talkpay

View Slide

P HP TEK
Fastest way for better looking designs:
Cut down on clutter.

View Slide

P HP TEK

View Slide

P HP TEK
grid

View Slide

P HP TEK
Line things up — pixel differences are
deﬁnitely unconsciously noticed. 

View Slide

P HP TEK
Shortcut:
Use integrated grid systems and guides!

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring getbootstrap.com

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring foundation.zurb.com

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring getskeleton.com

View Slide

P HP TEK

View Slide

P HP TEK
color

View Slide

P HP TEK
Color principles
Keep your colors complimentary.
Use mostly neutrals + one brighter color for
important bits.

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

View Slide

P HP TEK
Shortcut:
Use color palette websites!

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring foundation.zurb.com

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring material.io

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring colourlovers.com

View Slide

P HP TEK

View Slide

P HP TEK
fonts

View Slide

P HP TEK
Keep the number of fonts low — two different fonts
is usually a good rule of thumb.
Use fancy/display fonts sparingly — very cluttery.
Vary weights (bold), style (italics), and transforms
(uppercase, etc.) to differentiate bits.

View Slide

P HP TEK
Shortcut:
Use curated font websites!

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring http://hellohappy.org/beautiful-web-type/

View Slide

P HP TEK
http://hellohappy.org/beautiful-web-type/

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring fontpair.co

View Slide

P HP TEK

View Slide

P HP TEK
white space

View Slide

P HP TEK
The ultimate clutter reducer

View Slide

P HP TEK

View Slide

P HP TEK
“By replacing the extra links around the Add to Cart buttons with whitespace, Xerox
saw a 20% improvement in engagement, 5% boost in products added to cart, and
a 33% improvement in customers continuing through purchase.”
https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/

View Slide

P HP TEK

View Slide

P HP TEK
Reduce visual clutter, by keeping the number
of fonts and colors low, add white space, and
line things up.
Aim for a “clean” design.

View Slide

P HP TEK
User experience principles

View Slide

P HP TEK
What’s the most important  
action on your design?
Make it easy to ﬁnd and use.

View Slide

P HP TEK

View Slide

P HP TEK
Pay attention to your goals.
Make them easy to ﬁnd and use.

View Slide

P HP TEK
Content principles
Less is more.
Big paragraphs are a sign of clutter.
Break into bullets if you can.

View Slide

P HP TEK
Please note that although Chrome
is supported for both Mac and
Windows operating systems, it is
recommended that all users of this
site switch to the most up-to-date
version of the Firefox web browser
for the best possible results.
For best results, use the latest
version of Firefox. Chrome for
Mac and Windows is also
supported.

View Slide

P HP TEK
We made a bunch of changes: The
registration chapter has been split
in two, between adding
registration and then associating
users with objects. The chapter
was giant before so this makes it
more manageable. Screenshots of
the admin have been updated to
reflect the new Django 1.9 styles.
The few minor typos have been
fixed. Updated the version of
django-registration-redux that we
use to 1.3. Last but not least, the
Introduction has been updated.
We made a bunch of changes:
• The registration chapter has
been split in two, between
adding registration and then
associating users with objects.
The chapter was giant before so
this makes it more manageable.
• Screenshots of the admin have
been updated to reflect the new
Django 1.9 styles.
• The few minor typos have been
fixed.
• Updated the version of django-
registration-redux that we use
to 1.3.
• Introduction has been updated.

View Slide

P HP TEK
The chapter was giant before
so this makes it more
manageable.
been updated to reflect the
new Django 1.9 styles.
• The few minor typos have
been fixed.
to 1.3.
The chapter was giant before so
this makes it more manageable.
been updated to reflect the
new Django 1.9 styles.
fixed.
to 1.3.

View Slide

P HP TEK
• The registration chapter has been split in
two, between adding registration and then
associating users with objects. The chapter
was giant before so this makes it more
manageable.
• Screenshots of the admin have been
updated to reflect the new Django 1.9 styles.
• The few minor typos have been fixed.
• Updated the version of django-registration-
redux that we use to 1.3.
been split in two, between adding
registration and then associating
users with objects. The chapter
was giant before so this makes it
more manageable.
been updated to reflect the new
Django 1.9 styles.
fixed.
registration-redux that we use to
1.3.

View Slide

P HP TEK

View Slide

P HP TEK
What’s the most important  
action on your design?
Make it easy to ﬁnd and use.
#talkpay

View Slide

P HP TEK
Headlines:
Talk beneﬁts, not details.
Keep it short.
Use natural, friendly language.

View Slide

P HP TEK

View Slide

P HP TEK
Images and imagery

View Slide

P HP TEK
Images:
Stock photos usually look like stock photos.
You can accomplish a lot with just type and screenshots.
Remember to pay attention to ﬁle size.
Don’t forget retina-quality images.

View Slide

P HP TEK

View Slide

P HP TEK
unsplash.com
unsplash.com

View Slide

P HP TEK
photopin.com
photopin.com

View Slide

P HP TEK
T RAC Y O S B OR N @limedaring fiverr.com

View Slide

P HP TEK

View Slide

P HP TEK
Don’t be afraid of imitation.

View Slide

P HP TEK
Great designers steal  
(and use shortcuts)
#talkpay

View Slide

P HP TEK

View Slide

P HP TEK
Quick overview of a design process

View Slide

P HP TEK
1. 
Collect inspiration and  
sketch ideas.

View Slide

P HP TEK

View Slide

P HP TEK
2. 
Mock it up?

View Slide

P HP TEK

View Slide

P HP TEK
3. 
Build it.

View Slide

P HP TEK

View Slide

P HP TEK
My thought process, every time:

View Slide

P HP TEK
My thought process, every time:
“crap crap crap crap crap crap crap
crap crap crap crap crap crap crap
crap crap crap crap crap crap crap
crap crap crap crap crap crap  
… yes!”

View Slide

P HP TEK
This is only the starting point!

View Slide

P HP TEK
Reduce visual clutter —
Keep the number of fonts and colors low.
Add white space.
Line things up.
Keep content short and easy to skim.

View Slide

Design for Non-Designers / PHPTek

Design for Non-Designers / PHPTek

Tracy Osborn

More Decks by Tracy Osborn

Other Decks in Programming

Featured

Transcript