Post on 13-Apr-2017
V I E W S O U RC ET RACY O S B O R N @limedaring
Design for Non-Designers Design principles and shortcuts to help you
become a better designer.
V I E W S O U RC ET RACY O S B O R N @limedaring
Hi, I’m Tracy! @limedaring
(daring, not darling)
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
Software Developer Developer
Software Engineer Senior Software
Engineer Programmer
Coder Architect
Software Architect Marketing Technologist
SEO Consultant Web Analytics Developer
Digital Marketing Manager
Social Media Manager Growth Hacker
Content Manager Content Strategist
Information Architect UX Designer UI Designer
Accessibility Specialist Interaction Designer Front-End Designer
Front-End Developer Mobile Developer
Full-Stack Developer Systems Engineer
Database Administrator Data Architect Data Analyst
Devops Manager Product Manager
QA Engineer Security Specialist
Technical Lead
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
F L U E N T C O N F E R E N C ET R A C Y O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
F L U E N T C O N F E R E N C ET R A C Y O S B O R N @limedaring
F L U E N T C O N F E R E N C ET R A C Y O S B O R N @limedaring
F L U E N T C O N F E R E N C ET R A C Y O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
Design for Non-Designers Basics of designing so you can make effective,
lovely interfaces.#talkpay
F L U E N T C O N F E R E N C ET R A C Y O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
image credit: Dan Saffer
V I E W S O U RC ET RACY O S B O R N @limedaring
How can we create effective, basic designs?
V I E W S O U RC ET RACY O S B O R N @limedaring
Let’s talk about clutter
F L U E N T C O N F E R E N C ET R A C Y O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
Fastest way for better looking designs: Cut down on clutter.
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
grid
V I E W S O U RC ET RACY O S B O R N @limedaring
Line things up — pixel differences are definitely unconsciously noticed.
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
color
V I E W S O U RC ET RACY O S B O R N @limedaring
Color principles Keep your colors complimentary.
Use mostly neutrals + one brighter color for important bits.
V I E W S O U RC ET RACY O S B O R N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
fonts
V I E W S O U RC ET RACY O S B O R N @limedaring
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.
V I E W S O U RC ET RACY O S B O R N @limedaring http://hellohappy.org/beautiful-web-type/
V I E W S O U RC ET RACY O S B O R N @limedaring
http://hellohappy.org/beautiful-web-type/
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
white space
V I E W S O U RC ET RACY O S B O R N @limedaring
The ultimate clutter reducer
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
“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/
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
Reduce visual clutter, by keeping the number of fonts and colors low, add white space, and
line things up.
Aim for a “clean” design.
V I E W S O U RC ET RACY O S B O R N @limedaring
Don’t forget the user experience!
V I E W S O U RC ET RACY O S B O R N @limedaring
What’s the most important action on your design?
Make it easy to find and use.
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
Get a second (third, fourth…) opinion on your designs.
V I E W S O U RC ET RACY O S B O R N @limedaring
Content principles Less is more.
Big paragraphs are a sign of clutter. Break into bullets if you can.
V I E W S O U RC ET RACY O S B O R N @limedaring
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.
V I E W S O U RC ET RACY O S B O R N @limedaring
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.
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.
V I E W S O U RC ET RACY O S B O R N @limedaring
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.
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.
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
What’s the most important action on your design? Make it easy to find and use.
#talkpay
V I E W S O U RC ET RACY O S B O R N @limedaring
Headlines: Talk benefits, not details.
Keep it short. Use natural, friendly language.
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
Don’t be afraid of imitation.
V I E W S O U RC ET RACY O S B O R N @limedaring
Great designers steal (and use shortcuts)
#talkpay
F L U E N T C O N F E R E N C ET R A C Y O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
Quick overview of a design process
V I E W S O U RC ET RACY O S B O R N @limedaring
1.Collect inspiration and
sketch ideas.
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
2.Mock it up?
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
3.Build it.
V I E W S O U RC ET RACY O S B O R N @limedaring
V I E W S O U RC ET RACY O S B O R N @limedaring
My thought process, every time:
V I E W S O U RC ET RACY O S B O R N @limedaring
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!”
V I E W S O U RC ET RACY O S B O R N @limedaring
This is only the starting point!
V I E W S O U RC ET RACY O S B O R N @limedaring
Reduce visual clutter — Keep the number of fonts and colors low.
Add white space. Line things up.
Keep content short and easy to skim.
V I E W S O U RC ET RACY O S B O R N @limedaring
Make sure your goal is easy to find and use.
V I E W S O U RC ET RACY O S B O R N @limedaring
Keep your content simple, friendly, and to the point.
V I E W S O U RC ET RACY O S B O R N @limedaring
Practice, practice, practice.
V I E W S O U RC ET RACY O S B O R N @limedaring
hellowebapp.com/web-design
V I E W S O U RC ET RACY O S B O R N @limedaring
Thank you!
@limedaring