Design for Engineers


Published on

Tagged Development workshops are weekly workshops to promote development best practices and learn about how product and infrastructure gets built. Half an hour presentations, followed by Q&A.

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Design for Engineers

  1. 1. DESIGN+UX ESSENTIALS FOR A BETTER TAGGED We enable anyone to meet and socialize with new people2011.09.29 Ran Tao Development Workshops
  2. 2. GOAL:Allow everyone to havean understanding of basicDesign+UX principles keyto creating and deliveringtop-quality productDESIGN + UX
  3. 3. AGENDA:+  Design + UX +  Style Guide+  Basic +  Grid System Principles (960) (Aesthetics) +  Responsive+  Best Practices Web Design (User Experience)DESIGN + UX
  4. 4. DESIGN+UX+  Everyone should keep basic design and ux practices in mind when building products (no matter what discipline you are)+  Design principles are similar in nature to engineering practices +  Keep it simple +  Prioritize and maintain hierarchy +  Consistency +  FlexibilityDESIGN + UX
  5. 5. BASIC PRINCIPLES+  Alignment+  Whitespace+  Color+  Contrast+  Hierarchy+  Consistency+  PrioritiesDESIGN + UX
  6. 6. ALIGNMENT Line up elements on the page! Elements that are misaligned are distracting and create an unfinished impression. This will be easier if a grid system is used (explained in a later slide)DESIGN + UX
  7. 7. WHITESPACE Allow for elements on a page to breath. Make sure elements aren’t too close together or far apart. Good use of white space allows for better legibility and usabilityDESIGN + UX
  8. 8. DESIGN + UX
  9. 9. CONTRAST This helps pull the eye to what’s important. Contrast needs to be strong. But it should not be distracting. It should help the content stand out.DESIGN + UX
  10. 10. HIERARCHY There needs to be visual hierarchy. Similar to code hierarchy when building a product, there is also an equivalent sense of importance. DESIGN + UX
  11. 11. CONSISTENCY Maintain coherence between pages and within a page. This strengthens the brand and gives the user a consistent experience and a sense of familiarity.DESIGN + UX
  12. 12. PRIORITIES What are the most important elements. Don’t design for edge cases. Figure out what elements are absolutely necessary first. These should be the essentials that, without them, you cannot achieve the product goal. This will help clean up the layout and avoid clutter.DESIGN + UX
  13. 13. BEST PRACTICES+  Start with a site map or page flow+  Does the flow make sense+  What is the main user scenario+  Who is the user+  How can a user complete the task+  Make sure the user doesn’t have to think+  What’s the CTA+  Only include the essentials; no distractionsDESIGN + UX
  14. 14. STYLE GUIDE+  Common CSS elements, classes to provide consistency across products+  Use one main CSS file and only add exceptions when needed +  Fonts: ?TextLarge, ?TextSmall etc +  Spacing: ?PaddingLarge, ?PaddingSmall etc +  Colors: ?PrimaryTextColor, ?SecondaryTextColor etcDESIGN + UX
  15. 15. STYLE GUIDE+  Standardize as many common controls on the site as possible +  Buttons +  Navigation +  Modal windows +  Selection +  Tabs +  More…DESIGN + UX
  16. 16. GRID SYSTEM+  The 960 grid (960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480) +  Easily divide into any number of layouts Columns: 60px Margins: 10px Gutters: 20px 960.gsDESIGN + UX
  17. 17. RESPONSIVE WEB+  Infinite screen sizes (mobile, tablet, desktop)+  Design so that content should dynamically adapt to users screen size+  Design for mobile first!DESIGN + UX
  18. 18. RESPONSIVE WEB Boston Globe DESIGN + UX
  19. 19. USERS ARE #1DESIGN + UX