working with atomic design
DESCRIPTION
When code becomes a living style guide. An introduction to the ideas of atomic design, an atomic design workflow, the usage in a real live project and Pattern Lab.TRANSCRIPT
Berit Hlubek - @berit_jensen
Working withAtomic Design
When code becomes a living style guide
Photo: Andreas Thomsen, Owner: Lotta Katrina Hinz
http://www.telegraph.co.uk/technology/internet/10663451/The-early-days-of-25-websites.html
http://web.archive.org/web/20010609090954/http://www.apple.com
Static webdesignsBuilt for specific screen resolutions
Android screen sizes - 2013
http://opensignal.com/reports/fragmentation-2013
We have to re-think our design workflow
„We’re not designing pages, we’re designing systems of
components.“
— Stephen Hay, 2012
Atomic designA methodology for crafting design systems
Illustrations: http://bradfrostweb.com/blog/post/atomic-web-design
Atoms
Molecules
Organisms
Templates
Page
Giving things a nameAtoms, molecules, organisms, templates, pages
In practice ...?
A perfect Atomic Design workflow
Two possible waysPhotoshop or Prototyping
Create different componentsFrom atoms and molecules to organisms
What‘s next?Depends! Templates & Pages or Development
Keep the atomic design ideaAlso for the frontend development phase
This one big projectAnd we did the same as always...
Design ➞ BrowserNow something had to change
Use atomic designWell at least for the frontend
Living style guide!How to easily achieve that?
Pattern LabToolkit to create atomic design systems
http://patternlab.io
Static site generatorStitching components together to templates/pages
Component LibraryYour living style guide
Viewport Resizer
Back to the project workflow...
Extract componentsDefine atoms, molecules and organisms
From small to bigger chunksAlready had the CMS in mind
Mustache TemplatesA simple atom with two variables
<a href="#" class="link-all {{ more-classes }}"> {{ linktext }}</a>
Mustache Templates
A simple atom with two variables
<a href="#" class="link-all {{ more-classes }}"> {{ linktext }}</a>
Mustache Templates
A molecule with a loop
<ul class="teaser-list">! {{# teaserlist}}! ! <li>! ! ! <a href="#">{{ text }}</a>! ! </li>! {{/ teaserlist}}</ul>
Mustache Templates
A molecule with a loop
<ul class="teaser-list">! {{# teaserlist}}! ! <li>! ! ! <a href="#">{{ text }}</a>! ! </li>! {{/ teaserlist}}</ul>
Mustache TemplatesAn organism with variables and includes
<h2>{{ teaserheader }}</h2>{{> molecules-teaser-latest}}{{> molecules-teaser-list}}{{> atoms-link-all(linktext: All News)}}
Mustache TemplatesAn organism with variables and includes
<h2>{{ teaserheader }}</h2>{{> molecules-teaser-latest}}{{> molecules-teaser-list}}{{> atoms-link-all(linktext: All News)}}
Yet another demoKirche Hamburg Pattern Lab System
Drawbacks? Any?Sure, no solution is perfect
Have to get used to itSometimes hard to define molecules, organisms ...
Hard to start with atomsStart with molecules and organisms instead
Double markupYour HTML lives at multiple places
DisciplineEveryone has to follow the rules
Thanks!Questions?
Linkshttp://bradfrostweb.com/blog/post/atomic-web-design/
http://www.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/
http://patternlab.io
https://github.com/adactio/Pattern-Primer
http://livingstyleguide.org/
http://barebones.paulrobertlloyd.com/