Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
14. 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
15. Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
16. 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/
32. 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
59. 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
67. 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
71. WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool
72. WHAT PATTERN LAB AIN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “Just” a pattern library, but also not a production-ready
static site generator
125. As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnostic of device, screen size, or context.
-Dan Mall
http://danielmall.com/articles/the-post-psd-era/
143. ๏ Document your interface
๏ Promote consistency
๏ Establish which elements will be challenging to translate
into a responsive environment
๏ Lay the groundwork for a future style guide/pattern library
INTERFACE INVENTORY