Page 1

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


net 278 (Sampler)  

You can subscribe to this magazine @ www.myfavouritemagazines.co.uk

Read more
Read more
Similar to
Popular now
Just for you