![Page 7: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/7.jpg)
`
@brob | bryanlrobinson.com
@brob
Who is This Guy?
On the web: https://bryanlrobinson.com
Bryan Robinson
Twitter: @brob Twitch: twitch.tv/bryanlrobinson
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.
Code Contemporary
![Page 8: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/8.jpg)
Design is BIGWhat are we covering today?
What is Usability?
How can I improve my layout skills?
How can I improve my Aesthetic Judgement?
![Page 9: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/9.jpg)
`
@brob | bryanlrobinson.com
DESIGN 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
Defining Terms
Source: http://www.impactinterview.com/2011/08/steve-jobs-on-product-design-2/
![Page 10: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/10.jpg)
@brob | bryanlrobinson.com
Design GuidelinesUsability | Informational Layout | Aesthetic Judgement
![Page 12: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/12.jpg)
`
@brob | bryanlrobinson.com
USABILITY 1. Learnability 2. Efficiency 3. Memorability 4. Errors 5. Satisfaction
Usability
Source: Nielsen Norman Group
![Page 14: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/14.jpg)
`
@brob | bryanlrobinson.com
Usability is
Advanced. Common. Sense.
Usability
![Page 15: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/15.jpg)
`
@brob | bryanlrobinson.com
Three steps to make your common sense ADVANCED
Usability
![Page 16: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/16.jpg)
`
@brob | bryanlrobinson.com
1. Know your users
Usability
As many of them as you can!
![Page 20: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/20.jpg)
`
@brob | bryanlrobinson.com
WHITESPACE 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.
Information Layout
![Page 28: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/28.jpg)
`
@brob | bryanlrobinson.com
GROUPING 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.
Information Layout
![Page 29: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/29.jpg)
Grouping
@brob | bryanlrobinson.com Source: http://www.visualmess.com
Grouping
![Page 32: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/32.jpg)
`
@brob | bryanlrobinson.com
VISUAL HEIRARCHY Using size, color, weight and layout to create a visual flow for a user through content.
Information Layout
![Page 39: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/39.jpg)
`
@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
![Page 40: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/40.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: http://boutiquemc.co.uk/general/colour-pyschology-why-we-chose-our-brand-colours/
Aesthetic Judgement
![Page 41: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/41.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg
Aesthetic Judgement
![Page 42: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/42.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://coolors.co/1d3633-48827b-64b6ac-93c1bd-eaf9f8
Aesthetic Judgement
![Page 43: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/43.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg
Aesthetic Judgement
![Page 44: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/44.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://coolors.co/3f4948-2f6962-64b6ac-693a25-fff8f4
Aesthetic Judgement
![Page 45: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/45.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg
Aesthetic Judgement
![Page 46: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/46.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://coolors.co/1e3532-c17ebd-64b6ac-82743b-fff4c9
Aesthetic Judgement
![Page 47: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/47.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
Aesthetic Judgement
![Page 48: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/48.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
Aesthetic Judgement
![Page 49: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/49.jpg)
COLOR PSYCHOLOGY/ COLOR THEORY
@brob | bryanlrobinson.com Source: kuler.adobe.com
Aesthetic Judgement
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/
![Page 50: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/50.jpg)
Aesthetic JudgementFONT 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.
![Page 51: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/51.jpg)
@brob | bryanlrobinson.com
Aesthetic JudgementFONTS
SERIFTradition Stability Reliable
![Page 52: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/52.jpg)
@brob | bryanlrobinson.com
Aesthetic JudgementFONTS
Sans SerifModern Clean
![Page 53: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/53.jpg)
@brob | bryanlrobinson.com
Aesthetic JudgementFONTS
Hand WrittenCreative Fun hard to read?
![Page 54: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/54.jpg)
@brob | bryanlrobinson.com
Aesthetic JudgementFONTS
DisplayFun Very Different Dangerous
![Page 55: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/55.jpg)
Tips and Tricks
![Page 56: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/56.jpg)
Squint TestLook at a design. Squint your eyes. Can you tell the hierarchy of the page?
![Page 57: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/57.jpg)
Provide a next stepDirect the user. They want to know where to go next. Calls to Action are your friend.
![Page 58: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/58.jpg)
Use IconsThe Noun Project - Get a subscription to The Noun Project. Unlimited icons for $10/month. Totally worth it.
![Page 59: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/59.jpg)
Don’t Use RotatorsIt’s been proven that rotators and carousels actually hurt conversion rates. Don’t use them.
ShouldIUseaCarousel.com
![Page 60: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/60.jpg)
Be Careful with ConventionJust because Amazon does it, doesn’t mean it will work for you.
![Page 61: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/61.jpg)
Conventions
![Page 63: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/63.jpg)
`
@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
Hamburger
Source: https://www.nngroup.com/articles/hamburger-menus/
![Page 64: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/64.jpg)
`
@brob | bryanlrobinson.com
Be Careful with Convention
Baseline Bordered Menu
Unbordered MenuMenu and icon bordered
Source: http://exisweb.net/mobile-menu-abtest
![Page 65: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/65.jpg)
`
@brob | bryanlrobinson.com
Be Careful with Convention
Baseline Bordered Menu
Unbordered MenuMenu and icon bordered
Source: http://exisweb.net/mobile-menu-abtest
X
X
![Page 66: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/66.jpg)
`
@brob | bryanlrobinson.com
Be Careful with Convention
Baseline Bordered Menu
Unbordered MenuMenu and icon bordered
Source: http://exisweb.net/mobile-menu-abtest
X
X
![Page 71: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/71.jpg)
@brob | bryanlrobinson.com
Get a critique from me on Twitch
twitch.tv/bryanlrobinson
(most) Every Wednesday
![Page 72: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/72.jpg)
Who to Follow
@brob | bryanlrobinson.com Source: kuler.adobe.com
How do you get better? 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
![Page 73: You’re a Designer; I promise · @brob | bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really](https://reader034.vdocuments.us/reader034/viewer/2022052018/6031c69b3a048c5246367397/html5/thumbnails/73.jpg)
`
@brob | bryanlrobinson.com
Now’s the time… or… you know… later in one of these places:
Twitter: @brob LinkedIn: http://linkedin.com/in/bryanlrobinson
Questions?