Page 1

Develop a digital assistant Verne Ho shares all on the creation of Shopify assistant Kit

Learn to use colours to influence users and shape their journey

develop a web game e ters

In

Put clients’ identities at the heart of your designs

Use colour to shape ux

Issue 319 : June 2019 : net.creativebloq.com

n ctio

focus on brand

Choose the best dev tools for the OS with our guide

user experience

The voice of web design

Make a simple WebGL game with Unity

Pick Linux tools

ver

er Obs

l

ura

Nat

age

gu Lan

nin

ar e Le

n

chi

Ma

s

ent

Ev ght

t Li

n bie

Am

ine

g g En

e

Fac

h

rap

kG boo

tion

la ans

Tr

R

bV We h

Pus

t JS

pKi

Ma

t

ch-

e Spe

ion cat e

enc

ig tell

n

eo I

Clo

ion

is dV

u

lo

Geo

Vid

o

udi A b We

t

ex o-t

Add innovative features to your sites with these powerful plugins from Apple, Google, Mozilla and more!

Reduce cognitive load

Strip distractions from your design

Issue 319

Resist cyberbalkanisation

Tear down the wall around the net


Welcome

Welcome

editor’s note

In many professions, the onus is on how much you’ve personally sweated, rather than the results that you’ve achieved. Fortunately, web design isn’t afflicted by this delusion. In fact, the best designers are often those that recognise we achieve our optimum results by building on the work of others and standing on the shoulders of giants. Perhaps the best example of this is through the pervasive use of APIs. By plumbing the excellent dev work of others into our code base, we can make sites and apps that offer our users innovative functionality without having to reinvent the wheel. That’s why this issue we’ve asked Tam Hanna to

profile 19 of the most groundbreaking APIs available, so you can add awesome functionality developed by giants like Apple, Google and Mozilla to your sites. But that’s not all we have to offer. We’re also taking a look at the role colour can play in your designs and how picking the perfect palette can help you optimise your user journey. Additionally, we run down how you can reduce the cognitive strain your designs place on users. And, in the first of a two parter, we show you how you can use Unity to create a WebGL game that can be published on multiple platforms without any hassle. Enjoy the issue!

Featured authors Tam Hanna

Joshua Garit y

Charl van der Walt

Hanna is an electrical engineer who’s seen the web morph from static content delivery to an environment able to run advanced apps. On page 60, he guides you through the most innovative APIs currently available. Insta: @tam.hanna

Garity is the founder of both UX Triggers and Candorem. On page 68, he shows you how you can use colour theory to meet user expectations and optimise your user journey. w: joshuagarity.com t: @iamlucid

Van der Walt is chief security strategy officer at SecureData and an expert in the offensive paradigm inherent in information security. On page 22, he explores why the global internet is heading towards a schism. w: secdata.com

Richard Mat tk a

Mattka is an award-winning creative director, designer and developer. He reveals how you can create and publish a simple WebGL game in Unity on page 76. w: richardmattka.com t: @synergyseeker

june 2019 3


@netmag

Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200 /netmag flickr.com/photos/netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine

Editorial

Editor Josh Russell josh.russell@futurenet.com Acting Group Editor in Chief Claire Howlett Senior Art Editor Will Shum

Creative bloq Editor Kerrie Hughes kerrie.hughes@futurenet.com Associate Editor Ruth Hamilton Operations Editor Rosie Hilder Senior Staff Writer Dominic Carter

contributions

Mark Billen, Kyle Carpenter, Christian Coan, Jo Cole, Robin Davies, Natalie de Weerd, Paul Ferry, Joshua Garity, Tam Hanna, Steve Jenkins, Harriet Knight, Oliver Lindberg, Richard Mattka, Tom May, Jim McCauley, Neil Pearce, Daniel Schwarz, Mark Smith, Alexander Tolstoy, Charl van der Walt, Kym Winters

Photography

All copyrights and trademarks are recognised and respected

Advertising

Media packs are available on request Commercial Director Clare Dove clare.dove@futurenet.com Senior Advertising Manager Michael Pyatt michael.pyatt@futurenet.com Account Director George Lucas george.lucas@futurenet.com

International

net is available for licensing. Contact the Licensing team to discuss partnership opportunities. Head of Print Licensing Rachel Shaw licensing@futurenet.com

PRINT SUBSCRIPTIONS & BACK ISSUES

Web www.myfavouritemagazines.co.uk Email enquiries contact@myfavouritemagazines.co.uk 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 Commercial Finance Director Dan Jotcham Brand Director Matthew Pierce 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 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 holds full FSC (Forest Stewardship Council) certification and accreditation

Disclaimer All contents Š2019 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.

4

june 2019


contents Issue 319: June 2019 : net.creativebloq.com

FEED

FEED

side project

13

Clients from hell

14

BEYOND PIXELS

15

Christian Coan shares all on his Instagram hashtag search API

Workspace

16

Tom Witcherley explains how photography equipment and plants help Make stamp its mark on the industry

The latest in our series of nightmare clients

