Slide 1
Slide 1 text
future friendly
STYLE
GUIDES
@lukebroker
Slide 2
Slide 2 text
Hold up
RESPONSIVE
DESIGN!
Slide 3
Slide 3 text
My work ow doesn’t
WORK or FLOW
Slide 4
Slide 4 text
How is it
REALLY
going to look?
Slide 5
Slide 5 text
and how do
we get there
QUICKLY?
Slide 6
Slide 6 text
HOW I GET THERE
Slide 7
Slide 7 text
HOW I GET THERE
• Wireframes - sketched only, multiple width.
Slide 8
Slide 8 text
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.
Slide 9
Slide 9 text
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.
Slide 10
Slide 10 text
and...
STYLE GUIDES
Slide 11
Slide 11 text
WHY
a style guide?
Slide 12
Slide 12 text
“Websites are systems
rather than pages and
as soon as we stop
perceiving them as that,
the better.”
ANNA DEBENHAM
Slide 13
Slide 13 text
ELEMENTS,
COMPONENTS
& PATTERNS
Slide 14
Slide 14 text
Component Example
NAVIGATION
MENUS
Slide 15
Slide 15 text
Component Example
NAVIGATION
MENUS
Slide 16
Slide 16 text
Component Example
NAVIGATION
MENUS
Slide 17
Slide 17 text
PATTERN
LIBRARIES
ey’re popping up everywhere
Slide 18
Slide 18 text
PEARS
pea.rs
Slide 19
Slide 19 text
PATTERN PRIMER
github.com/adactio/Pattern-Primer
Slide 20
Slide 20 text
Back to
STYLE GUIDES
Front-end Style Guides
24ways.org/2011/front-end-style-guides
Knyle Style Sheets
warpspire.com/posts/kss
Slide 21
Slide 21 text
KNYLE STYLE SHEETS
Slide 22
Slide 22 text
AN IDEA
Slide 23
Slide 23 text
PATTERN RESPONSE
github.com/lukebrooker/pattern-response
Slide 24
Slide 24 text
More than a
STYLE GUIDE
Slide 25
Slide 25 text
More than a
STYLE GUIDE
• Team Members - Document all
components of a project and how to
implement them.
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
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.
Slide 28
Slide 28 text
USING IT IN A
RESPONSIVE
WORKFLOW
Slide 29
Slide 29 text
• From wireframes - List out all components
needed.
Slide 30
Slide 30 text
• From wireframes - List out all components
needed.
• In the style guide - Add the structure
(HTML) of each component.
Slide 31
Slide 31 text
• 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.
Slide 32
Slide 32 text
• 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.
Slide 33
Slide 33 text
FOR EACH COMPONENT
Slide 34
Slide 34 text
FOR EACH COMPONENT
• Widths - how this component will react. How
wide should it get before it’s layout changes.
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
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)
Slide 37
Slide 37 text
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.
Slide 38
Slide 38 text
AN EXAMPLE
Slide 39
Slide 39 text
AN EXAMPLE
Slide 40
Slide 40 text
AN EXAMPLE
Slide 41
Slide 41 text
AND THAT
IS WHAT I KNOW
AN IDEA I HAD.
ank you.
@lukebroker