FREE! ● Extended
EXCLUSIVE ECOMMERCE GOODIES, WORTH $200!
trial ● 8 ebooks ● UI kit
The voice of web design
Issue 281 : July 2016 : net.creativebloq.com
MASTER PIXATE FOR PROTOTYPING Create Material Design mockups for mobile
BUILD SCALABLE GRID SYSTEMS Set up a grid that adapts to all screens
PROJECT
Reveal and hide a menu with CSS animations
Welcome
Welcome
editor’s note
A few months ago frontend developer Una Kravets sent out a plea on Twitter for someone to start giving a talk about finances at conferences. She’s right. It’s all well and good being on top of the latest trends and tools, but money management is just as important. Whether you’re a freelancer or running your own studio, you’ve got to make a living, and nobody wants to get ripped off, do they? So this issue we’ve invited several experts to help you master the financial side of web design. For example, our Cover Feature deals with building a profitable design business. Its author, Brad Weaver, managing partner of agency Nine Labs, will give a talk and full-day workshop about this very subject
at Generate London in September (www.generateconf. com/london-2016), which we highly recommend. Elsewhere in this special issue, we look at getting the most out of ecommerce, finding the right pricing strategy and increasing your sales. That’s not all: we have teamed up with Shopify for an exclusive resource pack. It includes an offer to extend your trial by one month (worth $179) as well as a UI kit and several ebooks on topics like shipping and fulfilment and email marketing. Enjoy!
Oliver Lindberg, editor oliver.lindberg@futurenet.com
Featured authors Brad Weaver
Ale x O’Byrne
Rachel Nabors
TOBIAS Ahlin
Brad is chief experience officer at Nine Labs, and the author of business startup guide Creative Truth. On page 68, he explains how to build a profitable design business w: ninelabs.com t: @sbradweaver
Alex is co-founder of Shopify design experts WeMakeWebsites. You can read his tips for increasing orders through your online store on page 76 w: wemakewebsites.com t: @philosophermail
Rachel is a UI animation consultant and an invited expert at the W3C. On page 103 she explores the new Web Animations API w: rachelnabors.com t: @rachelnabors
Tobias is a designer, developer and teacher, with stints at GitHub and Spotify on his CV. He reveals how to toggle a menu with CSS animations on page 84 w: tobiasahlin.com t: @tobiasahlin
july 2016 3
@netmag
/netmag
Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 flickr.com/photos/netmag netmag@futurenet.com net.creativebloq.com
medium.com/net-magazine
EDITORIAL
Editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, Art editor Rebecca Shaw rebecca.shaw@futurenet.com
EDITORIAL CONTRIBUTIONS
Tobias Ahlin, Marc Anderson, Hazel Bolton, Jason Blumer, Tom Grattan, Cody O’Brien, Alex O’Byrne, Christian Holst, Kate McHugh, Christopher Murphy, Rachel Nabors, Sam Kapila, Levin Mejia, Mark Robbins, Julia Sagar, Nicholas Santillo, Marcel Schmidt, Jack Skeels, Mani Swiatek, Kylie Timpani, Ray Villalobos, Brad Weaver, Keir Whitaker, Bryan Zmijewski
ART CONTRIBUTIONS
Daniel Byrne, Martina Flor, Ben Mounsey, Sébastien Thibault, Bryan Tan
MANAGEMENT
Editorial director: games, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com, Group art director Rodney Dive rodney.dive@futurenet.com
CREATIVE BLOQ Global editor-in-chief Dan Oliver dan.oliver@futurenet.com, Managing editor Craig Stewart craig.stewart@futurenet.com, Content manager Kerrie Hughes kerrie.hughes@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com COMMERCIAL Commercial sales director Clare Dove clare.dove@futurenet.com, Senior advertising manager Sasha McGregor sasha.mcgregor@futurenet.com, Director of agency sales Matt Downs matt.downs@futurenet.com, Head of strategic partnerships Clare Jonik clare.jonik@futurenet.com CIRCULATION Trade marketing manager Juliette Winyard juliette.winyard@futurenet.com PRODUCTION Production controller Nola Cokely nola.cokely@futurenet.com Production manager Mark Constance mark.constance@futurenet.com LICENSING Senior licensing and syndication manager Matt Ellis matt.ellis@futurenet.com
NEXT ISSUE ON SALE 16 JUNE 2016 All contents copyright © 2016 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be reproduced, stored, transmitted or used in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. Registered office: Registered office: Quay House, The Ambury, Bath, BA1 1UA. All information contained in this publication is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. You are advised to contact manufacturers and retailers directly with regard to the price and other details of products or services referred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not responsible for their contents or any changes or updates to them. If you submit unsolicited material to us, you automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine, including licensed editions worldwide and in any physical or digital format throughout the world. Any material you submit is sent at your risk and, although every care is taken, neither Future nor its employees, agents or subcontractors shall be liable for loss or damage.
We are committed to only using magazine paper which is derived from well managed, certified forestry and chlorine-free manufacture. Future Publishing and its paper suppliers have been independently certified in accordance with the rules of the FSC (Forest Stewardship Council).
COLOPHON 4
july 2016
APPS USED
Google Docs, Photoshop, Dropbox, FutureSource, Illustrator, InDesign, CodePen, GitHub
PAPER
COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm
TYPEFACES
Antonio, Share Tech, Merriweather, Titillium Web
contents Issue 281 : July 2016 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Jennifer Dewalt gave up her day job to embark on an epic coding challenge
Clients from hell
17
BEYOND PIXELS
20
Need list
21
Event report
22
A pregnant illustrator faces a client with an attitude that she wasn’t expecting
Workspace
18
With its yoga mats and giant beanbags, Fractl’s Florida home offers space to work and to relax. Nicholas Santillo shows us round
Mani Swiatek uses screen printing to bring a new dimension to her design work
The stuff we want, including a minimalist phone that blocks out distractions
Tom Grattan shares inspiration and insights from Generate New York
voices As fast as the slowest
Jack Skeels takes a look at why speed doesn’t always equal efficiency
26 VOICES
The leadership revolution 28
Bryan Zmijewski explores how business owners can embrace a design-led approach
Value Pricing secrets
37
Big Question
38
Jason Blumer on the sacrifices you’ll have to make if you switch to value pricing
No one wants to go over budget. Seven experts share their tips for accurate pricing
Q&A
Spotify user researcher Razan Sadeq explains how to get the best insights
6
july 2016
41
INTERVIEW
32
GV’s design partner Braden Kowitz shares insights on the five-day sprint method and explains what’s so interesting about working with startups
SUBSCRIBE to net and save up to 47%
Take advantage of the Print and digital Bundle Turn to page 24 to find out more Want the Pro package? Turn to Page 51
Contents regular
GALLERY
44
In this ecommerce special, Christian Holst celebrates the sites that are getting it right when it comes to online sales
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Jen Simmons, Jamie Kosoy, Cat Noone and Micah Godbolt share advice
Showcase
design Challenge
52
Focus on
57
profile
58
how we built
64
Designers mock up online business tools
Sam Kapila on designing food websites
Stripe’s former CD Ludwig Pettersson
free Ecommerce goodies
See page 96
A site refresh for New York’s Met museum
PROJECTS Css animations
84
Pixate
90
Pricing
94
Head to head
97
Responsive grids
98
Web Standards
103
CSS emails
108
Accessibility
114
Tobias Ahlin shows you to reveal and hide a icon with the help of CSS animations
Features
Cody O’Brien explains how to prototype a Material Design button with Pixate
Build a profitable design business 69
10 ways to increase your sales 76
Brad Weaver runs through the pricing skills you need to know to ensure your business stays profitable
From forgetting SEO to using top product photography, Alex O’Byrne shares 10 tips for boosting your sales
Project
5 ways to power up your shopify themes 104
Keir Whitaker and Levin Mejia share their tips for getting the most from your Shopify themes
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
Christopher Murphy shares four strategies for making sure you get your pricing right
Ray Villalobos on Bootstap and Foundation
Marc Anderson walks through his system for ensuring layouts scale effectively
Rachel Nabors on the Web Animations API
Mark Robbins explains how to create interactive email campaigns with CSS
Hazel Bolton considers online checkouts
july 2016 7
Mail, tweets, posts and rants CONTACT US
@netmag
CSS ORIGINS net: We recently republished an interview with Håkon Wium Lie on our Medium channel, which you can read at netm.ag/lie-281. Here are some of your comments: When you wrote “Lie realised” [that designers would need a bridge between the meaning of the elements
/netmag
netmag@futurenet.com
on a web page and their presentation], surely you do not think that this ‘realisation’ – that styling text is a necessary component of any document-sharing system – was a breakthrough idea, or that Lie was the only person who ‘realised’ it, let alone the very first? Several desktop publishing systems (and even mere word processors) routinely deployed style sheets by that time, and most of those style sheets were designed more solidly than CSS. Moreover, in the following part [you describe CSS as being] the only way that HTML could have “saved itself” by incorporating styling? Simply ridiculous. As it turned out , CSS is a rickety foundation ... to the point where it now needs to be scrapped entirely if
net.creativebloq.com
UX challenge Yunmie Kim put together this detailed blog post explaining the thought process behind her Design Challenge entry (netm.ag/kim-281)
we really and truly want to “save the web”.
bowerbird, Los Angeles, US net: The realisation described was intended purely to refer to that of a need for a language like CSS as a complement to HTML, as we hope was clear from the context of the article. I always enjoy reading about the early days of tech, especially the web. We can learn a lot from the early innovators who laid the groundwork for what we do today. Great article!
Nick Novak, Michigan, US
UX INSIGHT
Interview insights Web pioneer Håkon Wium Lie is credited with inventing CSS and shaping the internet as we know it. Read our interview at netm.ag/lie-281
8
july 2016
medium.com/net-magazine
net: If you want an insight into the thought processes underlying UX design, check out Yunmie Kim’s blog post on her entry in
issue 279’s Design Challenge (netm.ag/kim-281), in which we asked our contributors to redesign a theatre website. In the post, Kim discusses her single-page solution for booking tickets online, explaining her research into current methods of selecting seats within an auditorium – and why they fail users. Don’t forget, we’re always on the hunt for talented people to take on our design challenge, so get in touch if you’re interested!
SASS SCRABBLE I recently built a website for my wedding which has a Scrabble theme, and whilst doing so I made a library of (responsive) Scrabble tiles: netm.ag/scrabble-281. I’d appreciate your feedback! @theonico85, London, UK
Network THE POLL
How do you accept payments on a website? Authorize.Net 2%
Dwolla 1%
Ecommerce solution (WooCommerce/ Shopify) 2%
Bitcoin 1%
WorldPay 4%
PayPal 44%
COOL Stuff We learned This month Accessibility sci-fi
Christian Heilmann provides a rundown of the most exciting accessibility tools being developed at Microsoft, some of which almost seem like science fiction. For example, one app uses Microsoft’s Computer Vision API to analyse the content of camera images in order to let blind people know what’s happening around them. netm.ag/heilmann-281 Brutalist websites
Other 11%
Stripe 35%
From our timeline
What is the secret to a successful web design pitch? Reiterate the client’s problems and emphasise how your design solves them. @charlieohdesign Be friendly, be genuine. @muzzlehatch_
It’s all about the money. Do your SEO research and sell the actual value of potential traffic. @BenAcheson
Be able to explain every thought behind every bit of design. @rexuwebdesign Chemistry with the client team. Those intangible interactions build trust and enthusiasm. @jessekorzan Honesty, realism and sticking to your guns on timescales. @getnorthern
Don’t. Seriously. Instead ask the customer what their problem is, why their current site doesn’t solve it, then shut up and listen. @frontendben You have to believe in the work you’re presenting and be as invested in its value to the client as they are. You can’t phone it in. @thepixelgrid Be yourself. If you sell yourself and connect with the client you stand a very good chance. @simonrjones
Providing an antidote to the slick, samey websites that are commonplace today, the sites in brutalistwebsites. com’s collection are rough around the edges, and hint at nostalgia for the web’s messy beginnings. The site’s blurb describes it as a reaction to “the lightness, optimism and frivolity of today’s web design”. Compassionate UX
Sometimes we’re so focused on how what we build can be used for good that we don’t give much consideration to how it could hurt someone if things go wrong. Google’s recent ‘mic drop’ snafu is a perfect example. This article explores the need to test edge cases and failure modes to avoid design disasters. netm.ag/ compassion-281
july 2016 9
Send your questions to netmag@futurenet.com This month featuring... Jen Simmons Jen is a designer advocate at Mozilla, and host of The Web Ahead podcast w: www.jensimmons.com t: @jensimmons
Practical advice from industry experts
QUESTION OF THE MONTH
What kind of grid system would you recommend to use for a web app project? Peter Javorkai, Budapest, HU
Jamie Kosoy Jamie is founder and technology director at Arbitrary w: www.arbitrary.io t: @jkosoy
Cat Noone Cat is a designer, advisor, speaker, and co-founder of alert app Iris w: www.heyimcat.com t: @imcatnoone
Micah Godbolt Micah is a frontend architect and creator of SassBites w: Micah.codes t: @micahgodbolt
Mix it up Tools like Gridset can help you explore different layout options for your pages
JS: I don’t have a specific recommendation for an ‘app’ or a ‘non-app’ website. For any kind of project, I believe it’s best to take a look at your idea, your content and your users, and come up with a custom grid that best displays what you are doing. There’s a century of graphic design to tap into. Play with columns that are different sizes, perhaps based on the golden ratio. Try out odd numbers. We don’t have to always have 12 symmetrical columns; different grids create different feelings. Gridset is a great tool for playing with column lines. Once you’ve planned your grid, you can use any number of tools to implement it using current CSS. Gridset will give you a CSS library and Sass mixins, or you can roll your own. In the future we’ll be able to design a custom grid, and use CSS Grid to implement it very easily. Product design
Key parts What are the most important parts of your product design process?
Adam Morse, London, UK
10
july 2016
CN: This is a hard question because they all play their own individual and crucial role. If I had to choose, I’d say research/ testing and QA. Without that, you’re essentially designing blind, and you’ll
Q&As compile is just CSS. So if we can’t do it with CSS, we can’t do it with Sass, and that includes element queries. If you are anxious to put element queries to good use in your design system, look at some of the great lightweight JavaScript plugins like eq.js (netm.ag/eq-281) or css-element-queries (netm.ag/element281). I’ve seen these used in high-profile websites, and have used eq.js in my own projects with great success. CSS Layout
3 simple steps What learning resources do you recommend for someone getting started with product design? Femke Vs, Amsterdam, NL CN: There are three different approaches I’d suggest.
CONVINCING THE BOSS
Layout advice Jen Symmons frequently speaks at events to offer guidance on layouts
end up wasting resources and time (which equals money). You run the risk of compromising the experience for the user. Prototyping
Why bother? Why prototype at all?
Markus Freise, Bielefeld, DE JK: I love this question. There are many reasons. Loose requirements tend to freak out developers. Managers often have a desire to create a unique, innovative product, but feel the risk of investing time and energy in untested ideas. Designers want to be thoughtful and creative, but also mindful of feasibility. Anything undefined within these roles leaves a kind of fear, and that’s where a product can fall flat. Prototyping is all about removing that ambiguity. Prototypes are low risk, but also concrete. Anyone can make them, and everyone can weigh in on them. When embraced by everyone, they can transform the entire decisionmaking process. CSS
Element queries Is there a way to implement element queries in Sass?
PXL Agency, Columbus, OH
MG: As much as we feel that Sass has magical powers, the end result of a Sass
How do we convince the boss to follow all the wonderful advice from your conference presentations?
Radoslav Sharapanov, Sofia, BG
JS: Thank you for your kind words. You could have them watch the videos of my presentations (jensimmons.com/ speaking) and maybe I’ll convince them! Learning new coding methods is hard; having fresh ideas, getting out of our ruts, and convincing stakeholders are all much harder. I recommend choosing one idea and creating a prototype in HTML and CSS. Keep it simple. Lay out some piece of something, show it to people, and get their imagination flowing. If you can’t get a big meeting, walk up to the right person in the hall carrying a tablet. Strategise about who to convince and what will persuade them. And then do that.
The Shape of Design
Not only is Frank Chimero’s writing magical, the chapters cover any and everything you need to create something truly great. The book is beautifully made from cover to last page.
Sketch
Prototyping
Prototyping perks Does good prototyping mean less development time?
Kenneth Doory, Colorado, US
JK: Absolutely! Think of it like porting an app. Going from one platform to another is easier than coding from scratch because all the hard stuff is already figured out. All that’s left is to translate. Prototypes figure out a lot of hard stuff in design, UI and application flow. They often unearth stuff missed in wireframes or design, too. For example, prototypes can more accurately suggest things like the way menus appear, or how a user transitions from section to section. Clearing up that murky stuff frees up engineers to translate.
Between the simple UI, plugins and integrations, this is the go-to tool for UI design – be it wireframes or full-on visuals.
A mentor
Find someone who has experience and some time to help you get where you need and want to be as a product designer. It is a resource like no other.
july 2016 11
exchange Q&As CSS Layout
FLOATS vs FLEXBOX vs GRID When is it best to use floats for layout, and when is flexbox better?
James Fox, UK
JS: We will still use floats even when all our layout CSS has changed. Floats are great when you want to take an item, float it off to one side, and have the content that follows flow around the floated item. Combine this with CSS Shapes, and you can do some interesting things. Flexbox is useful when you have a line or list of items, and you want to control the way they distribute available space in a single line or a wrapped line. Grid is best when you want to control the layout of items in two dimensions. Prototyping
Tool options There are so many prototyping tools on the horizon right now. Which do you like the most, and why?
Peter Javorkai, Budapest, HU
JK: InVision is a good choice if you’re stronger in pixels than code, but I like to make my prototypes from scratch. There are lots of tools to iterate quickly now, like CodePen (for the web) and Swift Playgrounds (for iOS). Using raw source code keeps me sharp as a developer and fearless as a designer. Off-the-shelf tools can quickly make your thing look as good as anything else out there, but prototyping on your own terms is much more empowering. If you believe there’s
Working together Not all frameworks and tools play well together – sometimes it’s better to go without
a correlation between great design and creative freedom, like I do, you’ll find it’s worth the extra effort. CSS Layout
LAYOUT IS HARD Why is layout still so difficult?
Annukka Leppänen, Helsinki, FI JS: When the web was first invented, there were zero tools for changing the layout of the page. Since then, we’ve come up with many different approaches, but we’ve always had to squash our creativity to fit within the technical limitations. And we’ve struggled with the code, reaching for third party tools instead of relying on our own skills. Writing layouts in CSS is the hardest thing you can attempt to do. Or it was. That’s all about to change. We won’t have one new tool; we are getting many. Flexbox is already here. Grid is on its way. And once we learn these tools, layout will be much easier. Product design
beta testers How do you approach beta testers and encourage them to give meaningful feedback/keep them engaged?
Marius Küng, Basel, CH
Prototyping options Tools like CodePen help you keep your coding skills sharp
12
july 2016
CN: In my experience, the best beta testers are the ones who truly have a need for the product, and those who have no idea what the product can do. Complete polar opposites. The users who have
a need for the product will want to provide meaningful feedback significantly more than the average individual, because its existence is beneficial to them. But ultimately, whether they continue to engage is contingent on whether or not the product is something they can grow attached to. Regardless, the best way to find testers is to reach out wherever your target market is. Tap into those communities. CSS
React issues I’m a big fan of Bootstrap and Foundation but they do not work well with React. I’ve tried the npm hacks and they are just not good. Thoughts? Should I stick with Material, or is there something else better that works with React?
Philip John Basile, New Rochelle, NY
MG: The first question we should ask ourselves is: Does the effort we put into finding and using a framework justify what we get out of it? If you haven’t read ‘You might not need a framework’ by Belén Albeza (netm.ag/need-281), you should certainly give it a look. But if your work is full of repetition that would benefit from a framework, and the current offerings don’t work well with React, you might be better off rolling your own. Just start out with a solid grid, create some boilerplate templates, and add a few third party React modules for complex interactions.
SAN FRANCISCO 15 JULY 2016
Learn about SVG animations, design sprints, modern workflows and more, from the likes of Mike Monteiro, Lyza Gardner, Wes Bos and Braden Kowitz
SYDNEY 5 SEPTEMBER 2016
The first time in Oz! The show features John Allsopp, Nick Finck, Erika Hall and Zoe Gillenwater, and will explore flexbox, animation and responsive web apps
LONDON 21-23 SEPTEMBER 2016
A two-day, one-track event, plus a whole day of handy workshops! Speakers include Ida Aalen, Jeff Veen, Brendan Dawes and Mike Kus
TICKETS ON SALE NOW
www.generateconf.com
People, projects & paraphernalia
THIS MONTH FEATURING...
SIDE PROJECT OF THE MONTH 16
Jennifer Dewalt gave up her day job to embark on an epic coding challenge
BEYOND PIXELS
20
Mani Swiatek uses screen printing to bring a new dimension to her design work
CLIENTS FROM HELL
17
NEED LIST
21
A pregnant illustrator faces a client with an attitude that she wasn’t expecting
The stuff we want, including a minimalist phone that blocks out distractions
WORKSPACE
18
EVENT REPORT
22
Fractl’s HQ offers space to work and to relax. Nicholas Santillo shows us round
Tom Grattan shares inspiration and insights from Generate New York
july 2016 15
FEED
Side project
180 WEBSITES
Jennifer Dewalt quit her day job to embark on an epic self-taught crash course in coding SIDE PROJECT OF THE MONTH
INFO job: Founder, Zube.io w: jenniferdewalt.com t: @JenniferDewalt
net: Tell us a bit about your 180 websites in 180 days (jenniferdewalt.com) project ... JD: I had been working on the design side of things, and I got really interested in building software. I decided to learn to code, but I knew I wasn’t going to be successful unless I was fully committed to it. So I decided to quit my job and make one website a day, every day for 180 days. I would journal my progress in a blog and publish my code on GitHub. net: Tell us about the first website you made ... JD: It was the homepage (jenniferdewalt.com). It’s just a few of lines of HTML and CSS but it took me the entire day to put together. When I look back on it now, I wonder exactly what it was that I found so confusing. I also remember being super-proud that I managed to position the ‘Little Jen’ icon where I wanted it. net: Did you face any unexpected challenges? JD: Figuring out how to crank out a website every day when I had other obligations to attend to. My sister got married during the project and I ended up having to fly across the country three times. The first trip
16
july 2016
was a mess. My approach until then had been to code as quickly as possible until I ran into a question I didn’t know the answer to, then I’d just Google it. The planes didn’t have internet so I got stuck very quickly. I was also trying to code on a tiny laptop, which is very challenging when you need tons of reference materials on the screen. The next trips went more smoothly. I figured out how to plan my time better and started bringing a monitor with me wherever I went. net: What did you do when you’d finished? JD: Day 180 was pretty emotional for me. I was stoked that I had accomplished my goal but it was also kind of bittersweet. The project was such a huge part of my life it was weird to think that it was over. I spent the next few weeks relaxing, but it wasn’t long before I started feeling the urge to code again. By the end of the month, I decided to get back to learning and started working on an idea for a restaurant recommendations site called YumHacker. net: At what point did you think you’d really ‘made it’, and could call yourself a coder? JD: The 180 Websites project was a great starting point since it allowed me to explore tons of different coding concepts, but working on one-day timelines meant I knew a little bit about a lot of things but I didn’t have mastery over anything. If I wanted to become a professional developer I needed to tackle a full-stack project, which is where YumHacker came in.
Feed
HOW TO
WORK WITH A PRODUCT TEAM Our Twitter followers offer their tips for forming a successful partnership with your product team
COLLABORATE
UNEXPECTED RESPONSE Exclusively for net: the latest in a series of anonymous accounts of nightmare clients
Illustration: Sébastien Thibault sebastienthibault.com
CLIENTS FROM HELL At the end of a project, a client wanted to celebrate and suggested a round of drinks. I declined, and the client guessed (correctly) that I was pregnant. I confirmed, and told him I was due in June. Normally I wouldn’t share this kind of personal information, but I decided to let him know because it was going to affect my work schedule. He congratulated me and assured me they were pleased with my work and they’d keep me on through the pregnancy. Fast-forward to May:
A week later I got another email.
Client: We’re very happy with the feedback on our last project and would like you to do several illustrations for our next publication. Me: I am glad to hear that! Unfortunately, I won’t be taking on any new projects until September. Client: Oh right! I forgot about your baby break. Well, we need to spend a few months on research for that publication anyway, so we’ll get back to you at the beginning of June.
I received three more emails from this client. In June.
This reaction was so much better than I was expecting – I had been certain he would just find a different illustrator.
Client: OK, we’re going start working on this project in June. We need the illustrations ASAP. Me: Sorry, but I will absolutely not be able to work in June. Client: I thought you were keen to do this project. Me: I am, very much so. However, as I’ve already said, I can’t take on any work before September. Client: Right, you’re pregnant. Well, I’m glad you have priorities. Take care of yourself.
Client: Hey, just wanted to touch base on the project. Client: Hey, sorry for the second message. Did you get my first email? We really need to get rolling on the project. Client: Oh, right. The baby thing.
clientsfromhell.net
Remember that the creation of a successful product is a joint effort. “Think ‘collaborate’ at every turn,” says @CWwebsites. As well as the product team, you need to get users involved from the start. “User test all your design ideas and assumptions early,” says @sgolubev. “Share feedback often and iterate.”
TALK FACE-TO-FACE Digital technology has given us new ways to keep in touch, but doing things face-to-face is often best. “Stop communicating through tools,” advises @CHEWX. @karstenrowe agrees: “It’s about individuals taking the responsibility to communicate well.”
INTERPRET INTENT Different people have different ways of communicating, so take care when interpreting requests. According to @thepixelgrid, the key is “Listening carefully ‘between the lines’ to gather their real requirements”. “Understand that each team member brings unique skills to the table,” says @evb_ design. “Even if everyone speaks a different language, communicate!” And remember there are some things everyone understands: “Buy them doughnuts!” suggests @David_Hicks.
july 2016 17
5
3
2 1
4
Nicholas Santillo whisks us around the modern but mindful Florida home of his digital agency, Fractl workSPACE Our 4,000 square-foot Fractl headquarters is located in Delray Beach, Florida. We work in a bi-level industrial warehouse converted to a casual and open office environment. The office features polished concrete and rustic wood floors, subway tile backsplashes and glass partitions. We’re 10 minutes from the ocean and less than an hour from Miami. Our quiet loft space offers the team a relaxing spot to do their best work. We have large, plush couches where people can stretch out and enjoy the change of scenery, and the huge beanbags [1] are another staff favourite. It’s also
18
july 2016
a great space to hold informal team meetings. The team loves to take breaks with friendly (yet very competitive) ping pong matches [2]. It’s a perfect place to meet other team members and have some fun while giving our minds a rest. We supply yoga mats [3] here at the office to encourage our team to think about the relationship between their minds and bodies, and how that impacts their work. We offer free yoga every Friday on the beach – we’re pretty lucky to be so close to the sea! While we get a lot of our daily inspiration from the internet, we have many books [4] around our
workspace for the team to peruse and find new ideas for their work. Here we have two of our favourites: How to Win Friends and Influence People and Infographics: The Power of Visual Storytelling. This original poster [5] was created and gifted to our Delray office by our design team in Lima, Peru. ‘Sé que pronto volverás’ translates to ‘I know you’ll come back soon’. This is a distinctive design style called ‘chicha’ that has been made popular by young Limeños who have taken over the art and design scene in the Lima district of Miraflores. We have such a talented team of designers, and whenever I see this it just reinforces the fact that while we’re thousands of miles apart, the creative spirit of Fractl spans the world. PROFILE
Miami nice
Nicholas (@nick_santillo) is president of content marketing agency Fractl. Its campaigns have been featured everywhere from MTV to Wired
FEED
Beyond pixels
Stuff I like
Je any Ngo
Experience designer www.jeanyngo.com
Learn squared Learn Squared offers non-traditional creative courses like title design and concept art. You can learn at your own pace or receive personalised guidance. Through it, I’ve made some great projects, connected with amazing creators and discoved new perspectives. www.learnsquared.com
Twitch Twitch has a growing community of creators in its Creative streams category. I like to watch and interact with established designers and artists live. It’s humbling to see them face struggles and triumphs throughout their process, just as I do. netm.ag/twitch-281
20
july 2016
Screen printing
This month … Mani Ś Swiatek explains the appeal of creating bespoke, hand-printed textiles and wallpaper beyond pixels I was standing in a corner. I had a small table to myself, with my paints, squeegee, a bunch of T-shirts, and a screen with my first hand-drawn designs, exposed a few minutes ago. There were six other people there, but I didn’t pay attention to them. I couldn’t hear anything apart from my own thoughts. I was in a flow, and time and place didn’t matter. I was making something with my hands, experiencing the process of creation without a computer. That was four years ago at my first screen printing workshop. Now, almost all my clothes are hand-printed. I like it when design has an extra dimension – rather than hanging them on the wall, I can actually wear my designs. This is also why, at home, I now have printed curtains, cushions, and even sets of pencil cases. Screen printing became my close friend. With my partner Justyna Medon, I set up Addicted to Patterns, a multidisciplinary Bristol-based studio that specialises in hand-screen printed wallpapers and textiles, photography – and, of course, web design. I’m responsible for the digital part of the business, and Justyna is our art director and master of the print craft. Having a professional printmaker at home means we have all the equipment we need to print whenever we feel like it, and I have access to free printing classes 24/7.
Discovering screen printing was a groundbreaking moment for me. Printing needs patience, precision and order – things which I’ve had problems with. While writing code, I used to work fast and a bit messily, just to check if it worked, then tidy up later … or perhaps never. Not any more. With screen printing there is a process you must follow. Each task needs to be carried out in the right order, and any shortcuts you take will only make more work later. Screen printing taught me that every minute and every tool must be respected. There’s no Ctrl+Z; there’s no saved copy. You need to be 100 per cent engaged in what you’re doing. You need to plan ahead to ensure the pattern is in the right place, taking into account surface details like stitches, which can cause the paint to smear. I’m now thinking about a web design project that will show my passion for screen printing and allow other people to experience it through UX. A bit crazy, I know, but I think it’s possible!
PROFILE
Pinterest I often find myself happily lost down the Pinterest wormhole. Every new image I open branches me into several more. Pinterest allows for limitless brainstorming and tangential thinking, and helps me collect and form ideas. www.pinterest.com
Mani (@mani_mess) is a web designer and frontend developer, and co-founder of multidisciplinary creative studio Addicted to Patterns (addictedtopatterns.uk)
Need list
NEED LIST
STUFF WE WANT Small objects of web design wonder: from helpful Sketch stickers for your keyboard to a phone that cuts out all the distractions 1
THE UI AUDIT
2
$49
4
LINGO
SKETCHKEYS
3
$11
GETTING STARTED WITH CODING
5
VARIOUS
BUILDING GREAT STARTUP TEAMS
£8.99
6
$28.47
LIGHT PHONE
$100
What we think (1) A concise, no-fluff guide to UI and UX issues, written by consultant Jane Portman (uibreakfast.com/audit). (2) Jumped on the Sketch bandwagon but having trouble getting up to speed? Learn your shortcuts by sticking these aides-memoire to your keyboard (sketchkeys.com). (3) Help launch the next generation of devs with Camille McCue’s For Dummies-style guide to coding for kids (netm.ag/mccue-281). (4) Store all your design elements in one place with this stylish new OS X desktop app, with drag-and-drop support for Sketch, and Adobe and Apple tools (lingoapp.com).
(5) A clear introduction to attracting, selecting and retaining good staff, by Huddle’s Dean Hume (buildingstartupteams.com). (6) This ‘phone away from phone’ filters and forwards just the important messages, for when you want to cut out the background noise (thelightphone.com).
july 2016 21
FEED Events
Generate nEW YORK
From open dialogue to cohesive design, net’s New York event provided lots of food for thought for Tom Grattan Event report
As a design studio based in the north of England, we’re always looking for ways to expand our knowledge to better compete with the tech hubs in the south. Digital has been a big drive for the studio following our rebrand to ‘Factored’ in January. I’d be lying if I said Generate New York didn’t grab our attention due to its location, but this trip was about giving us direction in what we’re trying to achieve, and providing us with inspiration in what is one of the greatest
PROFILE
Photography: Daniel Byrne www.danielbyrnephoto.com
Date: 22 April 2016 Location: New York, US URL: generateconf.com
22
Tom runs Factored (factored. io), a multidisciplinary design studio in Lancashire. The studio specialises in brand and digital UX/UI
january 2014
cities in the world – a big change from our usual base in Lancaster, with its population of 55,000! We had high hopes for Generate, and it didn’t disappoint. The conference offered two tracks, packed full of practical skills and project advice from top names including Cameron Moll, Jon Setzen and Matt D Smith. The themes of design and the importance of UX/UI were evident during the event. However, the overarching messages were around including good design and accessibility practices throughout projects, and techniques for how to handle clients who have the inevitable fear of change. The day opened with Cameron Moll sharing details of his Authentic Jobs venture, and how he’s refined the experience for users. Moll discussed how the industry should be going beyond responsive design to achieve ‘unified design’. This focuses on creating a cohesive experience, regardless of where the experience
begins and ends – a vision often forgotten by many when trying to design for numerous different devices. Stephen Gates spoke about his experiences at Apple and Citigroup, and how an open dialogue with teams (both client and agency) is the only way to achieve a positive outcome with impact – a point later echoed by Dan Mall. This direct approach has made us think about the attitudes we adopt during projects; working with clients as a team to consider all options, and sticking with our decisions. One of the most refreshing sessions came from Meg Lewis, who spoke about collaborating with her friends at Ghostly Ferns and how she only works with ‘happy’ people. Her positive approach to business and creativity definitely gave us some food for thought in terms of how we can choose who we work with to help build more positive working relationships. Throughout the sessions we picked up plenty of useful tips on upcoming software and tools, including plugins for Sketch (such as Craft), and the development of Adobe Experience Design, which many speakers have contributed to. Was the 12-hour trip of over 3,500 miles worth it? Definitely. We’ve already begun making changes to how we collaborate with clients and our project processes to ultimately improve how Factored works.
Feed
EVENT GUIDE FCSSCONF NORDIC DATE: 1 June 2016 LOCATION: Oslo, NO This one-day conference is for anyone who loves CSS, and is one of three events in Norway in June. Speakers include Håkon Wium Lie and Jen Simmons. cssconf.no
REACTEurope DATE: 2-3 June 2016 LOCATION: Paris, FR With three days of events and over 22 speakers, ReactEurope is shaping up to be unmissable. Enjoy workshops and lightning talks on GraphQL, inline CSS, and of course React. www.react-europe.org
BUZZJS DATE: 3 June 2016 LOCATION: New York, US A one-day conference in the hub of NYC, Times Square, BuzzJS is built for developers who use JavaScript on the frontend, backend, desktop and beyond. buzzjs.com
RUBYNATION DATE: 3-4 June 2016 LOCATION: Washington DC, US RubyNation is the Mid-Atlantic’s annual Ruby event. Keynote talks will come from long-time Rails contributor Aaron Patterson and Linda Liukas. www.rubynation.org
UX STRAT DATE: 9-10 June 2016 LOCATION: Amsterdam, NL With talks from the likes of Keith Tormey and Gianluca Brugnoli, UX STRAT Europe will offer UX, CX, product and service design strategies. www.uxstrat.com/europe
july 2016 23
SUBSCRIBE TO NET GET THE NO.1 CHOICE FOR WEB DESIGNERS AND DEVELOPERS DELIVERED TO YOUR DOOR, YOUR DEVICE, OR BOTH
PRINT EDITION ONLY
Take out a print subscription to net and get your copy before it hits the shops. Each issue is packed with the latest web trends, technologies and techniques
FROM
£16
BASED ON A QUARTERLY DIRECT DEBIT
SAVE UP TO
18
%
DIGITAL EDITION ONLY
Take out a digital subscription to net for on-the-go access to our interactive edition, with streaming screencasts, extra images and more
FROM
£11.25
BASED ON A QUARTERLY DIRECT DEBIT
SAVE UP TO
31
%
Terms & conditions: Prices and savings quoted are compared to buying full priced print and digital issues. You will receive 12 issues in a year. If you are dissatisfied in any way you can write to us at Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK to cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: bit.ly/magterms. Offer ends 30 June 2016
ARE YOU A WEB PROFESSIONAL? GET OUR PRO PACK SEE PAGE 51
PRINT & DIGITAL EDITION
Enjoy a combined print and digital subscription, and take advantage of print as well as exploring the digital experience on the go
GREAT REASONS TO SUBSCRIBE ●
Print edition delivered to your door
●
12 issues in a one-year subscription
●
iPad and iPhone edition download
●
Android edition download
●
Money-back guarantee
FROM
£19
BASED ON A QUARTERLY DIRECT DEBIT
SAVE UP TO
47
%
myfavouritemagazines.co.uk/NETMAG16
Opinions, thoughts & advice
workflow
The leadership revolution
28
Business owners are starting to recognise the power of design. Bryan Zmijewski explores how they can embrace a design-led approach
Interview 32
GV’s first design partner Braden Kowitz explains why startups are the place to be if you want to create a design culture
Q&A 41
We chat to Spotify user researcher Razan Sadeq about the best ways to get insights, and why Sherlock Holmes is her mentor
Go No Faster Than the Slowest Jack Skeels explores why projects run better when teams do the scoping and estimating at their own pace The faster the marketplace moves, the more agencies attempt shortcuts to squeeze out more work in a shorter time. Once they close a deal, business development and top managers typically turn scoping and estimation over to operating managers to speed up the project. That’s a recipe for failure for two reasons. First, the people who really need to understand the work are the team members: they’re the key to the project delivering more value in less time. Second, traditional project management techniques are actually far less effective than many people realise. Researchers suggest success rates (projects that arrive on-time, on-budget, and so on) are less than 50 per cent, and our experience confirms it’s only about 30 per cent in agencies. In our work with over 60 agencies, we’ve proven that the go-faster mentality causes
Opinion
a lot of unproductive motion. True velocity doesn’t come from trying to do everything fast; it comes from teams working to understand and refine scope, and moving at the pace of the team’s slowest member. Once aligned, the teams have an amazing ability to self-manage, and deliver work miles faster than industry norms.
Agencies are like zoos
The go-faster mentality in agencies causes a lot of unproductive motion. True velocity comes from teams working to understand and refine scope visual tools like cards, markers and tape. The results are profound: ●P lans get better: Working methodically through the ‘why, what and how’ facilitates mutual adjustment, in planning and throughout the project ●E stimates get better: Based on our data, ‘surprises’ and overages drop dramatically. Most projects come on or under budget and schedule, with complete (and often superior) capability ●C lients are ‘better behaved’: Clients stay aligned with the team
VAK fr amework Using our modified VAK (visual-auditorykinaesthetic) framework, we teach teams and managers how to present information using a velocity-sensitive process and
This cohesion is a great investment. On small and routine work, payback is small but significant: usually around five to 10 per cent net velocity improvement. On
larger projects (weeks or months), selfmanaged teams outperform traditional teams by 20 to 50 per cent; and much of that drops to the bottom line. In both cases, teams and clients are much happier. Mastering velocity means going the right speed rather than the fastest speed. There are many ways to make this shift. For example, creative teams will be familiar with group facilitation methods that use cards or Post-Its in a round-robin format. Smart agencies will find ways to slow the discussion around scope so teams can take ownership. Then they’ll set new records for speed and quality of production.
PROFILE
The basic agency model – with personnel reporting to multiple managers – is the polar opposite of a team environment. It is a ‘resource-managed’ environment where each person is expected to perform work in a narrow skill range with limited understanding. In agencies like these, the only real team is the managers – but they don’t build things. Ask an agency manager if they learn, scope and estimate faster than most team members, and they will proudly affirm they do. That’s a problem: they don’t think the way the people who build stuff do. We’ve discovered agencies are like zoos: the many and varied creatures within them have widely differing styles of information processing and retention. Most of the ‘skill players’ (non-managers) have slow processing styles, ranking in the bottom quartile in the speed at which they can assimilate information. On more than one occasion, I’ve heard an account person quickly brief a team, with only a few questions being raised. But when we take the same briefing and slow it down, a richness of discussion occurs and the team streamlines execution for a much better outcome. We use a mantra: Go no faster than the slowest. If you’re a fast-moving managertype this can feel like molasses. But we’re talking minutes and hours, not weeks, and the results are enviable. One of the teams we recently trained just finished a threemonth, feature-rich project – the kind that typically breaks deadlines and budget – on time with budget left over.
Jack is a recovering client services executive and CEO of Los Angeles-based AgencyAgile (www.agencyagile.com)
july 2016 27
VOICES Essay
28
july 2016
Essay
Business
The design leadership revolution Illustration by Ben Mounsey
How can business leaders implement a design-led approach within their organisation? Bryan Zmijewski investigates
Design is hot right now. And broken. Executives are being tasked with being design-driven, but don’t have the tools, processes or design systems to sustain this effort. Leaders are embracing design thinking, yet they have not established how their companies will implement their ideas. VCs are telling founders to hire a design leader, but it’s not clear who this mythical, unicorn person is. Designers, it’s your time to step into these problems. Companies are going to continue to embrace more design methodologies because design-conscious firms continue to outperform the market. Designers have two choices: try to solve each problem in isolation, or drive the necessary change with their organisations. Both are doable, but only one solution is sustainable and capable of helping an organisation become design-centric. So what does is it mean to be design-centric? And why must designers lead this change? Here are the three important problems that designers can tackle to start making a difference in their organisations.
Continuous deployment
Disney understands the power of connected experiences. It invested in technology to make the experience of using their park amazing with the MyMagic+ plan (netm.ag/magic-281). Not only did Disney face the daunting task of creating a digital infrastructure that would serve 150k people a day in the park, but it also aimed to present the MagicBand, which guests would use 24/7, throughout the park, as a form of currency. The constraints would constantly change and require real-time updates via the internet. The design work required to pull this off would require heavy cross-disciplinary work between many groups within the organisation. Designers must be a partners with the business to solve these intense problems; it’s not enough to just whip up a design. There are so many moving pieces. Technology will handle a lot of issues, but it’s not enough to introduce new ideas into systems without building patterns to enable flexible outcomes. And speaking of technology – it’s moving faster than users can adapt, so we need to be designing for a technical system as much as we are for the user needs and business goals.
Users have become an integral part of design, often contributing to the creation process as bits fly through the internet. For example, Amazon deploys to a production server every 11.6 seconds. To put this in perspective, if the average visit time on Amazon is over 11 minutes, the site will have changed 57 times in one user’s visit – and that doesn’t even include the learned preferences Amazon is applying in real time!
If design is the rendering of intent, then feedback helps us understand if we have hit the goal. Feedback can come from anywhere. Now collaborative systems like Facebook are so ubiquitous, designers who build them are continuously bringing in feedback based directly on the users that are adding content. Taking it
Collaborative methodologies
july 2016 29
VOICES Essay a step further, the customisation of these systems can make the consumer themselves a designer. They morph the interface in real time, often unconsciously, based on their own behaviours. When product teams open themselves up to feedback and extend the circle of influence in the design feedback loop, amazing discoveries can be made. Slack embraced this customer-centric approach in the early development of its product (netm.ag/slack-281), and it has paid off immensely. Potential customers become integral to the building process and designers get more opportunity to connect the dots. Managers must help their teams embrace processes that can handle this flow of feedback. In order to establish a continuous cycle of improvement, designers must be in the middle of this feedback loop; it can’t be left to decision-makers who may not be able to synthesise ideas. And it’s not OK to just inject ideas into a complex system, because there are too many business requirements and user needs that will be affected.
unstoppably their way. Success breeds success. Studies have even shown that, after even one successful play early on in a game, sports coaches often change their behaviour in favour of a more aggressive strategy (netm. ag/sport-281). Successful coaches are willing to accept small failures to gain this momentum. They understand how to make these bets based on their players’ skill limitations and team abilities. Knowing they can’t completely control every outcome, designers – like coaches – must capitalise on small wins to create a favourable environment. This in turn creates a more positive mood within their teams and produces better results. Science backs this up through the ‘As If principle’ (netm.ag/asif-281).
Step up and lead Creating design value is more complicated than just throwing designers at problems. Growing design-centric organisations requires leaders, but we don’t see enough business structure in place to help companies and
Knowing they can’t completely control every outcome, designers must capitalise on small wins to create a favourable environment. This in turn creates a more positive mood within their teams and produces better results
30
july 2016
designers thrive together. Design leaders need tools and methodologies that overlap with the entire organisation. But they also need to step up and place the burdens on themselves to transform organisations for the benefit of people they serve. They must lead by design and take on more ownership of the business outcomes. Since 1998, we at ZURB have been inspiring people and teams to approach design problems in a different way. We’ve seen the problems facing both designers and organisations and developed a system called Progressive Design. We believe this will help bring design into organisations and train design leaders to create value for their users and business. We’re even writing a book about the insights we’ve learned. With all of the opportunities that stand before us, there’s been no better or more exciting time to be a designer. But in order to have the impact we crave, we must tackle these problems head-on, transform our organisations, and lead by design.
PROFILE
Team psychology Industrialised, rigid production processes aim to remove failure and create a consistent result. Errors in thinking are minimised by taking much of the human element out of the equation. However, this ultimately harms a designer’s development and stifles creativity. The best design happens when we harness the power of empathy and work through failure to propel ourselves forward. Far from being the enemy, failure (and the ability to overcome it) is what fuels great design. It pushes us to solve huge problems, but it must be regulated. Psychologically, too much failure can crush people. Instead of taking on huge failures all at once, we can break them into smaller, digestible chunks. Let’s call that iteration. Teams can further help individuals overcome their own demons by responding to failure with structured debate. This regulates the pressure, stopping it from growing too strong. By keeping failures small and building up confidence by overcoming them as both individuals and teams, we create unstoppable momentum and get into a flow. So where does one start to find momentum in a design process? Sport is a great place to pull from. Psychological momentum is defined as a state of mind where an individual or team feels like things are going
Bryan (zurb.com/bryan) is chief instigator at ZURB, a product design company in California. He has advised over 300 successful startups and companies
VOICES Interview
BRADEN KOWITZ Words by Ruth Hamilton Photography by Brian Tan
The GV partner discusses how design culture is conquering the boardroom, and shares some insights on the five-day sprint methodology
32
july 2016
Interview
INFO job: Design partner, GV t: @kowitz w: www.kowitz.co
july 2016 33
VOICES Interview Right now is an exciting time for design. Huge names like Twitter and Facebook have wholeheartedly embraced it into their culture, and business leaders are starting to see the true impact design can have. One of the companies at the root of this change is GV – recently rebranded from Google Ventures – a company dedicated to providing venture capital to startups. When Braden Kowitz became the team’s first designer in 2010, rumours of this change were already afoot. “It was a time when CEOs had been hearing that design was important, but they didn’t quite know what that meant, ” he recalls. “Many of them didn’t have any designers on staff.” Kowitz had been working as a UX designer at Google, developing products like Gmail and Google Apps, but the opportunity to work with businesses at the start of their journey caught his imagination. “At that stage, design can have a big impact on what the company does and what the company is, ” he says. He explains that although design is now very prominent in tech giants like Google and Facebook, that shift has taken place very gradually, over the past 10 years. “I’m interested in getting into companies when they are three people, or when they’re 10 people. And hopefully those companies will grow up to be at the same scale. We’re creating many big tech companies that have design in their DNA.”
NEW HABITS In the early days at GV, Kowitz would cycle around to the different startups in San Francisco, dedicating a month or so to each, helping them solve problems and guiding them towards a design-led approach. In time, though, it became clear that effecting a real change was no easy task. Kowitz recalls how company founders would ask him how they could embrace design in their business, and he would go in and explain the basic design process and the team they would need. They would nod and agree with everything he said, but very rarely would there be any change in the organisation afterwards. He points out that while altering your habits as an individual is hard, altering the habits of an organisation is much harder. The solution, although it would take a while to fully mature, was to develop a process
Interview
that any company could follow: the five-day design sprint. The methodology lays out a way for companies to solve any design problem within the course of one working week, and has been making waves in the web industry recently. It goes something like this: discuss the problem at hand on Monday, sketch your solutions on Tuesday, pick your favourite on Wednesday, prototype it on Thursday, test it with users on Friday, and be out of the office in time for end-ofthe-week drinks. It’s explored in detail in Sprint, the book Kowitz co-authored with fellow GV design partners Jake Knapp and John Zeratsky, and will be the subject of his talk at Generate San Francisco in July (netm. ag/sanfran-281). “We decided to show people a very good design process and get them hooked on it. That’s part of what a sprint is, ” Kowitz explains. “When we work with teams, we force them through the process in a very condensed period, so they can see all the way from ideation through to prototyping and testing. Often companies will come back and say things like, ‘Wow, you saved us three months of effort.’” This leaves companies more open to embracing other changes, because they have seen firsthand the impact design can have.
The sprint process is also a practical solution to the GV design team’s burgeoning day-to-day responsibilities. GV now has over 320 companies on its books, and with only five designers on the team, it’s clear those days of breezily cycling between startups for a month at a time are gone. With the sprint, GV has an efficient way to teach companies the entire design process. “Sometimes I think of it as being like a recipe, ” muses Kowitz. “There are thousands of ways to make a cake and there are thousands of ways to practise design. But if you’re just getting started in the kitchen, or if you’re just getting started with design, sometimes you just need a recipe. “It may not be the only way you do it or the best way to do it in this instance, but it’ll get you started. And by doing it you’ll understand more about what design thinking is and what the design process is, and the value behind prototyping and talking to customers.”
“I’m interested in companies when they’re 10 people. We’re creating tech firms with design in their DNA”
SPRINT FINISH One project that benefited from the approach was Blue Bottle Coffee, a startup coffee roaster that has since gone international. When Kowitz visited the company, it was looking at moving into
delivering coffee via the post and via its website. After one week together, GV and Blue Bottle Coffee had created prototypes and tested them with customers. The feedback from the user tests had led them to a novel solution. “Most people sell coffee by region. You’ll go into the store and they’ll go, ‘Here’s some Kenyan coffee; here’s some Colombian coffee.’ And it turns out very few people know what those would taste like, ” smiles Kowitz. Instead, Blue Bottle Coffee focuses on how the potential customer brews their coffee at home. Different roasting styles and types of coffee are more suited to particular brewing methods: in a coffee maker or in an espresso machine, for example. “By asking a simple question that people know how to answer, we can very quickly pare down the coffees available to ones that are more likely to be great-tasting for them, and make them feel more confident in their choice, ” Kowitz points out. In order to really get to the nub of the problem, and in line with sprint guidelines,
july 2016 35
VOICES Interview
GV assembled everyone from the CEO to the director of operations for the process. That might seem like overkill, but Kowitz resolutely believes that having a range of viewpoints feeding into the sprint is vital to reaching an effective solution quickly. The founder can provide insight into the key business aims, while the person responsible for delivering the beans to customers might understand the operations pipeline in a way that no one else could.
TEAM EFFORT Getting everyone together has also had the effect of showing that creative ideas can come from unexpected places. “Designers often think of themselves as a tribe. We call ourselves ‘creatives’ and we think we’re the ones that are going to come up with all the good solutions, ” laughs Kowitz. “But time and time again I’ve found that so many people in organisations are creative. If you give them the time and the ability and the encouragement to sketch out ideas, great ideas come from all sorts of places.” This ties in with another of Kowitz’s beliefs: that design knowledge should not be solely the preserve of designers. Although people may be adamant that they’re most effective when they’re focusing purely on whatever they see as their job, a little crossover into other disciplines can have a huge positive impact. He draws parallels with the early days of software engineering, when there would be a team writing code, and a totally separate team responsible for testing that code. Having one team motivated by speed
36
july 2016
and another motivated by quality didn’t make for a smooth workflow, nor did it lead to great products. In many organisations today, the picture looks similar. The engineering and product teams are mostly focused on speed, and the design team is tasked with making sure it’s a product customers will love. Just as the software qu a l it y m o v e m e nt upended the software engineering process, Kowitz thinks attitudes to design are headed for a change. “We’re finding that design quality does have to be everyone’s job. And that means some other people in the organisation are going to have to probably spend a bit of time on design activities.” To clarify, Kowitz is not suggesting everyone should be a whizz in Photoshop or that CEOs should be booking themselves on to colour theory courses. He points to user research as a particular example; for non-designers, it can be extremely valuable to watch the research process. “It turns out that if we don’t understand what our customers need or what they want, all the little decisions we make along the way are not going to be as good.”
CRITICAL ANALYSIS Ask Kowitz what the future of design looks like, and he’ll mention a word that most designers dread: critique. “In fields where you can’t measure the effectiveness of your work, often the only way you have to tell what’s good is self-critique and community critique, ” he explains. This inward-looking process has led to a view that the design industry is just a bunch of people making beautiful things for each other. However, as design takes a more prominent role, the demands placed on designers are rising. “As design starts to move into the core of businesses, we can develop much better measures of whether design is working, ” says Kowitz. “We have to move away from just designing things our peers appreciate and into effectiveness. Do our designs actually work? Do they make the company better? Do they make the experience better for customers? That’s very much stuff that we can measure and get better at. And I think that is where design is going.”
“We have to move away from just designing things that our peers appreciate and into effectiveness”
Next month: Facebook product design manager and UX veteran Nick Finck
Opinion writing proposals and presenting pitches. It’s truly a commitment of time, and the owner will have to eat their spinach to maintain this important role.
THE THREE SACRIFICES
THE SECRETS OF VALUE PRICING Jason Blumer explores the unexpected things you should consider before switching to value pricing Value pricing is a hot topic for those running agencies. It is the practice of charging for your work based on its value, as opposed to how long it takes. Before you make a move to value pricing, you should know that this new approach will ask some things of you as a business owner.
One of the best ways of approaching the new methodology is to establish a longer onboarding process for your client to participate in. This can prepare your client to be priced, help them trust you more deeply, and prove the value you are basing your price on.
A NEW METHODOLOGY
PRICING OBLIGATIONS
Pricing is the opposite of billing. Billing is done after a service is delivered, without the client’s input. Pricing is an intimate process done in collaboration with your client before you begin your work. Pricing is really a methodology as opposed to something you calculate. It is much more subjective, often driven by your gut. Since the price is not based on a calculation, the process will ask more of you as a service provider. You’ll need to commit more time, longer cash flow cycles, and be okay with the possibility that some clients do not want to pay a value price.
Pricing is really about preaching your company’s version of how you transform businesses, and aligning yourself with other businesses that want what you are offering. The owner, or founder, will preach value better than anyone, and should perform this task for as long as possible. As an agency grows, the founder’s best move is to delegate all other creative and adminstrative roles before they give up pricing. Agencies can typically make more money with this approach. However, it does hem in the owner, as they will have to keep attending new client meetings,
PROFILE
PRICING
It will take courage to implement value pricing. From my experience coaching agency owners, I’ve seen three big sacrifices they make when implementing business model changes like pricing. The first sacrifice that may need to be made is the services you offer. If you’ve changed your strategy on pricing, and are selling services that simply cannot be value priced, you’ll need to ditch them. The second sacrifice is that you may need to lose some of your current clients. Once you begin value pricing, any client that was brought on before that change is called a legacy client. The legacy clients may fight you on your changes because they didn’t agree to them originally. If you can’t bring them along to your new pricing strategy, they may prevent you moving forward, and you may have to let them go. The third (and hardest) sacrifice that a pricing change may ask of you is to upgrade your team. When you begin value pricing, you are telling your market that you are strong enough to stand solely on your value. And if you are making those claims, your clients will expect more from you. You may have to make changes to your team to be able to deliver on these new value promises. Should you implement value pricing in your agency? It is true that you can make a lot more money, and can work with clients that are better aligned with your business aims. But pricing this way means you won’t be able to work with every client. It might slow down your sales process as you seek to align with the right client before you attempt to price what they value. You may be confronted with crucial sacrifices that will need to be made for your new pricing strategy to work. Switching to value pricing is worth it, but be ready for what it will ask of you. Jason (jasonblumer.com) is the chief innovation officer of Blumer CPAs, co-hosts the Thrivecast and The Businessology Show and speaks and writes frequently for creatives
july 2016 37
VOICES Big question MONEY
HOW OW DO YOU STICK TO A CLIENT’S BUDGET? Having a project go over-budget is a difficult experience for both you and the client. Our experts provide their tips on how to avoid it
A A RON MEN T EL E
JOSH P OR T ER
www.electricpulp.com
www.rocketinsights.com
Partner, Electric Pulp
In a case where the ask exceeds the budget, we start by talking through good/better/ best scenarios and managing expectations if we need to be at the lower end of the scale. If it’s possible to reduce tangible requirements in the scope, we’ll try to identify core functionality and suggest moving non-critical components to a later phase. The goal, of course, is to find the biggest bang for the buck (I hate that phrase). The momentum of a successful launch can finance future iterations.
BE T H A N Y HECK Designer
www.heckhouse.com
Staying within budget is a combination of setting clear expectations, learning how to get the right info out of your client, and being focused when you move into design work. If I have the assets, information and direction I need from the client, I can get to a good solution faster. Learn how your client thinks and coach them into giving you what you need. 38
july 2016
Partner and co-founder, Rocket Insights
The best way to stay within budget is to get enough budget to begin with. We do this in several ways. First, we clearly state all the assumptions we make when estimating a project, down to any parts of the project that might change later on. Second, we try never to low-ball a client to win a job (we also don’t overcharge clients who we think might have larger budgets – it’s just not good for the long-term relationship.) Finally, we try to start most projects with a design sprint, which is a week of design exercises, prototyping and testing. By the end, we know a tremendous amount about what is going to be built and the effort that will be involved.
H a r a l dur T horl eif s s on
Nicol e Domingue z
www.haraldurthorleifsson.com
www.nicoledominguez.com
Design director, UENO
Designer and developer
The start of a design project is the worst time to lock in a scope and a budget. Nobody knows exactly what they need, how much time it will really take, and how much it will end up costing. For us, design is a collaborative process, and so is the budget. That’s why we always use hourly rates and scale up or down as the project develops and the challenges become clearer.
I break down each project with the client to outline what tasks are necessary and what goals are expected to be met. This means a bit of initial discovery work, but it avoids accidentally going over-budget. When I provide an estimate for a project, I specify that it’s a time estimate based on an hourly rate, rather than a flat project fee. I also note in my contract that any additional work outside the scope or timeline gets billed at an hourly rate that the client has to accept.
Erin Nol a n
G a rre t t Winder
Product designer
Partner, Good Work
www.madebyeno.com
I actually don’t ask clients for their budget up-front. After I get a formal project request, I set up a few phonecalls to fully understand the client’s goals. If it’s something I’m interested in and able to help with, I follow up with a proposal. The proposal outlines project goals, features to be designed, and a timeline. If there’s pushback on the cost, we’ll talk about reducing scope. I never reduce my price or timeline without cutting down on scope: providing fewer directions, testing with fewer users, or removing ‘nice to have’ features.
www.simplygoodwork.com
One of our biggest breakthroughs in this area was introducing a required discovery phase for all projects in early 2015. It’s a fixedfee process where we dig through requirements, prototype features and come up with a master plan and budget for our clients’ projects. It’s work we’re all doing anyway, but it helps to split it out. On top of this, we use Harvest and Harvest Forecast for time-tracking and scheduling, which allows us to catch budgeting issues well before they happen.
Further Reading TRUTH IN BUDGETING
If anyone knows how to tell a good story, it’s Mule Design founder Mike Monteiro. In ‘Why I need to know your budget’ (netm.ag/monteiro-281), he uses anecdotes to explain to clients why it’s actually in their best interests to disclose how much money they really have for a job.
SMALL BUDGETS
Working with a client with limited resources? UX designer Josh Riggs’ article on how to deal with a small design budget (netm.ag/invision-281), originally posted on the InVision blog, offers a five-point plan to help you prioritise when the money doesn’t leave much room for manoeuvre.
GO MODULAR
In ‘You’re burning budget on design: How to save time and money with modular design’ (netm.ag/toscano-281), Joe Toscano explains why breaking down your design work into smaller, reusable chunks can decrease your production time and increase your bottom line.
july 2016 39
SAN FRANCISCO 15 JULY 2016 Learn all about SVG animations, the Internet of Things, Google’s five-day design process and much more!
MIKE MONTEIRO
SARAH DRASNER
PETER SMART
LYZA GARDNER
www.mikemonteiro.com
sarahdrasnerdesign.com
www.petesmart.co.uk
www.lyza.com
CO-FOUNDER, MULE
UX DESIGN MANAGER, TRULIA
UX DIRECTOR, FANTASY
CO-FOUNDER, CLOUD FOUR
TICKETS ON SALE NOW
www.generateconf.com
Q&A needed (usage, retention, bounce rates and so on) is often a by-product of a quant-only culture where ‘if it’s not in my dashboard, it’s not important’. net: Do you have any tips for communicating user research findings effectively? RS: I have found that engaging narratives and video storytelling, in particular, bring research findings to life for the teams and help them find actionable ways to incorporate the findings in their work.
Q&A
RAZAN SADEQ The user researcher on Spotify, Sherlock and speedy feedback INFO Job: User researcher, Spotify
net: Tell us a bit about what you do at Spotify ... RS: My role is to bring the outside perspective in, to ensure people don’t design for themselves but for actual users.
w: www.razsadeq.com t: @razsadeq
net: What are you working on at the moment? RS: I’m focusing on executing and evolving Soundcheck, a new usability testing methodology where we test prototypes and features with Spotify users and non-users in our labs every two weeks. This consistency allows us to reduce recruitment time and cost, but has also created awareness and made it easier for different teams across Spotify to approach us with their projects. Rotating the location between Stockholm, New York and London ensures we get a variety of profiles. net: What kind of mistakes are people making when it comes to user research? RS: I’d say one is overweighting anecdotal findings. That is, over-estimating the impact of a specific issue, and making it a big priority because a couple of users struggled with it, when it probably only affects 0.05 per cent of the user base and there are much bigger issues to solve. Shouting about usability findings without getting the quantitative backup
net: With fast-paced workflows like agile gaining popularity, how would you convince an organisation to take time to focus on user research? RS: A lot of people make the assumption that agile teams need to slow down for user research, but research is not antithetical to moving fast and shipping constantly. In fact, agile development is highly feedback-driven. Product teams are likely to rely on user opinion in situations where user observation is more appropriate than analytics. At Spotify we often do some upfront foundational work to provide the team with insights that help them set the plan. Then, as the work progresses, we do continual research. net: You worked for a while in interaction design. What made you switch to UX research? RS: I see it more as a focus on the research step of the process, while still using my design skills and sensibilities. Although I initially wanted to be a maker of things, while studying at CIID I discovered that it was intuitive for me to do user research. After graduating, I did a short gig at a Berlin design studio developing media installations, but quickly focused on UX research afterwards. Also, to be honest, user research is a more sustainable field considering my nomadic lifestyle, and there is a huge demand for the position nowadays. net: You have called Sherlock Holmes your ‘mentor’ (netm.ag/sherlock-281). Can you explain? RS: I was looking for a non-fictional mentor while preparing a talk for push.conference and I came across work by researcher and author Maria Konnikova, who unpacked Holmes’ methods and mental strategies for a sharper perception and deeper insights. Because I have a mildly obsessive personality, I started watching episode after episode. I immersed myself in his character, and so he became my ‘mentor’. It’s no surprise; user researchers work a lot like detectives. We’re presented with a problem to investigate, and seek to establish evidence and offer an explanation. Sherlock’s strong and sarcastic attitude was especially appealing to me.
july 2016 41
NEVER MISS AN ISSUE!
#279 MAY 2016
Discover which areas you should be skilling up on right now, and learn how to test and optimise your sites on all devices
#280 JUNE 2016
The browser DevTools are better than ever – we share some tips on how to use them. Plus, get the low-down on Adobe XD
SAVE UP TO 31% WITH A DIGITAL SUBSCRIPTION SEE PAGE 24
GOT AN APPLE DEVICE?
Download net’s digital edition for your iPad, iPhone or iPod Touch
NETM.AG/NET-IPAD (UK), NETM.AG/NET-IPAD-US (US)
#274 DEC 2015
Learn how to build perfect layouts without media queries, and take a look at the 15 APIs that will solve your dev problems
CATCH UP ON ANY ISSUES YOU’VE MISSED BY DOWNLOADING OUR DIGITAL EDITIONS
#278 APRIL 2016
#277 MARCH 2016
#276 FEB 2016
#275 JAN 2016
#273 NOV 2015
#272 OCT 2015
#271 SEPT 2015
#270 SUMMER 2015
We show you how to top up your tool stack without spending a penny, and walk through the basics of CSS blend modes
Join the Sketch revolution! We help you make the switch to the new top tool. Plus: what makes a great portfolio
Discover the future of CSS, including CSS Shapes and PostCSS. Plus, we reveal the top design trends for 2016
We reveal the UX insights you can glean from Google Analytics, and explore how to design for smart devices
We run down the prototyping tools you need to sit up and take notice of in 2016, and show you how to get started with ES6
We tackle the new design challenges presented by the advent of wearable technology
PREFER TO READ ON ANDROID, PC OR MAC?
Your guide to great UI design. Plus: We introduce flexbox – the CSS module that will help you tackle complex site layouts
The freelance special: we look at the pros and cons of going it alone, and share tips for landing big clients
net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more
NETM.AG/NET-GOOGLEPLAY
NETM.AG/NET-ZINIO
GALLERY Inspirational sites
CHRISTIAN HOLST
Ecommerce special: six great shopping sites
Christian is the research director at the Baymard Institute, where he conducts large-scale studies of leading ecommerce sites w: www.baymard.com t: @KiehnHolst
HORIZONTAL FILTERING BAR
SHOP.NORDSTROM.COM During our large-scale usability study at the Baymard Institute on search, category navigation and product filtering, every single test subject wanted to filter a product list at some point, yet 40 per cent of users were unable to find such filtering options at least once in each test session. A horizontal filtering toolbar, like the one on Nordstrom’s website, can be the solution. If the product filters are too difficult for your users to find, you might as well not include them at all. From the end user’s perspective, the result is the same: they can’t filter product results. The overall visibility of the filtering bar design is therefore vital in ensuring users can apply product filters to help narrow down the results.
44
july 2016
During testing, a recurrent user behaviour pattern was observed: upon landing on a category page, users would scroll down to see some of the list items, realise the list was way too generic, then scroll back up, looking for ways to narrow down the otherwise endless list of irrelevant products to just those that are right for them. One of the first places they would look was immediately above the product list. The most effective filtering design tested utilises this very behaviour by positioning the filtering tool in a horizontal bar right above the list item. This placement ensures visibility and findability, and significantly outperforms the traditional left-hand filtering sidebar when implemented correctly, as seen here at Nordstrom.
Inspirational sites
APPLIED FILTERS
WWW.MACYS.COM Notice how Macy’s displays applied filtering values alongside their unapplied siblings (i.e. in their original position) and also in an applied filters summary at the top of the page. During our usability studies we have observed that when users want to unselect a filter, one of the first places they look is the spot where they applied the filter in the first place. When filtering values move as the user applies them – either to another position in the list or to a separate summary – subjects are often confounded, as the value they have just clicked is suddenly ‘no longer there’.
Applied filtering values should be kept in their respective filtering list alongside the other (not yet selected) filtering values of the same type, as seen here at Macy’s. Furthermore, during testing we found that displaying all the applied filtering values in a combined summary list was helpful, as it provided an overview of the parameters the currently viewed list was filtered by, and offered a quick way to disable multiple filters at the same time. The best performing approach is therefore to display applied filters both in a combined overview and in their original position.
july 2016 45
GALLERY Inspirational sites
SI T E OF T HE MON T H
CUSTOMER RATINGS
WWW.HOMEDEPOT.COM Our test studies show that sorting products by reviews is one of the most utilised options, and that customer reviews are one of product attributes that users most care about. However, many sites are not taking advantage of their potential. During several of our studies we observed that while a product with a single 5-star user rating technically has a higher average than a product with a 4.7-star average based on 37 ratings, most users would consider the latter better rated (full test findings can be found at netm.ag/rating-269). Despite this, 86 per cent of the top 50 US ecommerce sites sort reviews based purely on the average.
46
july 2016
Users have categorically been observed to deem the highest rating sorting logic illogical when based purely on maths. The common maths-based logic will sort products according to which has the best average. However, this directly goes against users’ expectations of how products should be ranked. To ensure the sorted results align with user expectations, one should follow Home Depot’s example of implementing an algorithm that accounts for both the star average and number of customers that have rated the product. Notice in the image above how product ranked second actually has a higher star average than the one placed first.
Inspirational sites Homepage design
www.williams-sonoma.com First-time users rely heavily on the main navigation options and homepage content to determine what type of site they’ve landed on and how broad (or narrow) a product range it offers. During our usability tests, many subjects misinterpreted the type of site or underestimated its product range because an overly narrow selection of product types was visually represented on the homepage. Such misinterpretations can be seriously harmful to your site, as users will typically not look for a type of product they don’t believe the site will carry. This can potentially lead to lost
sales, both in the short term and the long term, as these users look elsewhere to get their needs met. At Williams-Sonoma, a wide range of product types are presented on the homepage of both the desktop and mobile sites. Additionally, product categories are featured, allowing first-time visitors to infer what kind of site they’ve landed on, as well as providing returning visitors with a shortcut to the product they’re looking for. Although this sounds simple, 42 per cent of mobile sites neglect to represent the diversity of their products on their homepage.
july 2016 47
Gallery Inspirational sites
Location auto-detection
www.crateandbarrel.com Users inevitably end up misspelling fields if they have to write them out themselves. This is an issue we’ve observed especially often during our mobile ecommerce study, where the combination of large fingers and small touch keyboards leads to a large number of typos throughout the checkout process. When we have the opportunity to help users out, it’s highly advisable to do so. One site that does this is Crate and Barrel, which auto-detects the city and state values based on the ZIP code the user types. In most countries, different cities, areas and districts can be inferred from postal codes. This is an advanced feature that goes beyond user expectations, creating delight in place of a traditionally tedious typing process. Besides creating a positive element of surprise, this feature also has some tangible benefits: the user has to type less (and therefore can complete the checkout faster) and many typos are avoided.
48
july 2016
Inspirational sites
SUGGESTED ACCESSORIES
WWW.BHPHOTOVIDEO.COM Electronics retailer B&H Photo Video provides its users with a detailed Accessories tab within each product page. This helps showcase a large selection of accessories that match the specific product being viewed. While most sites offer some sort of crosssell, often only three to five products are shown, and they tend not to be accessories. In fact, in our benchmark studies, we found that 56 per cent of mobile ecommerce sites don’t display any accessories. During our ecommerce navigation studies, it quickly became evident that users find cross-navigation very cumbersome. While this issue was also observed on desktop, test subjects using mobile devices tended to find it especially tricky – so much so that
mobile users would often skip looking for related products altogether if they had to start their category navigation all over again. In particular, mobile users often found it almost impossible to locate compatibilitydependent accessories. Many test subjects saw it as good service when sites suggested relevant accessories within their product pages. This design technique represents a win for both the site (as they have opportunity to crosssell) and the user (who benefits from easier navigation). When our subjects were asked to locate matching accessories, our tests found that discoverability rates were twice as high on sites that displayed accessories on the product page than on sites that didn’t.
july 2016 49
GALLERY Inspirational sites
‘LOAD MORE’ BUTTONS
WWW.SKECHERS.COM When websites need to show a lot of products, companies tend to opt for one of three patterns: pagination, a Load More button, or infinite scrolling. While each design can perform decently, our test studies show that a Load More button, as seen here on the Skechers US site, outperforms both pagination and infinite scrolling. While pagination is still the most common design approach, our studies suggest it might not be the most ideal. It requires users to reload the page, makes it difficult for them to compare products across pages, and ultimately was found to discourage further exploration of the product list. With infinite scrolling, the user largely experiences the page as if all products are loaded at once. Unfortunately infinite
50
july 2016
scrolling has two pitfalls. Firstly, despite the fact that during testing users browsed vastly more products, the initial results received relatively less exposure. This means users focused less on the most important products. Secondly, infinite scrolling renders the page footer inaccessible. Each time the user approaches the end of the list, a new set of results are loaded in. Load More buttons, as seen on the Sketchers US site, combine the best aspects of pagination and infinite scrolling. The footer remains accessible, yet the results are still appended to the existing list, without the need for a page reload. This means the user can access a wide selection of results on the same page, making it possible to scroll directly from product one to product 40.
YOU ARE INVITED TO JOIN NET PRO
For more than 20 years, net magazine has been at the forefront of web design and development. Join net Pro and as a special introductory offer, you can save £30!
WHAT YOU’LL GET l
12 issues of net in print and digital
l
Annual Industry Report worth £100
l
4 months free when you sign up for a Treehouse subscription
l
Discounts to industry events including Generate
l
Design annual worth £9.99
l
Special discounts from selected industry partners
ALL FROM JUST £135 £105
WORTH £371
JOIN TODAY VISIT www.myfavouritemagazines.co.uk/netpro Terms and Conditions: Pricing and savings quoted are compared to buying full priced UK print and digital issues. You’ll receive 12 issues in a year. Prices correct at point of print and subject to change. Full terms and conditions bit.ly/magterms. Offer ends 30 June 2016
Sublime design & creative advice
This month Featuring...
Focus on
57
This month ...
business tools M a r c e l Sc hmid t
Profiles
From mouth-watering photography to appetising colours, Sam Kapila reveals the secrets of a great food-related site
Design Challenge Marcel is a frontend web designer and developer, and owner of Blikbrein Media w: www.blikbrein.co.za t: @blikkies
K y l ie T impa ni
Profile
Kylie is a senior designer at Perth agency Humaan, specialising in web and UI design w: www.kylietimpani.com t: @kylietimpani
58
Stripe’s former creative director Ludwig Pettersson looks back on his time with the company that revolutionised online payments
K at e Mc Hugh Kate is a frontend designer and developer at digital agency Arise in leafy Sheffield w: www.katemc.com t: @katemchugh01
Brief
How we built
For a site refresh marking its new branding system, New York’s Met museum turned to digital agencies Fantasy and Velir
64
We want you to design a website for a new online business service aimed at entrepreneurs. It should help make the day-to-day tasks involved in running a business easier – and more fun. The UI must be simple to understand, and convey an air of trustworthiness.
Design challenge
1
5
2
3 4
6
MARCEL SCHMIDT
TIKOON
A gamified approach aims to take users from entrepreneurial zero to hero
Entrepreneurs usually start with little or nothing in the sector they want to conquer. What if there was a service that offered complete integration with the grid, connections with like-minded individuals, and a way to help them document and reach their goals? Tikoon is the online service that takes its users from zero to hero. The site includes the usual news feed, task manager and other dashboard widgets, but what if you need skilled professionals to help you reach your goals faster? Users can subscribe to Tikoon’s premium service, which offers them access to three selected ‘heroes’ – experts in their fields. Tikoon also gives users the option to ‘gamify’ their rise to the top. Get points for completing tasks, connecting with fellow Tikoons and using resources. Entrepreneurs can track their standing in the community and compete with others. World domination is fun again!
CLOSE UP (1) The sidebar includes a widget panel with personally selected categories, including daily affirmation, bank balances, stocks and weather. These click through to the main service page, which contains further details and integration with these online services. (2) A news feed keeps users up-to-date with what other entrepreneurs are doing. (3) The user’s Tikoon status takes a ‘gamified’ approach, showing their rank, points accumulated and points needed to level up. (4) My Heroes is a premium service that offers professional help with the subscriber’s day-to-day business needs. Sourced accountants, architects and even image consultants are ready to serve. Just add a mission to their taskboard and they’re good to go. (5) A voice-activated personal assistant schedules meetings, manages tasks, and orders pizza and beer. (6) There is an integrated cloud-connected task list and file service for users of the business option.
MY MONTH What have you been doing this month? Looking for a job in Germany, since my family and I are in the process of relocating. Which sites have you visited for inspiration? Twitter – people inspire me and I follow leaders in the industry – and www.appanimations. com. Animation is the next big thing. What have you been watching? The Hunger Games movies and 90s series Dharma & Greg. What have you been listening to? Sara Bareilles, Jasmine Thompson, The Script and Phillip Phillips.
july 2016 53
Showcase
Design challenge
1 2
3
5
4
6
Kylie Timpani
My month What have you been doing this month? Travelling Europe, and working on a wildlife site, as well as a contemporary site making engines look sexy. Which sites have you visited for inspiration? I’m finding a lot of value in designspiration.net and pttrns.com lately. What have you been watching? Mostly National Geographic and lots of Law & Order: SVU. What have you been listening to? I’m working my way through an ‘ultimate’ ambient list with a colleague!
54
july 2016
Tickdock
A colourful graphic approach underlies this quirky, time-saving service for entrepreneurs
Tickdock is an online service outsourcing business services to entrepreneurs. The services range from the ordinary to the unusual, but all aim to relieve business owners of day-to-day stress. Tickdock recognises that its target audience’s main motivation for seeking external help is to free up time for other things, and the site leverages this to drive much of its messaging. The site’s homepage view presents an immersive, interactive tool showing visitors how much time they could save per week. The services presented in this space are those most commonly used by the user base, with a few cheeky ones thrown in for brand kudos. Below the hero, the site explains the steps involved in using Tickdock and features some of its experts. This, along with its friendly tone and provision of company statistics, is intended to build that element of trust.
Close up (1) Simple navigation helps users to browse or search Tickdock’s services, or jump right in. (2) A clear headline explains the concept behind Tickdock. (3) The service cards sit front and centre, immediately presenting Tickdock’s capabilities, while also speaking to the user’s motivations. These cards will use subtle CSS animations to encourage user interaction. (4) Once a user has selected one or more cards, the site identifies how much time could be recouped and tallies up the total hours to be saved. This is presented in a call to action, encouraging visitors to get started. This section will be scaled back on smaller devices, simply displaying the time saved per service. (5) An animated timeline outlines how Tickdock works. Each step will animate into view as the users scrolls down the page, the timeline growing with it. (6) This expert feature panel is fixed as the user scrolls, changing intermittently based on user interaction.
Design challenge
4
1
2
5
3
Kate McHugh
Bizzymum
Ease of use takes centre stage in this forward-thinking home-business site for ‘mumpreneurs’
With the price of childcare soaring, there has been a significant rise in the number of mums opting to stay at home and run their own businesses. BizzyMum is a site for these ‘mumpreneurs’ to enable them to manage and balance their home and work life. Mums can access services, network, and keep track of expenditure and upcoming tasks. On login a personalised dashboard greets the user. This is populated with dynamic budgets, calendars and other tools, as well as a networking service. Ease of use is the main aim, so imagery is minimal. A key aspect of the site is the option to switch between a ‘business’ view and a ‘mum’ view on every page, with varying tools and services available dependent on the view selected. BizzyMum is fully responsive, and CSS3 animations and transitions are used throughout to enhance the experience.
Close up (1) A welcome message on the dashboard displays a brief overview of upcoming tasks and new site activity. (2) Hand-drawn animated patterns, handwritten type and coloured overlays are used to differentiate between sections and create a conversational, approachable tone. (3) A jQuery page-turning effect flips between the ‘business’ and ‘mum’ version of each page. It is fixed to the bottom right of the page so it is always on the screen as an option. (4) A full-page interactive map displays available services and locations, featuring a usergenerated rating system. Services offered are generally child-friendly – they may offer out of work hours or the option to bring children along. (5) In the designated networking and events area, users can connect with each other, seek advice and find out about upcoming events. Events can be swiped through on mobile with the option to RSVP.
My month What have you been doing this month? Working on a site for a photography studio, and visiting the Lake District and beautiful Ballinskelligs in the south west of Ireland. Which sites have you visited for inspiration? Hoverstat.es, pttrns.com. What have you been watching? Moone Boy and Love on Netflix. What have you been listening to? Ben Howard, Kendrick Lamar, Major Lazer.
july 2016 55
NEXT MONTH
PROGRESSIVE WEB APPS
The future of web apps is here: we dive into how new technologies can enhance your next project
PLUS Build a simple website with Angular 2
Make responsive design work for enterprise sites
Atom for power users: master GitHub’s text editor
ISSUE 282 ON SALE 16 JUNE PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT
myfavouritemagazines.co.uk DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO
net.creativebloq.com
Focus on
Focus On
Food Websites Sam Kapila focuses on the ingredients that make a feast for the eyes Gone are the days of PDF restaurant menus and plates with bad lighting. Modern food sites are more likely to involve editorial-inspired layouts and stylists arranging place settings for longer than diners are seated at them. Here are the key ingredients you need for a good food site.
Mouth-watering photography We eat with our eyes first, so not only photography but photo editing must be a priority. The food needs to looks bright and appetising, with no social media-like filters. Plating must be perfect, and dishes, cutlery and glasses carefully arranged – or at least looking thoughtfully haphazard.
1
Appetising colours Choosing colours for backgrounds and type can be challenging when it comes to really colourful food. For backgrounds, tie all the elements together by sampling a colour from the representation of the food itself, then lighten it or darken it to bring in something new without distracting from what’s on the plate. Do the reverse (darker or lighter) for the typography, or sample a new complementary colour.
Simple typography
3
PROFILE
Keep typography simple so as to not overshadow the food. Draw inspiration from restaurant menus, cookbooks or handwritten recipes. Many type families have weights that aren’t needed, but contrast between content (like subheadlines and ingredients) will leave a good taste.
Sam (samkapila.com) is a designer living in Texas and an instructor at The Iron Yard, an international, immersive coding school
2
(1) Granny’s Secret (www. grannyssecret.com) has a Didone serif and a script face that invokes the feeling of Granny’s handwritten recipes. (2) Steep and Jar (steepandjar.
com) puts care into consistently framed and edited photos of its teas. (3) Jude’s Ice Cream (www.judes.co.uk) uses tints from its product packaging to tie all the flavours together.
july 2016 57
info Location: San Francisco, CA Working since: 2003 Areas of expertise: Creative direction, product design, web design
Profile
PROFILE
LUDWIG PETTERSSON @ludwig
Stripe’s former creative director on working at the frontier of online payments When Ludwig Pettersson was just 18, he was invited to travel from his home country of Sweden to meet people in the Silicon Valley startup scene, having attracted attention by building his own website analytics tool. By age 20 he’d landed a job as one of the first employees at the online payments company Stripe, where he would go on to lead the design team and then become creative director. After five years, he has decided to move on and explore new projects. Here Pettersson looks back on the experience of working at Stripe as employee numbers surged from a handful to hundreds. net: Tell us about your early days at Stripe ... LP: It was, and still is, an incredible place to be. There’s nothing better than surrounding yourself with very focused, talented and hardworking people to work on something you all really believe in, and which could have a big impact on the world. When I first joined Stripe in 2011, it had that beautiful naiveté of any small startup; that contagious excitement you can barely contain, and the feeling that you’ve stumbled upon something brilliant, which you can’t believe nobody else is working on. net: Why did the problem of online payments appeal to you? LP: Before joining Stripe, I’d always worked on various side projects. There was one that I’d been working on for at least a year in my spare time, and I realised maybe I could charge for it, so I looked into the various providers. This was in Sweden in 2009, and you’d think it was 1993.
july 2016 59
Showcase
Profile
Modern look Angled gradients and vivid colors add a unique look to the Stripe website. The site also uses a mixture of modern flat design and high-fidelity icons, to keep it looking fresh
The technology was incredible arcane; the protocols the worst I’ve ever seen. The one somewhat sane company I found required me setting up accounts with multiple services, faxing scans of my passport back and forth, and so on. I remember thinking, ‘Wow, this is really burdensome’. I shelved it, thinking I’d revisit it after a couple of months, but by then I’d moved on to a different project. So, having experienced the pain of trying to accept payments myself, I saw Stripe as an obvious opportunity and something that should clearly exist. Removing barriers for new companies to come into existence is an incredible enabler, both for individuals and for the economy. net: How did the company, and your role, evolve while you were there? LP: I have worn many hats over the years. Being the first designer paired with extremely talented engineers meant I got to set that initial visual direction, and help create a product we would want to use every day. I naturally transitioned into running and growing the design team for the first couple of years, until we hired a head of design to let me get back to focusing on design and product rather than people management.
60
july 2016
The company grew from seven people when I joined to over 450 by the time I left. One of the best things about being part of a fast-growing company was that I got the opportunity to practice such wildly different disciplines – everything from figuring out how to interview and hire people, to going deep on product problems, to marketing a new product launch. net: How did you find managing a design team? LP: Management is fascinating. I think more designers working within teams should consider learning more about the art of management. It consists of all the soft skills: how to make the people around you better and more productive, and how to be the person that makes the team as a whole better. A designer that can do that is incredibly valuable. net: What was your experience of the web growing up? LP: I’m one of the young’uns for whom the web has always been around. I remember one summer afternoon, I was maybe five and out playing in our backyard. My oldest brother sticks his head out the window and yells: “Hey! We’ve got the internet!” And I go “Whoa! Wait, what’s the internet?”
Profile
office culture
Ludwig Pettersson What’s on your desktop?
Tool overview The Stripe homepage features simple icons to represent the tool’s key features
net: What do you think prompted your passion for web design? LP: I think what ultimately lead me into focusing on the web was its accessibility. It can have a very gentle learning curve. For me that was initially uploading HTML files through FTP, then discovering PHP and later moving on to Python, JavaScript and more. You can view the source and dig into something you find impressive, and try to reverse-engineer it. It’s all there for you to pull apart and put back together. I think that’s the beautiful thing about the web: you don’t have to be introduced to complex programming concepts until you’re ready. You don’t need to start with
At work Pettersson at Stripe’s office, where he ran the design team for almost five years
designing and creating the next Facebook – you start with a weird little page where you can post your favourite music and photos, or write about your ideas. net: Tell us about your career path ... LP: During summer break of my last year in school, I spent a week working for a local web production company. I helped build a video uploading site in a week, and realised I could be paid for doing something like that. It was a really empowering moment for me; realising the skills I had were in fact quite valuable, and I could put them to good use. My path to San Francisco began with meeting the founders of Cappuccino, a web framework that’s effectively Cocoa and Objective-C ported to the web, after using it to build Observer, a kind of Google Analytics clone. After spending some time with the very small, tight-knit community around Cappuccino, it dawned on me I wanted to be in San Francisco full time. net: What was it in particular that attracted you to the area? LP: In San Francisco and the Bay Area, there’s such a unique concentration of incredibly talented people in our industry, and I wanted to surround myself with them and learn. The Bay Area also feels somewhat unique in that it’s a place where people are very generous with their time and energy. There’s very little bargaining or
34" ultra wide monitor (I love the horizontal space), 15" Macbook Pro.
What little things make your life worthwhile?
My daily coffee routine. And music always gets me out of a creative or personal funk.
What do you have on the walls? Art, but not much.
What hours do you work?
It varies wildly. Usually 9 or 10am to 6 or 7pm, or very late if needed.
What else do you do in the office?
I tend to be a bit better about compartmentalising my life these days, and getting out of the office.
How often do you hang out with other designers?
A lot. I most enjoy the company of designers with whom I can explore new concepts and ideas. It’s easy to tear anything down, but it’s much harder and much more rewarding to think about ways to improve things.
Describe your working culture in three words ... Intensive creative spurts. I need breaks during the day, and will go for walks to clear my head.
july 2016 61
Showcase
Profile
Timeline
Key dates in Ludwig Pettersson’s web career International Pettersson helped launch Stripe in over 25 countries
2002 Pettersson creates his first web page
2003 Discovers web programming, starting with PHP
2006 First freelance project
2007 Dives deeper into programming with Python
2009 First full-time job, building websites with Django
2010 First trip to San Francisco
2011 Becomes Stripe’s first designer
2012 Hires first additional designer
2013 Launches first major revamp of Stripe’s visuals since 2011
2015 Leaves role as creative director of Stripe
62
july 2016
trading of favours, people are surprisingly willing to give you a bit of their time. When you’re trying to learn something new, that is absolutely invaluable. Also, everyone knows everyone. You can always send off an email and get an introduction. net: How has working at Stripe formed you as a professional? LP: The thing that will stick with me the most is the idea you should always strive to build something you’ll be proud of. That somewhat simple mantra is quite powerful – it’s what’s going to matter six months after launch, and what’s going to push you to do something really great. And it’s what you’ll remember five years later. It’s easy to say, but it bears repeating when you’re having that last-minute, daybefore-launch meeting about something that didn’t come out as well as you’d hoped. Do you push the launch back a week, or do you launch something you’re not happy about? I’ve found the former has always been the right move. One of the things Stripe got right very early on was to always question assumptions, no matter what you’re up against. We could have built just another system to accept payments, but instead the company again and again asked itself: How should this really work? By doing that, we were able to come up with new ways of approaching things that other people in the industry thought weren’t possible. net: If you had to pick a one-liner to describe the focus of your work, what would it be? LP: ‘Complete experience.’ I love thinking about everything about someone’s first experience coming across a service: How should it be perceived? What do we want to say? How do we say it? Then the service
itself: How should it work? What’s the best way we can do that? Not getting stuck in the echo chamber of the industry and not doing it the way it has always been done. I love working out little delightful things along the way – novel ways to do mundane activities. My favourite example of this Panic’s (panic.com) work. They don’t do a simple text list for managing your sites in Coda, but rather, it’s this beautiful digital wall with all your websites. net: What are you going to do next? LP: I’m very excited about the future of human-computer interaction, and how it will adapt over the next couple of decades. How will you interact with your car once it’s fully autonomous? And then you have lots of development in both VR and AR – I’m very curious to see how it shakes out over the next couple of years. Practical applications of AI, and how it could unlock fantastic new ways of interacting with technology and augment humans, is also something that I daydream about. But I’m still figuring it out – and I’m starting with taking some time off. I’m very excited to take what I’ve learned at Stripe and apply it to something new. net: What’s most exciting to you about working in this industry in 2016? LP: The fact that some of the biggest technology companies in the world are heavily investing in both design, but also – most importantly – user experience. It feels like a total golden age. Let’s not mess this up. Combining all that energy with potential revolutions in how we interact with all technology around us feels incredibly exciting to me. Next month: Toronto-based digital prodution and design agency Jam3
SHOWCASE
How we built
HOW WE BUILT
THE MET Fantasy and Velir tackled vast amounts of content and an immovable deadline in their responsive refresh of The Met’s website
1
2 3
4 6 5
BRIEF To mark the launch of The Met Breuer, as well as its new branding by Wolff Olins, New York’s Metropolitan Museum of Art needed a refresh of its site. It had to be responsive, it had to be accessible, and it had to be done in time for the Met Breuer opening.
64
july 2016
CLOSE UP (1) The new site extends The Met’s new identity online with the use of red and new logo echoing the design of physical elements on site. (2) The experience works to entice people to visit, displaying what’s currently on view as well as offering quick access to information about each of The Met’s three locations. (3) Exploring current exhibitions should feel just as exciting as exploring the museum, so a visual grid was employed to display the branded materials from each show in a structured manner. (4) Large marquee images ground many
information-heavy layouts, but there are strict usage rights around the cropping of artwork. To alleviate this issue a repository of approved images was created that pages can pull from at random. (5) The templates needed to work seamlessly across many device sizes. A central column for copy and modules allows for easy re-sizing, shuffling the entire layout. (6) A robust search can be accessed from anywhere on the site, allowing visitors to quickly find artwork, educational materials, and other information they might need.
How we built
THE ME T
FANTASY
VELIR TIMELINE
Key dates in the Met project timeline MARCH 2015 The Metropolitan Museum of Art is based over three sites in New York City w: www.metmuseum.org t: @metmuseum
Based in San Francisco and New York, Fantasy is a humancentred UX and design agency w: www.fantasy.co t: @F_i
Velir is a content-driven digital agency based in Massachusetts w: www.velir.com t: @Velir
Creative proposal to refresh the Met website, including the project map, a plan for deliveries, and high-level milestones
JUNE 2015 One of the world’s leading art museums, the Metropolitan Museum of Art in New York (metmuseum. org) opened a third site this year: The Met Breuer. To mark the occasion it embarked upon a refreshed version of its website, with three goals in mind. The site needed to be responsive, accessible, and it had to celebrate the museum’s new branding. With a strict deadline and an enormous amount of content to work with, it brought in digital agencies Fantasy and Velir to help make this ambitious project a reality. net: Can you give us an idea of the scale of the project? The Met: The Met’s website is vast, with about half a million pages, hundreds of thousands of images available for download, and thousands of blog posts and videos. We approached Fantasy because of its expertise in UX and interactive design, and Velir for its technical expertise in working with Sitecore and its experience delivering sites of comparable scale. net: How did you approach the brief? Fantasy: To us the distinction between refresh and redesign was important. It meant that a major restructuring of the information architecture and interactive elements was out of scope. Instead, we needed to focus on the re-representation of the information that was already on the site, and create new templates and modules to house that content, as well as new elements the museum might add.
net: How was the work divided? Fantasy: As the design was handed off, a team of developers split between The Met and Velir handled backend updates and additions as well as the frontend execution of page templates. Pages that had been built were provided to The Met and Fantasy to QA for visual design and content flexibility before being integrated with the Sitecore CMS. net: What technologies does the site use? Velir: For frontend development, the real star of the show was Pattern Lab, which we used as an environment to prototype the new design. It provided us with a place to begin working as soon as we received completed design comps, and remained the de facto source of truth for HTML templates throughout the build. We also employed Sass, with BEMstyle naming conventions in our CSS, to help keep things clear and organised. Finally, we utilised AngularJS to help bring to life some of the more complex portions of the site. This allowed us to provide a snappy, app-like experience. net: How did you turn the desktop and mobile sites into a single responsive site? Velir: Fantasy did the heavy lifting on creating a single design, providing a comprehensive style guide and set of design comps that served as a launching point for frontend development. The frontend team was then able to quickly begin demoing responsive, in-browser prototypes, and stakeholders fed back any potential issues early on.
After key working sessions with The Met, the design direction is selected
JULY 2015 The new site template is approved
EARLY AUGUST 2015 Fantasy creates desktop and mobile prototypes, allowing the user to engage with a set list of tasks provided by The Met
AUGUST 2015 User testing takes place. Feedback informs critical changes to the Visit section and tertiary navigation
SEPTEMBER 2015 Design is signed off and the gears shift into the full-blown development phase
JANUARY 2016 Initial development is completed and the code is pushed to Pattern Lab. Design QAs happen every two weeks
FEBRUARY 2016 New Met identity is revealed, including a new logo and branding across digital and real-world touchpoints
july 2016 65
SHOWCASE
How we built
1
2
3
EVOLUTION
Fantasy explains the design process and iterations that led to the website seen today (1) During concept generation we explored how we would refresh the look and experience of the site without deeply affecting the technical architecture. (2) A look and feel was developed that allowed for easy consumption and better display of the museum’s collection. (3) Wireframes extended the flexibility of the templates without each page requiring a design. (4) Prototypes were used to ensure clear paths through the experience. (5) We set up a range of templates for use throughout the site. Template A features an open centre column that can accept all types of content.
5
66
july 2016
4
How we built net: Tell us a bit about the key design features ... Fantasy: The biggest feature is the new template structure. We created three key templates: Template A holds long-format content like location information; B is the grid template for exhibitions and events; and C is a variation on Template A that allows for more interesting marquees on long-format pages. This limited number of variations makes it much simpler to add new content, as there are strict rules for which templates are used for each content type. net: Did you face any technical issues? Velir: One of the biggest challenges was page performance. Output caching was utilised throughout the site on static components to reduce page load time. A caching layer was also introduced to our Web API endpoints to reduce database load for common queries, such as the first page of listing results that loads when a page does. Our other big challenge was responsive images. The Met has an enormous library of hi-res media, and we absolutely wanted to ensure the user was seeing the image most appropriate for their device. Devising a flexible solution to allow content editors to provide tailored marquee images to a wide variety of screens was no easy task.
Exhibition pages Three tiers of exhibition pages were designed to accommodate shows of various lengths and objects on display. For each, the team worked on the relationship between typography and imagery
net: How did you go about testing? Velir: To prepare for functional testing, we began by creating written test cases for each piece of functionality. We then conducted two rounds of testing. The first was done exclusively in Pattern Lab with the goal of identifying any major display issues before the frontend code was integrated into Sitecore. The second round focused on display, functionality and content author experience.
net: Did the immovable deadline inform the process? The Met: An immovable deadline is a wondrous thing. Since we had to have the website ready in time for the launch of The Met Breuer, we had to prioritise in ways that might not have happened if we had more time. Data-driven decision making was crucial to making our launch date. Over the last couple of months, we used metrics on traffic, user feedback and so on, to decide where to focus our time. We worked closely with our internal stakeholders to make sure we prioritised the right features. net: What’s the single best thing about the new site? The Met: Its simplicity. For the user, this means a simplified navigation and information architecture so content is clear and consistent across the site, no matter whether a user is on mobile, desktop or tablet. For the museum, this means a site with a simplified technical infrastructure and fewer templates. This will enable the team to maintain the site more efficiently and devote more time to developing new features.
New discoveries The left rail offers easy filtering of content on the collection pages
Exploring galleries The galleries througout the site are designed to be visual and immersive
Next Month: Uniform’s new site for Greenwich Peninsula
july 2016 67
Cover feature
BUILD A PROFITABLE DESIGN BUSINESS Pricing your services effectively is a tricky business. Brad Weaver walks through how to establish a pricing model that works for you
AUTHOR BRAD WEAVER Brad (@sbradweaver) is the chief experience officer at Nine Labs (ninelabs.com) in Atlanta, GA, and the author of Creative Truth. He routinely speaks at conferences, acts in movies, and solves UX problems for Fortune 500 brandshetics ility ILLUSTRATOR MARTINA FLOR Berlin-based designer and illustrator Martina specialises in lettering and type, and her designs have been featured in publications around the world www.martinaflor.com
P
rofit isn’t easy to talk about. Often it’s an afterthought. But if you’re in business, you’re out to make a profit. To be blunt, if you’re not making a profit, you’re not running a business; you just have a job. Profit is simply the difference between the amount earned and the amount spent when producing something. So how do you make sure you’re making a profit consistently, and not just when a project goes really well? It comes down to three key practices. First, know what you need to make in your business to thrive, not just survive. Second, treat profit as a necessary part of your budget, not additional revenue from individual projects. Third, find the right mix of pricing strategies to reduce scope creep and underestimation.
SHOP RATES You need a basis for all your pricing calculations. Most people use an hourly billing rate, which is unwise. Those rates
aren’t specific to you; they’re based on guidebooks, blog posts, and what your friends charge. Sustainably profitable companies use hard maths to determine how much to charge. They know something our industry is still learning: your gut is not a calculator. Your business has a limited amount of time to sell each month, regardless of how you bill. There are a few ways to overcome this limitation, but each is flawed. ● Raise your rates: There’s a limit to how much you can charge per hour, and you could price yourself out of the market ● Hire cheaper: Hiring those who make less than your hourly billing rate can cause your overhead to rise quickly, and employees may not produce the quality of work your clients expect ● Build in profit on a per-project basis: It’s unreliable to calculate costs and profits on a per-project basis; you can only control so much
july 2016 69
FEATURES Cover feature
In control When you’re not in control of your pricing, it’s like going downhill at an unsafe speed. It’s fun for a while, but unsustainable. Get control and enjoy the ride
So what’s the solution? You need to find something called your shop rate: (Expenses + profit) ÷ hours = shop rate Find out what it costs to run your business, add in profit up-front, and then divide it by how much time you have. This tells you exactly how much each unit of time you have to sell is worth, which you can then use to calculate your project prices. Knowing your shop rate puts you in control of your pricing strategy.
Expenses Expenses include your recurring monthly spending, annual spending, your salary, the salary of any staff or contractors, and taxes. Broken down into a formula, it looks like this: (Recurring expenses + 1/12 of annual expenses + your salary + staff salaries + contractor fees) × 1.25 = expenses
70
july 2016
YOUR SHOP RATE TELLS YOU EXACTLY HOW MUCH EACH UNIT OF TIME YOU HAVE TO SELL IS WORTH. THIS PUTS YOU IN CONTROL OF YOUR PRICING STRATEGY Recurring expenses include rent, software, utilities, supplies and routine purchases. If you don’t know your monthly costs, create a budget and stick to it. This isn’t easy, so be honest and give yourself extra room. Annual expenses include anything you have to pay for annually or quarterly: large purchases such as computers, furniture and conferences. Divide the cost of each annual expense by 12, to account for 1/12 of that expense each month. This will help you eliminate surprises throughout the year. Then pay yourself a salary that meets your lifestyle needs. Find a good number that matches what you’d make if you worked for someone else. Also include the salaries of anyone who works for
you. Contractors should be priced at a fixed amount for each project unless they work for you all the time. If that’s an irregular expense, again you need to set a budget and stick to it. Finally, save for taxes. Tax liabilities vary by country of business. Know what they are and make them a line-item in your budget – don’t try to ignore them until the bill comes. We use 25 per cent as a guideline in the US. Once you have all of those numbers tallied, you have the expenses part of your formula. We’re going to use $20,000 as our example number.
Profit To make a consistent profit, build it into the operating costs of your shop rather
Cover feature – their salaries were included as part of your expenses calculation. When working out this figure, the goal is to find a real number that is sustainable for your business, not to see how many hours you could work if you gave up your nights and weekends.
Billing rate
Looking ahead Profit is often lost by failing to plan for major expenses
than trying to make a profit on each individual project. This can protect you from the projects that do go over budget or that you underestimate. To calculate profit, add a percentage to your monthly expense total. Find a guideline that makes sense for you and your business, at Nine Labs we have a base profit of 20 per cent. Because profit is built into the shop rate, every unit of time you sell is already profitable. Here’s the formula, using $20,000 as the example expense figure: 20,000 + 20% = 24,000 That means above all of our expenses, salaries, annual costs and taxes, we’re going to make an additional $4,000 each month. But profit opportunities don’t stop there. We still target an additional profit of between 20 per cent and 40 per cent on each individual project by quoting the right price. We can do this using a variety of methods.
Hours Hours are the billable time you have available to work. This means the time each person can spend on services; not how many hours they’re at work. If you have employees, this is the sum of everyone’s billable time added together to give your shop’s total bucket of hours. The average is 30 billable hours per week for production employees, and 20 or less for owners and management. Non-billable employees, such as project managers or sales, do not contribute
You’ve now added up your expenses, built in profit, and know how many hours you have to sell. So if we have $20,000 in expenses, $4,000 in profit, and 160 billable hours to sell, we have a shop rate of $150 per hour. (20,000 + 4,000) ÷ 160 = 150 The difference between your shop rate and your billing rate is how it’s used. Your shop rate is private and can’t be moved; it’s never negotiable. Your billing rate (if you choose to bill hourly) is public and can be negotiated, but it should never be less than your shop rate. It’s up to you to determine what it is, based on your market, your interest in the work, and your current cash flow.
PRICING MODELS Now that you have a shop rate, you have a baseline number for all your pricing calculations. Using this number you can determine what it takes to complete a project. To do so, you’ll use one of seven different methods. Whether you’re a freelancer or large agency, there is no single ‘right way’ to price. Instead, look for the ‘ideal way’ to price. Most companies will use two or three different methods. Use your past experience and estimation exercises to determine how much time and effort is required for each project. Look at two or three models to find the right one for each situation. And since your minimum profit is already covered by your shop rate, you have much greater freedom to say no to bad pricing situations.
HOURLY PRICING Hourly pricing is one of the two most simple models. The key things you need for successful hourly
Improving your time estimates Don’t tie your payment schedule to deliverables in the project, such as the start and end. Instead, tie them to time. By breaking the project down in this way, you remove the client’s leverage to withhold payment while requesting changes. It ensures you’re not making excessive changes just to get the client to sign off on the next payment milestone. Bill on schedule, whether the work is done or not. Make your subcontracted resources project-based as well. Instead of having freelancers work on an hourly basis, get them to give you a fixed-fee quote for any work they do for your project-based clients. That way if their contributions to the project go over budget, you can quantify those costs for your client and ensure more predictable line-item budgets from the start. Break your projects into smaller ‘projects’. Don’t try to create a single statement of work for everything you’ll need to do over the next few months. If your projects are of any substantial size, try to break them up into smaller components that you can complete and bill for with higher frequency. The risk lies in not having a guarantee of the later parts of the project, but if you’re doing quality work and establishing a strong relationship with the client, that shouldn’t be an issue.
Break it down Use the work breakdown structure to manage projects more easily
july 2016 71
FEATURES Cover feature Example shop rate calculation Monthly costs Annual (1/12 of £9,600) Your salary Staff salaries Contractor costs
3) Hours
2) Profit
1) Expenses $4,000 $800 $10,000 $6,000 $2,000
Total monthly expenses 20% monthly profit
$28,500 $5,700 $34,200
Total monthly cost ÷ Total billable hours
$22,800
$22,800 x 1 .25 for taxes Total expenses
$28,500
Owner billable hours Designer hours Developer hours Total billable hours
Total monthly cost
$34,200
Shop rate per hour
80 100 120 300 $34,200 300
$114
Adjusting rates Your shop rate calculation should be revisited at least four times each year and any time you add new employees
pricing is discipline, documentation and communication. It requires greater scrutiny of the process, which often doesn’t foster client trust. Hourly pricing only works when you have good data. You must meticulously track your time and expenses, and consistently check in with your client. This approach is ideal for freelancers who aren’t directly working with the client – for example, a freelancer for an ad agency. It’s also ideal for any work
A RETAINER IS THE CLOSEST THING TO A REGULAR PAYCHECK; IT’S A PRE-SET AND PRE-BILLED FEE FOR A TIME PERIOD OR VOLUME OF WORK involving sophisticated technology such as app development, where things often go wrong. However, it isn’t a long-term solution for most creatives unless you choose to remain freelance. You will only
become more profitable by raising your rates, which has a ceiling. To summarise, hourly pricing is a good option if: ● You’re working regularly with the same client, on similar work ● The project’s deliverables are unclear ● The scope of the project changed several times when meeting with the client ● You’re doing complex technical work
PROJECT-BASED PRICING
The right way Choosing a single path isn’t necessary with a strong pricing strategy. If you know what you need, there are multiple ways to get to the same place
72
july 2016
The second of these simple models is project-based pricing, which can be used in tandem with the hourly model. Project-based or ‘flat-fee’ pricing is the most common model. Someone asks you how much a website costs, you tell them $4,000, and you charge them $4,000 regardless of the time or cost involved. However, with this method we often underestimate the effort required, and end up with excessive changes or unexpected problems. This means a loss in profit or an awkward request for a budget increase.
Cover feature
Q&A Ilise Benun Getting the client to tell you their budget isn’t easy, but knowing the numbers can help you avoid wasting our time on poor proposals. Marketing mentor and author Ilise Benun shows you how
Effective pricing Successful hourly pricing requires discipline, documentation and communication
Project-based pricing can be profitable, and it’s a step toward valuebased pricing and higher profit levels. If you do similar work for similar clients routinely (e.g. WordPress websites for restaurants), you can cut costs and increase profit with this approach. It can also work well if you’re good at time estimates, but most of us aren’t. You want to use this approach if: ● The client asks about money a lot up-front ● It’s clear you can get the project done faster than the client’s estimate
RETAINER PRICING A retainer is the closest thing to a regular paycheck; it’s a pre-set and pre-billed fee for a time period or volume of work. This can be based on time – for example the client agrees to buy 100 hours per month at $100 per hour, for a total of $10,000. Alternatively, it can be based on value. In this case the client might specify the features or deliverables they need, and pay $10,000 per month for this work, regardless of exactly how long it takes.
There are two types of time-based retainers: rolling and use-it-or-lose-it. In a rolling retainer, clients roll over any unused hours to the next month. In a use-it-or-lose-it retainer, any unused time is lost and the balance resets the next month. Don’t offer rolling retainers; you’ll end up doing meaningless work just so your client can burn through the hours. You will find a maximum hourly rate a client is willing to pay. Value-based retainers enable you to scale your skills instead of your time, which means you can increase your profit. If you can reduce the time it takes to produce a chunk of code, you are no longer penalised for the increased efficiency. You are paid the same amount regardless of how long the job takes.
VALUE-BASED PRICING The crux of value-based pricing is ensuring the client is satisfied they paid for what they received. Two clients may pay a different price for the same work. But they aren’t paying you for your time; they’re paying you for solutions. And those solutions are worth more to
What are your thoughts on asking for the client’s budget up-front? IB: Asking is important, but most clients either don’t know their budget – or what’s reasonable – or they can’t (or won’t) tell you. Know that most won’t tell you, and be prepared to push back when that happens. How do we ‘push back’ when clients say, ‘I don’t know?’ IB: There are three actions you should take. The first is to help them figure it out. It’s your responsibility to help them determine what their budget is when they don’t know. This demonstrates your value and it may result in getting the numbers. One simple approach is to be bold and put some numbers on the table. That doesn’t mean to pull numbers out of thin air. Rather, ask them: ‘Is this in the range of $500, $5,000, or $50,000?’ and see what they say. Make it clear this isn’t your price; it just a range to help you determine what they’re thinking. If that doesn’t work, it’s up to you to decide whether it’s worth pursuing. Determine what it will take to write a proposal and whether the perceived value of the project is worth it. If it’s not, be ready to say no. You can always move on to the next one.
july 2016 73
FEATURES Cover feature
Resources Creative truth: Start & build a profitable design business thecreativetruth.com
This is my own book, and it covers pricing in great depth, as well as taking a look at starting your business, operations, invoicing, and how to grow. The creative professional’s guide to money netm.ag/benun-281
Ilise Benun covers cash flow, money management, and how to build a repeat book of business by building a money routine. Design is a job abookapart.com/products /design-is-a-job
Mike Monteiro’s blunt advice on attitude and communication is priceless. This book is packed full of practical tips. Double your freelancing doubleyourfreelancing.com
This course from Brennan Dunn can do exactly what it says if you do the work – especially for retainers and value-based pricing. RescueTime rescuetime.com
If you’re bad at time tracking like me, this tool will fix it for you.
Releasing restraints Value-based pricing calls for a less traditional client relationship. At Nine Labs we call it growth-driven design and our clients love it
some clients than others. It’s driven by customer demand and their willingness to pay. The strategy is based on three components, which we’ll look at now.
What your market will bear Consider the limits of both your local market (where you do business) and your horizontal market (what you do). You can get granular and define your market as ‘custom logo designs for consumer brands’. You need to find out what your competition is charging for similar work with clients of similar size. So how do you do this? ● Ask: You’ll be shocked at how many people will tell you ● Go where the clients are: Instead of networking with other creatives, go to client events and trade shows and ask them what they paid ● Get involved: Go to conferences, join trade associations, and sit in round tables and talk about pricing ● Monitor: Set up alerts for freelance pricing guides and pricing surveys
Pricing truths Creative Truth is the book I wish existed when I started. Since it didn’t, I wrote it
Your track record Your past experience will affect how much you can charge. If you have
74
july 2016
extensive experience with a particular type of client, technology or style of design, then you fall into the ‘expert’ category. Experts can charge more for their services. Clients see that hiring you means that they’re more likely to get desirable results.
Perceived value Often you’ll be called upon to detail how your work is ‘worth more’ to the client than the work of others. There are ways to quantify value, but the mentality has to change from what the client values to the client valuing you and your expertise. This means you have to demonstrate expertise, competence, and the ability to quickly understand their problems.
PACKAGE PRICING Package pricing can get a business up and running, but it can also result in your services being viewed as a commodity. Putting your prices out front before you’ve analysed the client’s problem puts your needs (money) above theirs (effective solutions). You’ve removed the ability to find pain points and address them directly because you have fit their problem into
Cover feature
Option 1: Half-Day Discovery What we’ll do:
Together we’ll gain an understanding of your business, and the timeline and budget needed to complete your project.
Option 2: Full-Day Discovery What we’ll do:
In addition ... you’ll understand the next steps to get your project going. The project activites outline describes who needs to be incloved, what they will do, and how we’ll measure progress.
What we’ll do:
In addition ... we’ll create a technology recommendation of the software, systems, and tools needed to complete your project. And with our project plan outlining the details, your project will be ready to begin progress.
What you’ll get:
What you’ll get:
What you’ll get:
● Project
● Project
proposal
● Project
proposal
● Project
activities outline
● Project
activities outline
proposal
● Technology
recommendation
● Project
How long it takes: 3 hours
Cost: $900
How long it takes: 1 day
Cost: $2400
Value-based pricing vs performance pricing
Option 3: Project Kickstart
plan
How long it takes: 2 days
Cost: $4800
What you’re pricing Pricing packages don’t have to be for deliverables, they can also be used for things like workshops
What’s the difference? Value-based pricing
Factors of control
Performance pricing
When value-based pricing is mixed with metrics such as saving costs, reducing the number of instances or increasing the sales, it can be dangerously close to performace pricing.
Pay tied to metric outcome
Performance pricing occurs when your pay is dependant upon achieving metric goals and your agreement says so.
● Brand package: A logo, website, brochure and business cards at one fixed price ● Template customisation: Customised website themes for WordPress or Squarespace ● Consulting workshops and day rates: A workshop aimed at public or private audiences ● Analysis or reviews: Analyis of existing projects or assets at a fixed cost, including a report ● Photoshoots and videos: A certain number of shots or amount of time You can also offer price ranges (for example, ‘CMS-based websites range from $5,000 to $20,000’), or consider
Pay set after work starts
While the client may be dissatisfied if you fail to meet the goals, but you’re still paid the same, it’s not performace pricing, it’s value or project-based pricing.
Pay set before work starts
The key difference is whether your pay is tied to achieving the metrics or if meeting metrics is simply part of whether you did a good job or not.
Market determines success Client acceptance is success
Value vs performance Value-based pricing and performance pricing aren’t the same thing, here’s the difference
Pricing model comparison Pricing model
Profitability Risk
Documentation Difficulty to sell Best use cases
Hourly billing
Low
Moderate
High
Very low
Freelance, technology
Project-based pricing
Moderate
Moderate
Low
Low
Design, UI, FED
Retainer pricing
Moderate
Low
Moderate
Moderate
Content, UX, dev
Value-based pricing
High
High
Low
Very high
Consulting, UX, obj. prog.
Package pricing
Low
Low
Moderate
Very low
Branding, design, web
Performace-based pricing
High
Very high
Very high
High
Tech, apps, software, UX
Equity pricing
Very high
Very high
Very high
Moderate
UX, UI, apps, software, tech
Different options Every pricing model has challenges and advantages; find the right option for each situation instead of sticking to just one
PACKAGE PRICING CAN RESULT IN YOUR SERVICES BEING VIEWED AS A COMMODITY. IT PUTS YOUR NEEDS (MONEY) ABOVE THE CLIENT’S (SOLUTIONS) your process. If your package pricing includes discovery and analysis, that won’t be as big an issue. Here are some examples of different package pricing options:
Paid regardless of outcome
minimum project costs. ‘Projects start at $10,000’ indicates you will not accept projects that are less than $10,000.
PERFORMANCE-BASED Performance-based pricing means to base your fee on the performance of your work. You must affect a measurable outcome for your client, such as higher revenue or increased efficiency. It’s often tied to analytics, so it’s common with web or application design, and with ad agencies and SEO experts that can measure media impressions. You must have a bulletproof contract with clear metrics and clear terms – if you don’t have legal support, don’t use this model. It can result in powerful working relationships that closely align the buyer’s goals and the seller’s goals, creating the ultimate bond between you and your client. It’s near-impossible to under-price yourself, as long as your metrics line up.
EQUITY PRICING You may be offered a stake in a business in exchange for your work, either in lieu of any cash payment or as a mix of equity and a reduced cash payment. This approach is good for side projects or small engagements, but not if you’re giving up a large number of cash bookings or clients and you need the money now. Success depends on where the company is at the time you get involved. If it hasn’t received any outside funding, your ownership could be diluted once it does. If it has, you’re going to be offered little equity, probably less than 5 per cent. If the company is funded but can’t offer you partial cash, it’s not worth it unless you plan to go and work there full-time.
FIND YOUR METHOD Money can be messy, but it doesn’t have to be. The key is to avoid getting emotional about pricing. No two projects or clients are the same, and there has to be a method to the madness. The sooner you get control of your pricing strategy, the sooner you’ll find profitability.
july 2016 75
FeatureS Second feature £
s y a 10 w e s a e r c n i o t $
$
£
$
£
$
$
s e l a s r u o y $
£
£
$
£
£
£ $ $ £
$
$
£
Alex O’Byrne presents some steps you can take to up the number of orders you’re getting through your online store
£
I
t’s never been easier to set up an online store. But there’s a big difference between setting up a store that allows people to buy, and setting up a store that convinces people to buy. For this reason, hosted platforms – which make setting up an online store easier – are not a threat to web designers and developers. They are an opportunity for us to focus on the real value we can offer through consulting and implementing an exceptional user experience. Here are 10 ways that you can squeeze more sales out of an online store.
1
$ AUTHOR ALEX O’BYRNE Alex is the co-founder of WeMakeWebsites, the UK’s leading Shopify expert, where he helps create beautiful ecommerce websites that generate sales wemakewebsites.com
BE READY ON MOBILE
Today, over half of the visitors to your clients’ websites will be using mobile and tablet. Mobile is taking over our spare time and now people are getting comfortable buying through mobile too. In fact, the UK leads the world in mobile spending, with around 28 per cent of transactions being done through handheld devices (netm.ag/stats1-281). You might expect that it’s just low-value products being bought on mobile, but it’s actually the highend brands leading the charge. Last holiday season, NET-A-PORTER reported on Black Friday that 41 per cent of their transactions were on mobile. That’s orders – not traffic. Fashion and luxury are the industries in which mobile is most important.
$
£
If that’s not enough to convince you, since April 2015, Google has penalised websites that aren’t optimised for mobile by pushing them lower down the ranks in mobile search results. Use responsive design to ensure that your website works well on all devices. Make sure clickable elements aren’t too close together and keep font sizes readable without the need to zoom. Also, keep in mind that hover effects won’t work on most mobile devices.
2
DON’T WORRY ABOUT SEO
Every client I meet is concerned about SEO – overly so in my opinion. Some of them may as well be worrying about the layout of chairs on the Titanic. As Google gets more advanced, having to explicitly do ‘SEO’ is getting less important. The crude strategies of keyword stuffing and the like don’t work any more. Google just wants you to help it deliver its service, which is to accurately provide answers to users as quickly as possible. This means producing good content that answers real user questions. So start by thinking about your target audience and what they might be searching for. The closer this content is to your product, the more effective it’s going to be. Good content helps you build a relationship with your target audience. A modern company blog needs
july 2016 77
£
$
$ Minimal design WeMakeWebsites’ creative director Piers Thorogood explains the secrets to pared-back site design Achieving a highly effective minimalist design is a difficult task in any area of web design, but it’s particularly challenging when designing for ecommerce. Shopping sites tend to be information-heavy, so, as designers, we need to prioritise content and pare back anything that is not essential. In practice, this typically means the top section of the page is dedicated to the selling essentials and anything else is pushed further down. Taking a product page as an example, I would expect to see a product image, title, price, short description (perhaps linking to more details), a note on shipping (e.g. ‘Free UK Shipping over £100) and a buy button. You might also have links to sizing info if this is required. More detailed information, such as full product descriptions and technical specifications, can then be broken down into small chunks and spaced generously further down the page. People are more than happy to scroll to find these kinds of details. A great example of minimalism in ecommerce is the Harry’s website (www.harrys. com). The product page is beautifully minimal, but has all the information you need to make a purchasing decision. As a final note: It’s often tempting to litter an ecommerce website with promises of security and trustworthiness (damaging your minimal aesthetic), but a far more effective marker of trust is a good quality design. It’s often unconscious, but people will purchase from you because the website just feels more trustworthy. That’s not to say you shouldn’t ever use trust symbols on your site – but they don’t need to be front and centre.
Top Providing interesting content – like this blog from bedding retailer Casper – can help you boost your Google rating Bottom You may not like
them, but pop-ups work. Offer something of value in return for an email address
to feel like a good magazine. Some brands doing it well are Luxy Hair’s video blog (netm.ag/hair-281), Casper’s Pillow Talk (blog.casper.com), Missguided’s blog (blog.missguided.co.uk) and WATCH XCHANGE’S Watch Life (netm.ag/watch-281). With that said, there are things you can do to improve your listings beyond having good content. Make sure pages are fast to load, easy to read, and that your menu is simple to use. Improve your chances of people clicking your page in the search engine result pages (SERPs) by editing the search snippet that appears beneath the page title in Google. You can do this by changing the meta description tag. For blog posts, make the snippet as interesting as possible. For product pages, use it to summarise the product and mention any key selling points, like guarantees or free shipping. Remember to keep it under 160 characters.
3
Don’t underestimate email
Even in the age of social media, an email address is still the most direct route to your
£
Second feature
audience. According to data from Monetate, email still converts higher than visitors from social and search. The easiest way to gather email addresses is to add a pop-up box. Love ’em or hate ’em, there’s no denying they work – and if you have the right incentive you can expect to see a conversion rate of five to 10 per cent. On that note, make sure you give something in return. An email address is incredibly valuable; it’s a direct line to someone’s personal inbox. So offer free shipping or 10 per cent off the next order. If you really don’t want to give away something of monetary value, opt for a useful resource like a white paper or buying guide. The incentive to sign up should be related to what you sell. That way you can be sure the emails you get are qualified. So if you’re running a T-shirt shop, don’t offer a chance to win an iPad – you’ll only attract people who are interested in iPads. If you don’t want a pop-up to show instantly to new visitors, trigger it to appear after a certain number of pageviews or use exit intent JavaScript
It’s painful to say, but clients need to prioritise good photography before good design to detect when a visitor is preparing to leave the page. This is less aggressive, it won’t damage your bounce rate and you may get a higher conversion rate than an instant pop-up. Once you have an email list, send offers, news and interesting content. Make sure your emails offer value to your audience to reduce your unsubscribes, and be sure to monitor your analytics to see what works and what doesn’t.
4
Build trust
Trust is key to increasing your conversions. It takes faith to buy from an online brand: customers are sending their money out into the ether and have all sorts of concerns about their order: When will it arrive? What happens if I change my mind? Is paying through this website safe?’ Good design builds trust. That means making sure the website works on all device sizes, and the design matches the brand consistently throughout the site.
You should also make sure you include trusted logos, such as a Verisign or McAfee site seal – or even just your payment gateway logo if it’s a well known brand. You can also include all the card logos you accept in your footer; this makes your store look more legit and also makes it clear that it’s a store (if that’s not obvious already). Beyond this, your product pages need to answer any potential questions a buyer could have. When will the product arrive? How soon is it despatched? How does sizing work? What are the care instructions for the item? Is there a warranty? What is the total cost, including shipping and other fees? Showing this information as early on as possible builds trust and allows the customer to make a decision with all the information they need.
5
Product photography It’s vital to include good quality images of what you’re selling
£
Use excellent photography
It’s painful to say this as a web designer, but I think clients need to prioritise spending on good photography before good design. Photography is often the first chance to show your product in the wild, to get a feel for what your brand aspires to, and to inspire the customer. Good photography sells the product. We generally break down site photography into two categories. Lifestyle photography shows the product in use, often with a model or in an example setting. Lifestyle photography is usually aspirational and shows your product to its full potential. It’s used on the homepage and sometimes on product pages. It’s also a good idea to show lifestyle photography
july 2016 79
$
£
Above Including related items in product photography can help the potential customer judge size Below Images of your product in use add an aspirational element
at the top of your collection or category page to provide an interesting introduction to that range of products. Cut-out photography shows the product against a white background. This image style is usually reserved for the product page and needs to show the product in detail and from all angles. If possible, include a picture of the packaging. If it’s hard to judge the size of your product, make sure you also picture related items, to help the customer out. A professional photographer is a must, but if your client really wants to do it themselves, make sure they use a DSLR and their images are well lit, sharp and inspiring. For your design to work you also need to make sure all lifestyle and product photography is consistent.
6
Offer free shipping
7
Watch visitors use the site
8
Automate marketing
In 2012, Worldpay undertook a study with 19,000 consumers and 153 senior retail decision-makers. It found the biggest reason for visitors dropping out of a purchase was hidden fees. The main culprit is usually shipping fees added at checkout. Offering free shipping as standard solves the technical problem of having to calculate a shipping fee on the product page. It’s also increasingly expected by customers that are used to the service offered by large retailers like Amazon and ASOS. If you do this, you should put it in your website header along with any other strong selling points. This ensures all new visitors see the information, regardless of which page they land on. If you can’t offer free shipping on every order, because it’s not priced into your products, consider offering free shipping over a certain price. This will increase your average order value (AOV) because anyone close to the free shipping threshold will likely add more stuff to their cart.
Back in 2000, Nielsen Norman Group did a famous study (netm.ag/neilsen-281) that revealed that you only need to show your website to five people to get most of the feedback you need to improve it. You can get priceless feedback from showing your website to people in your office, customers or even your parents. It’s easy to end up in a bubble when designing, and this simple exercise will make sure you spot any usability problems that have become invisible to you.
Do you want to make money in your sleep? Don’t we all. Advanced and affordable automated email marketing is making this a reality. The secret to a profitable ecommerce business is that the lifetime value (LTV) of a customer must be more than the first purchase. So you need to encourage repeat purchases. Customer loyalty raises your ROI per customer and increases the chance that customers will become brand advocates. MailChimp’s automation suite is included in its Pro plan, which starts at $199/month. It allows you to set up automated email campaigns to welcome new customers, win back old ones and reward loyal ones. You define the triggers and the emails you want sending, and MailChimp does the rest once a customer matches the criteria you’ve set. These emails are great at generating instant sales and increasing your customers’ excitement. Be creative and think about how the emails can reflect your brand personality and tone of voice.
80
july 2016
Second feature
Google Analytics reports
$
Every client asks for Google Analytics to be installed but I get the impression it’s often never looked at again. Hey, even in the industry we have to admit GA is underused. It’s a complex tool that’s not always intuitive. Here are my two favourite reports. They’re easy to read and give valuable information.
9
Measure what works
The best businesses use data to steer their decisions. Shopify includes easy to digest reports that merchants can use to figure out what marketing is working, which products are popular and which ones are selling best. Google Analytics can be plugged into most websites and provides a huge range of reports
Free shipping Offering
free postage over a certain price threshold can encourage customers to buy more items
Exit pages
For a profitable business the lifetime value of a customer must be more than the first purchase
The exit pages report is useful for seeing which pages people most commonly leave your site from. Find it under ‘Behaviour > Site Content > Exit pages’.
that you can customise. Spend some time defining your favourites and pass them on to your clients, showing them how to make actionable insights from the information provided. Use this to make ongoing improvements. See the boxout opposite for more.
The landing page report can be sorted by ‘Revenue’ to show you which entry pages lead to the most sales. This is useful for seeing which blog posts, campaign pages and products generate the most profitable traffic. Find it under ‘Behaviour > Site Content > Landing pages’.
10
Don’t stop improving
Never stop improving; that’s the secret to a successful business and a successful website. You’ll continually be learning what works and what doesn’t, and what you discover may sometimes surprise you. Trends change year-to-year and the best ecommerce brands are always trying out new techniques online. That relentless novelty is what makes our industry so exciting.
Landing pages
£
$
july 2016 81
SYDNEY 5 SEPTEMBER 2016 Generate is heading to Oz! Join us for a one-day, one-track event with talks on user experience, CSS and more
ERIKA HALL
JONATHAN SNOOK
NICK FINCK
JOHN ALLSOPP
www.muledesign.com
www.snook.ca
www.nickfinck.com
www.johnfallsopp.com
CO-FOUNDER, MULE DESIGN
UX ARCHITECT, XERO
UX SPECIALIST
AUTHOR AND DEVELOPER
TICKETS ON SALE NOW
www.generateconf.com
Tips, tricks & techniques
THIS MONTH FEATURING...
84
90
104
REVEAL AND HIDE A MENU WITH CSS ANIMATIONS
84
HEAD TO HEAD: BOOTSTRAP VS FOUNDATION
97
5 WAYS TO POWER UP YOUR SHOPIFY THEMES
104
PROTOTYPE A FLOATING ACTION BUTTON IN PIXATE
90
CREATE A GRID THAT ADAPTS TO ALL SCREENS
98
BUILD INTERACTIVE EMAILS WITH CSS
108
GET YOUR PRICING STRATEGY RIGHT
94
WEB STANDARDS: WEB ANIMATIONS API
103
ACCESSIBILITY: ONLINE CHECKOUTS
114
Desktop
Mobile/tablet
0
0
0
0
0
0
0
0
0
0
BROWSER SUPPORT
EXCLUSIVE VIDEOS
We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent Can I Use web widget (andismith.github.io/caniuse-widget). It explains from which version of each browser the features discussed are supported.
Look out for the video icon throughout our tutorials. This issue, four authors have created exclusive screencasts to complement their articles, including Tobias Ahlin’s guide to animating a menu icon with CSS, and Marc Anderson’s tutorial on grids that enable your designs to scale to all devices.
july 2016 83
PROJECTS CSS
View source files here! All the files you need for this tutorial can be found at netm.ag/CSSgit-281
A B O U T T HE A U T H O R
T OBIAS A HL IN w: www.tobiasahlin.com t: @tobiasahlin job: Designer and developer areas of expertise: Product design, HTML, CSS q: what’s the most used app on your phone? a: Notes. You know in movies when there’s someone sketching out ideas and you see a trashcan full of crumpled up pieces of paper? Notes is my trashcan
CSS
REVEAL AND HIDE A MENU WITH CSS ANIMATIONS Tobias Ahlin explains how you can use CSS animations to make a site more delightful and easy to use
VIDEO Tobias Ahlin has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/animatevid-281
84
july 2016
It’s through animation that we make sense of the world: doors swing open, cars drive to their destinations, lips curl into smiles. Even the things that feel instantaneous, like lightning striking or dropping a phone on your face while using it in bed, happen over time. It’s through that motion that we understand how objects relate and function; if they are light or heavy, rigid or loose, connected or separate, sticky or slippery. On the web, however, we’ve got used to things appearing and disappearing in the blink of an eye. We click on a link and everything changes. It’s like being led into a room blindfolded, spinning around a few times, and removing the blindfold to take in the surroundings. You don’t even know which door
you entered through. This is by and large how most sites are built. We can do better. When learning about the potential of web animation it can be easy to let our imaginations go into hyperdrive and sprinkle animations on just about everything. While animation can be great, we need to be careful and always ask ourselves: Is this animation meaningful? Is it adding any value other than being beautiful? Is it making our product easier to use?
MEANINGFUL ANIMATION In this article we’re going work with a common UI element: a menu toggle. We’re going to create the menu (and an icon to go with it) with CSS, and make
CSS
Focus on
Animating with CSS
Starting point This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation
it come alive with animations. We’ll make sure that the animations are meaningful, but also apply web performance best practices to ensure they’re as smooth as possible. You can preview the end result over at netm.ag/ CSSdemo-281. In case your browser is out of reach: when the user clicks the menu icon we’ll expand the icon’s background plate (a circle) to cover the screen, and present the menu overlay. Rather than
Animations are great at connecting elements and showing how they relate to each other just flash to a close icon, we’re going to animate and morph the three vertical lines (that make up the menu icon) into an ‘X’, to represent a close icon. In other words, as the menu is revealed the icon morphs into a close button.
Related elements You might be thinking ‘So, is this a meaningful animation?’ Well, great question. Short answer: Yes! Longer answer: Animations are great at connecting elements on the screen, and showing how they relate to each other. As we scale up the menu’s background plate to become the menu, we show how the two are connected – similar to how an app icon, when pressed on iOS or Android, scales up and takes over the screen, showing that the app was launched from that very icon. Our menu icon doesn’t just toggle the menu: it is the menu, only collapsed.
There are two ways of animating in CSS: with transitions and animations. Transitions can only animate between two states (or key frames): the initial state and the final state. Animations on the other hand give you more fine-grained control. You can use as many key frames as you like, and make your objects move in intricate patterns. The article uses transitions exclusively. While animations are more powerful, transitions are easier to manage, and are versatile enough to let us create stunning effects. If you’re new to CSS transitions, here’s how to think about them: you use transitions to tell the browser how to change an object over time if it changes later on. For example, to animate the background colour of a button when you hover it, you could use this CSS: .button { background-color: black; transition: background-color 0.3s ease-in-out; } .button:hover { background-color: blue; } When you hover over the button, it will change its backgroundcolour from black to blue over 0.3 seconds, using a timing function of ease-in-out , which will make the animation start quickly and end slowly. What can you animate? In theory, just about every CSS property: width, height, margin, padding, and so on. In practice, however, we’re limited to just two properties: transform and opacity . These are the only two properties that will produce smooth animations in modern browsers, by utilising hardware acceleration. Don’t worry though – you can do just about everything with the transform property, and it’s a technical constraint that won’t limit our creativity. Understanding hardware acceleration is not within the scope of this article, but if you’re interested in learning more about web animation performance, I recommend Artem Tabalin’s article on the subject: netm.ag/tabalin-281.
july 2016 85
PROJECTS CSS Similarly, just like how an on/off toggle transforms between its on and off state when you press it on iOS, our menu toggle will change between a menu icon and a close icon depending on if our site’s menu is visible or hidden. This helps enforce the idea that the two icons function in similar ways: they both control the menu. So while we’re making our site fun to use, we’re also making it easier to understand, and improving the user experience ever so slightly.
Get started Download the project files at netm.ag/ animatefiles-281. Open up index.html in a browser and you should see three big links against a white background. This is the menu overlay we’ll reveal. First of all we need to hide it. In styles.css , add these styles to .menu-overlay : opacity: 0; visibility: hidden;
affecting the icon itself, so we need to decouple the background from the icon. Let’s start drawing the lines that make up the icon. What do they all have in common? They are equally wide, they have rounded corners, are absolutely positioned, and they have a background colour. Since all the lines share the menu-line class, let’s use it to set these shared properties: .menu-line { background-color: #333; height: 2px; width: 100%; border-radius: 2px; position: absolute; left: 0; } Then we can use the lines’ unique classes to set the vertical position: .menu-line-1 { top: 0; }
Drawn in CSS By drawing the menu icon with CSS (and no images), we can easily animate it later
With the overlay gone, a button should appear in the top-left corner. Let’s draw our menu icon here, so there’s something to click on to show the overlay. To make it easy to animate, we’ll draw it using just HTML and CSS; no bitmaps or vectors. We’ve already got some HTML in index.html for the menu: a container ( .menu ), a background ( .menucircle ), a link ( .menu-link ) and the icon ( .menu-icon ) with one span for each line. Having a separate div for the background is a somewhat unconventional approach. If we weren’t about to add animations to this circle, we wouldn’t need a separate div ; we could just add a border-radius and background colour to our menu-link . However, we want to be free to use the transform property on the circle, so we can scale it without
.menu-line-2 { top: 0; bottom: 0; margin: auto; } .menu-line-3 { bottom: 0; }
Add a hover effect Let’s make the icon clearly clickable by adding a hover effect. In styles.css , create a new selector for menu-circle to scale it up when you hover the menu: .menu:hover .menu-circle { transform: scale(1.4); } Now we can add our first animation. Add "transition: all 0.2s ease-in-out" to .menu-circle {} (not to the hover state). We’re telling the browser to animate all properties that may change for .menu-circle . So when we scale it up on hover, it animates over the course of 0.2 seconds to its new state, with a timing function of ease-in-out . How do you know which timing function to choose? First of all, avoid using a linear timing function. Few things in the real world move at a perfectly constant speed, so objects animated with a linear timing function tend to look unnatural and stiff (as Einstein would’ve said, “God doesn’t play dice with a linear timing function”). As a rule of thumb, ease-out works great for presenting new objects, and ease-in works great for removing objects. And when in doubt, ease-in-out
86
july 2016
CSS
is a solid timing function to default to: it has a slow beginning and a slow ending, creating a smooth and fluid animation.
Show and hide the menu Let’s use jQuery to show and hide our newly created overlay. In script.js , toggle the class of open on .menu-overlay inside the existing click handler: $(".menu-overlay").toggleClass("open"); Then show the overlay when it has a class of open: .menu-overlay.open { opacity: 1; visibility: visible; }
Avoid using a linear timing function – this tends to look unnatural and stiff Connect the menu icon The transition we added earlier means we already have a neat fade effect going on when we show and hide the overlay. However, we can make it look like the menu icon background becomes the menu overlay, and better connect the two visually. Achieving this effect is easier than it seems: all we need to do is to quickly enlarge the menu circle when it’s clicked. The overlay will fade in simultaneously, creating the illusion that the menu icon is transforming into the overlay.
We need to be able to style the menu’s circle when the menu has been clicked. Open up script. js , and inside our existing click function toggle the class open for our .menu :
Expand on hover To make the menu appear clickable, we inflate the background plate on hover
$(".menu").toggleClass("open"); Now we can target this class with CSS and expand the circle as the menu is opened. At the very bottom of style.css , expand the .menu-circle when .menu also has a class of .open : .menu.open .menu-circle { transform: scale(60); }
Transform the icon We’ve got a beautiful reveal effect for our menu, but how do we turn the menu icon into a close icon? It’s surprisingly easy once you know how – we’ll only need to set three CSS properties. First off, we need to hide the middle line while the menu is being shown: .menu.open .menu-line-2 { opacity: 0; } Then all we need to do is flip the other two lines 45 degrees in opposite directions (the lines need to point in different directions to form an ‘X’, so note how one of the lines has a negative rotation of 45 degrees): .menu.open .menu-line-1 { transform: rotate(-45deg); } .menu.open .menu-line-3 {
july 2016 87
PROJECTS CSS transform: rotate(45deg);
In-depth
Resources Creating meaningful and beautiful animations can be timeconsuming and difficult, but luckily there are some great resources out there that you can use to jumpstart your creative process, and explore different areas in depth. Easing functions cheatsheet www.easings.net Timing functions specify the rate of change over time, and this site helps you choose the right one for your animation or transition. It features a gallery with Bézier curves where you can preview them, and quickly copy the code. Animate.css daneden.github.io/animate.css Dan Eden has compiled a library of beautiful CSS animations you can use in your projects. If you don’t want to load the entire library into your site, the project is also a great source of inspiration. Animate Plus github.com/bendc/animateplus Stripe is well known for its beautifully animated product pages. One of the masterminds behind these, Benjamin De Cock, has created a CSS and SVG animation library that is performant and lightweight, making it particularly well suited to mobile. Motion and Meaning motionandmeaning.io If you like podcasts, Val Head and Cennydd Bowles are hosting one for digital designers where they go into depth about motion. Hover.css ianlunn.github.io/Hover Similar to Animate.css, Hover.css is a collection of CSS effects you can use in your projects. It focuses more on hover effects for links, buttons, images and so on.
Easings.net This cheatsheet will help you pick the right easing function
} Well, sort of. We also need to centre these two lines vertically. At this point you could be thinking ‘Easy! We just need to change the top and bottom position to centre them’. And you’d be right – if we weren’t animating this icon. Since we can only achieve hardware-accelerated animations by limiting ourselves to animating the transform and opacity properties, we’ll have to resort to centring the lines through transforms. .menu.open .menu-line-1 { transform: translateY(7px) translateY(-50%) rotate(-45deg); } .menu.open .menu-line-3 { transform: translateY(-7px) translateY(50%) rotate(45deg); } These transforms will move the two lines so they are vertically centred within the icon container, and then rotate them to form the cross. Let’s break it down. We have two translations being used simultaneously: translateY(7px) and translateY(-50%) . The first transform, translateY(7px) , is used to move the line’s top edge to the vertical centre
As a rule of thumb, you can always improve an animation by using a custom Bézier curve of the canvas. The maths here is simple: 14 is the height of our icon, by dividing it by two we get the middle point: 7. The second transform, translateY(-50%) , is used to move the line so that the line’s vertical centre, not its top edge, resides on the vertical centre point of the canvas. Usually when using the % sign in CSS you refer to the parent of an element (setting width: 100% matches the element’s width to that of its parent), but if you use percentages with the transform property you refer to the element itself, not the parent. So for us to find a line’s height and move it upwards by half of that, all we need is translateY(-50%) .
Morph between icons Instead of just replacing the menu icon with the close icon, let’s morph between the two states.
88
july 2016
CSS
Start by adding a transition to .menu-line in style.css : transition: all 0.25s ease-in-out; Ta-da! A morphing menu icon. The animation is a bit dull, though. Let’s fix that. To make the lines appear more vivid, we can rotate them both an additional 90 degrees. The icon will look the same in the end, but the lines will travel further during the same time period. Change the rotations to rotate(135deg) and rotate(135deg) . As a rule of thumb, you can always improve an animation by using a custom Bézier curve that’s better adapted to your animation. We’re currently using ease-in-out – this means that the animation will have a slow start and ending, with a faster pace in the middle. I think a more spring-like effect is fitting for our icon. Let’s make it spin fast, with a small bounce effect as it comes to an end. For .menu-line , replace "ease-in-out" with a custom Bézier curve: transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); What are all those numbers? Don’t worry: Bézier curves are rarely written by hand. You use cubic-
bezier() to define the pace of an animation over time, and rather than writing them on your own, I recommend using a reference site. This comes from easings.net. It overshoots at the end of animation, and creates a subtle bounce effect. While we’re at it, go to easings.net and grab the code for easeOutExpo . We’ll use this to create a more refined effect for the menu background animation. Update the transition of .menu-circle to use this custom Bézier curve, and make the animation a bit longer (0.5s):
The transformation
The white circle expands to become the menu background, and the icon morphs into an ‘X’
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
Congrats! You’ve created a set of animations that are meaningful: they help you understand what’s happening on the site while navigating it, creating a sense of spatial awareness. On top of that, the animations run smoothly. By only animating the transform and opacity properties, we can make sure the browser’s hardware acceleration support can kick in, and avoid unnecessary lag. When playing around with animations, make sure you tick these two boxes: make them meaningful, and beautiful.
Res ource SVG animation is almost a subject in itself, and this article by Sara Soueidan is a great introduction: netm.ag/soueidan-281
july 2016 89
PROJECTS Pixate
View source files here! All the files you need for this tutorial can be found at netm.ag/assets-281
A B O U T T HE A U T H O R
CODY O’BRIEN
w: www.kraken-graphics.com t: @Cptn_Red job: Designer advocate, Google areas of expertise: Prototyping/design tools, customer support, product education q: what’s the most used app on your phone? a: 1Password. I tend to be a little forgetful
PIXATE
PROTOTYPE A FLOATING ACTION BUTTON IN PIXATE Cody O’Brien shows you how to use Google’s interaction design tool to build a floating action button with a Material Design look and feel
VIDEO Cody O’Brien has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ pixatevid-281
90
july 2016
Pixate allows you to quickly prototype interactive mobile mockups that can be previewed on Android and iOS devices. In this tutorial, we’re going to use it to build a floating action button (FAB) including sub-options. We’ll explore different techniques and settings in Pixate, such as transitions and conditions. FABs are used to promote action and attract a user’s attention. Generally an application’s main functions are accessed through a FAB. Our FAB is going to be in a Material Design style, which lends itself to beautiful, natural-feeling interfaces. Implementing Material Design elements is simple if you use Google’s guidelines (netm.ag/guidelines-281) for reference.
Before diving in, it’s important to understand that Pixate only uses images, so you’ll want to have the assets for your individual project ready and exported to the necessary screen density. The images used in this tutorial are pulled directly from the Material Design sticker sheet (netm.ag/stickers-281). This ensures the lighting, shadows, size and overall feel of the elements align with the guidelines. You can change the device you’re prototyping for by selecting the appropriate option from the flyout menu at the centre of the canvas menu bar. You’ll also need the Pixate mobile app for Android or iOS. It doesn’t matter what device you’re previewing on, as the app will automatically scale the prototype to fit your device’s screen.
Pixate
Step 2 Import all the necessary assets for your prototype
Step 4 Add four instances of the FAB to your blank canvas
Open Pixate, and from the Welcome screen click on ‘Create a new prototype’. Select your desired save location when prompted, and name your file. Once you click Save, you’ll be asked to pick the device you’re prototyping for. This doesn’t need to be the device you’re previewing on – for this example, we’re choosing the Nexus 5. You should now be looking at a blank canvas.
Drag the first so the bottom border snaps to the top of ‘FAB_normal’, and is vertically centre-aligned. Align the remaining three ‘FAB_option’ layers so they’re vertically centre-aligned and sitting on top of one another. This is how the FAB menu will appear when it’s expanded.
01
To start, we want to import the images for this tutorial. You’ll find all the assets I’ve used at netm.ag/assets-281 (these are all for a 3X prototype). In the upper left-hand corner of the screen, click on the middle tab and then click the ‘+’ button. Navigate to the folder where your assets are, select all of them and click Open.
02
Now we want to add and position the FAB and icon images. In Pixate, when you drag assets to the canvas, they’ll be created as a layer and that layer’s name will be the file name of the image you uploaded. This is how I’ll refer to the layers throughout this tutorial. Drag ‘FAB_normal’ to the canvas and position the layer where you want the FAB to sit. Also drag the ‘icon_add’ asset and centre it on the FAB. When you import ‘icon_add’ and try to snap it to the FAB, it will snap lower than the centre point. To correct this, hit the up arrow on your keyboard three times. This will nudge it to the visual centre.
03
04
Now add four instances of ‘FAB_option’ to the canvas.
Add all the option icons (‘icon_school’, ‘icon_flight’, ‘icon_cake’ and ‘icon_basket’) to the canvas and align each of them with an instance of the ‘FAB_option’ button. Again, because the shadow is included in the image file, the centre of the circle is not the centre of the layer. You’ll need to bump up each of the icons about three points so they appear centred.
05
Expert tip
Rename layers To simplify your workflow, it’s well worth renaming your layers. When a layer is created by dragging an asset to the canvas, it adopts the filename and extension. Avoiding spaces when possible and using your own naming convention can save time on typing out conditions and help you stay organised.
Finally, add ‘FAB_pressed’ to the canvas and place it on top of ‘FAB_normal’. Nudge ‘FAB_ pressed’ so the edges of the circle match ‘FAB_normal’. This is about three points down from centresnapped alignment.
06
Nesting layers inside one another creates a parent/ child relationship. This allows you to apply animations to a group of layers and have them animate as one unit. It is achieved by dragging and dropping a layer onto another in the layer list (in the upper left-hand corner of the screen).
07
Step 6 Place the ‘FAB_pressed’ icon on top of the unpressed version
july 2016 91
PROJECTS Pixate Nest the option icon layers into their respective button layers. For example, nest ‘icon_ school’ into its corresponding ‘FAB_option’ by dragging the ‘icon_school’ layer listing onto the option’s layer listing.
08
Repeat this for all the menu options, making sure you’re nesting the icons under the correct button option. Feel free to collapse all of the option layers to simplify the layer list view.
09
Reorder ‘FAB_pressed’ so it sits below ‘icon_add’ but above ‘FAB_normal’. Now select ‘icon_add’ and click the ‘+’ at the top of the layer list. In the layer Properties panel (in the upper-right hand corner of the screen) change the width and height values to match ‘FAB_pressed’ (80 x 92). This will ensure the interactive area encompasses the whole FAB.
10
While in the Properties panel, set the colour swatch to transparent and place the layer so it’s centre-aligned with ‘FAB_pressed’. Then drag a Tap interaction on to the layer in the list. Hold down cmd and select all the ‘FAB_option’ layers as well as ‘FAB_pressed’,
11
Step 8 Nest the option icon layers into their respective button layers
then set Opacity to 0 . Don’t change the opacity of the icon layers! Since you’re adjusting the parent layers, the icon layers’ opacity is inherited from them.
the following options. Based On: Tap layer and Tap , IF: icon_addpng.rotation == 0 , Rotate to: -225 , Easing Curve: ease out and cubic , Duration: 0.3 .
Let’s make our FAB icon rotate on tap. In Pixate, animations can refer to the state of another layer. This lets you set an animation to play once a condition is met. We want to rotate ‘icon_add’ so we can base other animations’ conditions on it. Drag a Rotate animation onto ‘icon_add’ and set
Click on the ‘+CONDITION’ link at the bottom of the animation and set the following: ELSE IF: icon_addpng.rotation != 0 , Rotate to: 0 , Easing Curve: ease out and cubic , Duration: 0.3 .
12
13
14
We want the FAB options to fade in on tap. So we can see
what we’re doing, we’ll add the fade in on the option buttons first. Drag a Fade animation to an option button and set the following. Based On: Tap layer and Tap , IF: icon_addpng.rotation == 0 , Fade to: 100 , Duration: 0 . Then ‘+CONDITION’ and ELSE IF: icon_addpng.rotation != 0 , Fade to: 0 , Easing Curve: ease out and cubic . Do this for each option button. In the Material Design guidelines, options scale up when the FAB is tapped. Since our
15
Expert tip
Interaction checks
Step 11 Set the colour swatch in the Properties panel to transparent, and add a Tap interaction
92
july 2016
Animations check conditions when the interaction set in Based On is initiated. For interactions like Tap, the condition is checked as soon as the interaction happens. Animations can check for ranges with interactions that are continuous, like Drag or Scroll. In our example, we’re checking the rotation of ‘icon_add’ when the FAB is tapped. This gives us two states or a toggle.
Pixate
Step 13 Add a reverse condition to rotate the icon back to its original position
Step 14 Adjust the settings so the FAB fades in on tap
options start at full scale, we want to scale them down when the prototype loads. Drag a Scale animation onto an option button and set the following options. Based On: *SCREEN* and Loaded , Scale X and Scale Y: 0 , and Duration: 0 . Select the bottom-middle anchor in the anchor grid. Do this for each option button.
FAB is shifted down and blurred to give the effect of the button moving towards the user when tapped. This is a bit tricky to initially figure out, since it requires us to crossfade two separate layers. Drag a Fade animation onto ‘FAB_normal’ and ‘FAB_pressed’ and apply the settings shown in the screenshot below.
Now let’s set the options to expand when the FAB is tapped. Drag a Scale animation onto the topmost button and set the
16
options as shown in the first screenshot below. When adding this animation to the rest of the option buttons, subtract 0.02 from IF’s Delay property. The second option from the top should have a delay of 0.04 , the third will have a delay of 0.02 , and the last 0.0 . Now the options will scale one after another.
17
Finally, we need to emulate the FAB being pressed. In Material Design, the shadow of the
18
Step 15 Set the options to expand on tap, as specified by the Material Design guidelines
You can now use this file for any of your prototypes. By clicking the button at the top right of the canvas, you can select a
19
Pixate file to merge into the one that is currently open. This lets you add components like this FAB to prototypes that you are already working on. Import your own icons and alter the colours as you see fit. With the steps here you can add additional FAB options and even hook up subsequent taps and animations to the option buttons. Keep an eye out for more Pixate Material Design components from Google, and design away!
20
Steps 16 and 18 These settings will apply our animation to the FAB
july 2016 93
PROJECTS Pricing
A B O U T T HE A U T H O R
CHRIS T OP HER MURP H Y w: www.tinybooks.org t: @fehler job: Writer, designer and educator areas of expertise: Strategy, design, content creation q: what’s the most used app on your phone? a: Simplenote. It enables me to write on the go, syncing everything seamlessly
PRICING
GET YOUR PRICING RIGHT Christopher Murphy shares some top tips for building a pricing story that will maximise your sales
RES OURCE If your pricing’s posing a problem, you might like Ka-Ching! by Christopher Murphy. It’s coming out in late 2016, but you can read a work-inprogress at netm.ag/ kaching-281
94
july 2016
In my work as a consultant and a mentor working with creative startups, one of the biggest issues I find myself offering advice on is the tricky topic of pricing. I work with companies large and small (and, increasingly, students with great ideas for products) and one area they find difficult is finding the right pricing strategy. Get the price right and everything falls into place. Get the price wrong, however, and you can find yourself struggling to make sales before you’ve even begun. At the end of the day, your price is a story and how you tell that story matters. The following are some tips I’ve shared with companies offering digital products and services to ensure they sell more and manage their cash flow as effectively as possible.
1 GO FREEMIUM When the monetary barrier to entry is zero, you significantly increase your number of potential customers. This is one reason why freemium models work so well. The term ‘freemium’ was coined by Jarid Lukin in 2006. Noted venture capitalist Fred Wilson invited his readers to coin a term for his favourite business model, which he described as follows: “Give your service away for free … acquire a lot of customers very efficiently through word-of-mouth, referral networks and organic search marketing; then offer premium-priced, value-added services or an enhanced version of your service to your customer base.” Lukin suggested ‘freemium’ and the word stuck.
Pricing Embracing a freemium model allows you to grow your customer base quickly by removing the inhibition customers face when they’re asked to pay for a product. At Get Invited (getinvited.to) we offer free entry-level pricing to allow potential customers to try out our product. By removing the cost barrier to entry, we encourage potential customers to sign up and try the product. Apple’s App Store uses a similarly seamless approach to encourage customers into its ecosystem: by enabling upgrades for free products through in-app purchases. It’s no surprise to see the number of apps in the App Store that are embracing this model is growing. It lowers the price of entry to zero, resulting in more downloads.
2 Price according to value Over my two decades of working with early-stage businesses, I regularly hear a variation of the following: “… but I would never buy [insert your product or service here] for $2,500!” This might be true. You might not spend $2,500 on, for example, GitHub’s Enterprise Tier, but you – equally – might not be the intended audience for this well designed and seamless service. Or at least, not yet.
Tiered pricing affords potential customers more opportunities to make a final purchase Never set your pricing based on what you would pay for something. Instead, set your pricing based on the value you think it holds. Price is a story. For every thousand people happy with the functionality and scope of GitHub’s Personal tier, there will be many more looking for something a little more heavy-duty. To these customers, price might be no obstacle. Right now you might be happy with GitHub’s Free or Personal tiers, but who knows? At some point in the future you might be the target market for an Enterprise solution. Price accordingly and never forget that others might have more income to buy in at higher price points.
3 Build a pricing pipeline When pricing products, there are ways we can stack the deck in our favour by building what I call a ‘pricing pipeline’. In this, different pricing tiers are considered: low, middle and high.
Tiered pricing affords potential customers more opportunities to make the final purchase. With just one price point your users are faced with a binary choice: ‘buy’ or ‘not buy’. If you consider additional tiers, you increase the potential number of ‘buy’ responses. This strategy maximises the chance of a purchase by shifting the question from ‘Will I buy?’ to ‘Which will I buy?’ A subtle but important difference. Let’s look at an example. WidgetCo offers a single product at one price point – the choice here is a simple yes or no: 50/50. AwesomeWidgets, on the other hand, offers three tiers at three price points (Basic, Enhanced and Premium). This pricing pipeline works in AwesomeWidgets’ favour, shifting the odds to its advantage: 75/25. Companies like GitHub (pictured) use pricing tiers to suit every budget. As a customer’s needs grow, so does the amount of money they’re willing to part with.
4 Consider discounts and bundles Discounts and bundles are a great way to add value for potential customers. This is why we see so many ‘Buy one, get one free’ offers in supermarkets: everyone likes a bargain. Consider offering occasional discounts, or if you have multiple products, bundles. These will help drive sales and, in turn, help your bottom line. Yes, you might lose a little on every sale, but that loss will be more than made up for with an injection of income, helping your cash flow. I use this approach for my two books on The Craft of Words (netm.ag/craft-281). Offering the books – which are designed to be read together – for a discount offers customers an incentive to buy them both, resulting in increased sales. Consider making discounted offers timesensitive. This brings a little psychology into play: ‘I need to get this now, before the offer expires’. Setting limited times for offers helps promote purchasing behaviours. It’s also worth tapping into the power of ‘loss aversion’. Airlines like easyJet use this approach to promote purchases by letting you know that there are ‘Just three tickets left at this price!’ No one wants to miss out on a deal, and if you’re planning on travelling anyway, now’s the time to get one of those three tickets. We all like to be paid for what we make, and when we make great products, we deserve to be paid. Ensuring we tell great pricing stories and offer our customers choices that match their needs helps the bottom line. It’s a win-win situation.
july 2016 95
EXCLUSIVE ECOMMERCE RESOURCE PACK Download a UI kit as well as 7 fantastic ebooks on topics like fulfilment and shipping, email marketing and becoming a full-stack freelancer
WORTH
$200
+
Exclusive offer: Extend your Shopify trial by one month (worth $179)
For more information visit
shopify.com/netmag281
Head to head
HEAD TO HEAD
A b o u t t he a u t h o r
Ray Vil l a l obos w: www.raybo.org
t: @planetoftheweb job: Senior staff author, Lynda.com areas of expertise: Frontend design, fullstack development q: what’s the most used app on your phone? a: The Podcasts app. My faves are CodePen Radio, JavaScript Jabber, seanwes and Rob Cesternino’s Survivor podcast. I’m a complete Survivor junkie.
Bootstrap vs Foundation Frontend frameworks can save you valuable time with grids, CSS and built-in components. Ray Villalobos looks at two popular options Bootstrap
Foundation
Bootstrap (getbootstrap.com) is the web’s most popular HTML, CSS and JavaScript framework. It was built in 2010 by Mark Otto and Jacob Thornton as part of an internal Twitter style guide, and released in 2011.
Foundation (foundation.zurb.com) is a responsive frontend framework made by ZURB. It has been broken up into three different sub-versions, with Foundation for Sites being closest to Bootstrap.
Popularity Bootstrap is the more popular of the two, with over 95,000 stars on GitHub. It offers lots of examples of how to use the tools, as well as more plugins, tools and integration options than Foundation.
Released after Bootstrap, Foundation has gained over 23,000 GitHub stars. Having a large company behind the framework means there are people dedicated to building great tools.
Engine The current version was built with Less, and uses ES5 for interaction and Grunt for builds. Version 4 will be written in Sass and ES2015, but retains Grunt. In general, development seems to be slower.
Foundation 6 was built with Sass and uses ES2015, converted using Babel. Builds use gulp, and tools like Yeti to get the build going. At version 6, Foundation has more active development than Bootstrap.
CSS Styles
Fact file competitors Foundation is Bootstrap’s closest competitor, but there are other frameworks nipping at its heel, including Semantic UI and Material-UI. However, Bootstrap remains a standard that others are finding hard to beat. Bootstrap 4 Bootstrap 4 is currently in alpha and is now built with Sass. It boasts a new grid breakpoint and introduces Cards – a new UI feature that eliminates wells, thumbs and panels. I can’t wait.
Bootstrap offers a lot of fantastic styles that save time and are easy to learn, plus it’s better for bootstrapping sites. If you need something with a decent look quickly, Bootstrap is the better option.
This framework is better as a foundation for your own sites, as the default styles are minimalistic. Classes are easier to override than with Bootstrap and the grid is easier to use, with more options like block grids.
JavaScript Components Bootstrap has many easy-to-use components, like modals, tabs and alerts, but it doesn’t come close to the features available in Foundation. In Bootstrap 4 the framework actually becomes more concise.
Built-in components is where Foundation shines. It has a form validation component, off-canvas menus, and right-to-left support. It also comes with sliders, a responsive media query-based loader, and more.
Ease of Use Bootstrap is extremely easy to pick up. Having fewer features and components means there’s less to learn. And because it’s the more popular option, there are more external plugins.
Foundation is definitely more powerful than Bootstrap, but has been built for more experienced users. Its documentation is not as easy to digest, so expect to spend more time learning.
Verdict If you’re a beginner, I’d recommend Bootstrap; it’s easier to pick up and used by so many companies that it’s a required skill for frontend developers. Foundation is clearly better if you’re looking for built-in functionality. I’d pick Foundation for larger projects or if I was looking to start with a well-tuned Sass workflow with a modern build process.
july 2016 97
PROJECTS RWD
A B O U T T HE A U T H O R
MARC A NDERS ON w: marcbanderson.com t: @marcbanderson job: Associate design director, Fantasy areas of expertise: Design, art direction, UX q: what’s the most used app on your phone? a: Flywheel Sports. The spinning trend is alive and well in NYC and technology is really pushing these companies forward
RWD
CREATE A GRID THAT ADAPTS TO ALL SCREENS Marc Anderson walks you through the grid system he developed to ensure his layouts scale naturally across devices and resolutions
VIDEO Marc Anderson has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ gridvid-281
98
july 2016
I guess you could say I’m a creature of habit. Every time I start a new design, I duplicate the same exact grid into my working documents: a 20px column structure with a 20px baseline grid. I lovingly refer to this as the ‘picnic blanket’, as it reminds me of the red and white chequerboard blanket my mother used to put out on the lawn. You might also recognise it as the pattern found on tablecloths in no-nonsense pizza joints. Instead of red I use cyan, but regardless, it serves the simple purpose of providing a foundation on which to build a well-organised design. In the last couple of years, Google has led the trend for the use of an 8px grid, with other brands including Spotify quickly jumping on board. While this makes absolute sense from the practical perspective of catering to mobile screens and using type sizes
and leading counts that are multiples of four, the 8px standard doesn’t leave any space for the layout to breathe. With a grid that has a little more space, the elements can be more spread out, which is vital in adding perspective to the final design. I’ll spare you a long story about my early days of setting typographic grids in points and picas, but it was that approach that set me down this course within the digital realm. As consumers, our eyes have certain ways to quickly and easily comprehend the function of elements within a layout: we first use scale to determine hierarchy, immediately followed by evaluating the negative space between those elements. Naturally, similar information types should be grouped closely, and maintain clear separation from
RWD unrelated types. Setting a grid with fewer delineations enables us to emphasise this spatial contrast because it allows for vast distances between elements, while still leaving plenty of breathing room between related content or functionality. An 8px grid simply does not accomplish this until you get into multiples such as 16 or 24. While mathematically these sizes work, base 10 is far easier to deal with when using standard design tools such as Photoshop or Sketch, as it means you don’t need to develop custom settings.
Grid rules Join me as I walk through my typical process when setting up a grid. I’ll start by running through some key rules to remember.
Consider all devices from the start Often in our haste to get started we approach design with the idea that we will cover mobile later, or adapt to tablet from desktop. I know from experience that this simply does not work. If you don’t plan for all
Base 10 is easiest when using standard design tools, as it doesn’t require custom settings content areas from day one, variations in content requirements between devices are likely to be neglected, as is user feedback.
Set your navigation first ‘Workable area’ is a bit of a misnomer because many designers assume it means the entire screen. In fact it does not. Side navigation, right rails and so on are allowed to fall outside the core grid area, and can be any width as long as they still allow for a uniformly sized content area.
Don’t focus on screen size Many designers get far too caught up in creating a grid that seamlessly fills 100 per cent of the content area they’re targeting. This is a futile task, and means zero flexibility as layouts adapt to various screen sizes, both big and small. Instead, focus on creating the appropriately sized structure for the content you need to contain, and allow this safe area to sit within the canvas size. This approach has similarities with book design, where the page size isn’t the focus, but rather the workable area within it.
FOCUS ON
Device cheatsheet Here is a quick breakdown of the standard measurements I use across devices, depending on the width I choose to make the columns. Remember, the column widths should remain the same across device sizes, but you can adjust the initial width to fit your needs. I typically design mobile at 360px wide to work in this system.
120px-wide columns
Television 1,024 x 576 (1080p aspect ratio): 8 columns, 32px margin Desktop 1,440 x 840: 12 columns, 0px margin 1,280 x 800: 10 columns, 40px margin left and right Tablet 1,024 x 768: 8 columns, 32px margin left and right 960 x – : 8 columns, 0px margin Mobile 320 x – : 3 columns, 0px margin
100px-wide columns
Television 1,024 x 576 (1080p ratio): 10 columns, 12px margin left and right Desktop 1,440 x 840: 14 columns, 20px margin left and right 1,280 x 800: 12 columns, 40px margin left and right Tablet 1,024 x 768: 10 columns, 12px margin left and right 960 x – : 9 columns, 30px margin left and right Mobile 320 x – : 3 columns, 10px margin left and right
80px-wide columns
Television 1,024 x 576 (1080p ratio): 12 columns, 32px margin left and right Desktop 1,440 x 840: 18 columns, 0px margin 1,280 x 800: 16 columns, 0px margin Tablet 1,024 x 768: 12 columns, 32px margin left and right 960 x – : 12 columns, 0px margin Mobile 320 x – : 4 columns, 0px margin
july 2016 99
PROJECTS RWD Keep column widths consistent In-depth
I constantly look to print design for inspiration regarding structure, scale and general layout approaches. There are a number of resources online, but here are a few books every designer should have in their possession that directly relate to uniformity of structure.
This is paramount to my approach of creating a unified grid system that will scale across all devices with as little design adjustment as possible. Rather than changing the column widths across devices, the width should remain the same, and the number of columns should vary depending on the viewport. The moment a viewport becomes too small to display a full column, that column removes itself from the layout and the position of the content area adjusts to account for its absence.
Grid Systems in Graphic Design
Take advantage of negative space
Lufthansa and Graphic Design
Keeping column widths standard means that you can maintain constant content area dimensions as well. Consider this: a comfortable width for reading body copy on a desktop computer is 720px. Within a 1,440px-wide layout this leaves 360px gutter on the left and right. You can use these rails for related content or advertisements, or even leave them open to focus your reader’s attention. When adjusting for tablet, simply drop 208px off each side, leaving your content area with 152px on the left and right, with no additional design work required.
Resources
This book by Josef Müller-Brockmann takes a detailed approach to using the grid to develop interesting, engaging layouts. It also explores how to use various type sizes with each other by developing standards for leading.
This is almost a clichéd option at this point. This book by Jens Müller and Karen Weiland explores the standardisation of the airline Lufthansa’s graphic system, including how grids were used across numerous layouts of various sizes.
Designing News
The true test of a grid is its ability to handle news content. This book by Francesco Franchi looks at various different approaches to using hierarchy, type and imagery to quickly and accurately convey information to the viewer.
Plan column width with mobile in mind If you’re using the ‘consistent columns’ approach, it’s helpful to remember mobile screens are simply a quarter to a third of the width of the desktop view. Consider this early on in your process, as you create content blocks for your larger viewports. If you use content blocks that already conform to this width limitation, there will be less adjustment required when designing the mobile view.
Think of TV as tablet It’s often exciting to think of TV as the largest medium available, but designing for a television screen is actually more akin to designing for tablet. This is because the elements need to be large enough to read from across the room. So despite having
Picnic blanket The standard 12-column grid includes a baseline grid, main column structure, and subdivided 20px columns
100
july 2016
RWD a large pixel density, TVs are better thought of as being 1,024px wide.
Stick to the grid, even when you break it The term ‘breaking the grid’ should apply to the complexity of your visual system, not the positioning of elements in accordance with your initial 20px picnic blanket. When you turn the grid layer on you should see that every element has a home – either resting on a grid line or positioned exactly halfway between two gridlines.
Wave goodbye to gutters If you plan your layout correctly, you won’t need gutters (as you would in traditional print layouts). Instead, be sure that elements are sized so they fall short of the next column and allow the elements from that next column to align to the left. This will feel unnatural at first, but over time it will become something that you account for when conceptualising your layouts.
Advantages of a 20px grid There are cases where, depending on your type size selection, you might break the grid. An 8px grid conforms to typefaces and leading counts that occur in multiples of four. The 20px baseline doesn’t hold as strongly to this approach, but can still function effectively. The key workaround is space.
Keeping column widths consistent is paramount when creating a unified grid system In line with the principle that type should fall exactly on the baseline, this system allows for the inclusion of a bit more leading between lines. When working with odd type sizes, this helps increase legibility and adds more variety to the layout.
Constructing the grid Everyone creates their grid layer differently. I prefer to set mine up as its own layer set in Photoshop, with one layer for the ‘picnic blanket’ and another for the columns. To create the picnic blanket I start with a 40px x 40px document and place a vertical 20px x 40px column on the left and a horizontal 40px x 20px row on the bottom. I colour them both in near pure cyan (#00bff3) and give them 20 per cent opacity. This colour choice stands out over most documents. This layer is then
tiled into a pattern that I can apply to a layer in the master PSD, so I can easily adjust its height. For the columns I typically create a grouping of vector shapes in the master PSD that are the appropriate column width. Depending on the colours of the design, these are either coloured in green (#00ff00) or red (#ff4040) and set to 50 per cent opacity. I typically reserve guides for the ad hoc alignment of elements, and don’t use them for things like grid structure. I don’t want to risk confusing a temporary guide for the core grid system. Some designers complain that this system disrupts their flow as they can’t easily work underneath another layer in Photoshop. While this can be true (there are some workarounds, such as locking the layer) you’ll eventually get a feel for the system, the distances will feel natural, and you’ll turn on the grid less often.
Photoshop setup
The standard grid setup in Photoshop: a layer with the 20px grid applied as a pattern and the column structure as a vector layer above
Keep it consistent Following this method of grid setup will allow you to quickly get to the exciting part of design: creation. You will start to think of your visual system as universal and naturally envision how your layout will adapt, before you even start. There will be less guesswork about the size of various elements such as navigation bars or buttons, and content blocks will feel grounded and consistent. I enjoy sharing this method with others because it means we can divide work and still ensure a standard, high-quality outcome. I’d love to hear if this approach works for you too!
july 2016 101
LONDON 21-23 SEPTEMBER 2016 Generate is back in London for its fourth year. Join us for three amazing days of insight, inspiration and practical tips
JEFF VEEN
BRUCE LAWSON
IDA AALEN
BRENDAN DAWES
about.me/veen
www.brucelawson.co.uk
www.idaaa.no
www.brendandawes.com
DESIGN PARTNER, TRUE VENTURES
DEPUTY CTO, OPERA SOFTWARE
SENIOR UX DESIGNER, NETLIFE RESEARCH
MOMA-EXHIBITED ARTIST AND DESIGNER
TICKETS ON SALE NOW
www.generateconf.com
Standards While many UI animations can be achieved with declarative CSS animations and transitions, this JavaScript-based approach to animating allows you to build more dynamic animations that react to user inputs and adapt on the fly.
When and what
Web Animations
Rachel Nabors explores what this new API means for developers The Web Animations API specification was created to underlie CSS animations, transitions and SMIL (native SVG animation) animation engines, and normalise their expected behaviours across all browsers. But for those of us pushing the web forward, the API means so much more. Both Firefox and Chrome have increasingly covered the API, which has made both browsers’ new animation developer tools possible. The Web Animations API opens up the browser’s animation engine to manipulation with JavaScript. This means both browser and web developers can directly manipulate the elements we currently animate with CSS animations and transitions. This API sets the stage for browsers to optimise for DOM animations while letting JavaScript developers focus on building the libraries and tools that work best for them. Interaction developers familiar with Flash and ActionScript will be excited to hear it also leaves the door open for future features like grouped and sequenced animations, scroll and gesture-based timelines, and complex custom uses of cubic-bezier .
Checking support Most of us turn to caniuse.com to check browser support for a feature, but due to the Web Animations API’s size and incomplete implementation across Chrome and Firefox, it’s impossible for the site to track its support completely. Fortunately, you can test for features manually with Dan Wilson’s browser support test (netm.ag/test-281) and by checking Firefox Nightly’s ‘Are we animated yet?’ (netm.ag/animated-281). Browser support saw a boost when Edge moved the API from Under Consideration to Medium Priority last year. As for WebKit, rumour has it a team at Canon may be taking on the API. In the interim, there is a polyfill: netm.ag/polyfill-281.
PROFILE
JavaScript
The API is built around two models: the timing model and the animation model. You can think of these as the ‘when’ and the ‘what’. Animations created with requestAnimationFrame are difficult to seek and optimise. The API’s timing model can be thought of as anchoring every animation to a timeline: a duration with a set beginning and ending. This means the animation can be easily sought by the browser. In contrast, the animation model defines what the element should look like at any point along the animation’s timeline. You can think of these two models as fitting together like a DVD and a DVD player. The DVD contains all the information about what should be on the screen at any given time. But the DVD player is what lets us play, pause and seek that information. The core functionality of the API lies in the new animate() function it introduces, which you can call on any DOM element that can be animated with CSS. This method is actually a shortcut for the more complex task of creating both a keyframe effect object and an animation object, then calling play() on the latter. As such, animate() takes an array of properties to animate and a set of timing options. You can learn more by following the resource links at rachelnabors.com/waapi.
Rachel (www.rachelnabors.com) is a UI animation consultant in Portland, Oregon. She curates Web Animation Weekly, founded the Animation at Work Slack community (slack.animationatwork.com), and is an invited expert at the W3C
july 2016 103
PROJECTS Shopify
A B O U T T HE A U T H O R
K EIR WHI TA K ER w: www.keirwhitaker.com t: @keirwhitaker job: Partner growth manager, Shopify areas of expertise: Shopify, Liquid, podcasting
SHOPIFY
A B O U T T HE A U T H O R
L E VIN ME JIA w: www.fourandthree.com t: @fourandthree job: Designer advocate, Shopify areas of expertise: Shopify, Liquid, CSS
5 WAYS TO POWER UP YOUR SHOPIFY THEMES Keir Whitaker and Levin Mejia explore some techniques
to get the most from your Shopify themes Today merchants demand more from their ecommerce platforms than ever before. From selling online and in-store to integrating with social channels like Twitter, Facebook and Pinterest, sellers are looking to offer customers the best, most immersive experience possible. To help you on your way to creating even better online stores with Shopify, here are five techniques you might not have used before.
1 CREATE ALTERNATE LAYOUTS Let’s kick off by looking at just how powerful Shopify’s layout file feature can be. If you aren’t familiar with the concept of layouts, you’ll find the default file, theme.liquid , in the layouts folder within any Shopify theme directory.
104
july 2016
You can think of the theme.liquid file as the master template for your store. It’s effectively a wrapper for all the other templates in the templates folder. As a general rule, elements that are repeated in a theme (site navigation, header, footer and so on) will often be placed inside theme.liquid – although they don’t have to be. It’s entirely up to you to decide how much or how little code is included in a layout file. Just remember that all rendered pages in a Shopify theme, unless otherwise stated, will be based on the default theme.liquid layout file. One of the main benefits of layouts is that they enable us to follow the DRY principle. Having all our common elements in a single file means we can make global changes very easily. Another benefit is
Shopify that our main templates ( product.liquid , collection. liquid and so on) aren’t cluttered with markup that is repeated across the store. Regardless of how much HTML you choose to put in a layout file, there are two important Liquid tags you must include: ● {{ content_for_header }} must be placed between the opening and closing <head> tags. This inserts the necessary Shopify scripts (for things like Google Analytics and Shopify Apps) into the <head> ● {{ content_for_layout }} must sit between the opening and closing <body> tags. This outputs dynamic content generated by the other templates
Adding a new layout It’s unlikely that a single layout file is going to cover every design eventuality, and there will be situations where you will require a completely different layout. A good example of this might be a specific landing page for a product, or a newsletter signup page that doesn’t require the same ‘site furniture’ as the rest of the site. You could start hiding elements with CSS, but that feels a little wrong. A far better approach
You can think of the theme.liquid file as the master template for your store is to create an alternate layout, complete with different HTML markup. Creating an alternative layout is straightforward. The first thing to do is to create a new file and give it a relevant name and the .liquid extension. Next, save it in the layouts folder in your theme directory. In this file, place any HTML you need (i.e. HTML declarations, CSS, JavaScript links and so on), along with the two placeholders discussed above. If our new layout file were named alternative.liquid , we could override the default theme.liquid layout file using the following Liquid syntax as the first line in any template file:
IN-DEPTH
BETTER DEVELOPMENT WORKFLOWS If you are new to working with hosted platforms, you might be wondering how you incorporate your local workflows into the process. Here are two tools that will help you synchronise your files and deploy your Shopify themes in a professional manner. Theme Kit Recently the Shopify themes team set about improving the way designers and developers can interact with the platform when developing themes locally. Theme Kit (themekit.cat) is a new single, binary cross-platform command line tool that allows designers and developers to work with a local file structure and have all changes synchronised back to a given theme. Theme Kit also lets the user specify multiple environments, bringing local Shopify development in line with modern practices of development, staging and production servers. This is the first in a suite of tools the Shopify Themes team will be releasing, and maintaining, for those working with the platform. DeployBot As the number of people working on a single theme grows it’s important to have a solid source control and deployment strategy in place. DeployBot (www.deploybot.com) is an online service that allows you to deploy your themes from a version control system, like Git or Bitbucket, to the Shopify platform. It’s very easy to connect the systems. Once setup is complete you can start deploying your theme changes automatically or via the DeployBot admin. As well as making updates easy, it will also offer you the ability to roll back changes – something all of us need to do at times. Additionally, DeployBot offers you a whole host of pre-deploy features, such as the ability to build and compress CSS, JavaScript and images.
{% layout 'alternative' %} It’s also possible to request that a layout file isn’t applied, using the following syntax (again, it needs to be the first line of the relevant template):
Secure deployment
Deploy your themes in a professional and secure way with DeployBot
{% layout none %}
july 2016 105
PROJECTS Shopify
Resources
Keeping up with Shopify As with any new platform, it takes a while to get up to speed. Thankfully Shopify goes a long way to help designers and developers get started. If you haven’t developed with Shopify before I recommend signing up for a free Partner account (www.shopify.com/partners). This is your gateway to developing themes and apps with Shopify. With it you can create as many fully featured development stores as you need, and you’ll be introduced to your dedicated partner manager who can help with any queries. Handy resources The Shopify Partner Blog (www.shopify.com/partners/blog) is a great resource. As well as regular technical tutorials, it features in-depth articles on how freelancers are succeeding with Shopify. Subscribe to the Partners newsletter to be notified of upcoming feature developments, events, competitions and more. I’d also like to recommend two free Skillshare courses. The first, ‘Shopify Essentials for Web Developers: From Store Setup to Custom Themes’ (netm.ag/essentials-281) by Kurt Elster, is targeted at web designers and developers who want to get started with Shopify theming. The second, ‘Advanced Shopify Theme Development’ (netm.ag/advanced-281) by Gavin Ballard, leads on from the first course and showcases a lot of advanced product customisation and workflow techniques. Finally, it’s worth sharing a brand new Shopify Liquid Cheat Sheet (netm.ag/cheat-281) for your bookmarks. Like Theme Kit, this will be maintained by Shopify and features every Liquid object, filter and tag you’ll need day-to-day.
2 Take advantage of Metafields Many merchants on Shopify have information they wish to associate with a particular product that goes beyond the basics such as price, type and description. These could be product care details, how-to instructions or the returns policy. One way to showcase this information is to create individual product templates. However, this is both time consuming and highly inefficient. Alternatively, you can use a Shopify feature known as a metafield. This consists of a namespace, a key, a value and an optional description. You can use the namespace to group metafields together in a logical way. So you could have a namespace of instructions with a key of wash and a value of cold , as well as another key of dry and a value of tumble . You can then output these values in Liquid in the product.liquid template: {% assign instructions = product.metafields.instructions %} Wash: {{ instructions.Wash }} Dry: {{ instructions.Dry }} To add metafields via the admin, you’ll need to install a dedicated app from the Shopify App Store (apps.shopify.com). One option is the free MetaFields
Enabling your clients to easily change their hero image is a great way of keeping the site current Editor (netm.ag/meta-281). I’d also recommend the Chrome extension ShopifyFD (shopifyfd.com), which enables inline and bulk metafield editing. This extension also exposes metafields on pages, collections and blog posts in addition to products. All of these can then be outputted in their relevant templates. Metafields are a great way of expanding the information your clients can associate with their products, and more.
3 use Snippets to keep code DRY If you have worked with server-side languages you will already be familiar with the concept of partials or includes. In Shopify, these are known as snippets. Here’s a brief overview: Get started Free Skillshare courses taught by Shopify Experts help you get up to speed on the latest tools and techniques
106
july 2016
● Snippets are files containing chunks of reusable code ●T hey reside in the snippets folder and have the .liquid extension
Shopify ● They are often used for code that appears on more than one page, but not across the entire theme ●S nippets are included in a template using the Liquid tag include (e.g. {% include 'snippet name' %} ) ●Y ou do not need to append the .liquid extension when referencing the snippet name ●G ood uses of snippets include social links and pagination blocks When a snippet is included in a template file, it will have access to the variables within its parent template. As long as the snippet references the relevant variables (e.g. product in the product.liquid template), things will work as expected. However, what if we would like to make use of a snippet, but reference data that is neither a global or template variable? We simply use the Liquid tag {% assign %} . Here’s an example: {% assign snippet_variable_1 = 'my name is Keir' %} {% assign snippet_variable_2 = 'your name is Levin' %} {% include 'snippet' %} The snippet will now have access to both snippet_ variable_1 and snippet_variable_2 . We could also make a Liquid collection available like so: {% assign all_products = collections.all.products %} {% include 'snippet' %}
4 Add sorting categories Helping customers find the right products is one of the main aims for any online store. In Shopify, there are a number of ways to categorise products, including by collection and by tag. In the admin, there’s also the option to categorise a product by type and vendor. These features are often neglected by first-time theme developers, but are a great way to help customers search your site. The following code snippet will produce a link to a product’s associated type search page: <p>Similar items classed as: {{ product.type | link_to_type }}</p> If you would like to create a link to a search page for all products by the currently viewed item’s vendor, use the following Liquid code: <p>Other products by: {{ product.vendor | link_to_vendor }}</ p> These two additions to your product.liquid template will give extra search facilities to your clients’ customers for very little overhead.
5 Master the settings file Have your clients ever asked for further control of their shop’s design and layout after the shop has gone live? Or have you ever wanted to empower your clients with more capabilities to edit their sites on their own, even if they don’t have any coding experience? The settings_schema.json file will help you do just that. Enabling your clients to easily change the hero image on their homepage is a great way of keeping the site looking current. The settings_schema.json file will be found in the config folder of a Shopify theme. If you know JSON, the file structure will look very familiar. To enable further options for customising the theme via the Shopify admin, we can add additional sections to the JSON file. For example, adding the following code to the settings_schema.json file will allow your client to upload a new hero image without writing a single line of code:
Shopify Partner Blog
This blog is updated daily and features technical tips and partner success stories
{ "type": "image", "id": "hero_slide_1.jpg", "label": "Image", "max-width": 1200, "info": "1200px wide required" } Images uploaded through the customised theme page are placed in the theme’s assets folder. To output the file we use some very basic Liquid code that references the ID of the image specified in the settings_schema.json file: {{ 'hero_slide_1.jpg' | asset_url | img_tag }} Armed with these five techniques you’ll start to discover ways to take your Shopify theme building even further.
P odcas t Subscribe to the Unofficial Shopify podcast and learn how to help your clients grow their traffic, secure higher conversions, and make more money from their store: www.unofficial shopifypodcast.com
july 2016 107
PROJECTS CSS
A B O U T T HE A U T H O R
MARK ROBBINS w: www.rebelmail.com t: @M_J_Robbins job: Senior email architect, Rebelmail areas of expertise: CSS, HTML, email q: what’s the most used app on your phone? a: WhatsApp. It’s great for making quick plans with friends. I don’t believe messaging apps will ‘kill email’ – they are very different tools
CSS
BUILD INTERACTIVE EMAILS WITH CSS
Mark Robbins shows you how to create JavaScript-like
functionality in HTML email campaigns with just CSS
VIDEO Mark Robbins has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/emailvid-281
108
july 2016
‘Email code is so outdated you have to code like it’s 1998.’ That’s a sentiment I hear a lot from web developers, and to some extent it’s true. The latest versions of Outlook desktop still use Microsoft Word to render the HTML, so you’re stuck with building retro, table-based layouts. The Gmail app strips style blocks and linked style sheets so you have to style everything inline. However, there has been a significant growth in mobile usage over the last few years, and with that a huge percentage of email is being opened on more advanced WebKit-based email apps with great HTML5 and CSS3 support. Yes, we still need tables
and inline CSS for the lesser clients, but now we can progressively enhance emails into fully functional interactive microsites.
INTERACTIVE EMAIL So what is an interactive email? There are a few definitions flying around at the moment and this is mine: an action taken in an email that triggers an event within the same email. These ‘actions’ take the form of CSS pseudoclasses :hover , :active , :focus and :checked . The first three are probably more common in web design and I would call these fleeting interactions,
CSS as the statement is only true for as long as the action is performed. :checked is a more permanent interaction. Almost like an on/off button, the statement is true until you specifically click to change it.
Show or hide content
If we skip over things like :hover states, the most basic example of these actions is the checkbox hack. Here’s a quick show/hide content example: <style> input, .hide, .content, input:checked ~ .show{ display:none; } input:checked ~ .hide, input:checked ~ .content{ display:block; } </style> <label> <input type="checkbox"> <div class="show">show</div> <div class="hide">hide</div> <label class="content">...</label> </label> When the input is checked, the ‘show’ button is hidden and the ‘hide’ button and content are
A lot of email is opened on WebKit-based apps with great HTML5 and CSS3 support displayed. Notice the content is wrapped in its own label. This overrides the function of the parent label, so clicking in this area won’t alter the checkbox. This technique is also often used for expanding hamburger menus in email.
focus on
Interactive analytics Putting all the functions of a landing page into an email means there’s less need for people to click through to the site. This results in a slightly lower click rate compared to standard emails. As that’s often seen as a measure for performance, we need to look at a new metric to measure success. So instead we can look at engagement. For a fair comparison against a traditional email we combine the unique clicks on links with clicks on interactive elements. I believe this is a fair approach as it’s currently commonplace to have images of interactive elements in static emails to encourage clicks to the site, like the search form shown below.
Image fallback At the bottom is a functioning search form, while above it is the image fallback linking to the website
So how do we track interactions? Every time an interaction takes place we load a 1px background image. As these image requests are sent to the server they are logged in the analytics database. This is the same basic concept commonly used for open tracking, and it means we can track exactly which user interacted with which elements. As I’ve said, in our testing we’ve seen clicks to site drop a very small amount on average, but overall engagement has been greatly increased across the board.
Image gallery To take this a step further, we can swap the checkbox for an array of radio buttons. The advantage here is that only one radio button in an array can have the :checked value at a time. This is great for things like image galleries, as only one image will be displayed at a time.
july 2016 109
PROJECTS CSS
In-depth
The future What’s next for email? I think we’re going to see the number of dedicated email developers grow. Rather than just using junior web devs or marketers with some HTML skills, we will see more people in specialist roles like mine. I also think large brands will start taking email more seriously. For years email has outperformed other branches of marketing, but very little work is put into it. A current trend is for a brand to put together a fancy splash page microsite to launch a new product, then send a single-image email to promote it. I think this approach is due for a change, and brands will start engaging the user earlier within the email itself. Email clients should also finally start to catch up. Support for interactive email is growing, but this is mainly due to people migrating to more modern email clients, rather than the technology itself improving. Yahoo and AOL appear fairly open to modernisation – both have done small bug fixes that have had a large effect on rendering – but Microsoft and Google seem a bit more stuck in their ways. As this interactive email trend grows and the end users start to accept it as the norm, these tech behemoths will be forced to update their approach or risk losing even more market share – much like in the browser wars five years ago. And to those people who argue that email should stay static, as it’s just information on a page: the same could be said about the web not so long ago.
Slack apps Multiple arrays of radio buttons alongside an IBM punched card
By simply swapping the images for text and moving the controls so they appear above the content, this technique could also be used for a tabbed layout.
Punched card coding This next concept goes even further and has a huge scope of use cases. Until now we’ve nested an input inside a label and placed the input as a direct sibling of the content we’re editing. With this new technique we put all the radio buttons and checkboxes at the very top of the email, reference them with an ID on the input and assign a for attribute on labels in the content to activate them. When I first started experimenting with this concept, I had a large number of radio buttons visible at the top of the page and it reminded me of the old IBM punched card computers, hence the name I’ve coined: punched card coding. The function of the inputs can be viewed in a similar way too. The card has a number of places where it can be punched or not, the same way the inputs can be :checked or not. This could also be seen as a series of true or false statements (or ones and zeros if you want to get all binary about it). These values can now be strung together to form complex logic. #a2:checked ~ #b4:checked ~
Default template An image gallery powered by radio buttons from the default Rebelmail template
110
july 2016
Product page This product page from a multi-page shopping cart email can be accessed without leaving the email
CSS
Shopping Multi-page shopping cart concept email opened in Applemail
#c9:checked ~ #d1:not(:checked) ~ #e5:checked ~ table{} Using this technique we can create a fully functional shopping cart in a single email. In this email you can adjust the quantity of each
With punched card coding we can create a functional shopping cart in a single email item or remove it from the cart completely. This in turn affects the line price, subtotal, tax, discount and total price, which are all calculated using a series of CSS counters.
Payment You can only select cards and addresses already registered in the user’s account on the web
would be with an email offering an arbitrary discount. One of the first interactive emails I built was the ThWack-A-Vole game (netm.ag/vole-281). At the very core it’s simple: click three times to score three points and win a prize. To turn this into a game, I just added CSS animation to make the labels harder to click.
Bugs and complexities So far everything is sounding great, but anyone who has worked on HTML email will know it’s never that simple. So at the risk of talking you out of it, here are some of the complexities to consider.
Support PC desktop versions of Outlook still use MS Word to render HTML. This means none of what I’ve talked about will work; even something as simple as an animated GIF will only load the first frame. The good news is Outlook only accounts for about
#item1-quantity3:checked { counter-increment:price-with-tax 18270 discount 1827 price 17400 tax 870 item-1-line-price 17400; } With this example you can also customise the size and colour of each item on a separate page. The pages are wrapped in a div that will only show when the corresponding radio button is :checked . It’s not dissimilar to our gallery example. The user’s card details (last four digits only) and delivery addresses are also pulled into the template. Then the selected card, delivery address and all the shopping cart options are submitted to a server that will process the order.
Games Games are another great use case. Allowing the user to earn a reward created a sense of achievement, and users are much more engaged than they
Get involved Game-based emails engage users and create a sense of achievement
july 2016 111
PROJECTS CSS update it (adding an external style sheet with a zero cache is one option here). This has lead to a very strong community of sharing. Every new update, bug and fix can be found very quickly on the Litmus community forum or the Twitter hashtag #emailgeeks. Order matters Gmail will clip your code after 102KB, so make sure you put your fallback code first
7 per cent of email opens (statistics in this section come from emailclientmarketshare.com, based on 1.31 billion opens in March 2016). This means progressive enhancement is key to building a successful interactive campaign. To help with this we’ve created three categories of interactive support:
Email service providers are well known for editing code before sending. They know things like interactivity and animation aren’t supported in every client so they’ll be stripped, CSS may automatically be inlined, doctypes may be changed. Some even add additional code increasing your file size. As a result, it’s always worth sending your tests in exactly the same manner that you’ll send your campaigns.
● I nteractive: These are WebKit-based email clients
File size
with good support for all the examples mentioned, (about 60 per cent of opens) ●L imited: Generally these don’t support the for tag on labels, so we lose more advanced interactions but can still do things like galleries, tabs and hamburger menus (around 20 per cent) ● Static: Similar to any standard email campaign you’re used to seeing (around 20 per cent)
Testing All this complexity obviously means more time. Just like complicated websites, interactive emails take longer to build. However, the testing process also becomes far more complex. Any web developer will tell you that Chrome, Firefox, Safari, Opera, Edge and so on can render things differently, so now consider testing Gmail in each of those, then Yahoo, then AOL Mail. Now look at mobile browsers; each of those has an iOS and Android app, not to mention the native email apps phone manufacturers add and the huge number of third party apps. Screenshot aggregation tools like Litmus and Email on Acid can help. These work by sending your email to around 40 email clients and returning screenshots of each. However, this only really helps with basic layout testing. Interactive testing can’t be done with screenshots; you need real devices and that means putting together a device lab.
Updates Unlike web browsers, email clients don’t have public beta versions for developers to test on. They don’t have release notes saying what changes they’ve just made or that are upcoming. And when a campaign is sent there’s very little you can do to
112
july 2016
ESPs
There is a generally accepted size limit of 102kb for your HTML file (not including images). Over this, several email clients will clip the code, which will lead to a number of issues, such as unclosed tags. Also you’re more likely to end up in a spam filter. At the top of the page is an example of an otherwise very good interactive email that
Email clients don’t have beta versions for devs to test on, or release notes for upcoming changes came to my Gmail account. The issue here is the interactive code was placed before the fallback, so when the code was clipped the fallback was removed and the interactive code was hidden by default.
In conclusion Email is an old technology, but that doesn’t mean it’s outdated. Innovation can and should take place in whichever field you choose. Many people write off email development due to what they perceive are its limitations, but the biggest limitations are often those in your head. And that’s why I love it. In many ways email development is the frontier; it’s the Wild West. Modern web development is about following the rules and writing clean code; modern email development is about breaking rules then patching them back together with gaffer tape and superglue.
THE WORLDâ&#x20AC;&#x2122;S LEADING DESIGN MAG
ON SALE NOW!
Boost your self-promotion skills and get your work noticed! PLUS Pro advice for a racting a ention at your graduate show
Print and digital editions on sale now
bit.ly/casubs â&#x20AC;¢ bit.ly/CA-iPad
PROJECTS Accessibility
ACCESSIBILITY
ONLINE CHECKOUTS Hazel Bolton looks at how to make your ecommerce
checkout user-friendly for all your potential customers Everyone has the right to shop online, but at Formisimo we frequently see great-looking ecommerce sites with online checkouts that are inaccessible for certain customers. Why risk dropoffs when you can design for inclusivity? Accessible sites also work better on mobile devices. Although with ecommerce browsing, mobile has overtaken desktop, conversion rates are still lower (1.31 per cent on mobile compared to 3.59 per cent on desktop: netm.ag/localytics-281), signalling an issue with the buying process. So let’s look at how you can make your online checkout more accessible.
Make click targets bigger This helps both users with motor problems and mobile shoppers who are trying to hit the target with their finger or thumb. Remember, the touch target can be bigger than the visible area of the button.
Treat labels with care
Make error messages more detailed than field labels and place the message next to the corresponding field. Alert users to errors by focusing the page to the first error and use skip links to help users navigate to the next error easily.
Avoid drop-downs Drop-downs are a lazy way to present multiple choice answers. They’re also more difficult for users interacting with the site via keyboard and those with motor problems. Alternative form controls include steppers, switches and button inputs.
Say no to CAPTCHAs CAPTCHAs are, by their nature, difficult to see. They’re also designed not to be easily read by software, making things difficult for screen reader users. There are alternatives (like Google’s reCAPTCHA), but to be truly user-friendly you should handle spam yourself, behind the scenes. By choosing to be inclusive you’ll only ever widen your potential market. Accessibility benefits user experience too, creating a more user-friendly checkout for all.
PROFILE
Sighted users need labels that remain visible. The trend for labels inside form fields that disappear on click makes it harder for users to remember and check the label – an issue for those with cognitive problems. Additionally, disappearing labels can’t be read by screen-reading software.
Make error messages helpful
114
july 2016
Hazel (@hazelana_b) is content manager at form analytics tool Formisimo. She loves talking about accessibility, UX, and how to improve your forms to increase your online conversions
9000
PROJECTS Toggle a menu with CSS animations Prototype a floating button in Pixate Get your pricing strategy right Create a grid that adapts to all screens 5 ways to power up your Shopify themes Build interactive emails with CSS
0800 1 777 000