UTILISE 3D VIDEO TEXTURES

Add video textures to objects and create 360-degree video

The voice of web design

Issue 329 : March 2020 : net.creativebloq.com

SPLIT RGB CHANNELS

Manipulate the RGB channels of a webcam feed with shaders

PLAN WEARABLE UI Build better user interfaces for watchOS

UI

BUILD A BETTER DESIGN SYSTEM Key principles that will help you create the perfect component library for your products

Learn top UI techniques and discover the latest tools for creating great interfaces TAKE BACK CONTROL OF YOUR DATA TRY YOUR HAND AS PROJECT MANAGER CREATE HEROES WITH PURPOSE

ISSUE 329

Welcome

WELCOME

EDITOR’S NOTE You can add the most innovative functionality

design guide, we look at how you can get the best

and harness the most dynamic frameworks but a site is nothing without a well-designed user

out of elements like typography, colour palettes, buttons and links and turn them into consistent,

interface. Your latest project may have powerful, efficient engineering under the hood but if the dashboard is more Ford Model T than Tesla, you can’t be surprised if users would rather take someone else’s site for a drive. Good user interface design is fundamental to effective web development and yet it can be easy to overlook. For that reason, we’ve dedicated this issue to covering the guiding principles and latest developments in UI. Kicking off our ultimate UI

reusable components. Then, as your projects and interfaces grow, Nick Babich shows you how to build an effective design system and inject increasing precision into your design pipeline. We also have lots more: we show how to apply video textures to 3D objects, split a webcam feed into RGB channels and design for watchOS.

Josh Russell, Editor @JoshLRussell

FEATURED AUTHORS DANIEL SCHWARZ

NICK BABICH

BRE T T HARNED

RICHARD MAT TK A

Schwarz is a UX and UI designer, web developer and maker who creates content for brands like InVision, UXPin and Adobe. Who better then to show you how to master UI design over on page 58? w: https://uxtricks.design

Babich is a UX designer and he runs the user experience blog called UX Planet. On page 66, he shows you how to organise your design system, like a digital Marie Kondo. w: http://babich.biz t: @101babich

As director of education at TeamGantt and founder of the Digital PM Summit, Harned is pretty much project management royalty. He shows you how you can get started managing your first project on page 18. w: brettharned.com

Mattka is an award-winning designer and developer specialising in VFX. On page 76, he shows you how you can add video effects to 3D objects – and even display 360-degree video. w: richardmattka.com t: @synergyseeker

march 2020 3

@netmag

Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200

/netmag

flickr.com/photos/netmag

[email protected]

net.creativebloq.com

medium.com/net-magazine

EDITORIAL

Editor Josh Russell [email protected] Group Editor in Chief Claire Howlett Senior Art Editor Will Shum

CREATIVE BLOQ

Editor Kerrie Hughes [email protected] Associate Editor Ruth Hamilton Operations Editor Rosie Hilder Senior Staff Writer Dominic Carter

CONTRIBUTIONS

Andrew Armitage, Nick Babich, Vamsi Batchu, Mark Billen, Kyle Carpenter, Dominic Carter, Jo Cole, Brett Harned, Harriet Knight, Adam Lee, Oliver Lindberg, Richard Mattka, Tom May, Alvaro Montoro, Ally Morris, Dale Murray, Daniel Schwarz, Mark Shufflebottom, Ben Steers, Kym Winters

PHOTOGRAPHY

All copyrights and trademarks are recognised and respected

ADVERTISING

Media packs are available on request UK Commercial Sales Director Clare Dove [email protected] Advertising Sales Manager Michael Pyatt [email protected] Account Sales Director Matt Bailey [email protected] Account Sales Director George Lucas [email protected] Account Sales Manager Tom Walsh [email protected]

INTERNATIONAL

net is available for licensing. Contact the Licensing team to discuss partnership opportunities. Head of Print Licensing Rachel Shaw [email protected]

PRINT SUBSCRIPTIONS & BACK ISSUES

Web www.myfavouritemagazines.co.uk Email enquiries [email protected] Tel 0344 848 2852 International +44 (0)344 848 2852 Group Marketing Director, Magazines & Memberships Sharon Todd

CIRCULATION

Head of Newstrade Tim Mathers 01202 586200

PRODUCTION

Head of Production US & UK Mark Constance Production Project Manager Clare Scott Advertising Production Manager Joanne Crosby Digital Editions Controller Jason Hudson Production Manager Nola Cokely

MANAGEMENT

Chief Content Officer Aaron Asadi Chief Revenue Officer Zack Sullivan Commercial Finance Director Dan Jotcham Managing Director Prosumer Keith Walker Head of Art & Design Greg Whittaker

PRINTED BY

William Gibbons & Sons Ltd, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT

DISTRIBUTED BY

Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU www.marketforce.co.uk 0203 787 9001 ISSN 1355-7602

DISCLAIMER

All contents ©2020 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be used, stored, transmitted or reproduced 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: 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 of products/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 other changes or updates to them. This magazine is fully independent and not affiliated in any way with the companies mentioned herein. If you submit material to us, you warrant that you own the material and/or have the necessary rights/permissions to supply the material and you automatically grant Future and its licensees a licence to publish your submission in whole or in part in any/all issues and/or editions of publications, in any format published worldwide and on associated websites, social media channels and associated products. Any material you submit is sent at your own risk and, although every care is taken, neither Future nor its employees, agents, subcontractors or licensees shall be liable for loss or damage. We assume all unsolicited material is for publication unless otherwise stated, and reserve the right to edit, amend, adapt all submissions. We are committed to only using magazine paper which is derived from responsibly managed, certified forestry and chlorine-free manufacture. The paper in this magazine was sourced and produced from sustainable managed forests, conforming to strict environmental and socioeconomic standards. The manufacturing paper mill and printer hold full FSC and PEFC certification and accreditation.

4

march 2020

Issue 329: March 2020 : net.creativebloq.com

FEED

FEED

SIDE PROJECT

12

CLIENTS FROM HELL

13

BEYOND PIXELS

14

WORKSPACE

Alvaro Montoro on his library for putting gamepad functionality in the hands of devs

15

Ben Steers shows us around the Fiasco Design workspace, a place for Wooden Pencils, bikes and a big gold thumbs-up

The latest in our series of nightmare clients Ally Morris shares how fishing improved his mental health, creativity and productivity

VOICES TRY YOUR HAND AS PM

18

ESSAY

20

SHOW, DON’T TELL

24

Brett Harned on how to prepare for your first turn as project manager

People see stats more than ever before. Adam Lee asks whether that’s changed the way we discuss insight

VOICES

INTERVIEW

SMOOTH WEBSITE MIGRATION 32

Andrew Armitage on the things to consider when migrating a site to a new platform

Q&A

33

BIG QUESTION

34

6

march 2020

26

From flying drones with her thoughts to fashioning interactive clothing, Charlie Gerard shares her side projects

Ali Spittel explains why she’s on a mission to teach code in a non-intimidating way Our experts predict how their jobs will change by 2030

Photo by © Nico Kaiser (NodeConf EU)

Dale Murray examines if proprietary cloud services clash with GDPR

SAVE UP TO

77

%

SUBSCRIBE TO NET AND TAKE ADVANTAGE OF THE PRINT AND DIGITAL BUNDLE

TURN TO PAGE 16

to find out more about the savings on offer for subscribers

Contents REGULAR

GALLERY

38

Mark Billen runs down the month’s best sites, including Runway Palette, a project leveraging TensorFlow to analyse fashion

REGULARS EXCHANGE

08

Pamela Pavliscak, J Cornelius and Torrey Podmajersky share expert advice and tips

SHOWCASE PROFILE

46

HOW WE BUILT

52

Stink Studios discusses advertising’s original sin, cloud tools and WebAR’s future Red Collar on how its in-house project draws attention to marine conservation

PROJECTS FEATURES THE ULTIMATE UI DESIGN GUIDE

58

Daniel Schwarz reveals the top design techniques and latest tools for creating great interfaces

BUILD A PERFECT DESIGN SYSTEM

66

Nick Babich shares key principles that will help you build a perfect design system for your organisation

PROJECT

ADD VIDEO TEXTURES TO 3D OBJECTS

76

Richard Mattka shows you how to use video as textures for your 3D objects, create 360 video and apply a variety of effects

RGB SPLIT CHANNEL EFFECT

82

PURPOSEFUL HERO HEADERS

86

DESIGN WEARABLE APPS

92

Mark Shufflebottom uses shaders to edit the RGB channels of a webcam feed

Daniel Schwarz shows you how to put purpose over form when designing headers Vamsi Batchu on the best practices for creating watchOS wearable apps

march 2020 7

Practical advice from industry experts

Send your questions to [email protected] THIS MONTH FEATURING... PAMELA PAVLISCAK Pavliscak collaborates with companies to craft emotionally intelligent experiences. Her book, Emotionally Intelligent Design, charts a tech future with feeling. w: pamela.is t: @paminthelab

J CORNELIUS Cornelius is the founder and president of Nine Labs, a digital product strategy, design and experience consultancy operating in Atlanta and New York City. w: www.ninelabs.com t: @jc

TORREY PODMAJERSKY Based in the Greater Seattle area, Podmajersky is a UX writer at Google and author of the best-selling book Strategic Writing for UX. w: torreypodmajersky.com t: @torreybird

QUESTION OF THE MONTH

The subtitle of your book, ‘Building Products with Confidence and Clarity’, seems like the opposite of the maxim ‘Fail fast, fail often’. Is it and, by extension, is that old slogan past its sell-by date? Digby Baird, Christchurch, New Zealand

JC: The concept of ‘fail fast, fail often’ isn’t expired. It has been misunderstood or, at the very least, taken too literally. And it’s not at all in opposition to building with clarity and confidence. Too many people interpret ‘fail fast’ to mean pursuing ideas with recklessness because failure is okay. Some even celebrate spectacular failures as a form of progress. That way of thinking is a disaster. What people should be doing is running lots of little experiments to see what works. If something works you keep doing it. If something fails it’s not a catastrophe; it’s a learning experience. These small tests are the exact thing that build clarity on what works and what doesn’t and give you the confidence to keep going. Loops by J Cornelius is a practical guide to getting products out of your mind’s eye and into the real world

Emotional design

SUCCESS STORIES What’s a really good example of a site or app that gets emotional design right?

Shola Mendez, Manchester, UK

PP: Care, creativity and connection are the core characteristics of emotionally intelligent design. So I’m tempted to say TikTok because it encourages creativity. However, while there’s some level of care by including a digital wellbeing setting that limits use to two hours, it still has many of the same issues you see with other social media apps because

8

march 2020

it encourages social comparison rather than authentic connection. Aside from apps and sites, there’s a lot of interesting experimentation with wearables that convey or adapt to mood. Startups

SHORT-SIGHTED STARTUPS You must meet many would-be startup founders. What are the mistakes people make when introducing themselves?

Billie-Jo Frederick, Boston, US

JC: The number one mistake I see is people in love with their solution instead

Q&As

3 SIMPLE STEPS How can I estimate the best UX-writer-toproduct-designer ratio on a product design team? Jagoda Patel, Mumbai, India

TP: There’s no single ratio that will be perfect for applying to every team,

every product or every situation. If I needed to estimate and staff to a ratio for a particular product team, I’d start with what needs to be done and what resources exist. Shortform video sharing site TikTok playfully encourages creativity by young people around the world

1 Interface of a problem. Nothing is more irritating than someone more fascinated with

problematic experiences lack emotional intelligence, from unsatisfying

the technology they are using to solve a problem than the problem itself. Not long ago someone was pitching me an idea to track real-world advertising hļhfwlyhqhvv1#Wkh|#zrxog#wudfn#d# phone’s location and know when it was in proximity of a billboard or other advertisement and then assume (keyword: assume) the phone’s owner had seen the ad. They went on and on about GPS accuracy, data science and algorithms. When I asked: ‘Who is this for? What problem does it solve?’, they said: ‘I’m not sure yet but some big advertising company will want it’. Not being able to clearly articulate how wklv#whfkqrorj|#vroyhv#d#vshflĽf#sureohp# iru#d#vshflĽf#jurxs#ri#shrsoh#lv#olnh#d# hammer looking for a nail. These people sometimes get lucky. But, looking at the history of successful companies, the people who set out to solve a problem have a much better track record.

interactions with chatbots to apps that congratulate when they should console. Other experiences have been (maybe inadvertently) designed for negative emotion by optimising for engagement. Now we see Twitter and Instagram experimenting with ways to mitigate that by removing likes. My prediction is that in the next two years, we are going to see a growing awareness of the emotional dimensions of experience. Partly because we’ll begin to appreciate the negative dynamic embedded into product design but also ehfdxvh#hprwlrqdo#duwlĽfldo#lqwhooljhqfh# – and maybe mixed reality (XR) too – will nudge us to pay attention to emotion. Of course, that technology has a lot of shortcomings and we’ll have to decide how it could help or harm. Emotional design

MORE FROM EMOJIS How can emojis be made to work better?

Emotional design

THE FUTURE OF TECH Are you optimistic or pessimistic about the role of technology in our lives in the 2020s and beyond? How can web designers significantly influence this direction?

Harley Manning, Cardiff, UK

PP: Right now, we’re seeing what happens when design hasn’t fully considered emotion. Some of our most

Teresa Kennedy, London, UK

SS=#Hprmlv#dqg#uhdfwlrq#JLIv#fdq#Ľoo#lq# gestures and expression missing from online communication. That’s a positive. The downside is that emojis can seem overly reductive or automatic in how we use them. Emotions online take on their own shape, often exaggerating trivial moments and minimising big feelings. Emojis are a part of that cultural shift.

To design an interface, I’ll need

both graphic design skills and content skills. This tells me I need those talents but doesn’t give me the ratio. 2 Graphic design system If there is no existing graphic design system (colour, layout, typography) or if the current system has to be adapted to meet the new needs, I’ll require more of my designers to have graphic design skills. 3 Content strategy

If there is no content strategy (in terms of things like voice, terminology or information architecture) or if the new products cover different or new ideas and purposes, I’ll need more of my designers to have content skills.

Images courtesy of: 1. Interface by Mansion@design from the Noun Project 2. Graphic design by ProSymbols from the Noun Project 3. Content strategy by Becris from the Noun Project

march 2020 9

Network

COOL STUFF WE LEARNED THIS MONTH HOW NETFLIX USES PSYCHOLOGY TO PERFECT CUSTOMER EXPERIENCE

Ever feel like Netflix is so well designed that

it’s reading your mind and predicting your actions? The

THE POLL

WHAT WILL BE THE BIGGEST WEB DESIGN CHALLENGE IN 2020? UX 4.76%

Device compatibility 4.76%

site has such a good user experience that 15 per cent

Designing at scale 4.76%

of the world’s web traffic heads to Netflix and this article takes a deep-dive

into how it has perfected visitor satisfaction by studying its psychology. https://netm.ag/2SJAVN1

Skills shortage 19.05%

Data protection 23.81%

GOOGLE ASSISTANT CAN TRANSLATE ON YOUR PHONE

If you’re struggling to cross the language barrier, Google Assistant’s new Interpreter Mode for iOS and Android could be for you. Unlike Google Translate, there’s no app to download and it even translates languages in real time. https://netm.ag/39ownBA MICROSOFT UNVEILS REBRANDED WINDOWS WITH NEW LOGO & ICONS

When it comes to designing for the web, logos are a sticking point with users. However, everyone appears to have looked right through the new Windows logo, which was unveiled along with a massive batch of icons. Is it a step forwards for the brand or is there a reason it’s gone unnoticed? https://netm.ag/368OYzm

10

march 2020

Accessibility 19.05%

Security 23.81%

From our timeline

What’s the strangest client feedback you’ve ever received? Ohh, I’ve had a few of these but these two are my favourites… “I don’t want to scroll” “Can you make everything white with black text?” @matchboxhero Upon sending a PDF over of screen mockups of a homepage, the client replied: “None of the links work on the stuff that you’ve sent over, can you send me them again?” @DAN5HAW

“I didn’t realise that circle graphic would be so round”. The strangest part of that is we knew what they meant. @CreativoDesign I was once asked to resize a series of posters right before sending them to the printer, because the client didn’t understand that I could just design and produce them at their intended size :/ @makeyourownmark

“Can you move the text so it’s 3mm closer to the Outer Hebrides?” @kierweb One time a client asked for my team to save the website design review files to a thumb drive and snail mail it to them. @amorgolisdesign ”Can you make this video printable?” @chrisrhymes I was once told that the UI I built was too logical. I’m still not entirely sure what they meant by that. @ScottsWebDev

People, projects & paraphernalia

THIS MONTH FEATURING...

SIDE PROJECT

12

BEYOND PIXELS

14

Alvaro Montoro on his library for putting gamepad functionality in the hands of developers

Ally Morris shares how fishing has improved his mental health as well as his creativity and productivity

CLIENTS FROM HELL

13

WORKSPACE

15

This month, the old adage ‘size matters’ certainly rings true for one developer

Ben Steers shows us around the Fiasco Design workspace, a place for bikes and a big gold thumbs up

march 2020 11

FEED Side project

GAMECONTROLLER.JS

Alvaro Montoro on his library for putting gamepad functionality in the hands of developers SIDE PROJECT OF THE MONTH

IN FO

ALVARO MON T ORO Montoro is a software engineer passionate about web technologies in general and HTML and CSS in particular. w: alvaromontoro.com t: @alvaro_montoro

