Issuu on Google+

Free! 69-Page ebook The voice of web design

Issue 288 : January 2017 : net.creativebloq.com

Psychology for Designers by UX expert Joe Leech

Feature

Speed up your work and introduce smarter practices

The VR web is here! Build stunning virtual reality experiences in your browser


Welcome

Welcome

editor’s note

You might be forgiven for thinking we’re already living in a simulated world (netm.ag/ simulation-288) – it would explain a lot of things – but one thing we can be sure of is that virtual reality has finally arrived on the web. You can now experience it right in your browser, and this issue we have invited one of the most passionate VR experts there is to tell us how to get started. In our Cover Feature (from page 68) Liv Erickson, developer evangelist for Microsoft and co-founder of the ARVR Academy, explores the tools and frameworks you need to know to build stunning VR experiences with web technologies including JavaScript and web APIs.

The VR web is here, and its potential is immense. It can impact and widen our perception of the world as well as helping us relax in a safe environment. I can’t wait to see what you’re going to build. Of course, we also have another great freebie for you this month. UX expert Joe Leech is giving away his excellent guide to Psychology for Designers completely free! Turn to page 82 for details, and discover how to apply psychological theories to web design and the design process. Enjoy the issue!

Oliver Lindberg, editor @oliverlindberg

Featured authors Liv Erickson

Brian Wood

Zell Liew

Zhenya Rynzhuk

Liv is a developer and Microsoft VR evangelist based in San Francisco. From page 68 she dives into the new possibilities offered by browser-based virtual reality w: www.livierickson.com t: @misslivirose

Brian is a web developer, teacher and the author of 12 books. From page 76 he reveals 15 nifty Photoshop CC tips to help you streamline your design process w: www.brianwoodtraining.com t: @AskBrianWood

Zell is a freelance frontend web developer and designer from Singapore. On page 84 he explores the fundamentals of responsive web typography w: www.zellwk.com t: @zellwk

Zhenya is a senior UI/UX designer, originally from the Ukraine and currently based in New York. On page 90 she introduces new graphics tool Figma w: www.behance.net/Zhenyary t: @zhenyary

january 2017 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

Nick Babich, Peter Barr, Alessandra Burroughs, Tanya Combrinck, Matthew Clark, Liv Erickson, Olivia Friedrich, Sam Kapila, Keith Grant, Liam King, Zell Liew, Emerson Loustau, Tom May, Jim McCauley, Alyssa Nicoll, Tiago Pedras, Zhenya Rynzhuk, Charis Rooda, Adrian Roselli, Julia Sagar, Doug Schepers, Miriam Suzanne, Rene Zammit Vigar, Max Willmott, Brian Wood, Bryan Zmijewski

Art contributions

Daniel Boud, Paddy Donnelly, iStock, Michael Lester, Joe Waldron

management

Creative director: magazines Aaron Asadi aaron.asadi@futurenet.com, Editorial director: games, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com, Group art director Rodney Dive rodney.dive@futurenet.com

Creative bloq Editor Craig Stewart craig.stewart@futurenet.com, Associate editor 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 Michael Pyatt michael.pyatt@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 Head of production UK and US Mark Constance mark.constance@futurenet.com Licensing Senior licensing and syndication manager Matt Ellis matt.ellis@futurenet.com

NEXT ISSUE ON SALE 29 Dec 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.

Future is an award-winning international media group and leading digital business. We reach more than 49 million international consumers a month and create world-class content and advertising solutions for passionate consumers online, on tablet & smartphone and in print. Future plc is a public company quoted on the London Stock Exchange (symbol: FUTR). www.futureplc.com

Colophon 4

january 2017

Chief executive Zillah Byng-Thorne Non-executive chairman Peter Allen Chief financial officer Penny Ladkin-Brand Tel +44 (0)207 042 4000 (London) Tel +44 (0)1225 442 244 (Bath)

Apps used

Google Docs, Photoshop, Dropbox Paper, FutureSource, Illustrator, InDesign, CodePen, Slack

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).

paper

COVER PaceSetter Gloss 250gsm P3-82 UltraMag Plus gloss 90gsm P83-114 Grapholvent 70gsm

Typefaces

