Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

You're a designer

406 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

You're a designer

  1. 1. Bryan Robinson bryanlrobinson.com DESIGNER Web Workers Presented Tuesday, May 12, 2015 I PROMISE You’re a
  2. 2. Bryan Robinson bryanlrobinson.com Define Your Terms
  3. 3. Bryan Robinson 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/
  4. 4. Bryan Robinson bryanlrobinson.com USABILITY 1. Learnability 2. Efficiency 3. Memorability 4. Errors 5. Satisfaction Defining Terms Source: Nielsen Norman Group
  5. 5. Bryan Robinson bryanlrobinson.com INFORMATION ARCHITECTURE Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. Defining Terms Source: usability.gov
  6. 6. Bryan Robinson bryanlrobinson.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
  7. 7. Bryan Robinson bryanlrobinson.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
  8. 8. Bryan Robinson bryanlrobinson.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/
  9. 9. Bryan Robinson bryanlrobinson.com Let’s talk process
  10. 10. DESIGN THINKING Bryan Robinson bryanlrobinson.com Process Source: https://patwellconsulting.com/DevelopmentResources/DesignThinkingProcessWorkshop.aspx
  11. 11. Bryan Robinson bryanlrobinson.com Process Source: http://www.telono.com/en/services/usability/ucd-process/ USER CENTERED DESIGN
  12. 12. SKETCHING Bryan Robinson bryanlrobinson.com Process Source: https://patwellconsulting.com/DevelopmentResources/DesignThinkingProcessWorkshop.aspx
  13. 13. SKETCHING Bryan Robinson bryanlrobinson.com Process
  14. 14. SKETCHING Bryan Robinson bryanlrobinson.com Process
  15. 15. Bryan Robinson bryanlrobinson.com Design Guidelines Informational Layout | Aesthetic Judgement
  16. 16. Bryan Robinson bryanlrobinson.com Information Layout
  17. 17. Bryan Robinson 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
  18. 18. WHITESPACE THE BAD Bryan Robinson bryanlrobinson.com Information Layout
  19. 19. WHITESPACE THE GOOD Bryan Robinson bryanlrobinson.com Information Layout
  20. 20. WHITESPACE THE BAD Bryan Robinson bryanlrobinson.com Information Layout
  21. 21. WHITESPACE THE GOOD Bryan Robinson bryanlrobinson.com Information Layout
  22. 22. Bryan Robinson 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
  23. 23. Grouping Bryan Robinson bryanlrobinson.com Source: http://www.visualmess.com Information Layout
  24. 24. Grouping Bryan Robinson bryanlrobinson.com Information Layout
  25. 25. Grouping Bryan Robinson bryanlrobinson.com Source: Twitter for iOS Information Layout
  26. 26. Bryan Robinson bryanlrobinson.com VISUAL HEIRARCHY Using size, color, weight and layout to create a visual flow for a user through content. Information Layout
  27. 27. Bryan Robinson bryanlrobinson.com Information Layout VISUAL HIERARCHY
  28. 28. Bryan Robinson bryanlrobinson.com Information Layout VISUAL HIERARCHY SIZE
  29. 29. Bryan Robinson bryanlrobinson.com Information Layout VISUAL HIERARCHY COLOR
  30. 30. Bryan Robinson bryanlrobinson.com Information Layout VISUAL HIERARCHY STYLE
  31. 31. Bryan Robinson bryanlrobinson.com Information Layout VISUAL HIERARCHY LAYOUT
  32. 32. Bryan Robinson bryanlrobinson.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
  33. 33. RULE OF THIRDS Bryan Robinson bryanlrobinson.com Source: http://webdesignledger.com/tools/rule-of-thirds-in-web-design Information Layout
  34. 34. RULE OF THIRDS Bryan Robinson bryanlrobinson.com Source: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2012/05/neve.jpg Information Layout
  35. 35. RULE OF THIRDS Bryan Robinson bryanlrobinson.com Source: http://www.webdesignerdepot.com/2014/01/design-to-the-nines-and-the-rule-of-thirds/ Information Layout
  36. 36. Bryan Robinson bryanlrobinson.com Aesthetic Judgement
  37. 37. Bryan Robinson bryanlrobinson.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
  38. 38. COLOR PSYCHOLOGY/ COLOR THEORY Bryan Robinson bryanlrobinson.com Source: http://boutiquemc.co.uk/general/colour-pyschology-why-we-chose-our-brand-colours/ Aesthetic Judgement
  39. 39. COLOR PSYCHOLOGY/ COLOR THEORY Bryan Robinson bryanlrobinson.com Source: kuler.adobe.com Aesthetic Judgement
  40. 40. Bryan Robinson bryanlrobinson.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
  41. 41. Bryan Robinson bryanlrobinson.com Aesthetic Judgement FONTS Source: http://blog.crazyegg.com/2013/07/05/psychology-of-fonts-infographic/
  42. 42. Bryan Robinson bryanlrobinson.com SHAPE AND SYMMETRY Just like colors and fonts, various shapes and layouts convey different meanings. Aesthetic Judgement
  43. 43. Bryan Robinson bryanlrobinson.com Aesthetic Judgement SHAPE AND SYMMETRY Source: http://www.zevendesign.com/mood-lines-giving-designs-attitude/#smooth
  44. 44. Bryan Robinson bryanlrobinson.com Aesthetic Judgement SHAPE AND SYMMETRY Source: http://speckyboy.com/2013/02/06/symmetry-in-web-design/
  45. 45. Bryan Robinson bryanlrobinson.com Aesthetic Judgement SHAPE AND SYMMETRY Source: http://speckyboy.com/2013/02/06/symmetry-in-web-design/
  46. 46. Bryan Robinson bryanlrobinson.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
  47. 47. Bryan Robinson bryanlrobinson.com How do you get better?
  48. 48. Bryan Robinson bryanlrobinson.com Now’s the time… or… you know… later in one of these places: Twitter: @brob LinkedIn: http://linkedin.com/in/bryanlrobinson `

×