8. 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/
15. 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
16. Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
17. 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/
18. BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference
http://24ways.org/2011/front-end-style-guides/
33. 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
75. WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool
๏ A developer tool (auto-refresh, page follow)
76. WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “just” a pattern library, but also not by itself a
123. Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
128. PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Useful tool for everyone: information architects, designers,
developers, clients
๏ Fills the post-PSD void
๏ Write and name HTML/CSS/JS as you please.
๏ Start with a system first rather than deconstruct later
๏ Extensible and scalable
๏ Future friendly
135. 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/
145. Let’s change the phrase
“designing in the browser”
to “deciding in the browser”
-Dan Mall
http://the-pastry-box-project.net/dan-mall/2012-september-12/
161. INTERFACE INVENTORY
๏ 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
206. HUGE THANK YOU
๏ Dave Olsen
๏ Anna Debenham
๏ Dan Mall
๏ Andy Clarke
๏ Josh Clark
๏ Paul Robert Lloyd
๏ Jonathan Stark
๏ Jeremy Keith
๏ Jennifer Brook
๏ Brett Jankord
๏ Tyler Sticka
๏ Harry Roberts