Antonio, Share Tech, Merriweather, Titillium Web


contents Issue 288 : January 2017 : net.creativebloq.com

FEED

FEED

SIDE PROJECT of the month 16

Atif Azam‘s Vocalizer.io helps people pronounce names correctly

Clients from hell

17

BEYOND PIXELS

20

Need list

21

Event report

23

One nightmare client fails to realise they need to supply the content for their site

Miriam Suzanne serves up experimental experiences online and with her band

Stuff we want this month, including a guide to escaping email anxiety

Workspace

18

Bryan Zmijewski shows us round ZURB’s workspace on the edge of Silicon Valley, designed specially to maximise creativity

Charis Rooda gives the low-down on the Fronteers conference in Amsterdam

voices Bad education

26

Tiago Pedras puts forward a more modern approach to design education

Do we need to build this?

28

Stay curious

37

Big Question

38

Liam King shows you how to avoid building unnecessary products

Alyssa Nicoll explains why she left a cushy job for the uncertainty of a startup

Is it still OK to build sites that don’t work without JavaScript? We asked the experts

Q&A

41

UX and UI consultant Jane Portman reveals which UI patterns should be banned

6

january 2017

VOICES

INTERVIEW

32

Cameron Adams muses on past startup adventures, what went wrong with Google Wave, and what makes his latest product so interesting

SUBSCRIBE to net and save up to 58%

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

Olivia Friedrich selects the best sites around, including an online portfolio that creates depth in new and interesting ways

regulars Network

8

Exchange

10

The latest mail, tweets, posts and rants

Jono Lee, Ross Chapman, Kit Oliynyk and Raymond Camden share their advice

Showcase

 

free Psychology for

designers Ebook See page 82

design Challenge

52

Focus on

57

profile

58

how we built

64

Three designers mock up online gig guides

Sam Kapila considers digital editorial

Zoe Gillenwater shares her UX secrets

An interactive documentary by Tool of NA

PROJECTS Responsive web type

84

Figma

90

job Interview tips

94

Head to head 

97

BBC performance

98

Zell Liew runs through the principles you need to know to master responsive type

Features

Zhenya Rynzhuk walks through how to build a responsive statistics dashboard

The Virtual reality 68 web is here

15 photoshop CC web design tips

Liv Erickson explores the growing VR web, and the tools opening up new possibilities for web professionals

Brian Wood runs down the best practices and features that will help you smooth out your workflow

76

Project

Responsive sizing with em-based design 96

Keith Grant walks through how to build scalable designs with relative CSS units

Exclusive video tutorials Look out for the video icon in the tutorials section for screencasts created by the authors

Emerson Loustau shares eight pieces of advice to help you ace tech job interviews

Max Willmott compares Vue and React

Matthew Clark explains how the BBC builds websites that scale

Web standards

103

User-friendly forms

104

Accessibility

114

Doug Schepers on the changes in SVG 2

Nick Babich explores ways you can make your forms as easy to use as possible

Adrian Roselli on selfish accessibility

january 2017 7


Mail, tweets, posts and rants contact us

@netmag

/netmag

netmag@futurenet.com

Working apart In this article, Ryan Taylor makes a strong case for distributed agencies like his own No Divide, which operates from all corners of the UK

Leave your job net: Cassie McDaniel wrote an article explaining why quitting your job can be a blessing in disguise (netm.ag/ mcdaniel-288). Here’s what you had to say: In 2012, I moved my family 1,000 miles (and accepted a 40 per cent pay cut) for a job that told me I didn’t have one just shy of a year later. Budget reasons were also cited while tens of thousands of dollars were being spent updating signage around the building. Oh, this was a non-profit ministry, btw. The bottom line (something I wrote about recently at netm. ag/ogle-288): Life’s too short to spend 40-plus hours a week under poor leadership that doesn’t value you or make you feel safe. You deserve to find

8

january 2017

yourself doing what you love, around people (especially leaders) who respect, value and propel you forward. People don’t leave companies … they leave leaders. Thanks for sharing Cassie. Inspired by your courage and the impact you’re making (and have made) at Mozilla!

Jason Ogle, Colorado, US

net.creativebloq.com

