Tracy Osborn: Design for Non-Designers

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.


Hi, I’m Tracy! @limedaring

(daring, not darling)


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

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


Design for Non-Designers Basics of designing so you can make effective,

lovely interfaces.#talkpay


image credit: Dan Saffer


How can we create effective, basic designs?


Let’s talk about clutter


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


grid


Line things up — pixel differences are definitely unconsciously noticed.


color


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/


fonts


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/


http://hellohappy.org/beautiful-web-type/


white space


The ultimate clutter reducer


“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/


Reduce visual clutter, by keeping the number of fonts and colors low, add white space, and

line things up.

Aim for a “clean” design.


Don’t forget the user experience!


What’s the most important action on your design?

Make it easy to find and use.


Get a second (third, fourth…) opinion on your designs.


Content principles Less is more.

Big paragraphs are a sign of clutter. Break into bullets if you can.


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.


What’s the most important action on your design? Make it easy to find and use.

#talkpay


Headlines: Talk benefits, not details.

Keep it short. Use natural, friendly language.


Don’t be afraid of imitation.


Great designers steal (and use shortcuts)

#talkpay


Quick overview of a design process


1.Collect inspiration and

sketch ideas.


2.Mock it up?


3.Build it.


My thought process, every time:


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!”


This is only the starting point!


Reduce visual clutter — Keep the number of fonts and colors low.

Add white space. Line things up.

Keep content short and easy to skim.


Make sure your goal is easy to find and use.


Keep your content simple, friendly, and to the point.


Practice, practice, practice.


hellowebapp.com/web-design


Thank you!

@limedaring

Tracy Osborn: Design for Non-Designers

Technology

Transcript of Tracy Osborn: Design for Non-Designers