You're a designer
48
Bryan Robinson bryanlrobinson.com DESIGNER Web Workers Presented Tuesday, May 12, 2015 I PROMISE You’re a
-
Upload
bryan-robinson -
Category
Design
-
view
151 -
download
0
Transcript of You're a designer
Bryan Robinsonbryanlrobinson.com
DESIGNER
Web WorkersPresented Tuesday, May 12, 2015
I PROMISE
You’re a
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
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
WIREFRAME/SKETCH A way of solidifying a page’s layout utilizing placeholders in lieu of imagery and content in order to rapidly define information architecture for a page.
Defining Terms
Source: My Own Brain
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/
DESIGN THINKING
Bryan Robinsonbryanlrobinson.com
Process
Source: https://patwellconsulting.com/DevelopmentResources/DesignThinkingProcessWorkshop.aspx
Bryan Robinsonbryanlrobinson.com
Process
Source: http://www.telono.com/en/services/usability/ucd-process/
USER CENTERED DESIGN
SKETCHING
Bryan Robinsonbryanlrobinson.com
Process
Source: https://patwellconsulting.com/DevelopmentResources/DesignThinkingProcessWorkshop.aspx
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 PSYCHOLOGY AND THEORY Colors influence users strongly, but often in subconscious ways. Designers don’t pick colors because they’re pretty, always have a plan.
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: kuler.adobe.com
Aesthetic Judgement
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/#smooth
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? Don’t Use Rotators - It’s been proven that rotators and carousels actually hurt conversion rates. Don’t use them. The Noun Project - Get a subscription to The Noun Project. Unlimited icons for $10/month. Totally worth it. Provide a next step - Direct the user. They want to know where to go next. Calls to Action are your friend. 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 reason for repeating patterns.
Tips and Tricks
Bryan Robinsonbryanlrobinson.com
Now’s the time… or… you know… later in one of these places:
Twitter: @brob LinkedIn: http://linkedin.com/in/bryanlrobinson
`
