We’re not designing pages, we’re designing systems of components.
-Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/ http://foundation.zurb.com/
getbootstrap.com
THESE THINGS ARE GREAT, BUT...
FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Compatibility with existing sites
๏ Subscribe to someone else’s structure, naming, style
Tiny Bootstraps, for every client.
-Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/ Responsive deliverables should look a lot like fully-functioning Twitter
Bootstrap-style systems custom tailored for your clients’ needs.
-Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/ fivesimplesteps.com/products/front-end-style-guides
BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/ I LOVE THESE.
MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
๏ Often incomplete/only serving present cases
๏ Lacking a clear methodology
ATOMIC DESIGN
H2 + O2 → H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O
H2+O2=H20
H2+O2→H20
http://joshduck.com/periodic-table.html
H2+O2=H20
H2+O2→H20
SEARCH THE SITE
ENTER KEYWORD
SEARCH
SEARCH THE SITE
ENTER KEYWORD
SEARCH
You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is.
-Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always There is a symbiotic relationship between content and design. One cannot thrive without the other.
-Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always ABSTRACT
CONCRETE
ABSTRACT
CONCRETE
CREATORS
CLIENTS
REFERENCE
BUILD
REVIEW
ATOMIC DESIGN
๏ Provides a methodology for crafting an effective design system
๏ Easily traverse from abstract to concrete
๏ Promotes consistency and cohesion
๏ Assembles rather than deconstructs
The idea of designing components like this, out of context and without layout, might sound strange— particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble.
-Andy Clarke http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements DAVE OLSEN
@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool
WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “just” a pattern library, but also not a production-ready static site generator
