Intro to Atomic Design & Pattern Lab
https://goo.gl/tg1Y4S
We'll Be Covering:
- Understanding Atomic Design: the What and the Why behind Designing Systems of Components
- How Atomic Design "Works"
- Getting Started: Conducting an Interface Inventory
- Intro to Pattern Lab
Understanding Atomic Design
Atomic design is a methodology for designing / building out systems of components
What is it?
"Systems of components"...
I thought we were building websites?
Static "Websites"
1992 - 2010
Thanks Responsive.
RWD has made pixel-perfect "pages" impossible.
You wouldn't build out a separate mobile, tablet, and desktop homepage...
So why would we build out separate Blog, Product, and Featured Customer callouts?
Instead of just building out one simplified, flexible, and adaptable callout?
RWD has forced us to move away from building static pages to architecting systems of components.
Keep in Mind:
RWD is just the tip of the iceburg
This is all actually of something larger: Adaptive Design
Principles behind
Adaptive Design
http://bradfrost.com/blog/post/the-principles-of-adaptive-design/
Ubiquity
Flexibility
Performance
Enhancement
Future Friendly
Diving Deeper:
How Atomic Design Works
[Slide Every Atomic Design Presentation Includes]
Atoms
Molecules
Organisms
Templates
Pages
Atoms are the smallest reusable pieces
of a site's UI
Typography
Atoms
1:1 Image
Molecules
Molecules: Groups of UI pieces that
form together into a single unit.
Typography
Organisms
Organisms: composed of similar or related groups of molecules. Example: site header or a sidebar region.
Headline goes here
Headline goes here
Headline goes here
Read more >
Templates
Templates: Mostly groups of organisms that are combined together to form page-level objects. Use generic content!
Pages
Pages: Example real-world use of templates using real (or representative) content
Atomic Design helps everyone on a project break up the UI into repeatable, modular, bite-sized pieces; from most generic to most specific
HOWEVER
Atomic Design !== CSS
Seriously. Atomic Design has nothing to do with your CSS.
We'll get into this further in Part 2 next week.
Atoms
Molecules
Organisms
Templates
Pages
Abstract
Concrete
Atoms
Molecules
Organisms
Templates
Pages
Abstract
Concrete
Creators
Clients
Atoms
Molecules
Organisms
Templates
Pages
Reference
Review
Build
How do you get started?
Let's just say you just got handed a stack of comps...
Getting Started:
Conducting an Interface Inventory
Instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up the site or app.
Subtitle
An interface inventory is like a content inventory
An interface inventory is a comprehensive collection of the bits and pieces that make up your interface
Subtitle
An interface inventory is like a content inventory
5 Basic Steps
- Round up the stakeholders
- Prep for screenshotting
- Screenshot exercise!
- Categorize screenshots
- Present and define next steps
1. Round up the stakeholders
Just like how you wouldn't do a content inventory or design rounds in secret, interface inventories shouldn't be done isolation
[COLLABORATE]
2. Prepare for Screenshots!
Make sure you have a good screenshot tool on-hand and a place to organize and store your screenshots.
2. Prepare for Screenshots!
Google Slides also is a great place to collect your screenshots, especially when working in a group
3. Screenshot Exercise!
Some types of Interface Categories
- Global "Regions"
- Navigation
- Image types (logos, thumbnails, backgrounds, etc)
- Icons
- Forms
- Buttons
- Typography Headings
- Blocks
- Lists
- Interactive Components (tabs, carousels, dropdowns, etc)
- Media (video players, etc)
- 3rd Party Components
- Colors
- Advertising
3. Screenshot Exercise!
Keep in mind: we are looking for patterns and treatments.
We don't need to capture every single button for example if every button looks exactly the same
4. Categorize Screenshots
Can also be done while gathering screenshots.
Goal is to view the different treatments / variations of components at a high-level.
4. Categorize Screenshots
This is also where we can begin to normalize our designs and smooth over any inconsistencies or quirks.
5. Present and
Define Next Steps
The sooner everyone can start to understand we aren't building pages, but systems of components, the better
Pattern Lab is a Tool
Pattern Lab is a tool to help organize, prototype and build out systems of components.
Although it's core is based on PHP, it's not CMS or OS dependent and can be run via Grunt or Gulp
The awesome thing is that Pattern Lab can act like a living style guide AND a static HTML prototype