You’re a Designer; I Promise

You’re a Designer; I promise Bryan Robinson, bryanlrobinson.com

🤯 Design Twitter @brob | bryanlrobinson.com

@brob | bryanlrobinson.com

1. Everyone is a designer @brob | bryanlrobinson.com

2. Not everyone is a GOOD designer @brob | bryanlrobinson.com

3. Everyone can be a BETTER designer @brob | bryanlrobinson.com

Who is This Guy? @brob Bryan Robinson Code Contemporary ` I’m a designer and developer with over a decade of experience building experiences and leading teams on the web. I write and record about HTML, CSS, the power of static sites and good, clean design. On the web: https://bryanlrobinson.com Twitter: @brob Twitch: twitch.tv/bryanlrobinson @brob | bryanlrobinson.com

Design is BIG What are we covering today? What is Usability? How can I improve my layout skills? How can I improve my Aesthetic Judgement?

Defining Terms DESIGN ` @brob | bryanlrobinson.com Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works. - Steve Jobs Source: http://www.impactinterview.com/2011/08/steve-jobs-on-product-design-2/

Design Guidelines Usability | Informational Layout | Aesthetic Judgement @brob | bryanlrobinson.com

Usability @brob | bryanlrobinson.com

Usability USABILITY ` @brob | bryanlrobinson.com

Learnability Efficiency Memorability Errors Satisfaction Source: Nielsen Norman Group

Usability ` @brob | bryanlrobinson.com 🔥HOT DRAMA ALERT!🔥

Usability Usability is ` @brob | bryanlrobinson.com Advanced. Common. Sense.

Usability ` @brob | bryanlrobinson.com Three steps to make your common sense ADVANCED

Usability `

1. Know your users As many of them as you can! @brob | bryanlrobinson.com

Usability ` @brob | bryanlrobinson.com 2. Exercise EXTREME empathy

Usability ` @brob | bryanlrobinson.com 3. Act in THEIR best interest

Information Layout @brob | bryanlrobinson.com

Information Layout WHITESPACE ` @brob | bryanlrobinson.com Whitespace doesn’t have to be white. It’s merely the space that does not contain content whether through padding, margins and gutters. Sometimes referred to as Negative Space.

Whitespace ` @brob | bryanlrobinson.com

Whitespace ` @brob | bryanlrobinson.com

Whitespace ` @brob | bryanlrobinson.com

Whitespace WHITESPACE THE BAD @brob | bryanlrobinson.com

Whitespace WHITESPACE THE GOOD @brob | bryanlrobinson.com

Whitespace WHITESPACE THE BAD @brob | bryanlrobinson.com

Whitespace WHITESPACE THE BAD @brob | bryanlrobinson.com

Information Layout GROUPING ` @brob | bryanlrobinson.com Items grouped together on a page have either an implied or an inferred relationship to one another. Make sure you’re implying the relationship, don’t let your user make the inference.

Grouping Grouping @brob | bryanlrobinson.com Source: http://www.visualmess.com

Grouping Grouping @brob | bryanlrobinson.com

Grouping Grouping @brob | bryanlrobinson.com

Information Layout VISUAL HEIRARCHY ` @brob | bryanlrobinson.com Using size, color, weight and layout to create a visual flow for a user through content.

Information Layout VISUAL HIERARCHY @brob | bryanlrobinson.com

Information Layout VISUAL HIERARCHY SIZE @brob | bryanlrobinson.com

Information Layout VISUAL HIERARCHY COLOR @brob | bryanlrobinson.com

Information Layout VISUAL HIERARCHY STYLE @brob | bryanlrobinson.com

Information Layout VISUAL HIERARCHY LAYOUT @brob | bryanlrobinson.com

Aesthetic Judgement @brob | bryanlrobinson.com

Aesthetic Judgement ` @brob | bryanlrobinson.com COLOR CHOICES Colors influence users strongly, but often in subconscious ways. Designers don’t pick colors because they’re pretty, they always have a plan utilizing color theory and color psychology. Rule of thumb: Stick to neutrals with one accent color if you’re unsure of your color skills.

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: http://boutiquemc.co.uk/general/colour-pyschology-why-we-chose-our-brand-colours/

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://coolors.co/1d3633-48827b-64b6ac-93c1bd-eaf9f8

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://coolors.co/3f4948-2f6962-64b6ac-693a25-fff8f4

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://coolors.co/1e3532-c17ebd-64b6ac-82743b-fff4c9

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com Source: https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Aesthetic Judgement COLOR PSYCHOLOGY/ COLOR THEORY @brob | bryanlrobinson.com CONTINUED READING AND TOOLS • Using Color Theory to Create a Better Color Palette • Color Theory for Designers, Part 1: The Meaning of Color • Smashing Mag article on Color • coolors.co • paletton.com/ Source: kuler.adobe.com

