A presentation at DevNexus 2020 in in Atlanta, GA, USA by Bryan Robinson
You’re a Designer; I promise Bryan Robinson, bryanlrobinson.com
🤯 Design Twitter @brob | bryanlrobinson.com
@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 `
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
Too many developers think they can never learn to design. While it may be true that you’ll never be a master graphic artist, there are tons of tips and tricks to make sure your application or website looks professionally designed.
In this talk, we’ll cover the basics of good design, view examples of both good and bad design and discuss how to incorporate design thinking into your development process. Attendees will walk away with practical knowledge to start applying to current and future projects.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.