zeeto tech exchange: design for scalability - ux
TRANSCRIPT
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 SharyDirector of UX
Andre RecintoSr. Software Engineer
Tonight’s Topic
How Pattern Librariesand 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 GuidesPattern LibrariesUI LibrariesComponent 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
TypographyColorsButtonsFormsTablesUser 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