Aesthetic Judgement FONT CHOICES Start using non-standard fonts. Open Sans (san serif), Droid Sans (san serif), Roboto (san serif), Josefin Slab (slab), Merriweather (serif). Rule of thumb: Use a slab or serif font for an “accent” font (headlines) and a sans-serif for body copy.

Aesthetic Judgement FONTS SERIF Tradition Stability Reliable @brob | bryanlrobinson.com

Aesthetic Judgement FONTS Sans Serif Modern @brob | bryanlrobinson.com Clean

Aesthetic Judgement FONTS Hand Written Creative @brob | bryanlrobinson.com Fun hard to read?

Aesthetic Judgement FONTS Display Fun @brob | bryanlrobinson.com Very Different Dangerous

Tips and Tricks

Squint Test Look at a design. Squint your eyes. Can you tell the hierarchy of the page?

Provide a next step Direct the user. They want to know where to go next. Calls to Action are your friend.

Use Icons The Noun Project - Get a subscription to The Noun Project. Unlimited icons for $10/month. Totally worth it.

Don’t Use Rotators It’s been proven that rotators and carousels actually hurt conversion rates. Don’t use them. ShouldIUseaCarousel.com

Be Careful with Convention Just because Amazon does it, doesn’t mean it will work for you.

Conventions

Be Careful with Convention ` @brob | bryanlrobinson.com

Hamburger ` @brob | bryanlrobinson.com “Like a cheap fast food chain, it got designers addicted to its convenience, and now serves millions each day, both on mobile devices and on desktops.” - Nielsen Norman Group Source: https://www.nngroup.com/articles/hamburger-menus/

Be Careful with Convention Baseline Bordered Menu Menu and icon bordered Unbordered Menu ` @brob | bryanlrobinson.com Source: http://exisweb.net/mobile-menu-abtest

Be Careful with Convention X Baseline Bordered Menu ` Menu and icon bordered @brob | bryanlrobinson.com X Unbordered Menu Source: http://exisweb.net/mobile-menu-abtest

Be Careful with Convention X Baseline Bordered Menu ` Menu and icon bordered @brob | bryanlrobinson.com X Unbordered Menu Source: http://exisweb.net/mobile-menu-abtest

How do you get better? @brob | bryanlrobinson.com

How do you get better? ` @brob | bryanlrobinson.com Practice

How do you get better? ` @brob | bryanlrobinson.com Think Critically

How do you get better? ` @brob | bryanlrobinson.com Get Critiques

Get a critique from me on Twitch twitch.tv/bryanlrobinson (most) @brob | bryanlrobinson.com Every Wednesday

How do you get better? Who to Follow Know Who to Follow • Brad Frost - @brad_frost Mina Markham - @MinaMarkham Jen Simmons - @jensimmons Luke Wroblewski - @lukew Una Kravets - @una Jared Spool - @jmspool • Bryan Robinson? - @brob • • • • • @brob | bryanlrobinson.com Source: kuler.adobe.com

Questions? Now’s the time… or… you know… later in one of these places: ` @brob | bryanlrobinson.com Twitter: @brob LinkedIn: http://linkedin.com/in/bryanlrobinson