SlideShare a Scribd company logo

Zeeto Tech Exchange: Design for Scalability - UX

•Download as PPTX, PDF•
•
Z
ZeetoSlides

Zeeto is a technology platform that makes online properties and mobile apps money by asking their visitors smart questions and using their answers to display high-value ads. The Zeeto Tech Exchange is a leading San Diego tech community group that meets on a monthly basis to discuss, debate and network. "Design for Scalabality" was presented in February 2017.

Related slideshows

Scribe Overview - wescribe.co
Scribe Overview - wescribe.coScribe Overview - wescribe.co
Scribe Overview - wescribe.co
 
Integration for Microsoft Dynamics CRM and Microsoft Dynamics NAV
Integration for Microsoft Dynamics CRM and Microsoft Dynamics NAVIntegration for Microsoft Dynamics CRM and Microsoft Dynamics NAV
Integration for Microsoft Dynamics CRM and Microsoft Dynamics NAV
 
General 01 welcome and scribe business update
General 01 welcome and scribe business updateGeneral 01 welcome and scribe business update
General 01 welcome and scribe business update
 
1 of 56
Design for Scalability Zeeto Tech Exchange
Zeeto Tech Exchange
The Inaugural Series • Nov – The Project / Technology Selection • Dec – Cloud Hosting / Containers / Scheduling • Jan – Microservices • Feb – Design for Scalability • Mar – Database Infrastructure • Apr – Reporting and Analytics • May – Lessons Learned
Our Panel This Evening Rahmeen Shary Director of UX Andre Recinto Sr. Software Engineer
Tonight’s Topic How Pattern Libraries and Reusable Components Future Proof Your Application
Designing a Pattern Library • Why Future Proof Your Application? • Applying Atomic Design Principles • Achieving Vertical Rhythm with Baseline Grids • Defining UI Patterns in High-Fidelity
Why Future Proof Your Application?
What is Future Proofing? Future proofing is the process of anticipating the future and developing methods of minimizing the effects of shocks and stresses of future events.
Don’t Future Proof Pros • Instant gratification • Less financial investment Cons • Velocity slows over time • System is less established for new hires • Less global control over the design language • Reusability is an afterthought • Not able to iterate quickly as business and product requirements change = Leads to scalability and maintainability issues
Future Proof Pros • Pick up velocity over time • Maximize global control over the design language • Reusability is a primary focus • An established system is in place for new hires • Able to iterate quickly as business and product requirements change Cons • Can take longer to reach your MVP • There is a financial investment up front • Will take full buy-in from product, engineering, and the executive team = Maximizes scalability, productivity, and maintainability
Choose Your Path Wisely Team A / The Doc Browns vs Team B / The Biffs
Choose Your Path Wisely Team A / The Doc Browns vs Team B / The Biffs
Applying Atomic Design Principles
Who Created Atomic Design?
What is Atomic Design? Brad describes atomic design as a methodology for creating a design system.
What is a Design System? A design system is a set of rules, guidelines, and guardrails that document and organize your design materials. Often referred to as… Style Guides Pattern Libraries UI Libraries Component Libraries
Why Use a Style Guide? Style guides promote consistency across the UI which benefits designers, developers, and users alike. • Designing without style guides leads to inconsistent UI • Developers end up building these inconsistencies, which leads to scalability issues • Helps us design patterns NOT pages • Inconsistent design patterns can be confusing for users
Living Style Guide Can be a great tool for communicating design standards throughout an organization. • Thoroughly documents and define usage for all UI patterns • Helps keep product, design, developers, marketing, and executives on the same page • Will help discourage random “one-off” requests
Examples
Examples
What is Atomic Design? Atomic design is a chemistry analogy that suggests our interfaces are made up of atoms and molecules that combine to create organisms.
Let’s Talk Science
What is Atomic Design? “We’re not just designing pages, we’re designing systems of components.” – Stephen Hay There are five distinct levels in atomic design:
Atoms Atoms are the basic building blocks of an interface.
Molecules Molecules are groups of atoms bonded together to form fundamental units of an interface.
Organisms Organisms are groups of molecules or atoms joined together to form a relatively complex, distinct section of an interface.
Templates Templates are groups of organisms stitched together to form pages.
Pages Pages are specific instances of templates.
Pattern Lab Check out patternlab.io
A Good Read
Achieving Vertical Rhythm with Baseline Grids
What is a Baseline Grid? Defines a vertical rhythm by building vertical consistency into each layout.
Horizontal Grid We use a flexible 12 column grid.
Baseline Grid We use a 3px baseline grid.
Why Use a Baseline Grid? • Takes the guess work out of vertical spacing resulting in faster design cycles • Helps refine vertical consistency between designers • Breaks down our design patterns mathematically, encouraging them to “play nice together” • Buttons, inputs, and selectors naturally end up with uniform height and text alignments • Easily identify when your layout is OFF
Take a Closer Look • Define your baseline and set your type. (3px) • All leading MUST be divisible by your baseline
Set Your Type
Block-Level Elements All block-level elements MUST be divisible by your baseline.
Block-Level Elements All block-level elements MUST be divisible by your baseline.
Layout
Layout
Defining UI Patterns in High- Fidelity
Define Your Page Types • Work with product and stakeholders to gather platform requirements • Iterate on low-fidelity wireframes to identify reusable page types
View/Manage Template
Add/Edit Template
Define Your Patterns Typography Colors Buttons Forms Tables User Feedback *All patterns MUST be divisible by your baseline
Typography
Colors
Colors A LESS/SASS color strategy can be a powerful way to control your design language without a lot of heavy lifting • Give your brand colors non-color specific names @primary1-color, @primary2-color • Have a strategy for your grays @gray9-color, @gray8-color, @gray7-color, etc... @gray1-color • Global border and background classes @dark-border, @light-border, @dark-background, @light-background • Global text classes @dark-text, @light-text, @white-text, @disabled-text , @error-text
Buttons
Buttons • Define button types and sizes separately for more control • ex. .primary-button + .lg-size + .expand • Button types help avoid the Skittle conundrum • .primary-button (Add) • .action-button (Save, Publish, Next, Continue, Log In, Sign Up) • .utility-button (Cancel) • .delete-button (Delete) • .control-button (Control Bar: Filter, Download, Export) • .disabled-button (Inactive Button State) • Variable over fixed width to accommodate internationalization
Forms
Tables
User Feedback
Build Your Templates
Build Your Templates

