際際滷

際際滷Share a Scribd company logo

Design for Engineers

Tagged Social
Tagged Social

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.

1 of 20
Download to read offline
DESIGN+UX ESSENTIALS FOR A BETTER TAGGED We enable anyone to meet and socialize with new people 2011.09.29 Ran Tao Development Workshops
GOAL: Allow everyone to have an understanding of basic Design+UX principles key to creating and delivering top-quality product DESIGN + UX
AGENDA: + Design + UX + Style Guide + Basic + Grid System Principles (960) (Aesthetics) + Responsive + Best Practices Web Design (User Experience) DESIGN + UX
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 + Flexibility DESIGN + UX
BASIC PRINCIPLES + Alignment + Whitespace + Color + Contrast + Hierarchy + Consistency + Priorities DESIGN + UX
ALIGNMENT Line up elements on the page! Elements that are misaligned are distracting and create an un鍖nished impression. This will be easier if a grid system is used (explained in a later slide) DESIGN + UX
WHITESPACE Allow for elements on a page to breath. Make sure elements arent too close together or far apart. Good use of white space allows for better legibility and usability DESIGN + UX
DESIGN + UX
CONTRAST This helps pull the eye to whats important. Contrast needs to be strong. But it should not be distracting. It should help the content stand out. DESIGN + UX
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
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
PRIORITIES What are the most important elements. Dont design for edge cases. Figure out what elements are absolutely necessary 鍖rst. 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
BEST PRACTICES + Start with a site map or page 鍖ow + Does the 鍖ow make sense + What is the main user scenario + Who is the user + How can a user complete the task + Make sure the user doesnt have to think + Whats the CTA + Only include the essentials; no distractions DESIGN + UX
STYLE GUIDE + Common CSS elements, classes to provide consistency across products + Use one main CSS 鍖le and only add exceptions when needed + Fonts: ?TextLarge, ?TextSmall etc + Spacing: ?PaddingLarge, ?PaddingSmall etc + Colors: ?PrimaryTextColor, ?SecondaryTextColor etc DESIGN + UX
STYLE GUIDE + Standardize as many common controls on the site as possible + Buttons + Navigation + Modal windows + Selection + Tabs + More DESIGN + UX
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.gs DESIGN + UX
RESPONSIVE WEB + In鍖nite screen sizes (mobile, tablet, desktop) + Design so that content should dynamically adapt to users screen size + Design for mobile 鍖rst! DESIGN + UX
RESPONSIVE WEB Boston Globe DESIGN + UX
USERS ARE #1 DESIGN + UX
QUESTIONS USERS+ ARE #1 COMMENTS ? DESIGN + UX

More Related Content

Design for Engineers

  • 1. DESIGN+UX ESSENTIALS FOR A BETTER TAGGED We enable anyone to meet and socialize with new people 2011.09.29 Ran Tao Development Workshops
  • 2. GOAL: Allow everyone to have an understanding of basic Design+UX principles key to creating and delivering top-quality product DESIGN + UX
  • 3. AGENDA: + Design + UX + Style Guide + Basic + Grid System Principles (960) (Aesthetics) + Responsive + Best Practices Web Design (User Experience) DESIGN + UX
  • 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 + Flexibility DESIGN + UX
  • 5. BASIC PRINCIPLES + Alignment + Whitespace + Color + Contrast + Hierarchy + Consistency + Priorities DESIGN + UX
  • 6. ALIGNMENT Line up elements on the page! Elements that are misaligned are distracting and create an un鍖nished impression. This will be easier if a grid system is used (explained in a later slide) DESIGN + UX
  • 7. WHITESPACE Allow for elements on a page to breath. Make sure elements arent too close together or far apart. Good use of white space allows for better legibility and usability DESIGN + UX
  • 9. CONTRAST This helps pull the eye to whats important. Contrast needs to be strong. But it should not be distracting. It should help the content stand out. DESIGN + UX
  • 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. 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. PRIORITIES What are the most important elements. Dont design for edge cases. Figure out what elements are absolutely necessary 鍖rst. 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. BEST PRACTICES + Start with a site map or page 鍖ow + Does the 鍖ow make sense + What is the main user scenario + Who is the user + How can a user complete the task + Make sure the user doesnt have to think + Whats the CTA + Only include the essentials; no distractions DESIGN + UX
  • 14. STYLE GUIDE + Common CSS elements, classes to provide consistency across products + Use one main CSS 鍖le and only add exceptions when needed + Fonts: ?TextLarge, ?TextSmall etc + Spacing: ?PaddingLarge, ?PaddingSmall etc + Colors: ?PrimaryTextColor, ?SecondaryTextColor etc DESIGN + UX
  • 15. STYLE GUIDE + Standardize as many common controls on the site as possible + Buttons + Navigation + Modal windows + Selection + Tabs + More DESIGN + UX
  • 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.gs DESIGN + UX
  • 17. RESPONSIVE WEB + In鍖nite screen sizes (mobile, tablet, desktop) + Design so that content should dynamically adapt to users screen size + Design for mobile 鍖rst! DESIGN + UX
  • 18. RESPONSIVE WEB Boston Globe DESIGN + UX
  • 20. QUESTIONS USERS+ ARE #1 COMMENTS ? DESIGN + UX