View
534
Download
0
Category
Preview:
Citation preview
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
Recommended