More Related Content

Zeeto Tech Exchange: Design for Scalability - UX

  • 3. The Inaugural Series • Nov – The Project / Technology Selection • Dec – Cloud Hosting / Containers / Scheduling • Jan – Microservices • Feb – Design for Scalability • Mar – Database Infrastructure • Apr – Reporting and Analytics • May – Lessons Learned
  • 4. Our Panel This Evening Rahmeen Shary Director of UX Andre Recinto Sr. Software Engineer
  • 5. Tonight’s Topic How Pattern Libraries and Reusable Components Future Proof Your Application
  • 6. Designing a Pattern Library • Why Future Proof Your Application? • Applying Atomic Design Principles • Achieving Vertical Rhythm with Baseline Grids • Defining UI Patterns in High-Fidelity
  • 7. Why Future Proof Your Application?
  • 8. What is Future Proofing? Future proofing is the process of anticipating the future and developing methods of minimizing the effects of shocks and stresses of future events.
  • 9. Don’t Future Proof Pros • Instant gratification • Less financial investment Cons • Velocity slows over time • System is less established for new hires • Less global control over the design language • Reusability is an afterthought • Not able to iterate quickly as business and product requirements change = Leads to scalability and maintainability issues
  • 10. Future Proof Pros • Pick up velocity over time • Maximize global control over the design language • Reusability is a primary focus • An established system is in place for new hires • Able to iterate quickly as business and product requirements change Cons • Can take longer to reach your MVP • There is a financial investment up front • Will take full buy-in from product, engineering, and the executive team = Maximizes scalability, productivity, and maintainability
  • 11. Choose Your Path Wisely Team A / The Doc Browns vs Team B / The Biffs
  • 12. Choose Your Path Wisely Team A / The Doc Browns vs Team B / The Biffs
  • 15. What is Atomic Design? Brad describes atomic design as a methodology for creating a design system.
  • 16. What is a Design System? A design system is a set of rules, guidelines, and guardrails that document and organize your design materials. Often referred to as… Style Guides Pattern Libraries UI Libraries Component Libraries
  • 17. Why Use a Style Guide? Style guides promote consistency across the UI which benefits designers, developers, and users alike. • Designing without style guides leads to inconsistent UI • Developers end up building these inconsistencies, which leads to scalability issues • Helps us design patterns NOT pages • Inconsistent design patterns can be confusing for users
  • 18. Living Style Guide Can be a great tool for communicating design standards throughout an organization. • Thoroughly documents and define usage for all UI patterns • Helps keep product, design, developers, marketing, and executives on the same page • Will help discourage random “one-off” requests
  • 21. What is Atomic Design? Atomic design is a chemistry analogy that suggests our interfaces are made up of atoms and molecules that combine to create organisms.
  • 23. What is Atomic Design? “We’re not just designing pages, we’re designing systems of components.” – Stephen Hay There are five distinct levels in atomic design:
  • 24. Atoms Atoms are the basic building blocks of an interface.
  • 25. Molecules Molecules are groups of atoms bonded together to form fundamental units of an interface.
  • 26. Organisms Organisms are groups of molecules or atoms joined together to form a relatively complex, distinct section of an interface.
  • 27. Templates Templates are groups of organisms stitched together to form pages.
  • 28. Pages Pages are specific instances of templates.
  • 29. Pattern Lab Check out patternlab.io
  • 31. Achieving Vertical Rhythm with Baseline Grids
  • 32. What is a Baseline Grid? Defines a vertical rhythm by building vertical consistency into each layout.
  • 33. Horizontal Grid We use a flexible 12 column grid.
  • 34. Baseline Grid We use a 3px baseline grid.
  • 35. Why Use a Baseline Grid? • Takes the guess work out of vertical spacing resulting in faster design cycles • Helps refine vertical consistency between designers • Breaks down our design patterns mathematically, encouraging them to “play nice together” • Buttons, inputs, and selectors naturally end up with uniform height and text alignments • Easily identify when your layout is OFF
  • 36. Take a Closer Look • Define your baseline and set your type. (3px) • All leading MUST be divisible by your baseline
  • 38. Block-Level Elements All block-level elements MUST be divisible by your baseline.
  • 39. Block-Level Elements All block-level elements MUST be divisible by your baseline.
  • 42. Defining UI Patterns in High- Fidelity
  • 43. Define Your Page Types • Work with product and stakeholders to gather platform requirements • Iterate on low-fidelity wireframes to identify reusable page types
  • 46. Define Your Patterns Typography Colors Buttons Forms Tables User Feedback *All patterns MUST be divisible by your baseline
  • 49. Colors A LESS/SASS color strategy can be a powerful way to control your design language without a lot of heavy lifting • Give your brand colors non-color specific names @primary1-color, @primary2-color • Have a strategy for your grays @gray9-color, @gray8-color, @gray7-color, etc... @gray1-color • Global border and background classes @dark-border, @light-border, @dark-background, @light-background • Global text classes @dark-text, @light-text, @white-text, @disabled-text , @error-text
  • 51. Buttons • Define button types and sizes separately for more control • ex. .primary-button + .lg-size + .expand • Button types help avoid the Skittle conundrum • .primary-button (Add) • .action-button (Save, Publish, Next, Continue, Log In, Sign Up) • .utility-button (Cancel) • .delete-button (Delete) • .control-button (Control Bar: Filter, Download, Export) • .disabled-button (Inactive Button State) • Variable over fixed width to accommodate internationalization
  • 52. Forms

Editor's Notes

  1. 1. Why Future Proof Your Application? (planning) 2. Applying Atomic Design Principles (concept that encouraging reusability) 3. Achieving Vertical Rhythm with Baseline Grids (technique for vertical rhythm) 4. Defining UI Patterns in High-Fidelity (create patterns)
  2. Team A (Future Proofers) Team B (Non Future Proofers)
  3. 1. Why Future Proof Your Application? (planning) 2. Applying Atomic Design Principles (concept that encouraging reusability) 3. Achieving Vertical Rhythm with Baseline Grids (technique for vertical rhythm) 4. Defining UI Patterns in High-Fidelity (create patterns)
  4. 1. Why Future Proof Your Application? (planning) 2. Applying Atomic Design Principles (concept that encouraging reusability) 3. Achieving Vertical Rhythm with Baseline Grids (technique for vertical rhythm) 4. Defining UI Patterns in High-Fidelity (create patterns)
  5. 1. Why Future Proof Your Application? (planning) 2. Applying Atomic Design Principles (concept that encouraging reusability) 3. Achieving Vertical Rhythm with Baseline Grids (technique for vertical rhythm) 4. Defining UI Patterns in High-Fidelity (create patterns)