Natalie de Weerd explains how archery helps her stay on target as a web developer

voices Keep brand near to heart 20

Paul Ferry examines the importance of brand expression in great web design

Essay

22

Charl van der Walt explores how the global internet is heading towards a schism

Respond to different ages 32

Marc Woodhead asks whether it’s time we create responsive sites for a range of ages

VOICES

33

INTERVIEW

34

Verne Ho talks about building virtual assistant Kit and what he’s learned about conversational interfaces

Lisi Linhart, the developer and speaker, discusses her passion for web animation

BIG QUESTION

Our experts highlight the people they think are the unsung heroes of web design

Change behaviour with UX 36

Robin Davies reveals how you can influence consumers with the power of UX

6

june 2019

26

SUBSCRIBE to net

Photo by Cynthia Nguyen

Q&A

Turn to

save money page 18 and receive and Take advantage of the to find out more about the savings on gifts Print and digital Bundle offer for subscribers


Contents regular

GALLERY

40

Mark Billen runs down his favourite websites of the month, including makemepulse’s Heavy-Metalesque rich fantasy landscape

regulars Exchange

08

Damien Fisher and Ross Chapman share expert advice and tips

Showcase Design Challenge

46

profile

50

how we built

56

Designers have a bash at making sites promoting a web design event

Series Eight on remote working and carving out a niche in the budding cannabis sector

Mallard & Claret explains how it helped bring London Vauxhall’s unique brand to life

Features

PROJECTS

19 Groundbreaking APIs 60

Use colour to shape ux

Tam Hanna takes the guesswork out of which APIs to use to add innovative features to your sites

Joshua Garity explores colour and shows you how to leverage specific hues to increase trust and revenue

68

Project

Develop a WebGL game with Unity – Part 1 76

Richard Mattka continues his series on Unity WebGL by showing you how to use it to create an in-browser 2D side-scroller game

Reduce cognitive load

82

The curb-cut effect

87

Choose a Linux dev tool

88

Daniel Schwarz looks at how you can clear obstacles blocking a smooth UI

Matt Northam on how keeping accessibility front of mind benefits all

Alexander Tolstoy explores which tools are available to web developers using Linux

Polish your solo UX process92

Neil Pearce reveals how solo designers can follow a simple but solid UX design process

june 2019 7


Send your questions to netmag@futurenet.com This month featuring... Damien Fisher Fisher founded digital marketing agency and web design studio Fishtank 10 years ago. Based in West Yorkshire, its client base spans the world. w: fishtankagency.com t: @teamfishtank

Ross Chapman Chapman is product/UX designer at Etch Sprints, where he runs design sprints, leads digital product design and coaches upcoming designers. w: www.lovedesignsprints.com t: @rosschapman

Practical advice from industry experts

QUESTION OF THE MONTH

Regarding ‘design sprints’, the word ‘sprint’ implies to me that you’ll be exhausted at the end of it. Is that the case? And, if not, do you think that ultimately another term for this process might help break down any resistance to it within an organisation? AJ, Norway

RC: No way! Exhaustion certainly isn’t the goal. A design sprint is simply a way to reduce the risk of bringing something new to the market, improve a failing feature or can be seen as a replacement to the usual ‘discovery phase’. I personally haven’t found resistance to calling it a design sprint within an organisation, as it sounds similar to a development sprint. However, I know in the enterprise space they’re often called other things such as concept projects. Resistance may come from the business not being ready to try a new way of working or adjusting their calendars. That’s why sharing the outcomes is so important and demonstrating opportunity cost. A design sprint can be a quicker and cheaper way to understand whether an idea or solution has any merit at all.

Despite the name, design sprints shouldn’t be exhausting; it’s just a quick way of deciding if an idea has any merit

Recruitment

Hiring hiccups As the owner of a small but growing digital agency, I’ve tried to advertise for web designers but have had no enquiries

8

june 2019

at all. I realise I need to be more proactive and go out and find people but don’t really know where to start. What do you advise in terms of first steps?

Name and address withheld


Q&As

3 simple steps How difficult do you find it to convince clients that going with a local agency, rather than a London one, is in their best interests? Rowena Carey, Wolverhampton

After digital agency Fishtank was founded 10 years ago, word quickly spread of the work it did and it no longer needs to take part in tendering opportunities

DF: We too have faced this problem. Within our sector, designers and developers are notoriously the hardest to recruit. The problem is the number of agencies versus a relatively small pool of credible talent. However, this will go full circle and there will be a period when you can recruit the talent on the basis that many agencies have gambled on securing projects to sustain the team they have assembled. I have seen this circle so many times in various guises and unfortunately luck plays a huge part. What we have done to negate this issue is to tap into the network of the local university and introduce work placements to second year students with a guaranteed job at the end of their degree. We repeat this process yearon-year, which provides a constant stream of talent. Secondly, don’t forget to promote your brand and ethos outside the agency. Make sure the business features on the digital landscape in news stories, award shortlists, online journals and being active and visible on social media. Become an agency where designers and developers would love to work and you should see an increase in CVs without advertising roles. Business

