Embed Size (px)
Citation preview
ABOUT MEWeb developer since 1997
Senior frontend developer at MoZeus
Illustrator, cartoonist, writer, daddy
2
I’m AtlantaJones everywhere:
“WEBSITES”
3
“WEBSITES”
4
WHAT ARE PAGES EVEN?
6
!= “Pages”
WHAT ARE PAGES EVEN?“We’re a startup looking to launch a 5-page website this October…”
“How long will it take just to build the home page?”
“How are we ever going to redesign this university website that contains over 30,000 pages?!”
7
–Stephen Hay
“WE’RE NOT DESIGNING PAGES. WE’RE DESIGNING
SYSTEMS OF COMPONENTS.”
8
GOING MODULAR
9
GOING MODULARBackends don’t always generate fully-baked “pages”
Their API’s are consumed by components on multiple platforms
Web apps are already using modular components for architecture
Why not our designs and UI?
10
EARLY ISSUESOrganization like SMACSS only got us so far
Not accessible for designers
No references for existing components
Too easy to reinvent wheels
Style bloat ensues
11
smacss.com
EARLY ISSUESInconsistent designs
Leads to many minor variations
Lots of CSS specificity
12
EARLY ISSUESModules not truly modular
Break when moved around
Class names lose meaning
13
EARLY ISSUES“Living” style guides?
Not very flexible
Provides no context
Easily outdated or abandoned
14
WHAT IS ATOMIC DESIGN?Dreamed up by Brad Frost in 2013
Based on a chemistry-inspired metaphor
Five phases:
16
ATOMSThe basic building block of all matter
Can’t be broken down further without losing function or meaning
Mostly limited to HTML tags
Also more abstract elements like color palettes, font stacks or animations17
ATOMS: EXAMPLE
18
SEARCH THE SITE
SEARCH
LABEL
INPUTENTER KEYWORD
BUTTON
MOLECULESGroups of two or more atoms
Form simple, functional components
Groups of UI elements functioning together as a unit
19
MOLECULES: EXAMPLE
20
SEARCH THE SITE
SEARCHENTER KEYWORD
ORGANISMSGroups of molecules and atoms
Can also contain smaller organisms
Form distinct sections of an interface
21
ORGANISMS: EXAMPLE
22
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
ORGANISMS: EXAMPLE
23
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
Atom: logo Molecule: Nav Molecule: Search
Organism: Global Header
TEMPLATESLike low-fidelity wireframes
Provide context for molecules and organisms
Contain only placeholder text and images
24
TEMPLATES: EXAMPLE
25
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
PAGESMost concrete stage in Atomic Design
Specific “instances” of templates
Real representative content
Multiple pages from single templates
26
TEMPLATES: EXAMPLE
27
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
PAGES: EXAMPLE
28
PATTERN LIBRARIESPromote consistency
Allow faster, more collaborative workflow
Establish a shared vocabulary
Make testing easier
Make estimating easier
Serve as documentation
30
Style Tiles Element Collages
PATTERN LIBRARIES
31
Mail chimp Big Nerd Ranch
PATTERN LIBRARIES
32
PATTERN LABWeb app that compiles code patterns into a functional front-end UI
Allows for separation between structure and content
Serves as a blueprint for backend developers
Allows non-developers to contribute to the living, breathing design system
34
PATTERN LABBoth PHP and Node-based versions
Static site generator
Multiple “editions” support both Mustache and Twig templates
Also a Drupal-friendly version
35
39
pixel sizing
breakpoint sizing
surprise me
code, search, etc
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
UNDER THE HOOD
65
misc config filesPattern Lab “engine”static file outputworking files & templatesphp Composer dependencies
UNDER THE HOOD
66
annotation data
global data
global template includes
five phases of Atomic Design
UNDER THE HOOD
67
UNDER THE HOOD
68
MUSTACHE VS. TWIG?Both very capable choices
Mustache:
“logic-less”
No “ifs”, “elses” or “for loops”
Twig:
Offers more features and flexibility
More PHP project friendly69
MUSTACHE VS. TWIG?
70
mustache
twig
MUSTACHE VS. TWIG?
71
THE PROBLEMPatterns need to be consumed by backend
Crap.
Patterns should serve as the blueprint
Patterns easily detached from the library
PHP-based projects may have an easier transition
73
THE HOLY GRAILTwo-way synchronization between the library and backend
Gem libraries?
Composer packages??
Node modules???
74
THE HOLY GRAIL
75
CAUTIONS & CAVEATSEveryone has to be on board
Make/test components within library first
Roll in “hot fix” changes ASAP
Avoid “Bootstrap-itis”
Naming things is super hard
Avoid names based on appearance or location
77
NOTES ON ATOMIC DESIGNIt’s not restricted to any certain technology
Can be applied to all UI, not just web
Helps when designing web and mobileUI’s simultaneously
78
“AFTER WE DELIVER THIS SITE, WE WON’T BE INVOLVED
ANYMORE.
IS IT STILL WORTH BUILDING A WHOLE PATTERN LIBRARY?”
79
“DON’T FORGET, ONE OF THE DELIVERABLES IS A STYLE GUIDE.”
80
the client:
“THIS IS IT. YOU’VE BEEN LOOKING AT
IT THIS WHOLE TIME.”
me:
81
GO FORTH“Pages” giving way to modular systems
Teams need something more
Atomic Designs == better communication
Better, more consistent, reusable components
Better, faster response from clients
A ready-made instruction manual
82
RESOURCEShttp://bradfrost.com/blog/post/atomic-web-design
http://atomicdesign.bradfrost.com
http://patternlab.io
http://mustache.github.io
http://twig.sensiolabs.org
Smashing Magazine Pattern Lab 2 Article
83
