you're a designer; codestock 2015
TRANSCRIPT
`
Bryan Robinsonbryanlrobinson.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/
`
Bryan Robinsonbryanlrobinson.com
USABILITY 1. Learnability 2. Efficiency 3. Memorability 4. Errors 5. Satisfaction
Defining Terms
Source: Nielsen Norman Group
`
Bryan Robinsonbryanlrobinson.com
Defining Terms
Information Architecture
`
Bryan Robinsonbryanlrobinson.com
INFORMATION ARCHITECTURE Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way.
Defining Terms
Source: usability.gov
`
Bryan Robinsonbryanlrobinson.com
INTERACTION DESIGN Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.
Defining Terms
Source: IxDA.org
`
Bryan Robinsonbryanlrobinson.com
INTERFACE DESIGN • Information architecture defines the structure of
information. • Interaction design lets people manipulate and
contribute to that information. • Visual design communicates these possibilities to
people.
The user interface is the sum of all these things.
Defining Terms
- Luke Wroblewski via http://www.freshtilledsoil.com/what-is-user-interface-design/
Bryan Robinsonbryanlrobinson.com
Let’s talk processAre you ready to interact?
Redesigning CodeStock.org
Bryan Robinsonbryanlrobinson.com
Process
`
Bryan Robinsonbryanlrobinson.com
Step 1: Who are the users (or user type)?
ProcessRedesigning CodeStock.org
`
Bryan Robinsonbryanlrobinson.com
Step 2: What are our business objectives?
ProcessRedesigning CodeStock.org
`
Bryan Robinsonbryanlrobinson.com
Step 3: What information does a user need to complete our business goals?
ProcessRedesigning CodeStock.org
`
Bryan Robinsonbryanlrobinson.com
Step 4: Sketch
ProcessRedesigning CodeStock.org
Bryan Robinsonbryanlrobinson.com
Design GuidelinesInformational Layout | Aesthetic Judgement
`
Bryan Robinsonbryanlrobinson.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
`
Bryan Robinsonbryanlrobinson.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
Grouping
Bryan Robinsonbryanlrobinson.com Source: http://www.visualmess.com
Information Layout
Grouping
Bryan Robinsonbryanlrobinson.com Source: Twitter for iOS
Information Layout
`
Bryan Robinsonbryanlrobinson.com
VISUAL HEIRARCHY Using size, color, weight and layout to create a visual flow for a user through content.
Information Layout
Bryan Robinsonbryanlrobinson.com
Information LayoutVISUAL HIERARCHY LAYOUT
`
Bryan Robinsonbryanlrobinson.com
RULE OF THIRDS A theory of design that stems from art and photography stating that in a square format, placing the focal points of the composition at the axes of vertical and horizontal lines along the thirds of the piece.
Information Layout
RULE OF THIRDS
Bryan Robinsonbryanlrobinson.com Source: http://webdesignledger.com/tools/rule-of-thirds-in-web-design
Information Layout
RULE OF THIRDS
Bryan Robinsonbryanlrobinson.com Source: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2012/05/neve.jpg
Information Layout
RULE OF THIRDS
Bryan Robinsonbryanlrobinson.com Source: http://www.webdesignerdepot.com/2014/01/design-to-the-nines-and-the-rule-of-thirds/
Information Layout
`
Bryan Robinsonbryanlrobinson.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
Bryan Robinsonbryanlrobinson.com Source: http://boutiquemc.co.uk/general/colour-pyschology-why-we-chose-our-brand-colours/
Aesthetic Judgement
COLOR PSYCHOLOGY/ COLOR THEORY
Bryan Robinsonbryanlrobinson.com
Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg
Aesthetic Judgement
COLOR PSYCHOLOGY/ COLOR THEORY
Bryan Robinsonbryanlrobinson.com Source: kuler.adobe.com
Aesthetic Judgement
COLOR PSYCHOLOGY/ COLOR THEORY
Bryan Robinsonbryanlrobinson.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 • kuler.adobe.com • paletton.com/
`
Bryan Robinsonbryanlrobinson.com
FONT CHOICES Start using non-standard fonts. Open Sans (san serif), Droid Sans (san serif), Roboto (san serif), Josefin Slab (slab), Prociono (serif).
Rule of thumb: Use a slab or serif font for an “accent” font (headlines) and a sans-serif for body copy.
Aesthetic Judgement
Bryan Robinsonbryanlrobinson.com
Aesthetic JudgementFONTS
Source: http://blog.crazyegg.com/2013/07/05/psychology-of-fonts-infographic/
`
Bryan Robinsonbryanlrobinson.com
SHAPE AND SYMMETRY Just like colors and fonts, various shapes and layouts convey different meanings.
Aesthetic Judgement
Bryan Robinsonbryanlrobinson.com
Aesthetic JudgementSHAPE AND SYMMETRY
Source: http://www.zevendesign.com/mood-lines-giving-designs-attitude/
Bryan Robinsonbryanlrobinson.com
Aesthetic JudgementSHAPE AND SYMMETRY
Source: http://speckyboy.com/2013/02/06/symmetry-in-web-design/
Bryan Robinsonbryanlrobinson.com
Aesthetic JudgementSHAPE AND SYMMETRY
Source: http://speckyboy.com/2013/02/06/symmetry-in-web-design/
`
Bryan Robinsonbryanlrobinson.com
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. The Noun Project - Get a subscription to The Noun Project. Unlimited icons for $10/month. Totally worth it. Subtle Patterns - Background patterns can be a great way of adding texture and class to your site, but they can be annoying to create even if you’re a designer. Subtle Patterns is an awesome resource for repeating patterns. Don’t Use Rotators - It’s been proven that rotators and carousels actually hurt conversion rates. Don’t use them. Be Careful with Convention - Just because Amazon does it, doesn’t mean it will work for you.
Tips, Tricks and Advice
`
Bryan Robinsonbryanlrobinson.com
Be Careful with Convention
Baseline Bordered Menu
Unbordered MenuMenu and icon bordered
Source: http://exisweb.net/mobile-menu-abtest
`
Bryan Robinsonbryanlrobinson.com
Be Careful with Convention
Baseline Bordered Menu
Unbordered MenuMenu and icon bordered
Source: http://exisweb.net/mobile-menu-abtest
X
X
`
Bryan Robinsonbryanlrobinson.com
Be Careful with Convention
Baseline Bordered Menu
Unbordered MenuMenu and icon bordered
Source: http://exisweb.net/mobile-menu-abtest
X
X
Who to Follow
Bryan Robinsonbryanlrobinson.com Source: kuler.adobe.com
How to Learn
Who to Follow • Brad Frost - @brad_frost • Luke Wroblewski - @lukew • Una Kravets - @una • Jared Spool - @jmspool
`
Bryan Robinsonbryanlrobinson.com
Now’s the time… or… you know… later in one of these places:
Twitter: @brob LinkedIn: http://linkedin.com/in/bryanlrobinson
Questions?