UI Pattern libraries
What is a pattern library
Also called "Design systems" or "Style guides"
Set standards and rules for documents, websites, blog posts, apps
A living document of code
Collection of user interface design elements
Comprises all details as how to include different elements
Pros
Ensures consistency
Cleaner code base
Keeps brand identity alive
Reduces documentation
Easier to adapt, test and estimate
Reusable
Cons
Constrains a designer when code base is inflexible
Takes time to set up
Tend to become inflexible
Examples
Audi
A list apart
Yelp
Salesforce
Mailchimp
Atomic Design
How to start
First things first
Decide on pattern
Have design briefing
Atoms
Basic building blocks
Example:
Font
Colour palette
Input
Label
Button
Animations
Molecules
Groups of atoms
Are the backbone of your pattern
Example:
Form with a label, input and button
Navigation with list and items
Organisms
Groups of molecules
Shows the interface
Creates reusable, standalone and portable components
Templates
Groups of organisms
Design starts coming together
Pages
Instances of templates
Placeholder text is replaced
The place to test variations in templates
Questions?
Made with Slides.com