DESIGNING WITH STYLEUsing style tiles in responsive design

INTRODUCTION

HI, I’M JASONI'm an a senior digital designer at MacLaren

McCann, and I've been creating digital experiences in Calgary since 2004.

(I design & build websites)

@jaydorn

jasondorn.com

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Style tiles (or guides) are a way of defining the visual language of a web or digital project, and developing a system of reusable elements.

▸ Beneficial when dealing with responsive design as developing literal “pixel perfect” layouts for every page of a site across many breakpoints is not viable.

▸ This talk is not WordPress specific, the techniques can be leveraged for a variety of web/digital projects workflows and development environments.

ABOUT THIS TALK

USING STYLE TILES IN RESPONSIVE DESIGN

THE OLD WAY

▸ Mock up a home page & 1-2 interior pages

▸ Present to client, get sign off

▸ Spend 2-3 weeks meticulously laying out every individual page in photoshop, flowing in approved content

▸ Return to the client with a 20-30 (or more) page PDF for review

▸ Handover for development

USING STYLE TILES IN RESPONSIVE DESIGN

WHY THIS DOESN’T WORK ANYMORE

▸ It doesn’t scale, 30-40 pages X 3 (or more) breakpoints = 100 or more layouts

USING STYLE TILES IN RESPONSIVE DESIGN

AS THE NUMBER OF PAGES TO REVIEW GOES UP, FOCUS GOES DOWN

USING STYLE TILES IN RESPONSIVE DESIGN

STATIC COMPS AREN’T ALWAYS ACCURATE

▸ The expectation of what was laid out in the static comp may not align with the reality of what the browser can & will render.

EXPECTATION REALITY

USING STYLE TILES IN RESPONSIVE DESIGN

SOME PROBLEMS CAN ONLY BE SOLVED IN THE BROWSER

▸ Are we sure these condo units will be a reasonable size on a mobile touch screen?

▸ How does it scale up to a tablet or desktop?

USING STYLE TILES IN RESPONSIVE DESIGN

OPENS THE DOOR TO INCONSISTENCIES & ERRORS

▸ Are we suppose to have 6 shades of blue?

▸ Why is this one border radius different?

▸ Is the logo suppose to be 20px to the left on this one page?

▸ Are we using this image asset anywhere else?

USING STYLE TILES IN RESPONSIVE DESIGN

A BETTER WAY OF GETTING JUICE FROM AN ORANGE… OR SIGN OFF FROM A CLIENT

STYLE TILES TO THE RESCUE! DEFINE YOUR VISUAL LANGUAGE UP FRONT

▸ Before showing a homepage or any interior pages, lead with a style tile.

▸ Rationalize & explain the smaller pieces of the language before showing the whole.

▸ Get buy in on the ingredients before the finished dish.

USING STYLE TILES IN RESPONSIVE DESIGN

ELEMENTS OF A STYLE TILE

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Typography is defined in terms of potential usage separate from the literal content.

▸ Include headings, paragraphs, ordered/unordered list, excerpts, pull quotes, text links.

▸ Can include notes for development such as type delivery system & RGB value

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Colours can be defined as primary, secondary, tertiary, and accents

▸ Buttons are defined by usage and include hover states.

▸ Include smaller elements such as icons

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Expand into other brand elements such as photo treatments & textures.

▸ Or custom illustrations that will be used throughout the site.

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Design content buckets that can be reused across multiple device breakpoints.

▸ Include interaction patterns such as hover and focus.

▸ You don’t always need to redesign components for individual breakpoints.

▸ Many times what works on mobile, will work on desktop as well.

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Layout a sampling of pages which show the individual elements from the style tile in context

USING STYLE TILES IN RESPONSIVE DESIGN

ITERATE THE STYLE TILE ALONG WITH THE SAMPLE LAYOUTSUSING STYLE TILES IN RESPONSIVE DESIGN

ITERATE THE STYLE TILE ALONG WITH THE SAMPLE LAYOUTSUSING STYLE TILES IN RESPONSIVE DESIGN

CREATING A STYLE TILE

USING STYLE TILES IN RESPONSIVE DESIGN

FREE PHOTOSHOP (PSD) TEMPLATE

HTTP://STYLETIL.ES/

USING STYLE TILES IN RESPONSIVE DESIGN

USING STYLE TILES IN RESPONSIVE DESIGN

USING STYLE TILES IN RESPONSIVE DESIGN

USING STYLE TILES IN RESPONSIVE DESIGN

CRAFT PLUGIN FOR SKETCH & PHOTOSHOP HTTPS://WWW.INVISIONAPP.COM/CRAFT

USING STYLE TILES IN RESPONSIVE DESIGN

STYLEGUIDES.IO HTTP://STYLEGUIDES.IO/EXAMPLES.HTML

USING STYLE TILES IN RESPONSIVE DESIGN

AFTER CLIENT SIGN OFF

▸ Development can begin by applying the style tile elements to HTML/CSS

▸ HTML version becomes a living document that can be referenced by the team

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Further creative changes are tracked in the style guide

▸ New components & modules can be added as needed.

USING STYLE TILES IN RESPONSIVE DESIGN

WORDCAMP.JASONDORN.COM

WRAPPING IT UP

USING STYLE TILES IN RESPONSIVE DESIGN

THE OLD MODERN WAY▸ Mock up a style tile along with home page & 1-2 interior pages

▸ Present to client, get sign off on the design system

▸ Spend 2-3 weeks meticulously laying out every individual page in photoshop, flowing in approved content

▸ Start front end development with the style tile as your base

▸ Return to the client with a 20-30 (or more) page PDF for a dev link for in browser review

▸ Handover for development. Develop new components & layouts in tandem with development

USING STYLE TILES IN RESPONSIVE DESIGN

▸ Style tiles save time & effort up front

▸ They help maintain focus for project stakeholders

▸ Help maintain consistency in design elements

▸ Can allow for development to begin sooner, and maintain consistency by making design decisions in the browser

▸ Clients love them, developers love them, you should love them too

BENEFITS & CONCLUSIONS

THANK YOU!Any questions? Beefs or bouquets?

▸ Icons

▸ entypo.com

▸ thenounproject.com (Creative Stall, Viktor Vorobyev)

▸ Photography

▸ unsplash.com

▸ Clients & Agencies

▸ Flipp Advertising Inc

▸ Home Evolution

▸ Dalmatian Fire Services

▸ XONE Crew

▸ Canadian Base Operators

▸ Spec Perforation

▸ Steps by Bridgeland

USING STYLE TILES IN RESPONSIVE DESIGN

CREDITS