The document discusses the importance of style guides in responsive web design, emphasizing their role in documenting components, enhancing workflows, and facilitating collaboration between designers and developers. It outlines various stages of the design process, including wireframes, initial prototyping, and the creation of style tiles. The author advocates for treating websites as systems rather than static pages, with a focus on adapting components to different screen sizes and contexts.

1. future friendly
STYLE
GUIDES
@lukebroker

2. Hold up
RESPONSIVE
DESIGN!

3. My workflow doesn’t
WORK or FLOW

4. How is it
REALLY
going to look?

5. and how do
we get there
QUICKLY?

6. HOW I GET THERE

7. HOW I GET THERE
• Wireframes - sketched only, multiple width.

8. HOW I GET THERE
• Wireframes - sketched only, multiple width.
• Initial prototyping - very top level, mostly
for a “live” feel of the layout from the
wireframes, but able to be seen on many
devices.

9. HOW I GET THERE
• Wireframes - sketched only, multiple width.
• Initial prototyping - very top level, mostly
for a “live” feel of the layout from the
wireframes, but able to be seen on many
devices.
• Style tiles - design in Photoshop without
“designing mockups” in Photoshop.

10. and...
STYLE GUIDES

11. WHY
a style guide?

12. “Websites are systems
rather than pages and
as soon as we stop
perceiving them as that,
the better.”
ANNA DEBENHAM

13. ELEMENTS,
COMPONENTS
& PATTERNS

14. Component Example
NAVIGATION
MENUS

15. Component Example
NAVIGATION
MENUS

16. Component Example
NAVIGATION
MENUS

17. PATTERN
LIBRARIES
ey’re popping up everywhere

18. PEARS
pea.rs

19. PATTERN PRIMER
github.com/adactio/Pattern-Primer

20. Back to
STYLE GUIDES
Front-end Style Guides
24ways.org/2011/front-end-style-guides
Knyle Style Sheets
warpspire.com/posts/kss

21. KNYLE STYLE SHEETS

22. AN IDEA

23. PATTERN RESPONSE
github.com/lukebrooker/pattern-response

24. More than a
STYLE GUIDE

25. More than a
STYLE GUIDE
• Team Members - Document all
components of a project and how to
implement them.

26. More than a
STYLE GUIDE
• Team Members - Document all
components of a project and how to
implement them.
• Yourself - Keep as a starter style guide and
another for a pattern library.

27. More than a
STYLE GUIDE
• Team Members - Document all
components of a project and how to
implement them.
• Yourself - Keep as a starter style guide and
another for a pattern library.
• Clients - Style guide, WYSIWYG Guide.

28. USING IT IN A
RESPONSIVE
WORKFLOW

29. • From wireframes - List out all components
needed.

30. • From wireframes - List out all components
needed.
• In the style guide - Add the structure
(HTML) of each component.

31. • From wireframes - List out all components
needed.
• In the style guide - Add the structure
(HTML) of each component.
• Design/style - Using the style guide or
referencing your projects CSS as you build
it.

32. • From wireframes - List out all components
needed.
• In the style guide - Add the structure
(HTML) of each component.
• Design/style - Using the style guide or
referencing your projects CSS as you build
it.
• Work together - Designers and developers
can work together and discuss how things
will work at different sizes.

33. FOR EACH COMPONENT

34. FOR EACH COMPONENT
• Widths - how this component will react. How
wide should it get before it’s layout changes.

35. FOR EACH COMPONENT
• Widths - how this component will react. How
wide should it get before it’s layout changes.
• Hierarchy - where this component will be
used in the site, and how it react to others.

36. FOR EACH COMPONENT
• Widths - how this component will react. How
wide should it get before it’s layout changes.
• Hierarchy - where this component will be
used in the site, and how it react to others.
• Density - how the content changes as the
component adapts to it’s surroundings. (will
some things be hidden)

37. FOR EACH COMPONENT
• Widths - how this component will react. How
wide should it get before it’s layout changes.
• Hierarchy - where this component will be
used in the site, and how it react to others.
• Density - how the content changes as the
component adapts to it’s surroundings. (will
some things be hidden)
• Interaction - will the way it is interacted
with change as it changes.

38. AN EXAMPLE

39. AN EXAMPLE

40. AN EXAMPLE

41. AND THAT
IS WHAT I KNOW
AN IDEA I HAD.
ank you.
@lukebroker