not so tender I’m in my first year of running my own

digital agency. Some other agency owners (a little boastfully) have told me that they rarely need to look for new business, because they get so much repeat business and word of mouth. As a rule of thumb, do you think that’s what all studios should be aiming for and, if so, what sort of timescale is reasonable to expect that to naturally happen?

Global thinking DF: Locality should not be considered an issue. A digital agency should aim to be working on a global landscape; after all, a website is created for the world to see. Time zone neutrality At Fishtank we have a nice blend of UK and international clients and with modern technology we negate any issues of time zones using applications like Slack, Asana, BugHerd or Google.

JJ, Manchester, UK

DF: I recognise your concerns and the comments you have heard are true of ourselves at Fishtank. It does not matter how great you think you are, in my experience tendering is a waste of time. Our success rate has been poor to the point we now won’t take part in any tendering opportunities. We now strictly focus our energy on customers who require our services. Equally don’t sell yourself short and stay true to the premise of why you created the business. When starting Fishtank 10 years ago, there was a gap in the market and we were able to bridge the void between designers and developers when creating engaging and functional digital platforms. Consequently, we created some sterling websites and associated marketing strategies. The word spread and referrals came very quickly. There is no time frame on this. Be the best you can be when the opportunity presents itself and the next project will follow.

Point of difference We are based in rural West Yorkshire but this works in our favour. The general association with London agencies is that regal brands with obscene budgets often run campaigns over an extended period. But not all projects can be campaigns and these agencies are not always interested in singular projects due to their various financial commitments.

june 2019 9


Network

COOL Stuff We learned This month Google launches Flutter 1.2 and Dart DevTools

Google’s announced the first feature update for Flutter, Flutter 1.2, at Mobile World Congress. With Flutter 1.2, developers will be able to integrate IAP purchases into their applications. Also announced was a new web-based suite of programming tools called Dart DevTools. https://netm.ag/2WhQnOy

THE POLL

What problem do you encounter most working with freelancers? Poor communication 25.00%

Personality clash 8.33%

Not understanding technical barriers to design 8.33%

Not meeting deadlines 25.00%

AI and web development

This report examines how AI is reshaping web development by offering users a more personalised experience. It also looks at how developers are realising they can cultivate a new kind of user experience that exploits the power of machine learning (ML) to dynamically adapt more quickly than ever before. https://netm.ag/2OlFx7B Google Duo video chat available on the web

Google has begun rolling out the web version of its Google Duo video chat service. Already available on Android, iOS and Chromebooks, the expanded support for the web will make it easier for users to chat via many different devices. https://netm.ag/2usfdzn

10

june 2019

They can’t follow your code / you can’t follow theirs 25.00%

They don’t understand your role 8.33%

From our timeline

What one piece of advice would you give to someone just starting out in the industry? Do not fear your client, they are individual people who can be approached, questioned and talked to. Do all three often, get them on your side, work with them, not for them. Your life will be easier and better for it. @adsevenfour Learn the language before you learn the framework. If you want to learn React, take the time to learn JavaScript first. It will make your learning easier and allow

you to extend the framework beyond what it’s capable of. @CraigPryde Find somewhere to work where you can learn from others. @Benjieboo “If you don’t use it, you lose it.” Sometimes ppl get caught up in learning a bunch of languages, then end up forgetting what they learned. So no matter what language you learn, make sure

that you also put in the time to build something. @DonnyFingerGuns 80% of success comes from people skills. Technical skills are only relevant if you can read situations, negotiate and communicate enough to identify how to apply these skills. @_LeonBrown Embrace failure! It’s okay not having an answer to all the questions. Learn that failure is a process and even the top engineers don’t remember the basics sometimes! @MattStenquist


TRY 5 ISSUES FOR

ÂŁ5

*

BIG SAVINGS ON OUR BEST-SELLING MAGAZINES SAVE

83%

SAVE

82%

SAVE

83%

SAVE

83%

SAVE

83%

SAVE

80%

For great savings on all of our magazines, see the entire range online

myfavouritemagazines.co.uk/spring192

Order Hotline 0344 848 2852 *TERMS AND CONDITIONS: The trial offer is for new UK print subscribers paying by Direct Debit only. Savings are compared to buying full priced print issues. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14 day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. Full details of the Direct Debit guarantee are available upon request. UK calls will cost the same as other standard fixed line numbers (starting 01 or 02) or are included as part of any inclusive or free minutes allowances (if offered by your phone tariff). For full terms and conditions please visit: bit.ly/magtandc . Offer ends 31 May 2019.


9000

People, projects & paraphernalia

This month Featuring...

CLIENTS from hell

14

This month a web dev finds out the client that dropped them has deployed their design’s doppelganger

Beyond PIXELS

15

Natalie de Weerd explains how her love of archery helps her stay on target in her role as a web developer

12

june 2019

Workspace

16

Tom Witcherley reveals how photography equipment and plants help Make stamp its mark on the industry

Profile for Future PLC

Net 319 (Sampler)  

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

Net 319 (Sampler)  

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