The voice of web design
Issue 278 : April 2016 : net.creativebloq.com
Project
Apply dramatic effects to your websites
A NAMESCO COMPANY
Welcome
Welcome
editor’s note
A couple of months ago I made a call to use design (and development) as a force for good. This issue we have a few brilliant examples of just how it can make a difference. We profile Hactar, a product and service design agency specialising in helping grow organisations with a social conscience (p58), which was shortlisted for a net award last year. And we also interview Rachel Inman, a user experience designer at Google, who is on a mission to try and make the world just a tiny bit better than how she found it (p32). We also have some great goodies for you: readers can try out ZURB’s new feedback app Notable for one month free (p100), and we have teamed up with
Webflow, one of our 10 best prototyping tools for 2016 (see issue #276), to give you a 20-page guide all about responsive design. If that’s made you hungry for more, check out our brand new Responsive Web Design Handbook: Vol 2, which – over 228 pages and 20 practical projects – covers pretty much everything you could wish for about designing for multiple screens (flick to p93 for a sneak peek). All of this knowledge can be used to make a change. Do it if you can.
Oliver Lindberg, editor oliver.lindberg@futurenet.com
Featured authors Louis L az aris
Jordan Moore
Wren L anier
Dudle y Store y
Louis is a frontend developer, a managing editor at SitePoint and curator of Web Tools Weekly. From page 68 he lists 50 amazing free tools for web pros w: www.impressivewebs.com t: @ImpressiveWebs
Jordan is a freelance user experience designer specialising in responsive web design and mobile technologies. From page 76 he dives into living style guides w: www.jordanm.co.uk t: @jordanmoore
Wren is a UX designer with a passion for creating beautiful digital products. This issue, she curates our gallery of great new sites (p44) w: www.wrenlanier.com t: @heywren
Dudley is a designer, teacher and author from Calgary. On page 84 he explains how to use CSS blend modes to create exciting effects w: www.thenewcode.com t: @dudleystorey
april 2016 3
@netmag
Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 /netmag +netmagazine flickr.com/photos/netmag netmag@futurenet.com
net.creativebloq.com
Editorial Editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, Art editor Rebecca Shaw rebecca.shaw@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com, Deputy commissioning editor Sammy Maine sammy.maine@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com, Staff writer Alice Pattillo alice.pattillo@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,
Editorial contributions Gemma Ballinger, Michelle Barker, James Bates, Simon Carr, Antony D’Andrea, Michael Dowell, Martin Hughes, Galya Iliev, Sam Kapila, LeeAnn Kinney, Wren Lanier, Louis Lazaris, Jordan Moore, Jon Nemeth, Steven Pemberton, Matt D. Smith, Dudley Storey, Robert Stulle, Joe Warren, Dan Willis, Matt Willmott
Art contributions
Ben the Illustrator, Daniel Byrne, iStock, Ben Mounsey, Tobias Hall
management
Content and marketing director Nial Ferguson nial.ferguson@futurenet.com, Editorial director: games, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com, Group art director Rodney Dive rodney.dive@futurenet.com
Advertising Advertising manager Sasha McGregor sasha.mcgregor@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 17 March 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
april 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
2015 APPLE DESIGN AWARD WINNER
Editors' Choice
worldwide customer rating
Design. Redefined.
AFFINITY DESIGNER Professional graphic design software for Mac Affinity Designer is the fastest, smoothest, most precise vector graphic design software for Mac available. Whether you’re working on branding, websites, icons, UI, or creating concept art, Affinity Designer will revolutionise how you work.
No subscription. Free updates. Try for free now at: affinity.serif.com/designer
contents Issue 278 : April 2016 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
John Brown created a gallery of artistic CSS animations, adding a div each day
Clients from hell
17
BEYOND PIXELS
20
Need list
21
Event report
23
Workspace
18
Gemma Ballinger shows us her favourite things in Studio Output’s workspace, including the team’s own artwork
A manager fails to grasp the efforts behind getting his site to the top of Google
Creative Michael Dowell spends his downtime whittling spoons from wood
Stuff we want, including a calendar app that lets you see what’s round the corner
Joe Warren travels to Florida to bid an emotional farewell to JSConf
voices Inspect and adapt
26
Robert Stulle on how to introduce an agile workflow in an agency environment
Digital-first branding
James Bates wonders why digital still comes second when building a brand
28
Delight isn’t a design goal 37
Dan Willis explains why specific goals are required for successful projects
Big Question
How do you approach a responsive redesign? We asked the experts
Q&A
41
april 2016
INTERVIEW
32
Google UX designer Rachel Inman talks about designing products that help people, artistic expression and breaking down barriers in the office
38
Tinder project manager Scott Hurff chats about designing products people love
6
VOICES
SUBSCRIBE to net and save up to 54%
Take advantage of the Print and digital Bundle Turn to page 24 to find out more Want the Pro package? See page 51
Contents regular
GALLERY
44
Wren Lanier runs down the best new websites around, including a hip clothing collaboration inspired by basketball
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Andy Booth, Marko Dugonjić, Jeremiah Shoaf and Bruce Lawson share their advice
Showcase
free Notable
30-day trial See page 100
design Challenge
52
Focus on
57
profile
58
how we built
64
Designers mock up hairdresser sites
Sam Kapila looks at SVG animation
We chat to the founders of Hactar
A synaesthetic experience for an orchestra
PROJECTS CSS Blend modes
84
Sketch
90
Responsive UX
98
Dudley Storey explains how to use CSS blend modes to create dramatic effects
Features
Galya Iliev runs through 10 Sketch tools to help you create pixel-perfect designs
50 amazing free web design tools 68
Living style guides
Louis Lazaris reveals 50 high-quality tools to help you in your web design projects – and they’re all free
Jordan Moore runs down the benefits of a great digital style guide, and explains how to create one
76
Project
Animate a character with CreateJS 104
Martin Hughes explains how to animate a character in Flash, powered by JavaScript and CreateJS
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
Matt D. Smith on how to use Illustrator to master wireframing for responsive designs
Notable
100
web standards
103
Slack
108
Accessibility
114
ZURB’s Jon Nemeth shows you how to use Notable to add feedback to your designs
Steven Pemberton argues that HTML5 is holding back the web
Antony D’Andrea explains how to build a custom plugin that sends feedback to Slack
LeeAnn Kinney on hidden disabilities
april 2016 7
Mail, tweets, posts and rants contact us
@netmag
Call to action I was flipping through the February issue of net and your editor’s note caught my eye. I recently turned down a full-time job offer at Clearleft to explore how design and technology can help refugees prosper in Europe. Andy, Rich and Jeremy have been kind enough to let me rent a desk
/netmag
+netmagazine
at Clearleft while I get Prosper (prosper.community) off the ground. I really liked your call to use design as a force to make a difference. We’ve grown a community of digital workers from around the world who are working together to build an opensource platform that is a central database of refugee crisis initiatives. You’re playing a wonderful role in a great magazine with readers who might be interested in what we’re doing.
John Ellison, Brighton, UK
Oliver Lindberg: That’s fantastic to hear! I’m glad my note resonated with you, and Prosper looks like a great project. We also welcome messages from other readers telling us how they are making a difference in the world.
Making a change Prosper is a community of digital professionals aimed at helping refugees in Europe
8
april 2016
netmag@futurenet.com
Bad branding I was wondering how you (or other net readers) deal with clients that have ancient and badly done branding, but want a modern website? I’ve been finding this a lot lately with work I’m doing. I think it’s near-impossible to get a nice, up-to-date design when the branding the client provides is dated. I get very frustrated and start doubting my skill, but deep down know it’s because the colours, logo etc. are already there and aren’t nice to work with. Not all clients want a rebrand, so their websites suffer because the branding is so old!
Kieran A, Glasgow, UK
net: Thanks for your letter Kieran. It’s certainly a tricky situation. We asked Clearleft’s James Bates for his thoughts: “I’d suggest having an honest conversation with the client. Express your concern that you don’t think their existing identity has enough flexibility to allow them to be presented in the way they want. The key here is what they want. We’re not designing for ourselves, and whilst it might not be our preference aesthetically, it may still meet the client’s brief.
net.creativebloq.com
If they agree, consider using the site design as a vehicle for suggesting improvements to their identity. It may even lead to some further work.” It’s also worth checking out James’ article on page 28, in which he explores why branding should be tackled digital-first, for more tips on updating client branding.
Stack breakdown I was wondering whether you might be able to write an article on different stacks companies use to manage their workflow. Rather than listing all of the tools (there could be dozens), you could focus on the headline tools. Quite often developers and designers in your articles mention tools in isolation, so it would be helpful to see the whole throughput, and perhaps some of the decision-making process behind why they set up the stack they did, and how it benefits their customers.
Robin Waite, Stroud, UK
net: Thanks for your suggestion, Robin. That’s a good idea! For now, you might like to check out The Complete Web Design Toolkit (netm.ag/toolkit1-278 and netm.ag/toolkit2-278) for tips on building a great stack.
Network THE POLL
Which browser do you use for development? 3% Safari Safari offers Reading List features that some find useful. However, there are no favicons and you can only call back one recently closed tab via hotkey, which can be tiresome
1% Opera The simple, lightweight Opera is still an underdog – but now you can use Chrome extensions with it, things may be looking up 1% Microsoft Edge Microsoft Edge has introduced new tools built in TypeScript that do not require reloading. Devs still need convincing though
26% Firefox Firefox has crept up as a favourite over the past year or so. With the dedicated Developer Edition, you can build, test, scale and more all from one place
69% Chrome With smooth Google Apps integration and no ad or tracker blockers, Chrome reins supreme. Android syncing makes this a hit among anti-iOSers
From our timeline
Why is user-generated content worth the effort for small companies? Unless your business is truly awful you should have more users than staff – therefore more content. @inpocketdev It sells the product/ service from the user’s perspective. @muzzlehatch_ Writing skills need to be honed before you get a big audience. @sladedesign
When done right – it can go oh-so-wrong – this is the path to global exposure (Reddit, etc). @nonswearyphil Because it’s cheaper! @Gary_SmallSEO
It creates a wider sense of customer value and inclusion, and it covers an aspect of market research. @JohnnyMcCauley2
Genuine UGC is the best way to give your product or service authenticity in your target market. People relate to real people. @barrymcgee It takes away the time needed to manage site content manually – time that can be used to grow and invest in the business. @mezzarino Asking your users for content will cut down resource costs for content marketing – just be sure to reward them for their input! @123reg
COOL Stuff We learned This month Feedback loop
When is web design critique useful, and when is it damaging? In this article, Facebook product designer Tanner Christensen explains how the social media company constructs its critique sessions to ensure they remain valuable and effective. Sure to get the thumbs up from design teams everywhere. netm.ag/feedback-278 Who Needs Marketing?
This blogging omnibus charting how Stuart Hall built a health and fitness app in just six hours – which then went on to generate 2.3 million downloads and a full-time salary – sounds too good to be true. But here he details the process from day one, and reveals how the app relied on a good story to sell itself. netm.ag/seven-278 ES6 Made Easy
Still haven’t learnt ES6? Eric Elliott explains why it’s about time you did, and explodes some of the common excuses people give for putting it off. On top of that, he’s also curated a master-post of resources, including blogs, videos and tutorials, all of which will help you hit the ground running. netm.ag/es6-278
april 2016 9
Send your questions to netmag@futurenet.com This month featuring... Andy Booth Andy is senior designer at Telegraph Media Group in London w: www.theandybooth.com t: @theandybooth
Practical advice from industry experts
QUESTION OF THE MONTH
Should I use a carousel on my ecommerce site? Dan Davies, North Wales, UK
Marko Dugonjić Marko is the founder and UX director at Creative Nights and Typetester w: www.maratz.com t: @markodugonjic
Jeremiah Shoaf Jeremiah is a freelance designer and creator/ curator of Typewolf w: www.typewolf.com t: @typewolf
Bruce Lawson Web developer Bruce is an advocate of the Open Web and lurid hair dye w: www.brucelawson.co.uk t: @brucel
Invisible content Studies show users tend to engage less with content that’s not immediately visible
MD: Ideally, no. Studies have demonstrated that users miss content on carousels, with items that aren’t immediately visible often being engaged with less. My suspicions are that users perceive automatic movement on a page to be advertising. A fully accessible carousel can also be difficult to develop, especially if keyboard access support is required. If you really need to present content in a similar way visually, consider using a slideshow – it’s less obtrusive and places the user in control. Alternatively, simply look to vertically scrolling content! Web typography
Type rules What’s the maximum number of fonts that should be used on a web page? Are fonts with lots of line-weight variation still the way to go for noobs?
Bryan Lopez, Denver, US
JS: This depends on your target audience as well as your skill as a designer. The redesign of Wired featured seven font families: Ambroise, FF Oxide, Brandon
10
april 2016
Grotesque, Exchange, Proxima Nova and Tungsten Rounded. Using seven typefaces is extreme; however, I think it made the design highly engaging and helped to unite Wired’s branding across print and the web. Obviously you need to always keep performance in mind, but if you have a tech-savvy audience and stick with a consistent typographic system, there is nothing wrong with mixing multiple font families.
Q&As
3 simple steps What’s new in web typography for 2016? Clarice Gomes, Toronto, CA
JS: Here are three trends in type that I’ve been noticing lately and that I expect to see more of throughout 2016 ...
Type rules Wired’s ambitious new website typography scheme includes seven font families
Heavy serifs
HTML5
<nav> element Which HTML5 element keeps you up at night as you try to better understand how to use it correctly?
Kevin Lozandier, New York, US
BL: None now – but when I was writing Introducing HTML5, I did lie awake thinking about <nav> . I changed my advice between first and second editions: basically, only use it for the most important navigation. It’s useful for screenreader users, and having loads of <nav> blocks on a page diminishes its utility. It’s a good example of how realworld usage trumps theoretical purity, and that’s why HTML5 won and XHTML 2 was drowned in a bucket at W3C.
with key stakeholders and understand the challenges they’re facing. HTML5
Houdini project Ordinary developers increasingly have access to similar abstractions as browser engineers. What do you wish such devs had control of?
Kevin Lozandier, New York, US
Languages
BL: I’m excited by the Houdini project, which aims to add extensibility hooks to CSS so you can take advantage of all the heavily optimised, performant behaviour built into browsers. It also allows you to override things when you want and change how CSS works or invent your own layout models. At the moment CSS is a ‘black box’ for web developers – this will change that. See netm.ag/houdini-278 for an introduction to Houdini.
What kind of languages do you need to know to become a UX designer?
ecommerce
UX
Lawrence Agyei, Chicago, US
MD: The core languages of the web are HTML, CSS and JavaScript for frontend coding; and PHP, .NET, Ruby, Python, Perl, Java and the like for server-side coding. Whilst familiarity with some of these languages certainly helps, the most important skills one needs to develop as a UX designer are empathy and communication. To achieve set project goals, you must first and foremost get to know your customers, collaborate
Heavy, high-contrast serifs such as Noe Display will continue to become more and more popular, as high-density displays are better able to render the fine lines of serifs like these.
Playful sans-serifs
Quirky, geometric sans-serifs such as GT Walsheim are trendy at the moment. This style of typeface takes the geometric model of Futura and adds a few playful touches, creating warmth.
Future opportunities What do you see as the biggest ecommerce opportunities in 2016? The low-hanging fruit? The most exciting?
Ben Seymour,Oxford, UK
Type diversity
AB: The rise of shopping on your mobile is old news now. It will continue to grow predictably and there is no turning back. The challenge is to predict the next step. Virtual reality is still majorly underdeveloped, but I think a hidden gem is flash sales. Ecommerce sites need to be
I think we’ll see a more diverse use of type on the web in 2016. People are sick of seeing the same small handful of typefaces used everywhere. Typewolf is a great place to discover new typefaces from indie foundries.
april 2016 11
exchange Q&As treated like a real live environment, and a big opportunity is to advertise a sale when your site is busy. Sites like Groupon have had their moment, and retailers are starting to become more reactive with social media. How special would a customer feel if they were suddenly offered a pop-up deal on the product they were interested in? A quick reaction to site traffic equals a quick sale. Landing page Perceived trustworthiness is important in ecommerce. Which site would you choose?
Web typography
Non-standard fonts What’s the best service to use to add non-standard web fonts?
Craig Thacher, Oxford, UK
JS: I’m a big fan of self-hosting web fonts. If you are relying on a service such as Typekit or Google Fonts and their servers go down, the type on your site will go down as well. Some designers seem to think self-hosting is complicated but it really isn’t. Most places where you purchase fonts will provide you with a self-hosting kit that is surprisingly easy to set up. Many indie foundries only offer self-hosting so you’ll have a much wider range of type choices as well. ecommerce
Sale conversions What’s the best way to test and improve sales conversions?
James Hall, Leeds, UK
AB: Test, test and test again. Run through your checkout flow, or test the process by buying something. You need to treat it as a customer and look out for anything that could put you off – poor-quality images,
too many checkout questions and small buttons are just a few examples. Another trick I’ve learned is to ask users to find a product on your site without using the search bar. You’ll be amazed how differently people think compared to you when browsing a site.
distractions or email signups (unless that’s what you want users to do). If you are an unknown site, you will be judged on how trustworthy you are. So, clean and clear trumps a busy page. UX
Research methods HTML5
Web components What are your thoughts on the process of standardising new elements being more democratic, with what the Web Component specs enable?
Kevin Lozandier, New York, US
BL: Web Components don’t standardise new elements; they simply allow you to define them. Your <woo-groovy> element may be completely different from my <woo-groovy> element. There’s no built-in browser UI for custom elements (as there is for <label> or <em> or <input type="range"> . Therefore, I worry that we may get hundreds of nearlyidentical web components sprinkling UI sugar over ‘real’ elements (e.g. for custom date pickers or carousels) with little or no support for non-JavaScript browsers or accessibility.
What methods do you use to conceptualise systems from a high level?
Luke James Taylor, Sheffield, UK
MD: Thorough research is imperative! This includes user and stakeholder interviews, audits, analysis and plenty of reading. In understanding project goals and constraints, concepts will start revealing themselves. On a tactical level, nothing beats a good design workshop or week-long design sprint (read Google Ventures’ thoughts on the latter: www. gv.com/sprint). Rather than generating ideas from thin air, conduct collaborative activities with team members and stakeholders. The best tools are often a Sharpie and paper, a whiteboard and markers, and lots of sticky notes.
ecommerce
Landing pages If you could focus on one thing to improve conversions, what would it be?
Clive Walker, Horsham, UK
Sale conversions Insights can be gained by watching users locate a product without using the search bar
12
april 2016
AB: The landing page. The average user will make up their mind if they trust your website within three seconds at best – so you better hope your page is fully loaded, and shows off what you are trying to sell. Don’t hide it behind unnecessary
Research methods Week-long design sprints are the latest workflow approach from Google Ventures