Tell us what your side project does. GameController.JS (https://netm.ag/2FuWCsj) is a JavaScript library that enables developers to manage gamepads in all modern browsers. Its goal is to remove the initial complexity of the original web API. Why did you create it? While searching for a web API to integrate in a different project, I was surprised to find that there was a standard Gamepad API. I enjoy playing games and it had this cool factor that made it fun to learn. After getting the first snippets working from scratch, I realised that every step in the process required many repetitive tasks and, although not excessively complex, it was going to be difficult to maintain. Building a library to simplify the interface was a natural move and it almost happened without even realising. What were you hoping to achieve? At the beginning, developing the library was more of a personal and learning challenge but soon I came to the realisation that I not only wanted to be the developer of the library but also one of the users. And after seeing how repetitive and tedious some of the steps were, the goal in mind soon became simplicity. The simpler and easier to use that the library was, the

12

march 2020

better it would be for other developers (and myself) to build interesting projects with it. What technologies were used in building it? The core of the library is the Gamepad API and its extensions (like the game controller vibration). It was built using Vanilla JS in an attempt to keep it free of other libraries or plugin dependencies and also as light as possible (the current version is around 6KB). How has it been received? The first people that tried the library – and gave the thumbs up – were my four-year-old and two-yearold children. They are still too little to play games like Guitar Hero or Dance Dance Revolution but they enjoy pretending to play with the drums and guitars. They were excited when I used the library to build simple versions of those games they could play with the controllers connected to the browser. Received warmly by the developer community, GameController.JS is fairly recent but already several projects started linking it as a dependency to build web games with gamepad support. What do you think you’ll do next with it? The Gamepad API is an actively evolving document, which means that GameController.JS has to be updated often to keep up with the new changes. The library needs some polishing, expanding it to include more functionality and extensions and adding custom JavaScript events. As mentioned before, the next step would be for me to become a user of the library and build a version of a game like DDR with open and accessible features to make it available for everyone.

Feed

HOW TO

DESIGN FOR DARK MODE After some initial dismissive

reactions, it would appear as though dark mode is more than

just a fad, with apps like Instagram and WhatsApp adopting the style. But is there anything in particular that you need to keep in mind

when designing for dark mode? We thought it would be useful to shed some light on the situation with

the help of @netmag’s followers.

THE SAME PAGE Exclusively for net: The latest in a series of anonymous accounts of nightmare clients CLIENTS FROM HELL

I was working with a client who called me almost every other day, including weekends, to ask simple questions that could have been answered in person. It was annoying but I didn’t complain because he paid me on time. One day he asked me to design a flyer to hand out to potential customers. I started working on it using the brand guidelines. I mailed him the proposal and five minutes later got a call: Client: This looks too much like our previous flyer. Make it different, make it POP! Me: Sure. I redesigned the flyer, still using the brand colours and sent him another proposal. Client: No, no, no. What’s wrong with you lately? I feel like you’re relying on the same old, same old. I want something DIFFERENT! Me: I am just following the brand guidelines with regard to the font and the colours. Maybe that’s why it looks similar to the other designs I’ve done but the compositions differ quite a bit.

Client: If you say so but I want you to push it further. Make it POP! If you have to, use other fonts and colours. I want to be EXCITED. Me: Are you sure? If I go against the brand guidelines it’s not going to be consistent with your other brand materials. Client: I don’t care. Fix it! I redesigned the flyer with different colours and fonts, trying to do something dynamic. I sent him the file. He called me immediately. Client: WHAT ON EARTH IS THIS? This doesn’t even look like it comes from our business. Redesign it so it looks like it comes from us. I was getting really annoyed at this point and sent him the first proposal again, except this time I changed the size of the font. He loved it.

clientsfromhell.net

CONSIDER DEPTH

There’s a lot more to dark mode than simply inverting your whites and greys; web designers need to spend some time considering the depth in their dark mode too. @Loftio says: “Darker shades should be your furthest away elements and your closer elements should be lighter.”

MAKE IT ACCESSIBLE

As with so many web design features, the priority of dark mode should be accessibility. This subject was the most prevalent piece of advice shared by our Twitter followers, with both @KSRuprai and @LizHamburger putting accessibility and legibility on a par. @mrdanielschwarz goes one further, however, and says: “It’s a legit accessibility concern, not a feature for ‘Pro’ users!”

KEEP IT RELEVANT

Just because big brands are rolling out dark mode, does this mean you have to get caught up in the trend and adopt it too? “Most importantly, ask why you’re designing for dark mode,” advises @LizHamburger. “Is it a style choice or experience aid?”

march 2020 13

FEED Beyond pixels

STUFF I LIKE

FISHING

Ally Morris vkduhv#krz#Ľvklqj#kdv#ehhq#ehqhĽfldo#wr#klv# phqwdo#khdowk#dv#zhoo#dv#klv#fuhdwlylw|#dqg#surgxfwlylw| BEYOND PIXELS

UX leader

w: smart.co

SIZZY

We’ve been working on a

responsive SVG thing that

needs careful visual QA. Sizzy is a browser for developers that lets you see lots of different viewports at once and you can trigger an interaction across all devices in one hit – which saves a ton of faffing around. https://sizzy.co/

AIRTABLE

If you’re the kind of person who likes to use spreadsheets for things that aren’t just tables of numbers, then you’ll absolutely love Airtable. It has transformed the way I do user research and it bridges the gap between qual and quant really nicely. https://airtable.com/

WEBFLOW

Imagine Sketch with some of its best plugins and a button that lets you publish a responsive website. That’s Webflow in a nutshell. It markets itself as enabling users to build business websites without touching code and it’s well worth having an explore of it. https://webflow.com/

14

march 2020

mist slowly rising from the lake. You can’t help but feel inspired. I have recently read Alex Soojung-Kim Pang’s book Rest, which opened my eyes to the influence that proper rest has on our creativity. Many of the most brilliant and creative figures that have lived were well known for spending time in nature, resting and allowing their minds just to wander. Charles Darwin, Beethoven and Charles Dickens (to name just three) all had strict routines where they would purposefully take time out to think and contemplate their work. When we choose to switch off, our subconscious minds become active and it is during these times we can often solve the ‘impossible’ problems or come up with new ideas. I often feel guilty when I turn off my screen – after all, that to-do list doesn’t get done on its own. But taking purposeful time out (and hopefully catching some fish) can actually increase my productivity and quality of work in the long run.

PROFILE

HARRY BRIGNULL

As a natural introvert, sitting on the bank of a lake with a flask of tea and a pint of maggots is a great way to recharge the batteries and get some perspective. It’s a perfect antidote to the day-to-day pressures I face. Running a busy design and web development agency for over ten years is an incredible privilege. To be able to work every day doing something I love is rewarding but overseeing a small business can sometimes feel like a 24/7 job. With a neverending to-do list and expectations constantly drawing me towards ‘doing more’ or working longer hours, finding any sort of headspace in this environment is crucial for my wellbeing. I feel fishing is as far removed from my day job as it can be. It is tangible and low tech and for me that is a huge attraction. I enjoy the simplicity of fishing with a rod and line, trying to outwit a big fish to fall for the trap I have set out. There is a mystery to what is going on under the water and although I have influence over certain elements, such as location or bait choice, fortune still plays a part in my success. When I take the time to notice, I enjoy the connection with the natural world, which stimulates all my senses. The sound of fish breaking the surface of the water, the smell of wet leaves underfoot or the sight of early morning

Morris is a passionate designer/ developer and Norwich City fan. He is also director of Reborn Media (rebornmedia.co.uk)

feed

1

4 2

3

5

Ben Steers shows us around the creative design agency, a place for Wooden Pencils, bikes and a big, gold thumbs-up WORKSPACE Fiasco Design is a creative design agency based in Bristol, UK. Now in our tenth year, we’ve been very fortunate to work with some fantastic brands over the years including Just Eat, National Trust and UWE Bristol. Our studio is part of a larger co-working space called Gather Round, which myself and Fiasco co-founder, Jason Smith, set up in 2019. The space is in an old industrial building, therefore the look is a mix of industrial and New York loft apartment, with exposed brick walls, 4m-high ceilings, steel work and contemporary furniture. The vision was for a mixed-use co-working space for creative individuals and businesses. There’s a mix of open-plan workspace, private studios, meeting rooms,

nooks and places for people to gather and share ideas. Our studio is a large open-plan space, with two banks of six desks split between directors / accounts and creative, lending itself well to our collaborative style of working. Being home to a variety of creative businesses means we have a wealth of talent and opportunity for collaboration, right on our doorstep. It’s an exciting, lively space with a vibrant community of friendly, like-minded people. Our D&AD Pencil needs no introduction [1]. Any designer strives for one of these. We won ours for our work on the Pelican Books website in 2016. It now takes pride of place on our shelves. The GF Smith Sample Book is beautifully designed and a constant

PROFILE

FIASCO DESIGN

source for paper stock inspiration [2]. We’ve had our copy for a while now and often use it when deciding on the right stocks for print. We also have the Pantone Portable Guide Studio, a collection of eight Pantone graphics guides [3]. It’s not cheap but it’s a good investment. We’ve had our case for over five years now and it’s an essential part of life in the studio. In 2017 our sister company, Thread, put on a two-day design festival. As part of the event, we designed a bike in collaboration with Temple Cycles [4]. The result was a single-speed commuter bike in brand colours and accompanying vinyl graphics. A thing of beauty. We have an award scheme for the Fiasco team. At the end of each month, everyone votes on who deserves the Good Job Buddy Award – a golden thumbs up [5]. Praise for a job well done. Steers is creative director and co-founder of Fiasco Design, as well as co-founder of the Gather Round co-working space. w: https://fiasco.design

march 2020 15

SUBSCRIBE TODAY

SAVE UP TO 77

%

ON YOUR ANNUAL BUNDLE

myfavouritemagazines.co.uk/net/promo20 2ƪHUGRHVQRWDSSO\WRTXDUWHUO\RUPRQWKVXEVFULSWLRQV 16

march 2020

GREAT REASONS TO SUBSCRIBE O

Print edition delivered to your door

O

13 issues in a one-year subscription

O

iPad and iPhone edition download

O

Android edition download

O

Money-back guarantee

CHOOSE A PACKAGE PRINT EDITION

SAVE UP TO

47

%

12-month subscription (13 Issues)

PRINT & DIGITAL

SAVE UP TO

77

%

12-month subscription (13 Issues)

TERMS AND CONDITIONS: This offer is available to all new subscribers. Discount applies to annual print and print + digital bundle subscriptions only for ImagineFX, Computer Arts, 3D World and Net. Offer can only be redeemed online via the web link stated opposite. Prices and savings quoted are compared to buying full-priced print and print + digital bundles. You will receive 13 issues in a subscription year. You can contact us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14-day cancellation period unless exceptional circumstances apply. For full terms and conditions please visit: www.bit.ly/magterms. Offer ends 31/03/2020.

march 2020 17

Opinions, thoughts & advice

CAREER ADVICE

ESSAY

TRY YOUR HAND AS PROJECT MANAGER

20

INTERVIEW

26

Q&A

33

From flying drones with her thoughts to fashioning interactive clothing, Charlie Gerard gives us an insight into her many side projects

Teacher, podcaster and speaker, Ali Spittel, reveals why she’s on a mission to teach code in a way that’s not intimidating

Photo by © Nico Kaiser (NodeConf EU)

Dale Murray on why he believes the trend towards proprietary cloud services clashes with GDPR and ‘digital sovereignty’

Brett Harned on how to prepare for your first turn as project manager Whether it is something you accept or not, you are a project manager. Sure, you may identify as a designer, developer, content strategist or any of the many roles and titles there are in our industry but, as a human being, you are a project manager. Think about the most basic things you do in life and you can apply project management to them: making dinner, moving, attending a conference, even a night out with friends or a vacation. In all of those scenarios, you’re required to estimate, plan and communicate. And it’s not that hard. Just because you have those innate PM skills, it doesn’t mean you’re excited – or even ready – to manage a project. And that’s fair! But sometimes you have to take on the role while also producing deliverables for a project and you might find it challenging. Fortunately, with a few simple strategies, you can keep your projects on track.

Opinion

GET TO KNOW EVERYTHING Knowing what you are up against is half the battle and if a project is dumped in your lap, you’ll have to make the time to become the project know-it-all. That means you must understand your project scope and goals, get to know your team and their individual skills and expertise, as well as the stakeholders you’ll need to please and guide through the project. The first thing to do is set aside a few hours to get your project details organised and your team and stakeholders aligned. Sit down and have a conversation to uncover details and set expectations about project goals, team and individual responsibilities, deadlines, milestones, requirements and more. This will help get the information you need, agree to a schedule and get the ball rolling.

AGREE ON PROCESS

ENSURE COMMUNICATION You’ll never be able to effectively lead a project without solid communication practices. Set up routines to keep important details out in the open: you’ll find that your leadership can be shared (if you want it to be) and your team will be more accountable to the project and one another. Generally, you want to make sure that the collective team is kept in the loop on important details, decisions and progress (or lack thereof). There are two simple practices to help: Hold stand-up meetings This is a simple, short meeting where the team gets together at a routine time

(typically daily) for each team member to provide an update on: what was done yesterday, what they’re working on today and any blockers that stand in their way. This is a rapid-fire team status update that helps you to spot potential issues and resolve them quickly. If you’re strapped for time, you’ll value this meeting because it can replace a lot of individual check-ins. Create status reports It’s always wise to maintain a level of transparency about action items, deliverables, milestones/progress, budgets and risks with your team and stakeholders. If you take just 15 minutes per week to create a status report and distribute it to all involved parties, you won’t become a bottleneck. You’ll share the burden of project information and that will mean that anyone can step in and help as needed. That’s the kind of collective ownership you’ll be looking for as a part-time PM. No matter what you do, the more your team keeps information out in the open and communicates whenever there are

questions or issues, the easier it will be to solve issues quickly and make positive progress together.

HAVE SOME FUN If you’ve taken on the PM responsibility already, you’re probably a flexible person – and your organisation should probably thank you for that. Unfortunately, project management tends to be a bit of a thankless job, so I wouldn’t hold your breath! Regardless of your title, remember that as much as you prepare and plan, your projects will change. You’ve got to be flexible about that but, at the same time, manage it. It can be a hefty job to update plans, communicate impacts, identify risks and solve issues and you’ve got to be flexible about how it all pans out. Do your best to call out the issues, find new paths and lead the team to a successful delivery. You can do this, no matter your title.

PROFILE

No matter how you prefer to work, make sure that your team and your stakeholders are fully invested in and educated on your process. Take the time to document – in a public place – how the project will run. If you’re running agile, that means you agree to your sprint cycle, meetings and Kanban board. If you’re more traditional in process, create a project plan to outline project phases, tasks and milestones along with responsibilities. The more you can do to gain alignment on how the project will work, the easier it will be to manage the process and deliverables.

Harned is director of education at TeamGantt, founder of the Digital PM Summit and podcaster at Sprints & Milestones. w: brettharned.com

march 2020 19

VOICES Essay

20

march 2020

Essay

DIGITAL SOVEREIGNTY

TAKE BACK CONTROL OF YOUR DATA AND SYSTEMS Illustration by Kym Winters

Dale Murray on why he believes the trend towards proprietary cloud services clashes with GDPR and ‘digital sovereignty’, while open–source solutions offer a genuine alternative In Europe, ‘digital sovereignty’ is one of the hot issues right now but what is it exactly and why should any of us be concerned about it – either as individuals or as organisations? Digital sovereignty refers to the control an entity has over its own digital footprint. At an individual level, this involves a person’s right to choose how and where their personal data is gathered, processed and distributed. At an organisational level, it refers to the control the organisation has over its own systems and how customer data is gathered, processed and distributed. The introduction of the EU’s General Data Protection Regulation (GDPR) in 2018 set out key principles to govern how organisations use customer data, relating to lawfulness, fairness and transparency; purpose limitation; accuracy; storage limitation; integrity and confidentiality; and accountability. As a result, European businesses are taking their data security and storage arrangements more seriously than ever before.

THREATENING CLOUDS However, European businesses and customers also transact with countries all over the world, not all of which will be bound by the provisions of GDPR. This

starts to create some interesting conflicts around the idea of ‘digital sovereignty’. For example, both the German and the UK governments are currently considering whether to allow Chinese telecoms giant Huawei to play a leading role in the implementation of their countries’ 5G networks. While news reports inevitably focus on whipping up sensational claims of potential espionage, the more mundane issue to consider is whether a UK or German firm can claim to have total sovereignty over its data if that same data is fully accessible by an organisation based in China or the US. Legally, right now, this is a concern that remains a grey area. Likewise, consider this: the number one trend in business IT in recent years has been the migration of software, systems and data to cloud-based platforms, often platforms from major vendors based in the US. This is understandable, thanks to factors like the stable environment, the cost savings from reducing infrastructure, the centralisation and mobile accessibility of data and so on. However, with the growing popularity of relocating services and data to the cloud, we are creating growing dependencies on a small number of large US firms,

march 2020 21

VOICES Essay threatening the digital sovereignty that the principles

A FRESH LOOK AT OPEN SOURCE

of GDPR seeks to ensure. Do users of these cloud services still have full control

For organisations of all sizes, there are ample reasons to take another look at what open-source solutions could

and transparency over their customers’ data? What’s more, can you ensure digital sovereignty for your own

bring to the table. For growing organisations, open source enables you to scale up without simultaneously

customers if you are using proprietary software that inherently limits your control over the data, interfaces,

scaling up costs on user licences. The first step is to audit the systems you currently

source code or jurisdiction? I would argue not. Thankfully though, there is an alternative.

have – or plan to have – that hold or process customer data. Then look at the alternative solutions available, including open-source options. Get involved with some

OPEN FOR BUSINESS Open source is key to decentralising the web and taking

relevant open-source communities to ensure that the solution you are considering has an active, stable

back control of data from the big tech firms. Governmental institutions and companies in Europe risk losing control

community behind it that has lots of traction and is updating regularly.

of their data. By companies utilising open-source projects and government institutions funding open-

CRM data is the heart of any organisation and a good place to start for most. With open-source CRM,

source projects, we can remove the dependencies on large US firms that consume huge volumes of private

organisations can ensure their data is completely within their control and maintain their digital sovereignty.

data as a business model.

Next, organisations could look at utilising open-source

Open source is not a new idea. Open-source software (where the source code is released under a license in

solutions for groupware services such as email and document storage (thus, side-stepping proprietary cloud

which the copyright holder grants users the rights to study, change and distribute it) is often developed in a collaborative public manner. The main barrier to opensource adoption over the years has been its historic reputation – ie that the open-source community is made up of individual developers coding from their mums’ basements – but, in 2020, things have changed. Today, open source is big business. Microsoft acquired GitHub in 2018 for $7.5bn; IBM bought Red Hat last year for $34bn. Most of the software we use today has some element of open source within it, in fact Linux servers have been in use for many years. If you have an Android phone or a WordPress website, they are running on open source. So how does open source enable businesses to be digitally sovereign?

solutions such as Google Drive). Things like analytics, security – basically anything that consumes, stores or processes customer data – should also be considered. European organisations and public institutions need to assess their IT strategy and look at opportunities to embed open source to meet the following objectives:

22

march 2020

At a government level, we shouldn’t be funding the development of proprietary software and creating dependencies that we can’t easily escape. If, instead, government funding was devoted to investing in opensource projects, public money would be spent for public good, providing more control and removing our growing dependencies on overseas tech giants. Digital sovereignty is something that can still be achieved in Europe. As a regulatory powerhouse, GDPR was a great stride in the direction of digital sovereignty but much still needs to be done. Europe should be looking at open source not only to reduce its total cost of ownership but also as an enabler of digital sovereignty and data privacy.

PROFILE

O Transparency: Only open source can guarantee full control and transparency over their application and its data. O Freedom of choice: With open source there is no vendor lock-in. You have freedom of choice with who you host your data with. You are free to move between vendors or support yourself. You have a choice to host on premise or in the cloud. O Standardisation: Providing standard open-source software for standard services and problems means that we reduce the effort needed when it comes to providing ‘commodity’ services. O Shared knowledge: By building open communities around software, we are sharing knowledge and skills that reduce these pockets of proprietary knowledge. O Security: You have visible access to the code base to run your own security audits or compliance checks.

O Maximise innovation through the use of open source or contributing to open source O Fully assess the data security and privacy risks to individual citizens or customers O Reduce the dependencies they have on singular large US vendors

Murray is CEO of SalesAgility and is responsible for the company’s strategic growth plans and initiatives, leading and guiding its senior management team. w: salesagility.com

VOICES Opinion decay is always in place. Deliver a true sense of what success and risk could mean. (A 90 per cent likelihood of one outcome occurring does not mean the other outcome will never happen. Say this over and over. Print banners.) Clarity is critical. Language like ‘win’, ‘lose’, ‘success’ and ‘failure’ makes it immediately difficult to show wider value and make it very easy to slip into the ‘tell trap’. You’ll find it nearimpossible to talk about a ‘losing’ test in positive terms. This shouldn’t be the case. Experimentation delivers knowledge you can show. Winning and losing can be a closed loop but knowledge grows. Knowledge expands. Showing your thinking around the situation

SHOW, DON’T TELL People see stats (both accurate and inaccurate) more than ever before. Adam Lee asks whether that has changed the way we discuss insight We’re approaching a tipping point in terms of understanding data, which is awesome. Data practitioners have worked hard to demonstrate that data and insight aren’t just mountains of intangible numbers or impenetrable reports. We’ve fought to take the data to the people! We’ve shown the power that can exist in insight, when the data story is told in an engaging and relevant way. We’re also seeing public awareness of data grow. Using NOW Corpus, the online news keyword analysis tool, we can see that the use of the term ‘data’ in the news has grown 70 per cent since 2010 (from 251 times per million words to 429 times per million). With that growth of awareness can come fear and nervousness of the pervasiveness of data and its uses. And some of that fear is well-founded. So we have to be data advocates in a manner that is both engaging and ethical. What does that have to do with data and insight in experimentation? Well, explanations of experimentation run the risk of being focused on statistical rigour and data-

24

march 2020

driven logic, especially if you’re just telling a client about an outcome. This can make experimentation appear harder to understand than it needs to be and therefore harder to demonstrate the commercial value of. In turn, it can become easy for stakeholders to view experimentation as a nice-to-have but not as a critical part in organisational evolution. And then… we’re asked to tell clients how much that’s worth. Which means we’ve now got to devise and present a story that is not only engaging and ethical but also commercially convincing. Well, why shouldn’t we be asked to? The client has been asked to pay a lot of money for these services. How much that’s worth is an incredibly tough question to answer. Sometimes a rate card figure just doesn’t give the context needed.

TRANSPARENCY IS KEY It’s time to show the workings. Be clear and ethical about what significances and likelihoods mean, model any potential gains responsibly and ensure that any effective

positives that have arisen as a result. For example: “The change on this part of the site may not have resulted in the outcome expected but the behaviour we’re seeing suggests that if we considered this as part of a change to your media strategy, that may have a powerful impact.”

USE THE DATA This isn’t spinning a bad result. It’s setting expectations and showing benefit in a way that enables clients to grasp the value of what you’re sharing – which goes for any knowledge-generating discipline. Use data and insight (from all of your connected disciplines) to show what the potential opportunity looks like. Evidence your success with previous clients and show how you use data and insight in order to make things happen. This approach means you develop the value of knowledge (no matter if you’ve ‘won’ or ‘lost’). Discussions become more collaborative and wide-ranging. By showing this, you become more successful at gaining stakeholder trust. Showing the most powerful things possible – the ‘so what’ and the ‘what next’ – gains the belief of the client in the ability to deliver on an increasingly broad scale. In 2020, that’s our challenge: to show, not tell, exactly how insight and optimisation can reach outside of the boundaries of experimentation. PROFILE

DATA

will enable you to expand on those tests that didn’t perform as expected and highlight any

Lee is head of analytics is at User Conversion, an optimisation agency advocating the value and democratisation of data for clients and the industry. w: userconversion.com

SUBSCRIBE TODAY I«…x‫בבڟ‬ z(³à0ȨÁ…‫ۏגד‬

myfavouritemagazines.co.uk ORDER HOTLINE: ‫גגڷ‬٨‫׎‬٩‫אדזאזגזגגב‬ nXz0³«0…¨0zx…z(çÁ…I«X(ç‫ז‬xÁ…‫¨ו‬xz(³ÁÈ«(ç‫׎׏‬xÁ…‫¨א‬x٨JxÁ٩ *Terms and conditions: Prices and savings quoted are compared to buying full-priced print and print + digital bundles from myfavouritemagazines.co.uk. Savings correct at point of print and subject to change. Dollar prices quoted are for the United States, other global territory dollar pricing may vary. You will receive 13 issues in a subscription year. You can contact us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14-day cancellation period unless exceptional circumstances apply. For full terms and conditions please visit: www.bit.ly/magterms.

march 2020 25

VOICES Interview

IN FO job: Senior front-end developer w: charliegerard.github.io t: @devdevcharlie

26

march 2020

Interview

Charlie Gerard Words by Oliver Lindberg

Photo by © Nico Kaiser (NodeConf EU)

From flying drones with her thoughts to fashioning interactive clothing, creative technologist Charlie Gerard gives us an insight into her many side projects and explains how front-end devs can get started with machine learning

march 2020 27

VOICES Interview

Charlie Gerard is fascinated with human-computer interaction, in particular how you can use web technologies in unusual ways outside of the browser. She realised that if there’s an API or JavaScript framework, you don’t actually have to use devices as they were intended but instead you can hack them and build your own prototypes. For her first side project, she controlled a Sphero robotic ball with a Leap Motion and a sprinkle of Node.js in order to make it move with hand gestures. It eventually led her to wow conference audiences around the world with a talk about controlling things with the brain using JS. “I was researching other devices I could buy and came across brain sensors,” Gerard remembers. “I became interested in neurotechnology and it really opened

Photo: Nordicjs

28

march 2020

up a world for me. I had absolutely no idea that you could just buy a brain sensor and that as a dev I could build something with it. As soon as I discovered that, I had to tell people.” Gerard learned that some sensors like the NeuroSky give you access to raw data, which can be used for machine learning. Others give you access to mental commands or facial expressions, making it possible to interact with a web interface through eye movements. At the time there wasn’t a JavaScript framework to use with the Emotiv Epoc sensor, so to build an interface, Gerard wrote her own opensource JavaScript framework, based on the sensor’s C++ SDK, as well as a Node.js add-on. It enabled other developers to play around with this technology without having to learn C++ or Java. The

experiments she built with it include a brain keyboard (look right or left to highlight a letter, blink to select and display it in the input field), pushing a three.js 3D cube and even flying a mini drone with mental commands. Gerard became more interested in machine learning and found it wasn’t as scary as it seems. “At first I thought only data scientists would understand it,” she explains. “But understanding the basics doesn’t actually take that long. It’s about coming up with an idea and starting with a small goal, then diving a bit deeper.” Front-end developers can try out machine learning through open-source JavaScript libraries such as ml5.js and TensorFlow.js, developed by Google. The latter currently offers three features: using a pre-trained model, transfer learning and defining, training and running a model entirely in the browser, all in JavaScript (for a more detailed explanation, it’s worth having a read of Gerard’s Smashing Magazine article: www. smashingmagazine.com/2019/09/machinelearning-front-end-developerstensorflowjs/). “Go in steps, use a pre-trained model first and then combine it with custom training data before doing everything in the browser,” Gerard advises. “It requires a bit of knowledge and the training can take a lot of time. Doing it all in JavaScript is interesting if you wanted to visualise the training process and how the accuracy of the predictions change over time but you probably would fall back to Python if you were building something for production because it’s faster. So it’s still very early stages for web developers. Most of them are building experiments to learn more about machine learning but now more and more people are joining because they realise it’s doable in JavaScript.” For one of her creative coding experiments, Gerard added detection model PoseNet, which recognises body shapes in images and videos, to TensorFlow.js so that she could play VR game Beat Saber in the browser just with her hand movements – without the need for expensive equipment. She also prototyped a gesture recognition system

Interview

Photo: You Gotta Love Frontend 2019 Lithuania

with an Arduino microcontroller and TensorFlow.js to play Street Fighter with body movements. The latter combines machine learning with another one of Gerard’s passions: hardware. And this features quite heavily in her projects, for example when she built wearable interfaces in JavaScript to use clothes as an input device. “I came across conductive thread, which is embedded with stainless steel,” Gerard explains. “If you attach a microcontroller, you can get data from it just as if you plugged in a wire. So when your body comes in contact with the thread, you can use that as an input. It’s really flexible and easy to work with. You can sew it into clothes, a pillow, a towel or a couch – anywhere that you have fabric

“Understanding the basics doesn’t take that long. It’s about coming up with an idea, starting with a small goal, then diving a bit deeper” – and make them interactive. You could even embed it all around your house and create your own way of interacting with interfaces or devices without having to pick up your phone.” Gerard builds her prototypes in her personal time to learn technologies she doesn’t get to use at work. A senior front-

end developer by day, she’s had roles at ThoughtWorks, the New York Times and most recently Atlassian, where she focused on improving the user experience of project management software Jira. Now she’s about to join Netlify in Amsterdam. Astonishingly, Gerard – also a Google developer expert – only moved into web development five years ago. Having started out in advertising as a digital producer (a type of project manager) at a few agencies in Paris and Sydney, she worked with developers at a time when 3D came to the browser via WebGL. She realised she was more excited about the interfaces they were building than her own job, so she decided to quit and enrol in a 12-week General Assembly bootcamp.

march 2020 29

VOICES Interview It was one of the best decisions of her life. “Initially, I tried to learn to code by myself after work,” she remembers. “But when you don’t know anything about an area, you don’t even know what to Google. I knew what HTML was but I didn’t know how to add JavaScript to a website. I thought if the bootcamp didn’t work out, I could always go back to my job as a project manager. At least I would better understand what my developers were doing. But I really liked that feeling of writing a piece of code and it does something in front of you. I still feel that with hardware now. I loved it and never went back.” While the problems Gerard solves in her side projects are often harder than the ones at work, whenever she writes a blog post or speaks at conferences, her goal is to demonstrate that nothing is inaccessible. “I’m really excited about that,” she explains. “The research papers I read to inspire me to build something are really hard to understand. They’re written in a very scientific way but they’re needlessly complicated. You could break it down and make it so much easier. Anybody can come up with a good idea and build something interesting if they know that a certain technology is accessible. Otherwise you just feel blocked by thinking it’s too hard and you’re not even going to try.” And so there’s seemingly no limit to Gerard’s side projects. There’s always something new to discover. She maintains a list of potential prototypes she wants to work on (for example, interacting with the electrical signals in plants) and researches a wide range of topics. “I like to mix more than just tech, so I don’t only read news about front-end development and JavaScript. I follow what research centres like the MIT Media Lab or Disney’s labs do. I spend a lot of time exploring their projects and if they’re not open source, they at least give me an idea of what researchers are looking into. I then think about a way to make it happen with web technologies. If there’s a project about interactive textiles, I think about how to build something that’s a bit more helpful to people with motion impairments, for example. I always try to

30

march 2020

Photo: JSConf.Asia 2019

find a different angle and that usually leads me to the next thing.” When Gerard bought her second brain sensor, it was entirely open source, exposing her to a lot of raw data. She realised she couldn’t really do anything with it until she knew more about machine learning and so that has become her focus over the last year. She’s currently looking into different kinds of data that can be used for machine learning. For her Beat Saber experiment, she used camera data, while her Street Fighter demo used accelerometer and gyroscope data. Now she’s exploring sound. “If you build a spectrogram out of sound data, you can see the difference in patterns between when you’re speaking, knocking on a door or chopping carrots. As microphones are all around us, in laptops, phones and smartwatches, you can build software to recognise these patterns without changing your hardware and buying expensive smart devices for your home. So you could automatically pause your TV when your phone is ringing or pause a video on your iPad when you’re cooking and the system hears the sound of chopping.”

As usual when tinkering with new technology, Gerard not only notes the opportunities but also the limitations. For example, to work with machine learning data, you need lots of samples and it’s important that you check their quality. “When you train your algorithm, remember it’s just a piece of code,” Gerard advises. “It’s not actually smart. It’s going to find patterns but you might not always understand why it’s predicted something. There is a lot of trial and error. Sometimes you may have to go back and, for example, check your data is labelled correctly to reguide the algorithm.” The more Gerard looks into new types of human-computer interaction, the more she finds keyboards and phones to be quite restrictive. “There are so many ways that you could make your house adapt more to the way you live your life,” she points out. “You could make your environment a lot more playful and a lot smarter than it is now. I’m endlessly fascinated by coming up with creative ways of doing things that we didn’t know we could do. Making a device work for you is so much more exciting than just learning how to use it.”

Interview

Photo: JSConf Budapest 2019

“You could make your environment a lot more playful and smarter. I’m fascinated by coming up with creative ways of doing things we didn’t know we could do”

march 2020 31

VOICES Opinion important to expose any positive feedback. The last thing you want to learn during the development phase in a migration is that one of the best features of the old site won’t exist in the new one.

AUDIT EVERYTHING It’s easy to get excited about the opportunities a migration project provides but everything on the legacy site still needs to be audited; content, connections to third-party tools, Analytics or Tag Manager setup, reporting, search engine visibility and performance. Only once all these are fully understood will it be possible to determine the scope of the project and define the success criteria.

CMS

SMOOTH SITE MIGRATION Andrew Armitage shares the key things to consider when migrating a website to a new platform Website migration projects are full of promise. Switching to a new platform is a chance to address the drawbacks in your legacy site and breathe new life and enthusiasm into your digital strategy. So what are some of the things you should consider to ensure a successful migration?

WHY MIGRATE?

KEEP THE GOOD STUFF The users of a platform in a migration project will primarily be those publishing and managing content on the site. It’s natural during any discovery process to want to explore things that aren’t working with the platform. However, it’s equally

Potentially the most crucial aspect of a migration project is maintaining search-engine visibility. While there is opportunity to improve SEO-friendliness in a migration, existing page titles and descriptions shouldn’t be overlooked and any new markup should at least mirror existing heading structures. Setting up redirects with a 301 status (permanently moved) where pages have moved to a new URL is common practice but few migrations consider image searches, which can drive significant volumes of traffic. For other pages, setting a 410 (gone) status instead of a default 404 (not found) can improve the visitor experience, although there’s no indication this impacts on the wider ranking of your site.

PREPARE TO GO LIVE During the closing stages of the migration, performance tests should benchmark current page load speeds and search indexing so you can measure the technical success of the migration. Prior to the new site going live, pause any ad campaigns and update target URLs to avoid ads being suspended. Tools such as Google Search Console will help monitor page indexing going forwards but ideally URL redirects should be checked daily following the launch to give the best chance of staying one step ahead of Google’s crawlers.

PROFILE

There may be several reasons for migrating to a new platform. Identifying specific goals will impact on the platform you choose and your approach to development, as well as providing a measure for the project’s success. Simply switching your website to new technology isn’t a fix for poor process; it won’t suddenly enable you to write more blog posts but it may make the process more efficient.

Choosing a new platform isn’t easy. There will be opinions from other developers or colleagues and the marketplace is littered with technical terms beyond the knowledge of most of those responsible for making the buying decision. However, most migration projects have a core set of generic requirements: the future road map of the replacement platform, performance and security, affordable cost of ownership and ease of use.

SEARCH ENGINE VISIBILITY

32

march 2020

Armitage is the founder of A Digital, which specialises in migrating websites to Craft CMS, as well as building web applications and creative digital campaigns. w: adigital.agency

Q&A become a software engineer, which is a whole different story. I love how practical and comparatively accessible bootcamp education is versus college and I’m really glad I have the chance to teach at one. What led you to write your new ebook and why should people download it? I get questions all day every day asking for my advice on learning to code and I wanted a way to put all my thoughts in one place. I wrote about all the things I wish I knew before learning to code. I talk about factors like finding a learning path; the science behind learning anything new; how challenging it is; the softer skills like networking and working past impostor syndrome. I hope it motivates new programmers to stick with it, while also giving experienced programmers some tools to empathise with newer programmers and what it is that they’re

Q&A

ALI SPITTEL The teacher, podcaster and speaker is on a mission to teach code in a way that’s not intimidating IN FO job: Software engineer, distinguished faculty, General Assembly w: welearncode.com t: @aspittel

Could you introduce yourself to anyone who doesn’t know you? Hi! I’m Ali. I work as a lead instructor at General Assembly, where I teach new programmers to be software engineers. I also have a blog geared towards new programmers – welearncode.com – and I co-host the Ladybug Podcast. I’ve also been a software engineer at a couple of startups. Outside of work I am a digital nomad, so I travel a lot and live out of Airbnbs with my dog Blair. You’re known for your passion for teaching code. Where does that passion come from? My passion for teaching code comes from two angles. First, I learned how to code in computer science 101 class in college, which was a lot later than a lot of my peers. I loved it initially but when I took more advanced classes I really struggled because of the teaching style and the expectation of pre-college computer science, which I didn’t have access to growing up. Second, I studied education in college and would have minored in it if I hadn’t left school early to

going through. Your blog posts have attracted more than a million eyeballs. What’s your secret to attracting an audience with your writing? I write my blog posts for my past self: the girl who was struggling in a computer science classroom and who felt a lot of impostor syndrome at my first programming job. Even though most of my posts are technical, I try to break down concepts and jargon, write in a conversational tone and appeal to multiple learning styles. I think that being open about my struggles and using my teaching background to make resources that are educationally solid is something that resonates with people. What have been the best and worst things about working as a digital nomad? The best part is definitely being able to live in different cities all over the country. I get to see different sights, get local food and meet new people all the time. When I’m in a city long-term, I never see all the sights because I’m free to go to them any time; there’s more pressure to visit things when I’m only in the city for a limited time. The hard part is having to figure everything out all over again when I move somewhere: where to eat, where to walk my dog, who to hang out with and so on. It’s a fun adventure for sure but the goal is to find my dream city to settle down in. What’s exciting you most in the field of web design right now? I am really excited about WebAssembly: I love building art with code and I think WebAssembly will be huge for making that more performant, plus having some language competition on the front-end will be a welcome change.

march 2020 33

VOICES Big question INDUSTRY INSIGHT

HOW DO YOU EXPECT YOUR JOB WILL CHANGE BY 2030? Our panel imagines what the web design and development world will look like a decade from now BEN M AGN A L L

Front-end web developer, Indiespring

indiespring.com

K IM MAIDA

Head of developer relations, Auth0

auth0.com

With the rise in virtual reality and augmented reality, I imagine that by 2030 websites and browsers will have begun to adopt the technology for our daily internet usage. This means I’d then be creating 3D representations of websites for people to surf. This could have loads of practical uses, such as in retail with customers being able to see the clothes they are shopping for on models of themselves. This technology isn’t quite there yet but I think could be in the next couple of years.

ALLI AS T EL L

Founder, Manage My Website

www.managemywebsite.com

A decade is a long time in web design. I started specialising in Squarespace 10 years ago when WordPress was king, so it was a struggle to persuade clients to go down this unknown route. Now Squarespace has millions of customers. Facebook is now for the ‘oldies’, when 10 years ago we youngsters were trying it out for the very the first time. What’s next and will my ageing brain be able to cope? Who knows but I’m excited to find out. 34

march 2020

Developer relations – or ‘DevRel’ – is a new-ish function for forging connections between companies and the developer community. [A DevRel team interacts with the community at live events and online to build trust in a company or product.] By 2030, I would expect to see more specialisation. If you want to build products devs want, you need experts in strategy, technical skills, marketing and product engineering advocacy. We’ll also see demand for previous DevRel experience and strong links between developer advocacy, product and engineering to drive business outcomes and relationships with the dev community and influencers.

SAM BASU

EMM A WOOD

www.progress.com

www.me-and-dave.com

Senior developer advocate, Progress

Account director, me&dave

A web developer of today time travels to 2030. Browsers have become VMs. Web apps have native API access on devices. HTTP/5 makes communications real time. WebAssembly is everywhere. Desktop and mobile apps run seamlessly on the web. Web apps can be coded in any programming language. AR/VR is a firstclass citizen on web. But the transported dev finds some things unchanged. There are 20 major SPA frameworks. Design and accessibility are challenging. Performance tuning still painful. Offline is a utopia. ZOE GUIR AUDON

Senior designer, Foolproof www.foolproof.co.uk

Designers of today will have to differentiate themselves by being business literate. This will allow them to tackle bigger strategic problems. We need to move towards business design. This is what the corporate world desperately needs to shift gear to better serve their customers. My personal wish is for my job to evolve, making me a trusted ally in creating tomorrow’s organisations’ evolutionary purpose. Dieter Rams stated that “Good design is sustainable” – between the 1960s and now we’ve lost our way. I hope that ‘good’ design will become the norm because, right now, we and our planet need it more than ever.

We work in the property world, which is changing quickly as sectors like build-to-rent gain traction, and the role of our designers is evolving accordingly. As proptech works hard to catch up with the highly personalised services that we’re seeing in, for example, food delivery and banking, we’ll see more design with consumer experience at its core. Proptech is starting to respond with brands such as Homeviews (like TripAdvisor for private renting) but, as an industry, we haven’t exactly had our ‘Monzo moment’ yet. It’s fast approaching though: we’re going to see radical change over the next 10 years.

M AYA SH AVIN

Senior front-end developer, Cloudinary cloudinary.com

Over the next 10 years, web development will focus on optimising the user experience, improving speed and standardising across different browsers. High visual web accessibility will become the norm by 2030. As a front-end developer, making ‘accessibility more accessible’ for developers will continue to be an important part of my job. However, by 2030, the advanced development tools will let me concentrate on delivering features developers love and spend less time on administrative tasks.

RESOURCES STATE OF DEVREL

dev.to/matthewrevell/state-of-devrel-2019-khe More and more companies have teams dedicated to ensuring developer-targeted products have a healthy community. The developer relations consultancy Hoopy has produced a report into developer relations and here Matthew Revell looks at the highlights.

WEBVR

webvr.info WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter the device. This website contains a bunch of developer resources to help you get on board.

AI IS HAVING A BIG IMPACT ON WEB DESIGN AND IT’S ONLY THE BEGINNING

https://netm.ag/2mysRAx There’s a lot of hype about AI and it seems to mean different things to different people. This article for Hackernoon by Andrej .RYDÎHYLÈVHSDUDWHVWKHIDFWIURPWKHILFWLRQ

march 2020 35

NEVER MISS AN ISSUE!

#327 JAN 2020

Get to grips with the evolving accessibility landscape, understand aria-labels and unit test your React apps

SAVE UP TO #328 FEB 2020

Incredible dev tools to use in 2020, learn how React, Angular and Vue.js are set to evolve and build a time-based UI animation

% 77

ON YOUR ANNUAL BUNDLE SEE PAGE 16

GOT AN APPLE DEVICE? Download net’s digital edition for your iPad, iPhone or iPod touch

NETM.AG/NET-IPAD (UK), NETM.AG/NET-IPAD-US (US)

#322 SUMMER 2019

Get expert advice on increasing your income, spend more time on profitable tasks and build custom Gutenberg themes

CATCH UP ON ANY ISSUES YOU’VE MISSED BY DOWNLOADING OUR DIGITAL EDITIONS NETM.AG/NET-BACKISSUES

#326 DEC 2019

#325 NOV 2019

#324 OCT 2019

#323 SEP 2019

#321 AUG 2019

#320 JUL 2019

#319 JUN 2019

#318 MAY 2019

Discover graphic JS libraries and create polished data viz and animations, learn the best Google tools and add top WebGL physics

Discover the 10 best CSS frameworks, pick up secret skills for improving UX and create a neural net to predict user answers

Unify your UX across multiple platforms, discover whether PWAs or native apps are best and add physics to three.js sites

Create dynamic data-driven animations using p5.js, pick up new skills producing CSS art and build static sites using Jekyll

Become a hybrid by learning both design and development skills, grow your sideline and land your dream job

Take advantage of 19 innovative APIs, use colour theory to improve your user journey and strip distractions from your designs

Bring 3D to your sites using three.js, offer screen sharing with WebRTC and JavaScript and make empathy part of your UX design

Become more flexible by using variable fonts, combine AMP and PWAs to create friction-free sites and improve the UI of your forms

PREFER TO READ ON ANDROID, PC OR MAC? net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more

NETM.AG/NET-GOOGLEPLAY

NETM.AG/NET-ZINIO

GALLERY Inspirational sites MARK BILLEN

Billen is a freelance writer who has been writing about web design and technology for over 15 years.

Sensational design and superb development

w: markbillen.com t: @Mark_Billen

VUE, CORE-JS, CSS

FONTSMITH VARIABLE FONTS https://www.variable-fonts.com

If typography giant Monotype is to be believed, variable fonts are set to be very influential. Referring to its ‘trend report’ for 2020, it asserted that designers would continue to demand greater versatility to achieve textual harmony. Variable fonts enable this by including multiple typeface variations within a single file, manipulated by code and CSS. This interactive microsite from foundry Fontsmith makes its own case with a beautiful showcase of nine diverse families. Created by London agency Taylor / Thomas, the focus is on presenting their inherent virtues. “We needed to demonstrate in the browser the parameters that can be changed to affect attributes,” explains T / T founding partner Craig Thomas. “The site also provides background to the new font format.”

38

march 2020

What we get is a responsive little catalogue and type tester for previewing the collection, with download links for obtaining trial versions. Bright colourful backgrounds add a sense of fun and display contrast, while the UI elements deserve particular praise. The floating control and slider menus morph intelligently as you scroll between each font, delivering polished app-like usability.

Inspirational sites

SI T E OF T HE MON T H

TENSORFLOW, JAVASCRIPT, OPENGL

RUNWAY PALETTE

https://artsexperiments.withgoogle.com/runwaypalette One of the most exciting advances in back-end web tech is artificial intelligence and, particularly, applied machine learning. In fact Allied Market Research published a report claiming the global AI industry could be worth over $53bn by 2026, citing an increasing need for smart applications. Google is, of course, a pivotal innovator in this field and has released a number of experimental apps that demonstrate beautifully how this work might be applied. Partnering with The Business of Fashion (BoF), its Arts and Culture lab has produced this jaw-dropping visualisation that leverages the Google Brain team’s machine learning platform TensorFlow. By analysing 140,000 runway photographs from 4,000 international fashion shows from the last four years, the colour information was extracted. Machine learning was then used to organise them into an interactive palette that users can click through to explore. Switchable between flat and 3D modes, rendered in stunning OpenGL, the visualisation also shows how the technology can be pushed further. On any device you can snap or upload a photograph, its colour palette will be extracted and sent to Google, which will return runway collections matching that look. Asserting that no data is stored, except locally, Runway Palette offers another proof of concept of how machine learning could influence the mainstream.

march 2020 39

GALLERY Inspirational sites

WORDPRESS, JQUERY, THREE.JS

TRAVELSHIFT https://travelshift.com

If the sad demise of Thomas Cook highlighted anything, it was that the ecommerce age has revolutionised the holiday market. And this digital progression has given rise to more savvy, boutique marketing platforms like Travelshift. This glossy brochure site effectively demonstrates their vendor portal for selling travel experiences online to busy but discerning customers. Designed by Parisian purveyors Immersive Garden and lavished with plenty of awards, the site emphasises how users can book a memorable journey in no time. WebGL is imaginatively employed to create an awesome warping effect on the opening screen. Prompted to click and hold by a custom pointer, visitors are met by a burst of breathtaking location shots. The optical illusion is like a picturesque wormhole and halts seamlessly on release so you can select each new ‘memory’ or journey to navigate more thoroughly. Transitioning into an elasticated horizontal timeline, the thread can be pulled to view photographs, maps and daily trip itineraries. This all contributes to Travelshift’s emphasis on presenting holiday products as tour journals, digital scrapbooks or trendy travel vlogs, all presented via a smorgasbord of UI animations and parallax tricks.

40

march 2020

Inspirational sites JQUERY, FITVIDSJS, TYPEKIT

ALEX PIERCE http://thegeekdesigner.com

Alex Pierce is a Dallas-based designer and art director who likes

motif right from the off, alongside the use of bright colours and Typekit’s Lo

‘making stuff on the internet’ for some pretty high-profile clients, netting an

Res font. His disembodied head bounces around the viewport, winking at each

enviable array of awards in the process.

collision, while his biography fizzles

This new portfolio site really oozes personality and joyousness for what he

with flickering imagery appearing under the oversized mouse pointer.

does, with a ‘geek’ emphasis laden with retro references to movies, video games

All these playful jQuery-powered ideas continue throughout beautifully

and comic books. Pierce is clearly a Back to the Future

illustrated project case studies, rich with interface grabs and charming videos

fan; the opening pre-loader mimics the film’s logo before a pixel art caricature

embedded with the FitVids.JS plugin. It all comes together to form a memorable

of him zooms in on his hoverboard.

digital resume full of not only skill but a

Rollover effects and scrolling text are a

sense of humour too.

march 2020 41

GALLERY Inspirational sites THREE.JS, GLSL, CSS3

WW – UNLOCK YOU https://w-wired.com/ww/pc

If machine learning is finding a way into online fashion marketing, then WebGL is proving just as pivotal. Using 3D animation can develop more dynamic, energetic and cinematic campaigns and this URL is just one beautifully shiny example. Promoting a designer watch collection from Seiko’s WW Wired range, Unlock You is deeply rooted in urban Japanese culture. Produced by Tokyo agency Cherry Inc, it personifies the brand’s street style by introducing ‘WW Man’ and his attitude to life. Part Jeff Koons’ rabbit and part the DJ Deadmau5, the bunny-eared character wheels charmingly into view on rollerskates to wave and then dash headlong at the viewer. As you scroll, we see section text float around his movements and various trick animations triggered to flip the camera to reveal videos and more. The model animation is wonderful in these little sequences and is modelled on skater Ren Fujiwara. An abstract backdrop and track whizzing through the viewport adds an extra sense of propulsion here as you explore, keeping links into main content areas up front. Split over six key sections, visitors can delve into campaign trailers, photo galleries and crucially view detailed product profiles before deciding to purchase.

42

march 2020

Inspirational sites

HTML5, CSS3, REACTJS

HERBIE DUAH APP https://www.herbieduah.app

Designer, developer and photographer Herbie Duah has a vision. Born and raised in Ghana but now living in Phoenix, Arizona, he believes we will all have our own app. Not content to wait around until someone else builds his, Duah has crafted his portfolio in that style. Herbie Duah App, currently in version 1.5, begins as a minimal experience with an abundance of white space. Favouring a zigzag layout with subtle fade-in CSS animations, the structure is understated. An initial summary introduction page interweaves nuggets of text with Duah’s own photography before a neat tab-based menu offers deeper access to work, photos and his impressive resume. The site really comes into its own, however, when we explore the Customize section and the app-like options for changing viewing preferences. Duah has cleverly invited visitors to adjust general settings for slider UI, accessibility mode, video controls and even technical or non-technical language. Similarly you can pick background colours, gradients and patterns, a choice between ‘smooth’ or ‘crazy’ CSS animations and even some preset themes. Many of the choices are remembered by the app for subsequent visits and the feature overall does a charming job of illustrating Duah’s philosophy.

march 2020 43

The very best creative tutorials and features for all your Apple Devices

NEW ISSUE ON SALE NOW! Available from

www.myfavouritemagazines.co.uk/icr

Design challenge

Sublime design & creative advice

THIS MONTH FEATURING...

DESIGN EXHIBIT SHOW OFF YOUR WORK IN NET!

PROFILE

46

HOW WE BUILT

52

The award-winning global studio Stink Studios discusses advertising’s ‘original sin’, new cloud tools and the future of WebAR

Our feature format – the Design Exhibit – offers you the chance to show off your concept sites, portfolio projects and prototypes. This is a great opportunity to reveal your design skills without necessarily needing to have had them developed into live commercial sites. If you’re interested in being featured, please tweet us @netmag or email us at [email protected]

Red Collar explains how its in-house project Save Whales draws attention to marine conservation in dramatic and immersive fashion

march 2020 45

SHOWCASE

SurĽoh

PROFILE

STINK STUDIOS www.stinkstudios.com

The award-winning global studio discusses advertising’s ‘original sin’, new cloud tools and the future of WebAR Founded in 2009 as Stinkdigital, Stink Studios is a brand experience and digital innovation company, working across advertising, content production, web design, creative technology and digital marketing. With offices in London, New York, Los Angeles, Paris, Shanghai, Berlin and Sao Paulo, it’s known for its award-winning work for global brands including Google, Spotify, Twitter, Ray-Ban and Nike. We spoke to executive technical director Matt Greenhalgh, production director Hannah Lynd and design director Adam Evans-Pringle to learn about the history of Stink Studios, their favourite tools, their latest work and their views on the rapidly evolving world of AR. What’s the story behind Stink Studios? HL: Stink Studios was founded 10 years ago to change the way people interact with brands online. We started in digital production, where we were often tasked with taking others’ ideas and trying to make them work in the real world. Although we had some great collaborations, we took too many briefs for digital ideas that were literally not possible to make. This led us to a belief that guides our work for brands today: digital creativity and execution were never meant to be separated. This is advertising’s original sin. At Stink Studios, we close the gap between an idea and its execution. Our team are craftspeople. That’s why we call ourselves a studio rather than an agency.

46

march 2020

SurĽoh

INFO Location: London, Paris, New York, Los Angeles, Shanghai

Established: 2009 Team size: 130 Expertise: Brand campaigns

and digital experiences

Clients: WeTransfer, Google, Casper, Tate, Adidas

Awards: Cannes Lions, D&AD, One Show, FWA

march 2020 47

SHOWCASE

SurĽoh

What kind of tools and technologies do you tend to work with? MG: During UX development we use InVision to produce interactive prototypes and then use Maze to quickly test and validate our design decisions with real users. But we still use a range of other tools, from specific open-source software all the way to Google Docs. Designers use a combination of Sketch, Photoshop and Illustrator with our Motion Design team typically working in Cinema 4D. We use tools like Blender for low-poly and real-time workflows, supported by Substance Designer and Painter for texturing. Development environments vary, from dedicated IDEs like Spark AR and Unity to our fork of Create-React-App that’s used for most web-based UI development work. We’ll also work with React Native and Cordova-based implementations for app development. We generally try to be tool agnostic though and bring the best technology to bear to answer a particular challenge. Versatility is the key. Producers use a variety of tools throughout the lifespan of a project and will often use preferred tools from client to client, like Airtable or Basecamp. Slack is used company-wide for sharing and project communication. Why did you create your real-time cloud rendering platform (RITA), rather than use an existing tool? MG: We were seeing lots of briefs that required real-time cloud-based compositing, mostly for personalising video with first-party data, such as endof-year projects for Spotify and Strava. We started using a third-party solution, but nothing on the market enabled us to achieve the high standards of visual output our clients expect, so we decided to build our own. The technology was a fairly natural extension of our existing back-end and motion graphics capabilities. We also realised we could remove third-party overheads and pass the savings on to clients. Additionally we were able to optimise RITA for performance and provide an interface to After Effects projects, so motion graphics artists could

48

march 2020

An influx of briefs that needed real-time cloud-based compositing – such as this project for Strava – inspired Stink Studios to create its own cloud rendering platform

export project files for direct ingestion by the tool. To date RITA has delivered more than 10 million unique videos. What projects are you most proud of? AEP: We recently launched a new brand and website for PICTURESTART, a media company founded in 2018 by Erik Feig, an executive and producer behind The Twilight Saga, The Hunger Games series, La La Land, The Hurt Locker, stuff like that. The site’s design and navigation takes inspiration from film leaders, TV test patterns and other visual ephemera from the technology of filmmaking, along with the iconic ‘Picture Start’ marker that appears at the beginning of a film reel. It was a relatively small site but they gave us creative freedom and the project has fast become one of our favourites. You’ve also been doing a lot of stuff with AR. How’s that been going? AEP: Yes, we recently launched an exclusive augmented reality experience at Selfridges, London in partnership with high-end footwear brand Auxiliary to celebrate its latest collection. This was a particularly exciting opportunity for us as we felt AR was being typecast as an outlet for gimmicks and face filters and we wanted to explore the platform’s full

potential. We pushed the boundaries of Spark AR, creating something pretty unique that people hadn’t seen before. We are super excited to expand further into other retail experiences and live events in particular. You’ve also been involved in the rollout of AR filters on Instagram. What’s that all about? MG: We created our first Facebook filter for a John Lewis Christmas campaign back in 2017. After the success of that project, Instagram approached us to be a partner for brand and influencer partnerships during the closed beta phase of the Spark AR Instagram programme. The work has been pretty broad – from working with German influencer sensations Lisa & Lena on a sparkly personal filter they’re still using today, to working with Disney to help celebrate Mickey and Minnie Mouse’s 90th anniversary. The projects have been great fun to work on and we’ve learned a lot about making successful filters in the process. We find that the effects people can integrate into their daily lives tend to work best, as they can be reused and shared again and again. You can check out our first Stink Studios filter by following us on Instagram.

SurĽoh

SPOTLIGHT

ADAM EVANS-PRINGLE Design director

Stink Studios recently launched an AR experience at Selfridges in partnership with high-end footwear brand Auxiliary; it pushed the boundaries of Spark AR, creating something people hadn’t seen before

How important do you think AR will be to the web over the next decade? MG: There’s so much potential here. WebAR is a strong player in this space but has yet to establish a clear role relative to other technology stacks. The open development environment and familiar WebGL integration are attractive but the hardware integration standards have been slow to develop. Companies like 8th Wall have seen the opportunity here and developed its own suite of WebAR tools but they come at a price. A challenge for web-based technology is that social media posts that promote campaigns using WebAR usually end up being viewed via in-app browsers. These often prevent access to the device camera, which is obviously a key requirement for an AR experience. This encourages us to consider proprietary alternatives like Spark AR that are designed for social campaign integration. Spark AR and Snapchat have led a resurgence in popularity of AR through face filters thanks in large part to their universal availability. Anyone with Snapchat, Instagram or Facebook installed on their phone can experience AR without the need for a bespoke app download. The effects we see being created are undeniably light-touch

though and probably reflect a trend that will wane in time. Of more interest are the capabilities that can enhance retail experiences and the various versions of shared cloudbased AR solutions. We’ve already pushed Spark AR into new retail territories with our AR installation at Selfridges. But at the moment it’s hard to create AR experiences that interact meaningfully with their surroundings. With the kinds of advances in environmental mesh generation that we see from companies like 6D.AI, all sorts of amazing possibilities open up. You can already try dropping a virtual sofa into your living room but with this kind of technology you’ll be able to bring a copy of your living room with you and try it out around a real sofa. I think the idea of having virtual copies of ourselves and our property that we can inject into virtual and augmented contexts will only continue to grow. You’ve recently been appointed strategic and creative agency for the Tate. What is that going to involve in terms of digital and online? HL: Yes, we’re really proud to be working with such an iconic brand. Ultimately our goal is to get people

What’s on your desktop today?

It’s an aquarium of screenshots and GIPHY downloads. I couldn’t actually tell you what my wallpaper is. My physical desktop is mostly covered in (toy) wrestlers and hot sauce.

What do you have on the walls?

Rothko and Rembrandt prints are in between UX flow diagrams and Gantt charts.

What will you do for lunch? Our studio is near an incredible food market, so mostly that. Unless it’s raining, then a sorry bowl of muesli.

What hours do you work?

As many as I need to. Generally 9:30am – 6:30pm but if we’re pitching then it’s anyone’s guess. We finish at 3pm on Fridays and we encourage everyone to take advantage of that as much as possible.

What else do you do in the office?

I enjoy playing around with the scanner; I’m a big fan of process and ways of achieving a hand-crafted feel within digital design.

How often do you all hang out?

My wife would say too much.

Describe your office culture in three words Fresh and fizzy (we get through A LOT of Perrier)

march 2020 49

SHOWCASE

SurĽoh

TIMELINE

Key dates for Stink Studios JUNE 2009 Opens doors in London (originally as Stinkdigital) and wins the Grand Prix in Cannes for ‘Carousel’, which was a project for Philips.

JANUARY 2011 Opens doors in New York and Paris.

OCTOBER 2014 Launches ‘The Other Side’, an interactive film for Honda that was developed with Wieden+Kennedy. The campaign was the world’s most awarded interactive campaign the following year.

JANUARY 2015

The critically-acclaimed ‘Please Leave’ campaign for WeTransfer explored the company’s role in supporting creativity and encouraging the flow of ideas without distraction

Opens doors in Los Angeles.

SEPTEMBER 2015 Launches ‘Inside Abbey Road’ in partnership with Google and Spotify’s first annual Year in Review.

JANUARY 2016 Inaugurated into the FWA Club 100.

OCTOBER 2016 Featured in the Working Not Working annual list of the top 50 companies that creatives would “kill to work for full-time”.

DECEMBER 2017 Rebrands as Stink Studios and opens doors in Shanghai.

MAY 2019 Launches ‘Please Leave’ campaign for WeTransfer to critical acclaim.

SEPTEMBER 2019 Appointed as strategic and creative partner for the Tate.

excited enough to go and experience the Tate and it’s definitely an interesting challenge to use digital and online platforms to get people to go to a physical space. But the final output won’t just be digital; it’ll be a mix of online and offline to make sure we’re speaking to the right audiences at the right time. What’s exciting you in web design? AEP: Pushing the boundaries of immersive experiences is still the most exciting challenge for us. After the ‘Flash crash’ things got pretty rigid for a while but with 5G on the horizon we’re expecting to see a resurgence of more complex and interesting web-based experiences for brands. We’ve always tried to ensure every aspect of a webbased project is crafted to the highest possible quality. From slick transitions and tight animation through to use of audio (which is still undervalued in our opinion). And Muzli is a dear friend. Are you recruiting or looking for freelancers and, if so, what kind of designers/devs are you looking for?

50

march 2020

HL: We’re always on the lookout for great talent, even if we don’t have an immediate position available. What is so great about Stink Studios is the diversity of the projects we work on. We can have a brief to find a Spark AR developer one day and the next day be looking for an amazing illustrator or animator. We have our little black book of freelancers and are always looking to increase that list. And because of the type of clients and diverse projects we work on, there is always a requirement for new skills and new roles. How do you see Stink Studios evolving throughout the 2020s? HL: We’ve never wanted to be the biggest company. As long as we’re doing our best work for clients that are interested in doing things a little differently, the team is happy and hopefully we’ll keep heading in the right direction. What do most people not know about Stink Studios? HL: People ask where the name came from but we’ll save that for next time!

The number one destination for web design news, views and how-tos EcrApc_rgtc @jmobgpcarrm wmspgl`mvugrf mspuccijw uc`bcqgel lcuqjcrrcp

Graphic design

Art

Web design

3D

www.creativebloq.com

Digital art

SHOWCASE

How we built

HOW WE BUILT

SAVE WHALES Red Collar explains how its in-house project draws attention to marine conservation issues in dramatic and immersive fashion

3

4

1

2

5

CLOSE UP BRIEF Save Whales is an inside project created by the Red Collar team to publicise their concerns about the state of the environment. Following several serious news pieces on the issue during the summer of 2019, Red Collar decided to try and do something and spent 14 days creating a website that would serve as a digital statement of the team’s viewpoint.

52

march 2020

(1) The homepage features a slider, along with transitions imitating a huge ocean wave. (2) Arrows below the cursor help to alert visitors that there are several photographs: slides can be dragged or changed simply by clicking on the edge of the screen. (3) Navigation is straightforward – to go to the page of a specific whale or find the advice list, visitors can use the drop-down menu, where all the sections of the site are listed in one place. (4) By browsing through the slider,

users are always kept informed about how much there is they haven’t seen yet: visitors can clearly see the total number of slides as well as which one is currently active. (5) For the main page we’ve picked the most ‘live’ photos, where whales are in movement in their natural habitat. It was extremely important that the images worked together well tonally; this helps to ensure the slide changes are seamless and that the wave effect looks natural.

How we built DENIS LOMOV

almost 100 beluga whales and orcas. The publicity prompted Red Collar to build save-whales.com, a website that draws attention to marine conservation in a spectacular and entertaining way, using fun effects and 3D animation. We caught up with co-founder and creative

Lomov is co-founder and creative director of Red Collar. He guided the creation of the site from the idea to the release. w: redcollar.digital

director Denis Lomov to find out how the team went about it. What was the initial brief for the creation of this site? The idea of the project was born during a discussion at Red Collar. It often happens

Right now, there’s no shortage of

that someone will suggest an idea for a site, event, merchandise or similar.

people expressing their concerns about the environment. But is there

We advocate for environmental protection and keep up with the news.

anything that web designers and web

At the time there was this scandal in the

developers can do? New York digital agency Red Collar believes the answer

news about a ‘whale jail’ in the Russian Far East. We wanted to speak up about

to that question is yes and took 14 days out to put their talents to good use. Despite including the world’s largest mammals (blue whales), whales are hidden below the surface and their plight is often ignored. In the summer of 2019, however, a succession of news stories hit the headlines about a Russian ‘whale jail’, where companies that supply marine mammals to aquariums illegally caught and held

the conditions these creatures were kept in and publicly share information and advice on how we all could do something to help the whales. Once we finalised the idea, we decided to complete the project within 14 days. This was a challenge for everybody but the guys did it to the day. The periscope effect that lets you change the perspective on the

TIMELINE

Key dates in the Save Whales project 14 JUNE 2019 The idea of the project is borne out of a discussion. A brainstorm session helps to focus Red Collar’s mind on what the website will look like.

17 JUNE 2019 Red Collar’s designer shares sketches of the website layout. Once the concept is agreed, it starts working on design in more detail and proceeds to the development stage.

21 JUNE 2019 Its 3D designer finishes working on the whale models and then passes them over to the front-end developers for further integration.

24 JUNE 2019 Red Collar improves the homepage slider and gets the website ready on a test server.

25 JUNE 2019 Gathers the contents, discusses everything and puts together the advice for the ‘How Can I Help?’ page.

26 JUNE 2019 Finalises the photographs and text for the site.

28 JUNE 2019 After final testing and tweaks, it releases the website.

17 JULY 2019 Save Whales wins its first international award, being chosen as Website of the Day by CSS Design Awards.

26 JULY 2019 Wins another prestigious award: Mobile Site of the Week by Awwwards.

Above The site includes images of whales to help grab the visitor’s attention. Using image formats such as WebP meant that image sizes were kept low with no loss of quality

march 2020 53

SHOWCASE

How we built

1 2

3

EVOLUTION (1) At Red Collar, project ideas are born out of discussion. The general direction can be suggested by anybody, then the project team elaborates on the details and gets down to business. (2) The first step in the website development is creation of sketches. In this case, the designer takes some random content and maps the composition of every page of the website. (3) Once we decide we need to feature living, breathing whales, we get the 3D designer involved as well. She studies tons of pictures and creates accurate, detailed models. (4) The models are integrated into the website: the front-end developer makes them float and react to the cursor movements. (5) We adjust all the animations and effects and test once more – amazing. Ready for launch!

4

54

march 2020

5

How we built

homepage is amazing! How did you come up with that idea and how difficult was it to implement? One of the main rules for this project was to ensure we made use of the insights and practices that different team members already had, in order to aid coordination between the specialists within the tight timeline. One of the developers had a slider that resembled a wave (or, as many people perceive it, a periscope). So we decided to work with that to create a sense of huge ocean waves: a phenomenon that draws in and mixes together everything that stands in its way. One of biggest challenges was to make the scrolling of these images seamless. To achieve this, we used the displacement map effect: the edges of the pictures are blurred and they flow along with the slides. What technologies did you use to build the site and what were the biggest technical challenges overall? One of the main tasks when you are working on any website is to optimise it

Above Transition from the homepage to a whale’s page is a wave, which was hand-drawn by one of Red Collar’s designers

to the fullest so that it runs really fast on any device. To help achieve this aim, we used modern image formats such as WebP: this meant that the images would get compressed without suffering any loss in quality.

There’s also background loading of media resources and transitions between pages. To ease the browser load, we transferred the animations to HTML5 Canvas: volatile SVG animations are heavy to render.

march 2020 55

SHOWCASE

How we built

Another technically complex task was to create 3D whale models. To do this, the designer studied many pictures and turned all that knowledge into a detailed model of every one of the five species featured and then the developer wrapped it all into WebGL. Did you have to overcome any challenges when it came to getting the site to work well on mobile? Mobile-first is one of our top priorities today: people have access to the mobile internet almost everywhere in the world, so we aim to give users full-quality UX on any device. On Save Whales, all the details were adapted for mobile, above all the slider and 3D whale models. We

Above On the pages of each whale there is a 3D whale model that swims onto the screen, wallows and tilts along with the mouse movements which allows you to see them in detail

didn’t face any difficulties here: this is standard procedure for a developer. What was your approach to typography? One of our first ideas regarding the design was to highlight the conflict of natural and artificial in various details of the site. The designer used cool fonts that had been reserved for better days: the strict Archivo and the more ‘natural’ Tenor Sans. Did you learn anything from this project that you’re likely to use on future site builds? The main takeaway that the team gained from working on this project is that we are now able, without loss of quality, to develop a cool and fully functional website within 14 days. Yes, when working on a commercial project, there are extra time-consuming elements involving co-ordination with clients, making adjustments and getting approvals. But, in terms of pure development time, this was a project in which we achieved a lot in a short amount of time. Ultimately, do you believe this project has had an influence on the environmental debate? Any influence it may have had is a hard thing to track and measure but we’ve been pleased with the feedback we’ve got from this site and the discussion it has generated. The aim of the site was deeper

56

march 2020

Above After users read the article, the whale ‘exhales’ several bubbles of air onto the screen; they contain interesting facts about every species and a call to share this in social media

than just helping whales. The broader message we wanted to get out was how our everyday behaviour influences even such distant creatures as whales. We’ve spoken out about how plastic gets to their stomachs and leads to their starvation and death; how waste kills other marine creatures and changes the whale habitat. Changing our personal habits is a big part of the solution to this problem and the site gives specific advice on what people can do. Our appeal was seen by tens of thousands of people and helped

educate them about the ecological situation. Moreover, the website gained credence among experts in the digital sphere: it won Site of the Day and Mobile of the Week by Awwwards and got listed as an inspirational source – this was one route to widening its reach. We hope that those who have visited this website have taken a moment to think about the issue and used some of the advice we’ve given, as well as sharing it with friends. This is a small step for each one of us but a huge help to the planet and the state it is in.

GET NET FROM £2.10 PER ISSUE!

SAVE UP TO

70

%

Wklv#rļhu#lv#RQO\#dydlodeoh#yld#rxu#rqolqh#vkrs#

www.myfavouritemagazines.co.uk/digital Available on

iOS or

Android march 2020 57

FEATURES The ultimate UI design guide

58

march 2020

The ultimate UI design guide

Daniel Schwarz delves into the world of UI design to bring you top techniques and the latest tools for creating great interfaces I design is such an archaic term. What actually goes into the design of a user interface? Aesthetics? Usability? Accessibility? All of them? How do all of these factors unite to enable an optimal user experience and which should come first? Accessibility should always come first, laying the foundations for optimal usability. And then, when a UI is both accessible and usable, it should already look rather decent in terms of aesthetics. Let’s take a closer look at the foundational elements of most designs and what can be done to ensure visual consistency.

AU T HO R DANIEL SCHWARZ Schwarz is a UX and UI designer, web developer and maker by background. He now creates content for brands like InVision, UXPin and Adobe. w: https://uxtricks.design t: @mrdanielschwarz

march 2020 59

FEATURES The ultimate UI design guide

choose your typography Paragraph spacings, letter spacings, font sizes and line heights should enhance readability and communicate the visual hierarchy of different snippets of UX content Great

isn’t the challenge. The challenge is

typography (like

maintaining consistency throughout

many aspects of design)

the entire design. Consistency establishes clear

boils down to accessibility. Visual design certainly adds to the user’s overall experience but at the end of the day, users are interacting with the UI, not viewing it as art. Legible letters result in clarity and readable words are what help users digest content efficiently. Both are more important than any visual aesthetic. However, well-designed typography can still be aesthetically satisfying. Black-on-white Helvetica (or a similar font) can be a thing of beauty after only a few simple typographic enhancements. By enhancements, what I mean is tweaking the font size, line height, letter spacing and so on – not the font or the colour of the text. ‘Beautiful’ typography is actually ugly when it’s unreadable because frustration always trumps aesthetics. Great design is balanced and harmonious. Like many aspects of UI design, fine-tuning visuals to balance accessibility and aesthetics

hierarchy between elements of varying importance, which in turns helps users understand a UI faster and even digest content more efficiently.

Font size

When it comes to legibility and readability, the minimum acceptable font size as defined by the WCAG 2.0 Web Content Accessibility Guidelines is 18pt (or 14pt bold). The best font size to use largely depends on the font itself but it’s important to be mindful of visual hierarchy and how this base size distinguishes itself from summaries and headings (ie

,

,

). With your UI design tool of choice (I’ll be using InVision Studio), create a

series of text layers (T) and then adjust all of the sizes to correlate with the following template: O

: 44px O

: 33px O

: 22px O

: 18px With InVision Studio (and all other UI design tools), this is done by adjusting the styles using the Inspector panel on the right-hand side. Next choose your font, but beware because what you might notice with some fonts is that 18px

and 22px

doesn’t look all that different. We have two choices: tweak the font sizes or consider a different font for headings. Go with the latter if you anticipate that your design will be text-heavy. Keep in mind that:

1 2

Visual UI design is often a gutfeeling approach Nothing is decided; everything is subject to change

Line height

Optimal line height ensures that lines of text have enough spacing between

60

march 2020

The ultimate UI design guide

Above Setting appropriate font sizes is vital in creating a visual hierarchy throughout your site

them in order to achieve decent levels of readability. This is becoming more and more recognised as a ‘standard’; Google’s Lighthouse Audit tool even suggests it as a manual check (or even a flag if the text contains links that may be too close together as a result of suboptimal line height). Once again, the WCAG helps us out with this one, declaring that line heights should be 1.5x the font size. So, in your UI design tool under ‘Line’ (or similar), simply multiply the font size by – at least – 1.5. As an example, if the body text is 18px, then the line height would be 27px (18*1.5 – you can also execute the maths operation directly in the Inspector). Again, though, be mindful – if 1.6x feels a better fit, use 1.6x. Remember that different fonts will output different results. It’s too early to think about using real data in our design but, at the very least, we should still use somewhat realistic data (even lorem ipsum). InVision Studio has a native real data app to help us see

“Legible letters result in clarity and readable words are what help users digest content” what our typography might actually look like.

However, we don’t need to worry about this until we begin creating components.

Paragraph spacing

Shared styles

Paragraph spacing isn’t a style that we can declare using InVision Studio’s Inspector. Instead, we’ll need to manually align layers using Smart Guides (ζ). Similar to line height, the magic multiplier is 2x (double the font size). As an example, if the font size is 18px, then there should be at least a 36px space before leading into the next text block. Letter spacing should be at least 0.12.

If your UI design tool supports it (InVision Studio doesn’t yet), consider turning these typographic styles into ‘Shared Styles’ to make them rapidly reusable while ensuring visual consistency. This is usually accomplished via the Inspector.

march 2020 61

FEATURES The ultimate UI design guide

pick the right palette

Selecting the perfect colours for your design goes way beyond aesthetics: it can inform the entire hierarchy of your site

W

Set up your palette

hen it comes to UI design, colour is habitually one of the first things that we

With your UI design tool of choice, create one fairly large artboard (tap A)

enjoy dabbling with but we’re taught

for each colour (named ‘Brand’, ‘Neutral

that diving straight into visual design is a bad thing. This is certainly true,

/ Light’ and ‘Neutral / Dark’). Then, in each artboard, create additional smaller

however when it comes to visual consistency, colour should be a top

rectangles displaying the darker and lighter variations of the colour and also

concern because it plays other roles. Colour in UI design can be mighty

Above Color Safe’s recommendations can help you select colour combinations that have sufficient contrast

the other colours themselves. I would consider slightly lighter and

effective but since some users (many, actually) suffer from various types

darker as 10% extra white and 10% extra black respectively. When you’re

of visual disabilities, it’s not always

done, display a copy of the typographic

reliable. That being said, it’s not necessarily about the specific colour

styles on each artboard. The colour of these text layers should be neutral light,

that’s being used, but rather the type of colour. This may not be true when it comes to branding since colour is used for emotional impact in this regard but, in UI design, colour is also used for communicating intent, meaning and, of course, visual hierarchy.

except on the neutral light artboard where they should be neutral dark.

The three types of colour

Colours hold meaning, so it’s important to not have too many of them. Too many meanings results in more things that the user has to understand and remember – not to mention more colour combinations for us to worry about. Generally speaking, this would be the recommended format: O A call-to-action colour (also the main brand colour)

Contrast Above Creating artboards displaying your chosen colour

palette means that they’re to hand whenever you need them

O A neutral light colour (ideal for textheavy content) O A neutral dark colour (better for UI elements or dark mode) O For all of the above, a slightly lighter and darker variation This enables the following: O Dark mode will be easily achievable O Our CTA colour will never conflict with other colours O In any scenario we’ll be able to emphasise and de-emphasise

Top tools and resources Stark

https://getstark.co The Stark plugin is compatible with Sketch and Adobe XD and helps you check colour contrast and simulate colour blindness directly from the canvas. Support for Figma and InVision Studio coming very soon.

62

march 2020

Colors

http://clrs.cc/a11y Colors is a set of 90 colour combinations that have the appropriate amount of colour contrast in order to satisfy the WCAG 2.0 Guidelines – some of them even manage to meet the AAA standard.

A11y Project

Next we’ll need to check our colours for optimal colour contrast. There are a variety of tools that can do this, for example the Stark plugin (https://getstark. co) for Sketch and Adobe XD or Contrast for macOS (https://usecontrast.com) – however, an online solution such as Contrast Checker (https://contrastchecker. com) or Colour Contrast Checker (https:// webaim.org/resources/contrastchecker) will do just fine. Check the colour contrast for each combination and tweak the colours accordingly. If you’re not sure what colours to use, try using Color Safe’s (http://colorsafe.co) recommendations.

https://a11yproject.com The A11y Project is a massive hub for all things accessibility related. It includes resources, tools, tips, tutorials and is created by the maker of the Stark plugin and receives funding from InVision.

WCAG 2.1 Checklist

https://uxtricks.design/blogs/ ux-design/accessibilitystandards This checklist works through the dos and don’ts of designing for accessibility, broken down by disability type. It also runs through colour contrast.

The ultimate UI design guide

Style links and buttons

Most decisions we make about our design lead the user towards a link or button. This is only effective if the tap target looks clickable and communicates visual hierarchy

Size

B

uttons and links, much like typography, should have a few variations. After all, not all actions are of an equal level of importance and, as we discussed earlier, colour is an unreliable method of communication, so it cannot be the main method of influencing visual hierarchy. We also need to toy with size. Generally, I would recommend that button text be declared as 18px (same as the body text) but that the buttons themselves have three variations in size: Normal: 44px in height (rounded corners: 5px) Large: 54px in height (rounded corners: 10px) Extra large: 64px in height (rounded corners: 15px) This enables us to make certain buttons appear to be more important without reliance on colour and also to nest buttons (for example, use a button inside a minimal-looking form field).

Depth

Regardless of whether the tap target is a button or a form field, shadows should

Above Increasing button size allows you to make certain buttons appear to be more important without reliance on colour

be used to increase depth and therefore suggest interactivity. A single shadow style for all variants of buttons and form fields is fine.

Interactivity

Each button type needs a variation to indicate its hover state. This clarifies to the user that what they’ve attempted to do is totally fine and ensures that they carry on without delay. This is actually one of the more complex aspects of maintaining visual

What is visual affordance testing? A visual affordance test is a usability test used to determine if tap targets appear to be clickable. My favourite way to do this, being an InVision Studio user, is to sync the design from Studio to Freehand (δίF), send the resulting URL to testers and have them circle the elements they believe to be clickable. Non-InVision Studio users can use Freehand too but InVision Studio users can launch their designs into Freehand seamlessly from InVision Studio, which is why I think it’s the fastest and most efficient way of acquiring visual feedback from users.

consistency because colour is often the favoured style to change when it comes to creating a state. Thankfully, these state changes can be relatively subtle, so it’s fine to change the colour into its slightly lighter or darker variation – that’s what they’re for. This applies to links as well. Deciding against this will cause us to use a colour that either already has significant meaning, resulting in users becoming confused, or else deciding to come up with another colour. Deciding to use a secondary colour is totally fine but it should be saved for marketing visuals rather than UI elements. Less is more (and easier). Remember to repeat this step for every artboard. Don’t include the branded CTA buttons on the brand artboard – later on we’ll cover what happens when certain combinations don’t work.

“Shadows should be used to increase depth and therefore suggest interactivity” march 2020 63

FEATURES The ultimate UI design guide

create your components

Converting design elements into components means we can reuse them multiple times, helping speed up the workflow and maintain consistency

Creating components

C

workflow may differ depending on your

specifically, a heading + text + button

omponents are a huge time saver and all UI design tools offer this

UI tool. This method of creating style guides

combination. Notice how I’ve created a neutral light ‘card’ backdrop to enable

feature (eg in Sketch, they’re

(and eventually creating the design

the use of the branded button. Similarly,

called Symbols). In Studio we can create components by selecting all of the layers

itself) works especially well with modular/card-based layouts, although

the neutral light form field (form fields are usually white because of the mental

that should make up the component and using the δK shortcut.

‘common areas’ such as headers, footers and navigations are also excellent candidates for a component. Just as we’ve done with our typographic styles, colours and buttons, we must remember to organise our components carefully.

model historically synonymous with paper forms) doesn’t look amazing on the neutral light background so they can only be used on the neutral dark background – either directly or within a neutral dark component. This is how we make our design flexible while obeying our rules and maintaining consistency.

Using components

Now we can reuse this component by dragging it onto the canvas from Libraries > Document on the left-hand side, although bear in mind that this

Utilising wireframes Wireframes are very useful, not only for designing high-usability UIs but also for finding out what our UI will require in the long run. It’s sort of like future-proofing. Now, this doesn’t mean that we need to design loads of components or be ready for any possible scenario but it does mean that we need to employ a ‘What if?’ attitude. For example, if our wireframe calls for a 3x1 component but we know that the content isn’t set in stone, a little contemplation might lead us to wonder: ‘What if this components ends up being 4x1?’. The rule-of-thumb is: design only for the user needs that already exist but try to make solutions relatively flexible. Otherwise, we’ll wind up with some very messy ‘design debt’ later down the line.

Utilising our rules

Earlier on I made a small remark about not using branded CTA buttons on top of the brand colour, since branded CTA buttons obviously need to stand out amongst everything else. So how do we go about creating a branded component while still being able to use a branded CTA button? After all, if we’re using neutral dark buttons for, let’s say, navigational buttons or simply lessimportant buttons, that just wouldn’t be an option, right? Right. So this would be an ideal opportunity to create a component –

Above Creating a neutral light ‘card’ backdrop enables you to use a branded button on a branded component

64

march 2020

Stress testing

Ideally, the quickest and most effective way of ensuring robustness in our design is to stress test it. Putting a design to the test means being cruel. Let’s say that we have a navigation with X amount of nav items because that was the requirement; in order to really ensure flexibility, try changing these requirements by adding more nav items or, to really throw a spanner in the works, try also adding a nav item with a higher visual hierarchy than the others. Do our size, typography and colour rules allow for something like this? Or in order to offer optimal usability do we need another rule? Bear in mind that there’s a difference between adding rules and bending the rules. More edge cases means less consistency, so most of the time it’s better for the sake of usability to simply rethink the component.

The ultimate UI design guide

Document + collaborate

How do we make our design files easier to use for both ourselves and any other designers that might use our design file? Let’s take a look

Colours

T

Recycle everything

he first step is to save all of the colours to the ‘Document Colors’

swatch if we haven’t done so already – this will make them easier to access when we need to apply them in our design. To do this, open the colour chooser widget from the Inspector, choose ‘Document Colors’ from the dropdown and then click the + icon to

Above InVision Studio makes creating a shareable and updatable component library a breeze

add the colour to the swatch. This works the same way in most UI tools.

ask if you want to update the colours

Shared Libraries

and components. This is how design libraries are maintained across teams.

Next, we need to convert our document – complete with typographic styles, colours, buttons, common areas and basic components – into a shared library. Essentially this means that every element needs to be a component, even if it consists of only one layer. Click the + button in the left-hand side Libraries sidebar and then import this very document into a new document. That’s right: our document is now a library and is ready to be used to design UIs with guaranteed consistency. InVision Studio is somewhat limited in the sense it doesn’t yet sync with InVision’s official Design System Manager tool but it’s easy enough to house the library in Dropbox for other designers to use and update over time. When a change is made (locally or remotely), every Studio file that uses the library (again, locally or remotely) will

Design at scale

As a design expands, managing it becomes harder. There are various adjustments we might want to make to keep it efficient and maintainable, especially since InVision’s DSM doesn’t work with Studio yet. For instance, we might want to use text layers to annotate our library as a means of explaining the use-cases of various elements. For the typographic styles, we could even edit the text to be more descriptive (eg “

/ 1.3 / 44px”). This says that

s should be 44px and have a line height of 1.3.

Design Handoff

Design handoff tools display the various styles used by every element in the design so that developers can build the app or website. These tools include an

When it comes to designing user interfaces that are visually consistent, reuse everything. Design buttons, then use buttons to create button components, then use button components to create other components such as alerts and dialogs. Just don’t create components that aren’t needed. Remember, building a library is an ongoing, collaborative effort. It doesn’t have to be completed all at once, completed by you alone or completed ever. It only has to convey a language.

overview of styles and also a copy of the ‘document colors’ swatch. Developers can even copy these styles as code, which is excellent if you’ve decided to create any written design documentation and you’d like to include code snippet representations of the components. InVision’s design handoff tool is called Inspect and to utilise it all we need to do is click the ‘Publish to InVision’ button/icon in InVision Studio, open the resulting URL and then tap I to switch to Inspect Mode. It’s really convenient.

“Our document is now a library and ready to be used to design uis with guaranteed consistency” march 2020 65

FEATURES Build a perfect design system

AU TH OR NICK BABICH Babich is a UX designer. He runs a blog called UX Planet dedicated to user experience and counts advertising, psychology and cinema among his myriad interests. w: http://babich.biz t: @101babich

66

march 2020

Build a perfect design system

Nick Babich shares key principles that will help you build a perfect design system for your organisation esign systems help large industry players to standardise the design process and make it more predictable. A lot of companies try to take on the initiative of building their own design system. But quite often, despite everyone’s best intentions, all the effort that a product team puts into making a thoughtful design system can go straight down the drain. Over the course of this article, I will define what a design system is, what to consider before building a design system and how best to introduce a design system in your organisation.

march 2020 67

FEATURES Build a perfect design system

The name ‘design system’ can create a false impression of something that provides value only for designers. But in reality a design system isn’t something that just concerns designers; instead it’s about how an entire organisation builds its products. Successful design processes usually depend on there being a tight crossfunctional collaboration between all teams involved in the creation of the product. And a design system is about building a shared language that empowers teams to collaborate more effectively. It’s a complete set of design principles, rules and standards along with the toolkit (design patterns, visual styles and a code library of reusable UI components) required to achieve those principles, rules and standards. A design system enables a product team to create a product faster – without having to sacrifice any quality – by making the design reusable. These are the common elements a design system usually encompasses

The ultimate purpose of going to the trouble of implementing a design system is to help the business learn and grow. That’s why a design system should always be based on the objectives of a business. For the very same reason, not all design systems are built the same but nevertheless, most design systems share a few common elements: O Design principles – values that ensure the design efforts head in the right direction. O Components and pattern libraries – these are the building blocks of a design system. O Design guides – specific rules on how to design a particular part of a product. These can include style guidelines (typography, colours, spacing, etc) and UX writing guidelines (voice and tone, language, writing principles, etc). O Design practices – help to keep the system alive and valuable for the product team.

68

march 2020

Product and company maturity Before you start building a design system, you need a clear understanding of why you need one. Many companies introduce design systems to reduce their technical debt and speed up the product development process (by spending less time on tedious, monotonous activities). But not all companies face such problems because companies have different levels of design maturity.

Creating a design system from scratch is a time-consuming activity and small, fast-moving teams likely don’t need a design system because it would slow them down. A three-to-five–person startup that is still trying to find a product-market fit would probably spend a significant amount of time creating a system. When resources are being spent on building a design system, they aren’t being spent on building the product. Therefore, until a company is in the position of having established a clear direction with its product, investing

Build a perfect design system time in creating a design system risks producing a lot of waste.

Create a vision statement A design system is about people – how they work together to achieve a shared goal. And people want to know the answers to the following questions: O Where are we going? O What do we want to achieve? O Why do we want to achieve that? Those are fundamental questions that you need to answer in order to build a shared vision. A shared vision will be a foundation for a design system that will give teams a guided way to build solutions for their product problems. A vision statement defines what your team, product or company is attempting to achieve and, more importantly, why. It aligns teams around a clear set of shared goals and becomes a North Star for the entire organisation – it unites people involved in product development and guides them to a common destination. If you’re looking for a simple way to create a vision statement, consider describing what your product or organisation should look like in five years. By doing that, you’ll define a target condition and it will be much easier to create a strategy that will help you to achieve it.

A design system is not a static tool but rather a living organism that adapts to the changes in your organisation. Creating a clear governance strategy is essential to making sure your design system can adapt to changes. A process of creating a governance strategy starts by answering some critical questions about how changes are handled, such as:

O Centralised model: in this model, one team is in charge of the system and guides its evolution. O Federated mode: in this model, several people from several teams are in charge of the system.

O Solitary model: in this model, an ‘overlord’ (directly responsible individual or a group of people) rules the design system (overlord’s efforts focused primarily on their own team’s needs).

Each of the models have strengths and weaknesses but the first is the most fragile because it has a built-in risk – when one unit is in charge of so much, that unit can become a bottleneck to the completion of many tasks. As Curtis mentions in his article, overlords don’t scale. Also, the project has a high bus factor (https:// en.wikipedia.org/wiki/Bus_factor). If the overlord goes, the company will have to invest resources in filling the gap. That’s why many teams are moving away from the solitary model to the centralised or federated model – those models are usually better for scaling the design system. It’s also possible to combine models. For instance, the Salesforce team’s model (https://medium.com/ salesforce-ux/the-salesforce-teammodel-for-scaling-a-design-systemd89c2a2d404b) combines the centralised and federated models. Though Salesforce’s Lightning Design System has a core team, there are also contributors who act as a federation of practitioners.

In the solitary model, one team makes a system available

In the centralised model, a central design team produces and supports a system used by others

In the federated model, designers from multiple product teams work on the system together

Salesforce uses a hybrid of two models

O Who is responsible for approving any changes that need to be made to the design system? O How are requests for new components, patterns and styles handled? O Who handles bugs in the design system? In his article, Team Models for Scaling a Design System (https:// medium.com/eightshapes-llc/teammodels-for-scaling-a-design-system2cf9d03be6a0), Nathan Curtis describes the three common models of governance:

Establish guiding design principles How do you define good design? How do you know when something is ready for implementation? When it comes to evaluating the quality of a design, designers often rely on their own set of standards. But following such an approach can introduce a lot of chaos in the product design process because every designer will have their subjective ideas. That’s where design principles can save the day. Solid design principles are the foundation of any functioning system. They should capture the essence of what good design means for the company and provide practical recommendations for product teams on how to achieve

march 2020 69

FEATURES Build a perfect design system it (design principles should always be actionable). Design principles act as standards for the product team and help them to measure their work.

Here are a few things to remember when working on design principles: O Design principles should reflect the nature of the product. For example, when it comes to human-machine interface design for automobiles, the most important design principle should be ‘Safety first’ (the goal is to keep the driver and passengers safe). That’s why every design decision should be measured for safety. O Design principles should not sound like rules. They shouldn’t block creative energy. Product creators should not feel limited or restrained. O Design principles should be the result of an open discussion. In many cases, it’s not hard to make people follow guidelines but rather it’s hard to make people agree on guidelines. If an organisation has many design teams, then involving them in a discussion is vital. By getting their feedback on the design principles, you can adapt the principles to the needs of users.

Review the technology stack and conduct an interface inventory Many companies tend to build a design system on top of the current interface but this approach is not the best for many reasons. Imagine that your company has been building a product for a long time without a system. The product likely has some level of inconsistency in design. Inconsistency is usually caused by the duplication of design elements. Identifying duplication of design elements helps a team to avoid the scenario in which team members build an element from scratch and, after a while, find out that a version of it already exists. That’s why if you plan to introduce a design system, start with an audit – conduct an interface inventory (https://bradfrost.com/blog/post/interfaceinventory/) to understand what’s in use.

70

march 2020

Explore existing interactions, collect all of the UI elements that make up the interface and review them. It’s important to do this before building the actual design system because the procedure will help you to understand two things: O How much design debt your organisation has and what are the areas that require more attention. O The reasons for inconsistency and the changes you need to introduce in the design process in order to avoid such problems in the future. Maybe you will need to change the process or perhaps you will need to introduce new technology.

Establish a core team Who should be involved in building a design system? Design is a team sport and creating a design system is no exception. The expertise and creative energy provided by cross-functional collaboration are required to build a design system. That’s why the core team of people that actually creates a system usually includes engineers, designers, product managers and stakeholders. When you start building a design system, it’s crucial to have a small size for the core team (six to eight people) because it will help you to create momentum and build something quickly.

Consider implementing a design system as a project. And just like any other project, this one should have a solid process with the following steps: O Sell the idea O Complete a pilot project O Design and build O Launch and maintenance

Selling the idea of a design system is the first and most crucial step in introducing a design system. Usually, it’s hard to sell design systems due to the trade-offs – both management and product team members understand that resources spent on building a design system aren’t being spent on shipping features. So it’s natural to expect some pushback. In order to sell a design system, you need to do two things:

Get buy-in from stakeholders A design system won’t take off if the people who decide on funding don’t approve it. It’s much easier to get the buy-in from executives when you show that the system solves real business problems. Identify key business pain points (areas where the company loses money) and show how the design system can save the day. Write a strategy with

Build a perfect design system

It’s impossible to build an effective design system without introducing a few valuable tools in the existing ecosystem. Below are some of the most popular and most promising tools: a clear proposal and pitch it to the key people who make the decisions. It’s recommended you create a presentation (or series of presentations)

Above A perfect moment to work on a pilot project is a time when you almost finished planning but haven’t started building things. Image: Dan Mall (https://netm.ag/2QWVD9D)

to convince stakeholders to invest in this project. You can wrap your presentation in the form of a story. By telling success stories, you will have a better chance of engaging stakeholders.

InVision DSM

https://www.invisionapp.com/design-systemmanager O InVision Design System Manager (DSM) is a platform that helps teams create, maintain and evolve a powerful design system. The DSM platform includes a Sketch tool, a web view and a set of APIs. DSM provides component search, version history management and a semi-automatically generated style guide.

Get support from your users Getting buy-in from stakeholders is only half the battle. You need to get support from your potential users. First, you need to identify your target audience. Who will use your design system and how will they use it? Here are a few common groups of users:

Adobe XD

https://www.adobe.com/products/xd.html O Adobe XD is a vector-based user experience design tool for web apps and mobile apps. The tool supports linked assets, which enable you to easily share and consume not only components but also colours and character styles. This is handy if you or your team members reuse design elements across projects.

O Product teams (ie designers, developers) O Third parties (ie vendors) O Business (ie marketing, sales, legal)

Sketch Libraries

You will need to identify the pain points of different groups of users and show the value that the system will bring to them. Each group of users has different buying triggers – reasons why they would want to use a design system. For example, for developers, the trigger can be more consistency in implementation methods or spending less time refactoring code.

When it comes to building a design system, it’s vital to understand that

https://www.sketch.com/docs/libraries/ O Sketch Libraries is a part of Sketch – a vectorbased design tool focused on user interface design. A library is a Sketch document that contains symbols, text styles and layer styles, which you can then use in any other Sketch document. If you update any of the symbols or styles in your library file, documents containing instances of those symbols will receive a notification that they can be updated.

Storybook Below One of the design principles of Medium is ‘direction over choice’. This principle helps Medium’s design team limit the number of visual styles

https://storybook.js.org O Storybook is an open-source tool for developing UI components in isolation for React, Vue and Angular. It enables you to browse a component library, view the different states of each component, develop and test components.

Abstract

https://www.abstract.com O Abstract brings Git-inspired version control and collaboration to design teams. With this tool, it’s much easier to centralise design decisions, feedback and files.

march 2020 71

FEATURES Build a perfect design system it is a by-product of your product design work. That’s why you need to develop it through the lens of an actual working product. You need to ensure that the

Gov.uk

https://design-system.service.gov.uk Gov.uk is an excellent example of government design. The design system is comprised of styles, components and patterns, all of which are fully WCAG 2.0-compatible.

design system you’re going to build will live in the technologies that your products use. As soon as you create a basic concept for your design system, it’s important to validate it. The best way to validate the concept is to test it on a pilot project. Select a sample real product and create a design system that powers a real solution. The project you select should be used as a foundation for your future design system, so you will be able to test

O Modular: modular components are self-contained – they don’t have any dependencies. O Composable: it’s possible to combine components to create new components. O Customisable: it’s possible to adjust and extend components to make them work in a variety of contexts. Every time team members want to introduce a new component, they need to consider how it will work on the various platforms they are designing for. Ideally, every component they design should work on all platforms.

whether or not the system is working for

Lightning Design System

https://lightningdesignsystem.com The Lightning Design System enables product teams to build rich enterprise experiences and custom applications with the consistent patterns and established best practices that are native to Salesforce.

Material Design by Google

https://material.io/design/ Material Design is a great example of a design system that redefined the industry. It introduced a brand new way to produce your designs.

Polaris by Shopify

https://polaris.shopify.com Polaris design system is a set of comprehensive guidelines and principles that designers can use while building apps and channels for Shopify.

Atlassian Design

https://atlassian.design Atlassian offers end-to-end design language for creating straightforward and beautiful experiences.

72

march 2020

your organisation. Here is a set of criteria you can use to

Show value through a sandbox environment

determine a pilot’s potential efficacy:

It’s well known that the best way for people to see value is to experience it.

O A project should have the potential for

So create a sandbox environment for product team members to prototype products using your design system.

common components and patterns. It should contain components and patterns that can be reused within other products. O It should have good technical feasibility and not be hard to introduce all the required changes. O The project should be accomplishable in a reasonable amount of time (ideally, a couple of weeks) and shouldn’t require the involvement of many people from various departments (maintaining independence is essential). O A project should have marketing potential. The project should inspire other teams to introduce design systems in their design process.

Create reusable components One mistake that I see time and time again is teams create components that are too focused on a single-use case. As a result, the system becomes too inflexible and its users have to create their own components each time they need to cover a particular scenario. Try to develop components that are not tied to a single use case but can be reused in multiple contexts. To be reusable and scalable, components need to have the following properties:

Some product teams believe that once a design system is built, the work is complete. Not true. A design system is a product and it’s vital to manage it as a product instead of a project – a design system requires ongoing maintenance and improvements as needs arise.

Encourage adoption of your design system The same as any other product, a design system needs active users. You can create the best design system in the world but, if you don’t actively promote it in your organisation, the entire effort will suffer greatly. That’s why, from the first release of your system, you need to work hard to foster its adoption: O Create a community of supporters. Put together a group of evangelists, led by authoritative influencers or designers, who will pitch and sell ideas about your design system. The evangelists should participate in activities like workshops and meetups that have a goal of raising awareness that the system exists and educating people on how to use it.

Build a perfect design system

Successful design systems are highly reusable; libraries like Bootstrap show these components in action

easier to track changes. With versioned releases, users can reference a specific version as a dependency. They also have control over when and how upgrades to new versions are handled. There are two types of versioning:

O Introduce updates. The waiting time for updates plays a key role in the adoption of the design system. Practise regular incremental releases, rather than big reveals and always ensure you ship updates with a changelog.

Analyse how people use the design system Design systems rise and fall based on how easy they are to use. If you’ve just started incorporating a design system into your organisation’s design process, conduct a series of interviews with users to understand how people use it. By doing that, you can pinpoint common problems that your target audience may be facing. For systems that will be incorporated in a design process for some time, it’s essential to measure the time required to keep the system up to date. If keeping

the design system updated becomes difficult, it will quickly become outdated.

Test your design decisions No matter how good you are at predicting things, it can be hard to predict how a particular change will affect the user experience. That’s why it’s important to validate your decisions. Here are three types of testing that will help you: O Usability testing. O Visual regression testing, which helps you to catch unintended visual changes to component styles. O Manual and automated accessibility testing, which ensures your components are accessible.

Introduce versioning Design systems should have versions because versioning makes it much

O Versioning the entire system. Here, everything in the system belongs to one version number. As users, we deal with versioning for the whole system when we update our mobile OS – when we update iOS, we’re updating the entire piece of software. O Versioning by modules. This involves having a version number for every component or style within the design system. Compared with versioning the entire system, versioning by module gives more flexibility – users can choose to upgrade just the elements they need.

Creating a design system is not a onetime activity; it’s actually iterative. The people involved in creating a design system need to think of it as a living organism connecting the whole organisation. A successful design system becomes part of an organisation’s DNA and helps produce consistent user experiences.

march 2020 73

SIGN UP TO THE The voice of web design

NEWSLETTER TODAY! GET NEWS, TIPS & INSPIRATION WEEKLY

https://netm.ag/subscribe

SIGN UP

NOW!

Tips, tricks & techniques

THIS MONTH FEATURING...

76

ADD VIDEO TEXTURES TO 3D OBJECTS

82

76

86

DESIGN A PURPOSEFUL HERO HEADER

CREATE AN RGB SPLIT CHANNEL EFFECT

82

92

86

DESIGN APPLE WEARABLE APPS

92

PROJECTS three.js

A B O U T T HE A U T H O R

RICHARD MAT T K A w: richardmattka.com t: @synergyseeker job: Creative director, designer, developer areas of expertise: Shaders, VFX, WebGL

THREE.JS

ADD VIDEO TEXTURES TO 3D OBJECTS

Richard Mattka shows you how to use video as textures for your 3D objects, create 360-degree video and apply d#ydulhw|#ri#hļhfwv

In this article we’ll be looking at how you can add video textures to your 3D scenes. You do this by loading them as a special texture class and applying them to various 3D meshes. The ability to update the texture of each animation frame enables your video to play seamlessly. Using a 3D plane, you can easily create a movie theatre scene, a video playing on a television screen or detailed information panels for a sci-fi 3D interface. You can modify the geometry of a plane to curve it, giving it a unique look like the inside of a helmet, reminiscent of an Iron-Man-style HUD. We’ll do this in the tutorial just ahead! Another great use for video is the ability to prerender animations in tools like Cinema 4D or After Effects and then easily integrate them into your scene. Complex animations could play on various

76

march 2020

planes or spheres, simulating virtually any type of effect you might need. You can layer video on top of another material to create effects that look as though animations are under glass. You could fill an aquarium with fish, have beautiful animated skies or detailed backgrounds. And with the new playsinline option for video elements, this will work on mobile devices too!

WEBGL 3D FOR THE WEB

WebGL is a graphics language designed for the web. It is a subset of OpenGL but optimised for the needs and limitations of the browser. It can create amazing 3D scenes combining models, lighting, geometry, GLSL shaders and interactivity all inside an HTML element. WebGL is also a web-standard. So, whether your goal is mobile or desktop, it will get it done.

three.js Because WebGL can take advantage of the computer’s GPU, you can render complex, detailed models, reflections, environment maps and shadows, all in real time. Websites, games and apps can enable users to direct the action, move the camera or navigate 3D worlds.

THREE.JS 3D FOR THE WEB

To make your workflow efficient, it’s wise to abstract away the low-level WebGL programming. There are several great WebGL libraries out there but one of the best and easiest to use is three.js. It is an open-source 3D library created by Ricardo Cabello, filled with loads of incredible built-in features and lightning-fast performance. It’s perfect for your WebGL projects.

CREATE VIDEO TEXTURES FOR 3D

In this tutorial, we’ll be using three.js. Everything you need is included in the latest version. You might want to grab a few favourite videos in mp4 format and a 360-degree video as well to follow along. A basic understanding of how to use three.js would be great but we’ll walk through the steps, assuming no prior knowledge. Let’s get started!

BEFORE YOU BEGIN: SET UP A WEB SERVER

It’s an idea to run web-based code on a web server, either locally or remotely. If not, you may run into cross domain or origin restrictions loading assets. You can use simple tools like MAMP (https://www.mamp.info/en/) for both Windows and Mac, that install with a few clicks. You can also check out the three.js ‘How To Run Things Locally’ docs here: https://threejs.org/docs/#manual/en/introduction/ How-to-run-things-locally.

STEP 1: CREATE BASIC HTML FILE

To get started, you should create a simple HTML file with some CSS to ensure it fills your screen. Start by adding the following code to a new HTML file: <style> html, body { margin: 0; padding:0; overflow: hidden; } <script>

Top Video plays on this

// code goes here

curved plane in the awardwinning War of 1996 website

Above Three.js is used in award-winning websites and experiences found across the web

STEP 2: ADD THREE.JS LIBRARY AND ORBIT CONTROLS

In the head of your HTML, add the three.js library and the OrbitControls.js file. You can download the latest version of three.js from the repository here: https://github.com/mrdoob/Three.js/. The OrbitControls.js file is located in the examples folder of the same repo. We’ve made a sub folder called ‘libs’ in our project to hold these two files. <script src=”libs/three.min.js”> <script src=”libs/OrbitControls.js”> Note: This project works with the latest build of three.js (r111).

STEP 3: ADD VIDEO TAG

For now, add the video tag to the body. You could also create a video element purely using JavaScript if you wish, depending on your project needs.

march 2020 77

PROJECTS three.js For simplicity, we’ll add the video tag direct to the HTML page. This makes it easier for you to see the video during testing as well. Notice we set the muted, playsinline and autoplay properties to ensure the video can play both on desktop and mobile. Replace the video with any video you wish. MP4 format is best for this but ultimately any web-supported formats will work.

STEP 4: SET UP GLOBAL VARIABLES

Next, you should set up a few simple variables to keep track of scene, camera, renderer, the orbit controls

and the container that contains the HTML canvas. Add this code first between the script tags: var container, controls, camera, scene, renderer;

STEP 5: CALL INIT AND ANIMATE FUNCTIONS

Call the init and animate functions, now that the page is loaded and accessible. You’ll write those functions in the next steps. init(); animate();

STEP 6: CREATE THE ANIMATION/ RENDER LOOP

Define the animate function you called in the last step. It’s straightforward to animate in three.js. Using the requestAnimationFrame to manage the frequency of the renders, we ensure the animation stops when the browser window is not active and that the render is only run when the browser can handle it. This will run at 60 frames per second in most situations. We then ask the renderer to render the scene to the canvas. Use the following code to do that: function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); }

STEP 7: INIT FUNCTION

Create the init function to hold the rest of the initialisation code: function init() { }

78

march 2020

Top To test the scene is all

working so far, add a simple Plane object

Above Creating a

VideoTexture enables video to be copied to the material each render frame

STEP 8: 3D CAMERA

To see your scene, add a 3D perspective camera. The code will first go inside your init function. The first parameter for the camera object is the field of view. The second is the aspect ratio, followed by the near and far clipping planes. camera = new THREE.PerspectiveCamera( 45, window. innerWidth / window.innerHeight, 1, 2500 ); camera.position.set( 0,0,1000);

STEP 9: 3D SCENE

Now create a scene to hold your camera and 3D objects. You can set a fog for the scene, so it gradually fades the pixels to the colour you define. You can also specify a default background colour or an environment map if you wish. scene = new THREE.Scene(); scene.fog = THREE.Fog(0,100,0x000000);

STEP 10: CREATE A RENDERER

Next add the renderer, which handles drawing the scene to the HTML canvas element. You can also

three.js define the pixel ratio and size so it adapts to the screen space. renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

IN-DEPTH

A QUICK THREE.JS PRIMER

STEP 11: ORBIT CONTROLS

To make navigating the scene easy, enabling mouse interaction or touch on mobile, simply add the following code: controls = new THREE.OrbitControls( camera, renderer. domElement ); controls.target.set( 0, 0, 0 ); controls.update();

STEP 12: ADD SOME LIGHT

To create a 3D look you really need some type of directional lighting. This creates the cast shadows of objects, which gives a sense of shape and depth. You can use classic three-point lighting (key light, fill light, rim/hair light). To create key and fill lights you can use directional lights. You can also use an ambient light, to add light without direction if the scene is too dark. For now, let’s just add a single dramatic spot light. You can set the position, colour and intensity of lights in three.js. You can add a spot light using the following code: light = new THREE.SpotLight( 0xccddff,.5 ); light.position.set(0,400,-500); scene.add( light );

STEP 13: CREATE A SIMPLE PLANE

To see the scene and test it’s all working so far, try adding a simple Plane object. Create the material and a plane geometry. Use something like this normal material, which requires no real lighting or loaded texture to be visible. Combine these into a mesh and add to the scene. var mat = new THREE.MeshNormalMaterial(); mat.side = THREE.DoubleSide; var mesh = new THREE.Mesh( new THREE. PlaneBufferGeometry( 960, 540 ), mat); scene.add( mesh );

STEP 14: GET A REFERENCE TO THE VIDEO

To use the video you’ll need to get a reference to it by using the following code. You could also add the video element via JavaScript if you wanted and start

WebGL renderer

The renderer handles drawing the 3D scene using WebGL. It targets an HTML element to draw into. You will call the renderer to render each frame of your scene. The scene You can have more than one scene in a project. A scene contains the elements you wish to show, such as lights, meshes and particles. The renderer is supplied with a scene and camera to use to render an image. The camera Three.js has different camera types, including a perspective camera and an orthographic camera, used for rendering 2D scenes or UI elements. You’ll most often use the perspective camera when it comes to 3D. Geometry Geometry can be defined manually or with built-in primitives such as planes or spheres. It can also be loaded from external 3D model files. Geometry defines the vertices or ‘points’ of an object. Faces created by connecting these vertices are also defined. Materials Materials are used to texture the faces of an object’s geometry. Attributes include things such as textures maps, colour and opacity. Materials can be made of images, colours, shaders, videos and more! Mesh A mesh is the combination of geometry and materials. The mesh object is what we would typically think of as a physical 3D object because it has enough information to be seen.

march 2020 79

PROJECTS three.js playing it when a user clicks on a button or interacts

RESOURCES

LEARN ABOUT TEXTURES Here are a handful resources to get you up and running

quickly, as you start to add WebGL and video textures to

your projects.

with your site in some way. video = document.getElementById( ‘video’ ); video.play();

STEP 15: CREATE A VIDEO TEXTURE

The next stage is for you to create a VideoTexture. This class provides a special texture that will update every render frame, which enables video frames to be copied to the material each frame. This results in seamless video playback. Use the following code to create a video texture. Notice we apply the video texture using the map property of the material. Try out your scene now and you’ll see the video playing on a plane! You can even click and drag it around to see it from any angle.

Three.js examples

https://threejs.org/examples Three.js has plenty of great starter examples, including some

specifically for video textures. Well worth a look to learn even more techniques. Three.js Online Docs – Video Textures https://threejs.org/docs/#api/en/textures/VideoTexture The online docs are an invaluable resource for understanding the code we used in this tutorial in greater depth. I’ve specifically shared the link to the section on video textures here, so you can dive into extra features if you need them.

texture = new THREE.VideoTexture( video ); mat = new THREE.MeshBasicMaterial({map:texture});

STEP 16: LOAD A GROUND TEXTURE

To add a little more interest to the scene, you can create a ground texture or add other 3D elements. Use the following code to load and create a texture for the ground: var texture = new THREE.TextureLoader().load(“assets/ stone.jpg”); texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

texture.repeat.set (12,12); material = new THREE.MeshPhysicalMaterial({map:texture ,bumpMap:texture});

STEP 17: CREATE A GROUND PLANE

Next up is for you to create a mesh for the ground using a plane and the material that you’ve just created. Then you can add it to the scene. We rotate the plane so it lies flat and is oriented low, so it’s below our video.

Mobfish – How to Create 360-Degree Videos https://mobfish.net/blog/create-360-degree-videos If you’re looking to create some of your own 360-degree video content to use in your WbGL projects, Mobfish has a guide with some tips and tricks that’s worth checking out. Pond 5 – video assets https://www.pond5.com/ Whenever you need free or paid video resources for a project, Pond 5 has a wide range of quality videos to check out. It has loads of both standard and 360-degree videos.

80

march 2020

var geometry = new THREE.PlaneBufferGeometry( 6000,6000 ); var ground = new THREE.Mesh( geometry, material ); ground.rotation.x = Math.PI/180 * -90; ground.position.y=-200.0; scene.add(ground);

STEP 18: ADJUST VIDEO MATERIAL

The video material works just like an image source, once you’ve loaded the video texture. You can set opacity, colour, material types like physical or phong and all the other adjustments you might normally make. Try out the following code to make the video translucent:

three.js

mat = new THREE.MeshBasicMaterial({map:texture,opacit y:.5,transparent:true});

STEP 19: APPLY THE VIDEO TO A CURVED PLANE

It can be useful to wrap video textures around curved planes to give a cool massive screen look or a stylised effect for your project. Try out this code to wrap your video onto a curved screen:

var mesh = new THREE.Mesh( new THREE. SphereBufferGeometry( 250,30,30 ), mat); mesh.rotation.y=Math.PI/180*-90;

STEP 21: MOVE CAMERA INSIDE SPHERE FOR 360-DEGREE VIDEO

var mesh = new THREE.Mesh( new THREE. SphereBufferGeometry( 100*2.5, 6, 3, 4.41,.6,1.4,.3), mat); mesh.position.z=1100; mesh.scale.set(-1,1,1);

Without having to make any updates to your code, you should be able to zoom into the sphere and look around. By placing your camera inside a sphere with video mapped to it like this, you now have 360-degree video! You could create a series of these spheres and allow users to travel from sphere to sphere as they explore a forest, a new world or a complete a home tour.

STEP 20: VIDEO TO A SPHERE

WRAPPING UP

Another useful shape to apply video to is a sphere. In this case try using a 360-degree video, if you have one available. This is a style of video that is filmed specifically to wrap onto spheres. It is created using a special multi-directional camera, which is composed of many cameras to cover all directions. Update your video tag in the HTML to use a 360-degree video as the source. Then update your mesh with the sphere shape. You can grab sample videos from here to test them out: https://www.mettle.com/360vr-master-series-free360-downloads-page/.

Top left Add interest to

your scenes by creating a ground texture

Top right Adjusting opacity allows you to make the video translucent Bottom left Wrapping video to a curved screen can be used for many types of projects Bottom right Map a

360-degree video to a sphere to enable visitors to become immersed in a world

By applying video that can play on any shape, you can add surface-level detail and interest to your elements that would be far too complex to try animating in real time. You can create 360-degree video experiences that even work great on mobile. You can also create VR setups with two cameras, allowing users to feel like they are sitting in a theatre watching a movie (just like our video plane) and so much more. The possibilities with this are endless. Hopefully this tutorial gives you a great starting point to begin creating some of your own video textures!

march 2020 81

PROJECTS P5.js

View source files here! All the files you need for this tutorial can be found at https://netm.ag/2ZdikKb

A B O U T T HE A U T H O R

MARK SHUFFL EBO T T OM w: webspaceinvader.com t: @webspaceinvader job: Professor interaction design areas of expertise: HTML, CSS, JavaScript

P5.JS

CREATE AN RGB SPLIT CHANNEL EFFECT

Pdun#Vkxŀherwwrp#shows you how to use shaders to manipulate the RGB channels of a webcam feed

With WebGL available in our browsers, we get access to a special effect commonly used in video games: shaders. They are extremely powerful because shaders are always offloaded to the GPU and provide advanced filter effects – the kind you might find in After Effects – that can be applied in real time to the display. In this tutorial, we’re going to show you how to use the p5.js library in order to access a webcam feed and display it on the screen. The webcam will be passed into a shader and then manipulated. A buffer of frames will be stored so that the RGB channel can be split and delayed, which will mean that each individual channel is staggered. With this done, the shader can then be further manipulated to add a slight colour tint to the image, in addition to a soft-edged vignette so that the edges fade out to black.

82

march 2020

The page design for all this has already been created, so the focus of the tutorial will be on adding the JavaScript and shader code. To get started open the ‘start’ folder from the project files in your code editor, then open the ‘sketch.js’ file for editing. First off, some variables need to be declared. The first line of variables all refer to the shader and camera. The second and third line refer to the buffer of images that will eventually be stored to give the delay effect. The final line will create variables that enable the buffer to be filled before displaying the feed. let img, camShader, cam, shaderLayer, hRatio; let numLayers = 90, layers = []; let index1 = 0, index2 = numLayers / 3, index3 = numLayers / 3 * 2; let displayOn = false, counter = 0;

P5.js

IN-DEPTH

GETTING THE RIGHT COLOUR In the fragment shader, colour values are required as values

of zero to one. Most of us have been around the RGB model of zero to 255 enough to be able to guess the values but our

Top Here the webcam image is fed into the shader as three different time-delayed textures. They are put together in the shader to get a delayed RGB split

software gives us those values easily enough through the various colour pickers! Converting a colour value over does involve a bit of maths. Changing the value into a percentage will definitely help but even then it’s only part of the way there as the decimal place has to

The preload function loads up the shader files and a disc, which will spin while the buffer is filled. function preload() {

}

camShader = loadShader(‘effect.vert’, ‘effect.frag’); img = loadImage(‘img/disc.png’);

Next the setup deals with how the screen should look as the project starts. The canvas element is set to fill the whole screen display. The ability to draw a stroke on elements is turned off and the pixelDensity is set to 1 so that a high-definition screen uses the same ratio as CSS. The camera is set up and then sized to fit the display – since the camera will originally show as a video element in HTML, the display is turned off. A shader layer is created that will display the final result and then a for loop adds in an empty graphics element for the 90 frames that will be stored.

be moved. Start by heading on over to https://www.calculator.net/ percent-calculator.html – an online percent calculator. Selecting a colour in something like Photoshop gives us easy access to

those RGB values. If the colour selected has a red value of 92, in the online calculator you can add in the value where it asks ‘92

is what % of 255’, then hit calculate. This in turn leaves you with the result of 36.07843%. Now all that needs to happen is for the decimal place to be moved two places to the right so that the value is ‘0.3607’ and now lies between zero and one. Of course smart readers will realise that this very value can also be achieved by simply dividing 92 by 255, again giving 0.3607, but it’s always good to make sure using the long way!

function setup() {

createCanvas(windowWidth, windowHeight); noStroke(); pixelDensity(1); cam = createCapture(VIDEO); cam.size(640, 480); hRatio = (windowWidth / cam.width) * cam.height; cam.size(width, hRatio); cam.hide(); shaderLayer = createGraphics(windowWidth, windowHeight, WEBGL); for (let i = 0; i < numLayers; i++) { let l = createGraphics(windowWidth, windowHeight); layers.push(l); } background(0); }

There are various ways to convert RGB values into a scale of zero to one for the fragment shader

“Shaders are powerful ehfdxvh#wkh|#duh#rŀrdghg#wr# the GPU and provide dgydqfhg#Ľowhu#hļhfwvĤ march 2020 83

PROJECTS P5.js The draw function is going to be called every frame,

RESOURCES

GOING FURTHER WITH SHADERS Shaders are notorious for being difficult to create; even

experienced programmers can find them awkward to work with. Building your knowledge of how they work from the ground up will help you if you want to start using them to get creative results in your projects. Here are some useful resources…

so here the camera is added to the layers array. This means that it will take 90 frames to fill the buffer. The shader will get three feeds, delayed by 30 frames each so the RGB split will have an interesting delay. function draw() {

layers[index1].image(cam, 0, 0, width, hRatio); shaderLayer.shader(camShader); camShader.setUniform(‘tex0’, layers[index1]); camShader.setUniform(‘tex1’, layers[index2]);

camShader.setUniform(‘tex2’, layers[index3]); shaderLayer.rect(0, 0, width, height);

Pixel Shaders

Because it takes 90 frames to fill the buffer and the user has to click to enable the webcam to be

The Pixel Shaders website is a great example of introducing

used, the code here displays a rotating disc image.

http://pixelshaders.com/sample/

basic concepts and then applying them. There is a very simple interactive code panel that prompts you to change the code to the supplied example. All changes that you make are updated live so you can immediately see when you achieve the desired look.

Book of Shaders https://thebookofshaders.com/ Taking the concepts of the previous website a stage further is the Book of Shaders, which as the name suggests is like an interactive online text book that enables you to try lots of code experiments and goes in more depth than the Pixel Shaders site. There’s also a gallery of shaders that is very helpful.

GLSL Sandbox http://glslsandbox.com/ Sometimes you just want to be blown away by what really clever people can do; if that’s the case you should head to GLSL Sandbox. This is a live coding environment where you can browse other users’ experiments and even change some of the numbers. You can also cut and paste the code into your own projects.

However, after 120 frames the shader will be displayed on the screen.

“Each texture is placed into a vector 4 variable to display the RGBA values. Then each channel is dgghg#wr#wkh#Ľqdo# display of colOut to see wkh#UJE#vsolw#ryhu#wlphĤ if (!displayOn) { background(0); translate(width / 2, height / 3); imageMode(CENTER); counter++; rotate(PI / 180 * (counter / 0.9)); image(img, 0, 0); if (counter >= 120) displayOn = true; } else { imageMode(CORNER); image(shaderLayer, 0, 0, width, height); } When it comes to ending the draw function, the index for each layer of the camera is updated and if it reaches the end of the layers, it will be reset to zero. index1 = (index1 + 1) % layers.length; index2 = (index2 + 1) % layers.length;

84

march 2020

P5.js

}

index3 = (index3 + 1) % layers.length;

It’s also a good idea to add a window resize function, though obviously it will take 90 frames before this takes effect due to the nature of the buffer delay. function windowResized() { resizeCanvas(windowWidth, windowHeight); }

hRatio = (windowWidth / cam.width) * cam.height;

Save the ‘sketch.js’ file now and move over to the file ‘effect.frag’. This is known as a fragment shader. There is also a vertex shader that has been created, which just sends the texture co-ordinates to the fragment shader as the vTexCoord variable. These lines are variables, with the uniforms being the three camera texture layers that are passed in from the JS. precision mediump float; varying vec2 vTexCoord; uniform sampler2D tex0; uniform sampler2D tex1; uniform sampler2D tex2; Now the main function will take the texture co-ordinates and then flip the camera to be a mirror. Each texture is placed into a vector 4 variable because this displays the RGBA values. Then each channel is added to the final display of colOut. The gl_FragColor is always the final screen output. Save this and test it on a server to see the RGB split over time. void main() { vec2 uv = vTexCoord; uv.y = 1.0 - uv.y; vec4 cam = texture2D(tex0, uv); vec4 cam2 = texture2D(tex1, uv); vec4 cam3 = texture2D(tex2, uv); vec4 colOut = vec4(cam.r, cam2.g, cam3.b, 1.0); gl_FragColor = colOut; } Let’s take this further. Next comment out the gl_FragColor line from the previous code with two forward slashes and replace it with the following code instead. The c variable is the colour that will be applied as R, G, B and A values from 0 to 1. The camera image is multiplied to this and then it’s sent to the new output of gl_FragColor. Save this and the webcam will now have a slight blue tint to the image.

vec4 c = vec4(0.5, 0.7, 1.0, 1.0); vec4 colorized = (colOut * c); gl_FragColor = colorized; Finally, comment out the last gl_FragColor line again and replace it with the code below. This will introduce a vignette effect, which you can control by changing the darkness and offset values to adjust how dark it is and how much it extends onto the camera image.

Top A further tint is added to the image so that it starts to have the same colouring as the interface elements used in the design Above The vignette effect enables the HTML elements that make up the interface to really stand out in contrast to the video feed

float darkness = 1.0; float offset = 1.8; vec2 vuv = ( uv - vec2( 0.5 ) ) * vec2( offset ); gl_FragColor = vec4( mix( colorized.rgb, vec3( 1.0 darkness ), dot( vuv, vuv ) ), colorized.a ); Save and you should find that the whole effect is working now, with a delayed RGB channel split, a tint and a vignette applied.

march 2020 85

PROJECTS Headers

A B O U T T HE A U T H O R

DANIEL S CHWARZ w: https://uxtricks.design/ All Photos by Helena Lopes on Unsplash

t: @mrdanielschwarz job: Creator of UX Tricks areas of expertise: Product design, UX, design tools

HEADERS

DESIGN A PURPOSEFUL HERO HEADER How do we avoid the Dribbblisation of design and put purpose over form? Daniel Schwarz explains how in this quick tutorial for designing headers Do visuals even matter? Does content matter? Do they both matter and, if so, which comes first? Should UI be beautiful? All of these questions have a single answer in common (in a roundabout way). Yes, they all matter. Design is both complex and overwhelming at times, which is why it’s so easy to lose sight of what to do, when to do it and why we’re doing it. Whenever you find yourself in doubt, just ask yourself the question: “Why am I doing this?” Almost every time you’ll reach the same conclusion: “Because users want X.” In user interviews, users will never claim to want flat blue colours or Fira Sans or Humaaans illustrations, even if they do all look astonishing (we’ll talk about that later). At most they’ll say that they want something minimalist, which is understandable.

86

march 2020

People aren’t here for the visuals or even the content. They’re here for the product – the thing that helps them do X or feel X way – and visuals, content and UI all contribute to this end effect. In this tutorial, we’ll explore the visual aestheticusability paradox, the UI and the content dilemma and learn why – actually – it all comes down to why are we doing this and what is the purpose? If you’d like to follow along with this tutorial, invent a fake business concept (I’m choosing Airbnb for co-working) and let’s explore how we might design a purposeful hero header, taking into consideration visuals, content and the user interface.

STEP 1: GET THEIR ATTENTION

Capturing a user’s attention means nothing if we can’t hold that attention, which is why Dribbble

Headers shots never really seem to receive the scrutiny that they deserve. On Dribbble, attention only needs to be held long enough for the shot to receive a ‘like’ (or, if you’re really lucky, a “Nice work!’ or even a “Beautiful!” comment). On a real website, attention needs to be captured for a little longer than that – for example, until the user activates a free trial, buys something, downloads something or else converts in a meaningful way. For that to happen, the user needs

“The user needs to have a meaningful connection zlwk#zkdw#lv#ehlqj#rļhuhg# and, to achieve this, we need to communicate its value proposition” to have a meaningful connection with what is being offered and, to achieve this, we need to communicate its value proposition. This is why captivating the user must amount to something more substantial. We have to make a statement and wow at the same time, showing the user that we’ve created a product that’s just right for them, as opposed to initiating a “wow, but… why?” response.

IN-DEPTH

WHY WE LIKE NICE THINGS We can like something without wanting it but we won’t buy it

if we don’t want it. So, by extension, we won’t buy something just because we like it. In the context of visual design, this means that users won’t buy what we’re offering just because it has a nice design, even though visuals – when used in moderation – can make a product seem more enticing in the short-term. But what makes us like nice visuals anyway? Well, visuals incite

emotions. People will forget what we say, do or even offer but they won’t forget how we made them feel. Joy, surprise, contempt, anger, fear, sadness and disgust –

these are the seven universal expressions and only one of them is explicitly a positive emotion (joy). Visuals aren’t the be-all and endall of emotional design but this little known fact does illustrate how the odds are stacked against us when it comes to design, which is why the perfect aesthetic-usability balance is so difficult to achieve. Strangely enough, unconventional design trends can incite the surprise expression, although when interacting with such a design, the resulting lack of usability can incite any of the other more negative expressions. It’s an unfortunate paradox but one that we can overcome with just a little mindful design.

Above It’s easier to convey value using words that are simple and direct

march 2020 87

PROJECTS Headers PHOTOGRAPHY IN-DEPTH

WHAT TO AVOID ON THE HOMEPAGE

Let’s start with some photography. The benefits of co-working are highly documented, so for that reason I’ll be skipping user research for the sake of the tutorial. Here’s a quick summary: O Remote workers feel lonely O Remote workers need convenience (sockets, Wi-Fi, coffee, etc)

A lot of effort goes into the average homepage design

because it’s often the first point of contact in the customer journey. However, it’s important to not be so eager to impress that

Obviously there’s much more to our user’s persona but there’s also only so much value that

you end up chasing users away. Here are some things to avoid:

we can actually communicate above-the-fold and the header section is vital for capturing attention,

1. Scroll down hints

so the ethos of less is more needs to be employed. Users also have a decent idea of what they want

Something as simple as a homepage shouldn’t require instructions. If utilising the fold to the maximum, just leave a little space at the bottom that suggests there’s more to see. Don’t add more cognitive load when it isn’t necessary.

2. Sideways text Sideways text is for aliens with sideways heads. Just no!

when it comes to co-working – specifically, they can easily visualise where they’d like to work for several hours every day. Photography is the ideal way to convey all of this. An image is easier to scan and digest than a couple of sentences and the image we’ve chosen of people in a workspace invokes all the right emotions: O Community O Productivity O Convenience

Avoid silly stunts like scroll down hints and sideways text

3. Lack of clarity Make it super clear what you’re offering. We don’t need to sound cool or smart in order to sell our product; we just need to confidently communicate the product’s value proposition. 4. Anything unconventional Unless you’re an entertainment or lifestyle brand, unconventional visual design trends rarely appeal to anybody outside of the Dribbble audience and, even then, an overload of visuals is usually headache-inducing when a site has to present multiple products and functions. There’s definitely more room for visual design with entertainment and lifestyle brands but we should be mindful of choices and design in moderation.

88

march 2020

“Users will jump ship when something seems too complicated, regardless of how inviting a website looks. Keep it simple” This is our first purposeful decision. Just remember that, once again, that we would ordinarily start proceedings with user research and a validated wireframe, which would guide us as to the UI elements we’d need on screen.

WORDS The header is looking awesome already but what are we offering and why should users want it? The image says a lot – it certainly looks like the kind of setup that most remote workers would want – but we need to confidently clarify what is being offered without falling into the trap of trying to sound overly smart. Be direct, as confusion will untether the connection we’ve made. We could try something

Headers

like this: “Co-working in magical Hogsmeade”. And perhaps we could add: “Superfast Wi-Fi. Free Butterbeer. Community.” Obviously it’s not all that aesthetically pleasing (yet) but it does hook you in and makes you wonder: ‘Hey, I think I might like this space; it has everything I need!’ That being said, anybody in their right might isn’t going to start handing over their money just yet, so how do we persuade the user to do so? It will take a combination of patience and an obvious and clear call-to-action.

DEVISE A CALL-TO-ACTION The objective (at least for now) is to create desire and edge the user towards action. There will be several opportunities to impress later down the line, so we don’t have to cash in on all of our ideas (visual or not) right away. Let’s just keep our design minimal and ensure that we don’t keep adding visual distractions until we fall in love with how the design looks. The Hick-Hyman law states that the more decisions one has to make, the more time it takes logarithmically to make one. But in today’s mediasaturated world, users will spontaneously jump ship when something seems too complicated, regardless of how inviting the website looks. Keep it simple, make a clear path.

STEP 2: MAKE IT BEAUTIFUL

Above left Don’t create too many paths and options. Keep it simple

During this step, we’ll see how visual design can elevate the impact of what we’ve created. Adding visuals to purposeful design can tether a powerful connection to the user but go too far and the design will start to look too artistic. It’ll look nice but it’ll distract from the point and wind up confusing users who came to find a solution to their problem. Let’s make what we already have beautiful. Don’t add more things, just because. Leave the UI elements for the time being, as this is something that we really can’t afford to ‘overdo’.

DEPTH At the moment our design contains all the ingredients for a successful conversion but they need to be baked into something edible. This step isn’t just about visuals but usability too. First of all, we need the text to be more readable, so let’s fade the hero image into a black background. Black because it’s sophisticated, adds depth and is also neutral, so it doesn’t ‘say’ anything that we don’t need it to. Purposefully, we chose an awesomelooking image that already says a fair amount.

COLOUR We need to infuse our brand colours into our design. If the user leaves, at least they might recognise our

march 2020 89

PROJECTS Headers

brand at another moment in time and think fondly of us. In any case, we want to create a personality. Infusing the main CTAs with brand colours is a decent way to do this. Colourful, bold, abstract shapes (and other fancy visuals) can look very nice but they can also be deceivingly distracting and even hint that a product has no substance. I’m not saying that you shouldn’t use fancy visuals but don’t use them if they’re not needed.

TYPOGRAPHY The typeface I’ve used is Helvetica Neue. I’m sticking with it because it’s already tech-y, modern and many computers will already have the font installed (yay for performance!). In this example, we don’t need to add anything else. Just because we can, doesn’t mean we should. Now I don’t advocate being lazy, just mindful. It’s a win-win, really.

CONCLUSION

Although it’s a fairly basic hero header that obviously isn’t complete (with it being a fake business and all), it does show us that using visuals as elevation is a much better approach to captivating the user’s attention in the long-term than offering instant gratification through stunning (but otherwise useless) visuals. A lot of the time, in fact, the visual decisions that we make are for usability or accessibility reasons and

90

march 2020

the fact that they make the design look nice is just a convenient by-product. If we wanted to complete this hero header, we could start by styling the still-a-wireframe UI components. The reason that we didn’t already is because we don’t want to mistakenly gloss over the accessibility or usability of some of the most important aspects of our website’s design and we’re

Above Great design doesn’t necessarily have to be simple, just not unnecessarily complex

“Using visuals as elevation is a much better approach to captivating the user’s attention in the long-term” much less likely to do that after already having created a design that’s very nice despite how minimalist it looks. To summarise: O Accessibility and usability are fantastic when it comes to visual design. O Content comes first and visual design should elevate it. O Less is more.

Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes

PROJECTS Wearable apps

A B O U T T HE A U T H O R

VAMSI BAT CHU w: www.vamsibatchu.com t: @vamsibatchuk job: Senior UX designer, SunTrust Banks areas of expertise: UX, mobile animation, JavaScript

WEARABLE APPS

BEST DESIGN PRACTICES FOR APPLE WEARABLE APPS Vamsi Batchu explains the design considerations and best practices to be followed when creating apps for wearables using Apple’s watchOS When Apple first launched its smartwatch to the public, everyone felt that the incredible hardware was lacking features because of software hurdles. Since then, the hardware capabilities of the watch have improved so much that the new Apple Watch is the best smartwatch ever made. Not only does the navigation and UX feel intuitive but all the apps launch super quickly and the overall smartwatch experience has become more mature. Here are some of the features that set it apart from competitors’ wearables: shortcuts to all your recent and favourite apps; the ability to track your heart rate and see the changes; customising your own Apple Watch faces; achieving activity goals; controlling your MacBook and TV using the watch and many more.

92

march 2020

Also with the new launch, Apple released watchOS 6 for the developer community with revolutionary improvements. The best part about the new development kit is that the apps need not have an iPhone component anymore. This makes it easier for the dev community to create standalone watch applications for the first time ever. These are called watch-only apps. In addition to this, applications can now take advantage of new APIs to connect your JavaScript apps to the Apple Watch seamlessly. That is why there is a large need for developers to understand how Apple Watch apps can be designed in a way that is more enjoyable and intuitive. In this tutorial, you’ll be learning about the best design principles to consider when designing a wearable app for a watch. I will also be looking into

Wearable apps

designing a sample application on Adobe XD. For the purpose of this tutorial, we are just going to look at a few screens of the app instead of all the screens in the flow. We’re going to create an Apple Watch app for an Uber-Eats-style service in this example. Any kind of app design needs to follow an approach that is well focused. Any wearable interaction is measured in seconds because users do not spend a lot of time on the wearables. Here are some of the themes we can look at when considering the various design principles.

LAYOUT GUIDELINES

MINIMAL CONTENT

You have to avoid displaying a lot of content on the screen at once. The users want to access the most useful information. Since there is not a lot of real estate on the watch screen, you don’t want to clutter the interface with details that are secondary or not needed. This kind of information can always be presented by scrolling or via an additional click. For a food delivery app, let’s create a page where we

“Applications can now take advantage of new APIs in order to connect your JavaScript apps to the Apple Watch seamlessly” have the favourite restaurants stored in the form of cards. Since this is a page with a lot of content we should try to show just two cards at once to improve the visibility.

MAINTAIN VISUAL HIERARCHY Always design in such a way that a visual hierarchy is maintained. This helps the users find the information they are looking for easily. For instance, you can make use of negative space or separator lines to ensure that the elements related to the same group are presented intuitively. This aids the glanceability and readability of your app. To maintain a visual hierarchy in the contact page of the restaurants, spacing is maintained between the two icons on the page and also negative space is used.

SPACE IS VALUABLE As previously discussed, not a lot of space is available on wearables. Make use of all the width on the

RESOURCES

UNDERSTAND DESIGNING FOR WEARABLES Here are some useful resources and case studies that

designers and developers of wearable apps can use to get a better understanding of how to make their app more intuitive and useful to the end user.

Apple Watch affordance decomposition study https://humanfactors.com/downloads/whitepapers/apple_watch_ case_study.pdf In this case study by Human Factors International, a technique

called affordance decomposition is used to help predict how the wearable product or service fits into people’s lives, in addition to identifying opportunities for innovation and obstacles to its widespread success.

Design principles for wearables https://fuzzymath.com/wp-content/uploads/2015/08/Fuzzy-MathUX-Design-Principles-for-Wearables.pdf In this case study, the main focus was on designing the best three groups of wearables: activity, awareness and sleep patterns. It includes targeted recommendations and insights into designing the physical hardware, creating desirable functionality and ensuring the entire device is pleasantly easy to use.

Top left Showing

just two cards at once improves the visibility of the app

Top right To ensure a visual hierarchy in the contact page of the restaurants, spacing is maintained between the two icons on the page Bottom left This shows an example of a menu where you have the four most important items accessed by the user Bottom right This notifications page demonstrates how the left alignment of content makes it easy to read

march 2020 93

PROJECTS Wearable apps screen and design your app in a way so the content

RESOURCES

OTHER PLATFORMS If you are eager to try your wearable designs on platforms

other than watchOS, here are a couple of resources to help get you going.

goes from one edge to the other. Do not worry about the padding because the wearables provide natural padding around the content of the app. You must also make sure to reduce the spacing between internal elements. For example, on the Order Again page on the app, you may want to use cards representing the items that are ordered previously: make sure the cards have been designed in such a way that they span across the interface of the watch so absolutely no space is wasted. Menus must be used to replace buttons whenever possible. They are more effective in providing a dedicated place for the actions. Make sure you don’t have more than four actions in a menu. This will also free up space in the interface by getting rid of buttons. Always align your elements to the left of the wearable interface. According to usability principles, left-aligned text is much easier for reading. Also, when there are lots of vertical stacks of buttons with text labels, left aligning makes it easier to scan the

Wear OS Design Guidelines https://designguidelines.withgoogle.com/wearos/ These are the design guidelines put forward by Google for Wear OS, which was formerly called Android Wear. It is a lightweight platform that connects to the wearer’s body and provides the correct information at the correct time. It has various resources such as components, notification and navigation patterns, colour and style patterns. Adobe XD UI Design Kit for Apple Watch OS https://www.adobe.com/products/xd/ui-design-kits.html This is one of the resources from Adobe XD, which is basically a template for a smartwatch app offering users a choice of 60 screens, more than 20 components, 30 icons and 6 prototype flows that are all fully customisable and Apple compliant. These can be used to easily design new apps from the skeletons provided in the template.

Top Examples of both of the common navigational patterns seen: hierarchical and page-based respectively

94

march 2020

information quickly.

“Phone apps tend to include a number of pages but wearable apps must be designed for quick interactions” NAVIGATION GUIDELINES

Just like any interface, wearable apps have more than one screen. There are two navigation patterns you can use when designing one: page-based and hierarchical. You can mix both, depending on the need. The hierarchical navigation is well suited for interfaces or a section of the app where you need to present a list of options that can be scrolled and clicked. One such example is Settings, which is present in almost any application. When the user clicks on any item in the list, a new screen is presented that contains more details about the particular item. Also, this kind of navigation makes it easier to navigate swiftly using the swipe interaction or the Digital Crown. Page-based navigation can be used when there is a smaller list of pages to be presented. This makes it simple for the user to swipe through these pages and view the content. The dots at the bottom of the page indicate its place in the set of pages. One important thing to remember when designing a wearable app is that it should always complement

Wearable apps

the iPhone/Android app but not mimic it. Phone apps

some feedback from the user. Always make sure

tend to include a number of pages but wearable apps must be designed for quick interactions.

that you use the alerts sparingly and use the action sheets to give the user a list of options to respond

INTERACTION GUIDELINES

to an event. For example, in our food delivery app for messaging functionality, the action sheets

DIGITAL CROWN

This is one of the most essential aspects of wearable interfaces and it enables the users to scroll through without any distraction to their content. Whenever the app is being designed, make sure you provide visual feedback to the user when they interact with the Digital Crown. One example of this would be showing the location of the scroll when the Crown is rotated to scroll.

HAPTICS A haptics engine in a wearable device uses force upon the skin to create real-time tactile feedback. This is essential in creating an intuitive experience for the user whenever something significant happens in the app. You can customise the available haptics for an Apple Watch to make the app experience more meaningful. Always use each haptic only for its intended purpose. For example, notifications, confirmation and error scenarios can each be linked to a specific haptic.

GESTURES Gestures are an important piece of wearable technology but are limited to very few choices. Generally, there are few systems-generated gestures in the wearables, which should not usually be changed otherwise you risk creating confusion for the users. The most common gestures are taps, vertical and horizontal swipes and left-edge swipes. However, when you create a custom gesture such as double tap, make sure they are recognisable.

INTERFACE ELEMENTS GUIDELINES

ALERTS AND ACTION SHEETS

These interface elements are generally used to communicate when an error has occurred or gather

can include the option for either responding to or dismissing the notification.

IMAGES Images in the wearables can be either static or a series of images that are animated with time. Make sure the format of the image being used or exported to the design is a PNG element. Also, since there is always a loading time associated with the images, use a placeholder image in place of the actual image to give the user a visual cue.

Far left Always provide visual feedback when the Digital Crown is used, such as showing the location of a scroll Middle left The Taptic

Engine of the Apple Watch, which is responsible for its haptic feedback

Middle right Give the user a choice of options for how to respond to an event by employing action sheets

Far right An example of the images as icons, where each item is associated with a colourful logo

VIDEOS Media is essential to any kind of interface, which can just be audio files or video files. Make sure that the audio/video clips are no more than 30 seconds as they consume more disk space. Always include a poster image that is associated with the video so the user can make informed decisions.

PICKERS These are the interface elements that display a list of items that are scrolled or navigated via the Digital Crown. This is one way of enabling the user to make selections. List pickers should be used whenever the selection needs to be text/image. A simple example of this is the date picker. Sequence pickers are generally used to replicate an image to create a custom interface, such as a rating feature. Users can give a rating to one of the orders they received using a customer rating picker. All the apps you create for an Apple Watch – or any other wearable – should be responsive, actionable and glanceable. The interactions should be quick and the data in the apps must be updated occasionally. Reducing the loading screen time also does a lot to make the experience more intuitive.

march 2020 95

HOSTING PARTNERS

Key hosting directory

CONTACT US To advertise here, contact our sales team: +44 01225 687 311 [email protected]

FEATURED HOST

Netcetera provides hosting

“We have several servers from Netcetera and the network connectivity is top-notch – great uptime and speed is never an issue. We would highly recommend Netcetera” Suzy Bean

Offering reliable website

from one of the most energy-

hosting, dedicated servers,

efficient datacentres in Europe,

co-location and cloud solutions,

all powered by green energy.

Netcetera has a large portfolio

It offers everything from reliable

of green, zero-carbon solutions

low-cost hosting for a single site

for businesses of all sizes.

right through to complex cloud

Customers can choose from its

racks and managed IT solutions.

fully managed cloud servers,

One of its most popular products

Linux and Windows for SMBs

is its Managed Cloud, designed

and a fully managed cloud

to help SMBs get the most from

solution for WordPress websites

their website, on their own cloud

to help them utilise cloud

server. Server monitoring comes

technology without any hassle.

as standard for Netcetera’s Cloud

And with server monitoring as

and Dedicated server clients

standard and a full migration

– something it believes should

service available, Netcetera

be included in the price of the

has made the switch to better

hosting it provides.

hosting really easy.

CONTACT 03330 439780 / [email protected]

WWW.NETCETERA.CO.UK WHAT NETCETERA OFFERS O Managed hosting: a full range of solutions for

EXPERT TIP

CLOUD TECH TIP... If you’re going to fully utilise cloud technology, before deciding on a service provider ask whether monitoring comes as standard and whether management is included in the price. A fully pdqdjhg#forxg#fdq#pdnh#|rxu#exvlqhvv#ľ|>#dq# underutilised cloud will be a waste of money.

a cost-effective, reliable, secure host.

O Dedicated servers: single server through to a full rack, with free setup and generous bandwidth.

O Cloud hosting: Linux, Windows, hybrid and private cloud solutions with support and scalability features.

O Data centre co-location: from quad-core up to smart servers with quick set up and all fully customisable.

Advertisement 1&1 INTERNET

THENAMES

businesses, developers and IT professionals to succeed online.

certificates, business email, WordPress hosting, Cloud, VPS

With a comprehensive range of high-performance and affordable

and dedicated servers. Part of a hosting brand that started in

internet products, 1&1 offers everything from simple domain

1999, it is well established, UK based, independent and its mission

registration to advanced ecommerce packages.

is simple: ensuring your web presence “just works”.

1&1 Internet is a leading hosting provider that enables

0333 336 5509

TheNames.co.uk offers great value cPanel web hosting, SSL

WWW.1AND1.CO.UK

0370 321 2027

CATALYST2

BLACKNIGHT

Catalyst2 has built a stable, reliable and well-supported

name registrar, providing innovative solutions to more than

hosting platform for organisations across the UK. Catalyst2

84,000 customers in 130 countries, with dedicated servers and

specialises in very high-availability hosting and exceptional

colocation, a comprehensive range of web hosting plans, domain

customer support. Contact the team today for a quote.

registration, email and productivity tools. ISO 27001 certified.

0800 107 7979 [email protected]

+353 59 9183072

As one of the UK’s most experienced hosting companies,

WWW.THENAMES.CO.UK

Blacknight is the leading Irish web hosting company and domain

WWW.BLACKNIGHT.COM

HEART INTERNET

ADVERTISE HERE!

Internet focuses on designers, developers and technically-

500,000 customers.

Would you like to promote your hosting business and services to our audience of professional web designers and developers? If so, please call or email George as below.

+44 (0) 330 660 0255

REASONS TO ADVERTISE

As one of the UK’s leading web hosting authorities, Heart adept businesses. It builds on its four tenets – speed, reliability, support and security – to create award-winning solutions for over

WWW.HEARTINTERNET.UK

O Reach professionals: 75% of readers are working in or seeking work in the web industry

O Variety of projects: future projects include mobile apps, web apps and CMS-driven sites

O Home workers: 51% have a personal website under development

CONTACT +44 01225 687 311 / [email protected]

NEXT MONTH

THE TOTAL TESTING TOOLKIT Discover the best utilities, libraries and plugins to help you squash bugs and get your code production ready

PLUS Code modular charts and data viz using Victory

Create a 3D map for your site’s contact page

Secure your first role in user experience design

ISSUE 330 ON SALE 20 FEBRUARY PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT

myfavouritemagazines.co.uk DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO

net.creativebloq.com

THURSDAY 2 APRIL 2020 RICH MIX, SHOREDITCH, LONDON

The conference helping you build better JavaScript PHIL HAWKSWORTH PRINCIPAL DEVELOPER EXPERIENCE ENGINEER, NETLIFY

9001

Are you being servered? – Exploring a “serverless” web

REMY SHARP FOUNDER, FFCONF RUNNER, JQUERY FOR DESIGNERS

EARLY BIRD TICKET PRICE £188 +VAT

SAVE £110! Only available until 5pm on 31 January 2020 (£298 +VAT thereafter)

Using a modern web to recreate 1980s horribly slow and loud loading screens

JEREMY KEITH WEB STUFF DO-ER, CLEARLEFT Closing keynote: Going Offline

9000

Book now at generateconf.com HOSTED BY

#GenerateJS