Free! 69-Page ebook The voice of web design
Issue 288 : January 2017 : net.creativebloq.com
Psychology for Designers by UX expert Joe Leech
Speed up your work and introduce smarter practices
The VR web is here! Build stunning virtual reality experiences in your browser
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
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
Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 flickr.com/photos/netmag email@example.com net.creativebloq.com
Editor Oliver Lindberg firstname.lastname@example.org, Production editor Ruth Hamilton email@example.com, Art editor Rebecca Shaw firstname.lastname@example.org
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
Daniel Boud, Paddy Donnelly, iStock, Michael Lester, Joe Waldron
Creative director: magazines Aaron Asadi email@example.com, Editorial director: games, photography, creative and design Matthew Pierce firstname.lastname@example.org, Group art director Rodney Dive email@example.com
Creative bloq Editor Craig Stewart firstname.lastname@example.org, Associate editor Kerrie Hughes email@example.com, Staff writer Dominic Carter firstname.lastname@example.org Commercial Commercial sales director Clare Dove email@example.com, Senior advertising manager Michael Pyatt firstname.lastname@example.org, Director of agency sales Matt Downs email@example.com, Head of strategic partnerships Clare Jonik firstname.lastname@example.org Circulation Trade marketing manager Juliette Winyard email@example.com Production Production controller Nola Cokely firstname.lastname@example.org Head of production UK and US Mark Constance email@example.com Licensing Senior licensing and syndication manager Matt Ellis firstname.lastname@example.org
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
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)
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).
COVER PaceSetter Gloss 250gsm P3-82 UltraMag Plus gloss 90gsm P83-114 Grapholvent 70gsm
Antonio, Share Tech, Merriweather, Titillium Web
contents Issue 288 : January 2017 : net.creativebloq.com
SIDE PROJECT of the month 16
Atif Azam‘s Vocalizer.io helps people pronounce names correctly
Clients from hell
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
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
Tiago Pedras puts forward a more modern approach to design education
Do we need to build this?
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
UX and UI consultant Jane Portman reveals which UI patterns should be banned
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
Olivia Friedrich selects the best sites around, including an online portfolio that creates depth in new and interesting ways
The latest mail, tweets, posts and rants
Jono Lee, Ross Chapman, Kit Oliynyk and Raymond Camden share their advice
free Psychology for
designers Ebook See page 82
how we built
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
job Interview tips
Head to head
Zell Liew runs through the principles you need to know to master responsive type
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
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
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
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
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
@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
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
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 email@example.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
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.
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
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 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.
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.
Voice and mind
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
Prototyping tools What’s your UX prototyping tool of choice? Do you like Adobe XD?
Pete Trainor, Bournemouth, UK
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
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
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.
AlexBennett, Leeds, England