The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.
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
70. WHAT PATTERN LAB IS
๏ A design system builder
๏ Your comprehensive custom component library
๏ A pattern starter kit
๏ A design toolkit (viewport resizer and other tools)
71. WHAT PATTERN LAB AIN’T
๏ A UI framework
๏ Language, library, style, workflow dependent
๏ Incredibly rigid
๏ “Just” a pattern library, but also not a production-ready
static site generator
117. 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/
133. INTERFACE INVENTORY
๏ Document your interface
๏ Promote consistency
๏ Establish scope of work for translating to a responsive
interface
๏ Lay the groundwork for a future style guide/pattern library