@russty_russ I had the first 10 years’ worth of mags but didn’t have the space when I moved so they went. Wished I kept them now :-( @mburv 16.5 million people on the net and rising... @russty Yep they used to have a count of that every month on the spine of the mag. Lasted a few years. @ ‫ ‏‬tawalker It’s hard to believe there was ever a time when one could use the name ‘information superhighway’ without blushing

Distributed agencies net: In Ryan Taylor’s article about the rise of distributed web agencies (netm.ag/ agency-288), he argued: “As an agency employee you don’t have to be on the

medium.com/net-magazine

constant lookout for new clients and worry about where your next pay cheque is coming from, whereas as a freelancer you do.” It drew this response on Medium: I’m a freelancer. I know my monthly income. Why? I have a long-term relationship with all of my customers. I never work project-based. If there is a new customer, I turn them asap in a long term one. How? Divide the project into smaller budget slices and invoice upfront monthly. Advantages: 1. You know monthly what budget you can work with and you have a fixed revenue, and 2. Your customer knows their monthly fixed cost and gets used to it. You become a part of their organisation.

Kristof Bernaert, Brussels, BE

Happy Birthday Happy birthday to @netmag, which launched its first issue 22 years ago on this day (26 October 1994). It was all so different back then! #90s

Russ Wright, Milton Keynes, UK net: Thanks Russ! If you fancy taking a trip down memory lane, you can download the issue PDF at netm.ag/issue1-288. Here are some of your comments:

Awkward start net’s first ever issue included such editorial highlights as ‘The Internet? Er, what’s that?’ and ‘The .net unofficial smiley dictionary’


Network THE POLL

What do you have the most trouble explaining to clients?

COOL Stuff We learned This month Simple design is making us dumb

Why their site can’t look exactly the same in every browser 7.69%

Why you want to design with real content 17.31%

Why they should bother with accessibility 7.69%

Dealing with prototypes 1.92%

The importance of performance 5.77%

Responsive design 7.69%

People will always gravitate towards simplified processes, but the rush to create tools that do this can mean we’re missing out on some important element of the experience. This fetishisation of simple design, says Carl Alviani, is making us impoverished and dumb. netm.ag/dumb-288 Why we should all be data literate

The cost of a website 30.77%

Why it takes a long time to build their website 21.15%

From our timeline

What do you now do with CSS or SVG that you used to do with JavaScript? Equal heights, offcanvas menus, logos ... hell, I used to do menu roll overs in JavaScript, so pretty much everything! @MartinDarksnow The number one thing? Hover states. @tadywankenobi Modals occasionally with :target, and transitions. @FilipNest

Simple (and sometimes complex) animations with pure CSS. @danmurf Definitely rollover states. Styling with pseudo classes too. @AndiBDesign Aspect ratio boxes using padding as height ... can’t believe I used to write JS to do that. @danstyled

Social media sharing buttons. I now use SVG images in HTML links instead of JS widgets. They load faster and scale better! @RealAlanDalton CSS animations is the biggie. @barrymcgee Background-size: cover; and transform: translate(-50%, -50%); are killer vs. using JS or other hacky layout approaches for this. @l_sei Table striping for odd/even rows. @RichardCarter

We’ve all dealt with a client or manager who fixates on an arbitrary metric because they don’t understand how to use data effectively to drive design decisions. In response to a talk by Jared Spool advocating data scientists, Dan Turner suggests everyone should become data literate. netm.ag/data-288 Things I’ve learned about CSS Grid layout

Oliver Williams shares some bitesized chunks of CSS grid know-how, aiming to make the module easier to master. Grid should work in our browsers sometime in early 2017, but until then you can get to grips with using it in conjunction with Flexbox now by enabling it in your browser. netm.ag/grid-288

january 2017 9


Send your questions to netmag@futurenet.com This month featuring... Jono Lee Jono is a product designer that codes. He’s currently travelling the world with Remote Year t: @jobosapien

Practical advice from industry experts

QUESTION OF THE MONTH

Do you have any ideas for free ways to recruit UX testers? Rachel, Southampton, UK

Ross Chapman Ross is the senior UX designer at Wiggle, and is interested in user research and content design t: @rosschapman

Kit Oliynyk Kit is a creative director at Capital One, product designer and tech geek w: letsdesign.it t: @fiorine

Raymond Camden Raymond is a developer advocate for IBM and a published author w: raymondcamden.com t: @raymondcamden

Take a peek This handy tool provides a good introduction to remote usability testing

RCh: The best thing about usability testing is that it can be done for free. Price needn’t be a barrier to obtaining user research – by just observing people using your app or website, you can receive so much knowledge back. Any usability test is better than none, but try and focus on getting feedback from real or potential users, so the first step is understanding who those users are. For a quick start, there’s a handy tool called Peek (peek.usertesting.com) that can serve as a nice introduction to remote usability testing – try that! Data science

Too much data How would you go about adding graph data to pages when there can be a huge range of data to display and still keep it readable?

Nigel Clutterbuck, London, UK

KO: The biggest advice I would share is to have an opinion. I believe the designer should decide whether or not the client needs to add a bunch of graphs to the

10

january 2017

page, based on user needs. Figure out the kinds of insights your users might benefit from, and choose just the right amount of data to display. It’s also helpful to prioritise the relative size and layout of your charts based on user priorities. Highlight the potential insights and build a visual system to make sure people see what’s most important first.


Q&As

3 simple steps What are the best resources for learning HTML and CSS? Lawrence Agyei, Chicago, US

JL: Below are three key ones. Aside from these, notable mentions go to CSS Tricks, Smashing Magazine and Responsive Design Weekly. Inline styles With Radium, users can manage inline styles on React elements

CSS

Inline styles Is inlining CSS worth the speed boost?

J. Edgar Montes, Michigan, US

JL: For a typical website with a moderate amount of CSS the speed boost is trivial, so it’s not worth the trade-offs of code maintenance and the lack of certain features (caching, media queries, etc.). Inline CSS is only potentially worth it if you have a complex web app that is used by millions, with a lot of HTML and CSS, where every millisecond costs you money, or if you work with a dedicated frontend team willing to set up plugins that make up for inline CSS weaknesses (for example Radium for React, which adds media queries that aren’t available with inline styles normally). You can combine the best of both worlds by inlining only the critical CSS, which is the CSS needed to render the top of the page, so it’s usable to the viewer before all CSS files are fetched. Ecommerce

Bigger goals What do you think about using a long buying process that achieves goals, versus shrinking it just to include less steps?

Ulises Rojas, Montréal, CA

RCh: What a fantastic question! You have to look carefully at what you know about customers (because there are many different types). A first-time user could have a long process (to add in their details), but on subsequent purchases we can use saved information (such as

delivery and payment details) to speed things up. So with that, you can provide an experience to new customers and a much faster checkout experience for returning customers, which is very useful on mobile. Inclusivity

Open up What can we do to be more inclusive in our work? And get other stakeholders thinking the same?

CSS Wizardry

CSS is easy to learn but difficult to master. CSS Wizardry has some of the best articles on the nitty-gritty of writing scalable and maintainable CSS, like BEM methodology and refactoring (which are among the hardest parts).

Michael Spellacy, Allentown, US

RCa: If we can’t explain our work, our problems, or our proposals in a way that is accessible to non-technical people, then I feel like we don’t truly have a good idea of what we’re actually trying to do. This isn’t about technical writing or communication, but more about being able to distil coding and development issues into the core principals of what we’re trying to achieve. I think (hope!) that in doing so, we make it easier for stakeholders to participate. I also find that it tends to help crystallise your own thinking as well.

CodePen’s Yearly Top Pens

One of the best ways to learn HTML/CSS is to dissect cool demos you discover, and CodePen’s yearly Top Pens are great for that. The demos range from cool to ‘I didn’t know that was possible’. CodePen’s integrated UI for diving into the code is also convenient.

Web design

Anti-patterns What are some responsive web design patterns that have been overused so much that they’re now anti-patterns?

Achal Varma, New Delhi, IN

JL: The hamburger menu is used incorrectly often enough to be considered an anti-pattern. Designers love the simplicity of it (I have been

Web Design Weekly

HTML and CSS are both constantly evolving. To stay up to date with the latest methodologies and features, I recommend this email newsletter. It comes once a week, which is just often enough that you actually read it.

january 2017 11


exchange Q&As guilty of this myself). However, multiple usability studies have proven that when a hamburger icon is the sole way to access content, it can take users much longer to complete tasks and find the information they want. A better solution might be a navigation bar with a few of the main pages visible by default and then a ‘More’ option (which could take on a hamburger menu icon) that reveals lesser-used pages – think of a typical nav bar on the bottom of a mobile app. What users see in front of them is what they’ll use.

prototyping and usability testing. For our iOS and Android apps we use Marvel, which has fantastic online drawing capabilities. It’s at a fidelity level that’s acceptable in stakeholder meetings and as it is online, many parts of the business can view and edit it. In other projects, we go straight into HTML responsive-coded prototypes, which we self-host and test through whatusersdo.com. Taking these prototypes into the field and putting them on our various devices really helps drive the user-centred design process.

Ecommerce

Interaction design

Happy customers

Voice and mind

Animation

I’ve heard amazing feedback about Wiggle. What’s your internal philosophy on keeping your customers happy?

What happens to interaction designers when screens start to evaporate and interaction goes more voice and mind?

What tool do you prefer for UI animations?

RCh: We don’t rely on a returns policy; we sort problems out. Our customer service team is devoted to making customers happy, and this extends to the design teams. We spend a significant amount of time conducting user research and gathering internal knowledge. The more we know, the better we can design solutions and understand problems, often well in advance of fixing them. We meet customers at our events, show them prototypes and gather feedback, so the feedback loop is always in motion. We also put Haribo in every order!

KO: Human-computer interaction is a pretty huge field, so I doubt interaction designers would be thrown out into the street any time soon! But seriously, the primary role of the interaction designer remains the same: respond to user’s input in the most meaningful and helpful way possible. Interaction designers would probably need to learn content strategy and data science, because those skills could be essential to providing personal experiences. They would also move from drawing binary interaction flowcharts to creating multi-factor decision-making systems that use machine learning to filter down the list of possible responses based on the user’s context.

Darren Pinder, Wokingham, UK

UX

Prototyping tools What’s your UX prototyping tool of choice? Do you like Adobe XD?

Pete Trainor, Bournemouth, UK

Data

Lovelive Ltd, Manchester, UK‫‏‬

Static site generators

RCh: Your process has to fit within the organisation you’re in. I’m not particularly romantic about making paper wireframes, instead opting for rapid

I’ve got a product database that includes a few hundred items, but also multiple sizes and different types. This would be roughly 30K unique product combinations. How would I design that with an SSG?

Prototyping option Marvel offers a simple prototyping solution for teams

12

january 2017

Animation testing For designers who are comfortable using code, Framer is a great option

the page itself. So product one might be ‘Star Wars shirt’ and I’d list the sizes/ variants as well.

UI tools Benjamin Christine, Exeter, UK

KO: It depends on the task at hand, your skill and the time you’ve got. It’s crucial to test your prototypes early, so you know if your UI animation helps improve the user experience. If you can prototype something in 10 minutes – do it. Any tool that lets you do that is great. The fastest way is a napkin – it’s easy to draw a simple storyboard and put something in front of the users. Principle and Adobe XD come close second – both apps are easy to learn and have a fast workflow. If you’re mostly dealing with page transitions, look into InVision and Flinto’s built-in transitions. Prototyping for the web and aren’t afraid of code? Framer is your tool. And if you want absolute control and the ability to create something insanely cool (and are happy to dedicate a few months of learning to do so), stick to After Effects. Career

Impostor syndrome

Darren Pinder, Wokingham, UK

What’s the best way to overcome the imposter syndrome and have confidence in the work you produce?

RCa: It may be that an SSG [static site generator] simply doesn’t make sense for your needs. One thing I try to make clear when talking about SSGs is that they are not a solution for every case. If I were to look into making this an SSG, I’d try creating one file per product, and possibly including the sizes/variants in

RCa: I don’t know as I haven’t got over it. What I have done (or tried to do) is to not let it stop me. I still think I know nothing, but I just put out there whatever it is I want to put out there. Basically I remove my filter, since (usually) it does more bad than good.

Alex‫‏‬Bennett, Leeds, England



Net 288 (Sampler)