9000 9001

USER EXPERIENCE SPECIAL 46-PAGE GUIDE

Expert tutorials, techniques and inspiration

A WEEK IN
THE LIFE OF A STRATEGY&
UX DESIGNER RESEARCH
BE A
BETTER
UXER
PORTFOLIO
QUALIFICATIONS
JOB INTERVIEW 20 TOP
STRATEGIES
EXPERT ADVICE
UXAn TOOLS
THE
essential
collection
& STORYBOARD
HOW TO SKETCH

GOLDEN
RULES
OFUX
KEY RULES
AND BEST
PRACTICES ISSUE 285

CREATE PROTOTYPES
WITH ADOBE XD NEW
WIREFRAME WITH SKETCH
DESIGN UX-FRIENDLY FORMS TRENDS
WHAT TO LOOK OUT FOR
 Meta
Welcome

Welcome
THE WEB DESIGNER MISSION
To be the most accessible and inspiring voice for the industry, offering cutting- Steven Jenkins
edge features and techniques vital to building future-proof online content Editor

Are you experienced? Highlight

J
imi Hendrix wouldn’t have known what UX resources that you can get your hands on right now.
was, but he knew how to construct a song We have slipped in a case study from Lush that gives
that would give people a great experience. an insight into how UX can be applied in the real
It might be a slightly tenuous connection world. From here, discover key components of the
but UX is all about giving people a great design process including research and strategy and
experience. Like a great song, the better how to sketch and storyboard.
the experience you can give people, the Moving away from the design process, Leah Buley
more popular a site or app is likely to be. from InVision talks design teams and Joss Cook
This issue we bring together a whole host of UX reveals what happens in the typical week of a UX
features and tutorials to guide you through the world designer. There is top advice on how to produce a
of UX, to help you join the revolution or kickstart the better portfolio, get into UX design and ace an

“
next stage of your career. We kick-off this special issue interview. On the practial side we have tutorials on
with the key rules and best practices that any user how to prototype with Adobe XD using the Auto-
95 per cent of our
experience designer needs to know. Keeping these Animate feature, how to wireframe with the popular customers have
company we have 20 of the best UX tools and Sketch tool and design UX-friendly forms. Enjoy. already decided to
go ahead with us

“ The best UX people have a deep desire to make before we even pick
the world a better place and to enhance the lives of
up the phone
”
Fishfinger are an agency viewing digital design

”
through a distinctive lens. Web Designer finds
the people they are designing for out more. Page 30

Follow us on Twitter for all the news & conversation @WebDesignerMag

Visit our blog for opinion, freebies & more www.creativebloq.com

FREE – with your latest issue

Designerresources
71 Assets – 50 AI GradientduotoneactionsfromSparklestock
(worth $14)
– 16 Minimalistbusinesscardmockupsfrom
Sparklestock(worth$16)
– Tutorial files andassets

www.filesilo.co.uk/webdesigner

welcome ________________________________________________ 3
 Meta
Contributors Future PLC Richmond House, 33 Richmond Hill,
Bournemouth, Dorset, BH2 6EZ

Editorial
Editor Steven Jenkins
[email protected]
01202 586233
Art Editor Andy Salter

This issue’s panel of experts Acting Editor in Chief Claire Howlett

Senior Art Editor Will Shum
Production Editor James Price

Welcome to that bit of the mag where we learn more Contributors

Damian Rees, Mark Billen, Leon Brown, David Howell,

about the featured writers and contributors… Daniel Schwarz, Joss Cook, Neil Pearce, Leah Buley,
xƏȸǸ³ǝɖǔˢƺƫȒɎɎȒȅًǼƺɴnƺƺً³ɖɀǝkƺǼǼɵً!ǝƏȸǼǣƺRƏȸƳǣȇǕً
Matt Crouch
Cover Images
iStock / Getty Images
Photography
James Sheppard
All copyrights and trademarks are recognised and respected
Advertising
xƺƳǣƏȵƏƬǸɀƏȸƺƏɮƏǣǼƏƫǼƺȒȇȸƺȷɖƺɀɎ
Commercial Director Clare Dove
[email protected]
Senior Advertising Manager Mike Pyatt
[email protected]
01225 687538
Account Director George Lucas
Daniel Schwarz [email protected]
Daniel Schwarz is a full-stack International Licensing
áƺƫ(ƺɀǣǕȇƺȸǣɀƏɮƏǣǼƏƫǼƺǔȒȸǼǣƬƺȇɀǣȇǕِ!ȒȇɎƏƬɎɎǝƺnǣƬƺȇɀǣȇǕ
designer, web developer and team to discuss partnership opportunities.
a writer, editor, author and Head of Print Licensing Rachel Shaw
[email protected]
teacher at heart. Currently
Subscriptions
taking time off to build 0ȅƏǣǼƺȇȷɖǣȸǣƺɀ[email protected]
ÈkȒȸƳƺȸǼǣȇƺۭƺȇȷɖǣȸǣƺɀ0344 848 2852
uxtricks.design, a blog and ɮƺȸɀƺƏɀȒȸƳƺȸǼǣȇƺƏȇƳƺȇȷɖǣȸǣƺɀ+44 (0) 344 848 2852
ȇǼǣȇƺȒȸƳƺȸɀۭƺȇȷɖǣȸǣƺɀwww.myfavouritemagazines.co.uk
bookstore for levelling up RƺƏƳȒǔɀɖƫɀƬȸǣȵɎǣȒȇɀSharon Todd
your UX/UI design skills. This Circulation
Head of Newstrade Tim Mathers
issue he kicks off our UX
Production
special with a look at the key Head of Production Mark Constance
rules and best practices. Production Project Manager Clare Scott
Advertising Production Manager Joanne Crosby
Page 42 Digital Editions Controller Jason Hudson
Production Manager Nola Cokely
Management
Brand Director Matthew Pierce

“ into
!ǝǣƺǔ!ȒȇɎƺȇɎ ǔˡƬƺȸ Aaron Asadi

Have an idea, but not sure what to do with it? Don’t force it Commercial Finance Director Dan Jotcham
RƺƏƳȒǔȸɎۭ(ƺɀǣǕȇGreg Whittaker

a design; instead, maintain a creative outlet such as Printed byáǣǼǼǣƏȅJǣƫƫȒȇɀً‫¨זא‬ǼƏȇƺɎƏȸɵ«ȒƏƳً

”
Willenhall, WV13, 3XT

Dribbble or a scrapbook and save it as inspiration for later. Distributed by Marketforce, 5 Churchill Place, Canary Wharf,
London, E14 5HU www.marketforce.co.uk Tel: 0203 787 9001
ISSN 1745-3534

We are committed to only using magazine paper which is derived from

ȸƺɀȵȒȇɀǣƫǼɵȅƏȇƏǕƺƳًƬƺȸɎǣˡƺƳǔȒȸƺɀɎȸɵƏȇƳƬǝǼȒȸǣȇƺ‫ٮ‬ǔȸƺƺȅƏȇɖǔƏƬɎɖȸƺِ
ÁǝƺȵƏȵƺȸǣȇɎǝǣɀȅƏǕƏɿǣȇƺɯƏɀɀȒɖȸƬƺƳƏȇƳȵȸȒƳɖƬƺƳǔȸȒȅɀɖɀɎƏǣȇƏƫǼƺ
Matt Crouch Mark Shufflebottom Alex Lee managed forests, conforming to strict environmental and socioeconomic
standards. The manufacturing paper mill holds full FSC (Forest Stewardship
Matt is a front-end Mark is a professor of Alex is currently a UX !ȒɖȇƬǣǼ٣ƬƺȸɎǣˡƬƏɎǣȒȇƏȇƳƏƬƬȸƺƳǣɎƏɎǣȒȇ
developer at Vidsy in Interaction Design at Designer at Impression
ǼǼƬȒȇɎƺȇɎɀ۰‫ז׏׎א‬IɖɎɖȸƺ¨ɖƫǼǣɀǝǣȇǕnǣȅǣɎƺƳȒȸȵɖƫǼǣɀǝƺƳɖȇƳƺȸǼǣƬƺȇƬƺِǼǼ
London. With data-heavy Sheridan College. This issue Digital based in Nottingham ȸǣǕǝɎɀȸƺɀƺȸɮƺƳِzȒȵƏȸɎȒǔɎǝǣɀȅƏǕƏɿǣȇƺȅƏɵƫƺɖɀƺƳًɀɎȒȸƺƳًɎȸƏȇɀȅǣɎɎƺƳȒȸ
applications, it’s important he is creating prototypes & London. This issue he will ȸƺȵȸȒƳɖƬƺƳǣȇƏȇɵɯƏɵɯǣɎǝȒɖɎɎǝƺȵȸǣȒȸɯȸǣɎɎƺȇȵƺȸȅǣɀɀǣȒȇȒǔɎǝƺȵɖƫǼǣɀǝƺȸِ
that they work as planned. using Adobe XD, exploring be sharing his best pieces of IɖɎɖȸƺ¨ɖƫǼǣɀǝǣȇǕnǣȅǣɎƺƳ٢ƬȒȅȵƏȇɵȇɖȅƫƺȸ‫דזזז׎׎א‬٣ǣɀȸƺǕǣɀɎƺȸƺƳǣȇ
0ȇǕǼƏȇƳƏȇƳáƏǼƺɀِ«ƺǕǣɀɎƺȸƺƳȒǔˡƬƺ‫ي‬ªɖƏɵRȒɖɀƺًÁǝƺȅƫɖȸɵً ƏɎǝ ‫׏‬
In the latest part of his the ‘Auto-animate’ feature to advice and guiding you
‫׏‬ÈِǼǼǣȇǔȒȸȅƏɎǣȒȇƬȒȇɎƏǣȇƺƳǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇǣɀǔȒȸǣȇǔȒȸȅƏɎǣȒȇȒȇǼɵƏȇƳ
Redux series, he takes a look create transitions and using through making and is, as far as we are aware, correct at the time of going to press. Future cannot
at how to test each part voice commands to control presenting wireframes in ƏƬƬƺȵɎƏȇɵȸƺɀȵȒȇɀǣƫǣǼǣɎɵǔȒȸƺȸȸȒȸɀȒȸǣȇƏƬƬɖȸƏƬǣƺɀǣȇɀɖƬǝǣȇǔȒȸȅƏɎǣȒȇِçȒɖ
effectively. Page 86 the interaction. Page 62 Sketch. Page 70 are advised to contact manufacturers and retailers directly with regard
ɎȒɎǝƺȵȸǣƬƺȒǔȵȸȒƳɖƬɎɀٖɀƺȸɮǣƬƺɀȸƺǔƺȸȸƺƳɎȒǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇِȵȵɀƏȇƳ
ɯƺƫɀǣɎƺɀȅƺȇɎǣȒȇƺƳǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇƏȸƺȇȒɎɖȇƳƺȸȒɖȸƬȒȇɎȸȒǼِáƺƏȸƺ
ȇȒɎȸƺɀȵȒȇɀǣƫǼƺǔȒȸɎǝƺǣȸƬȒȇɎƺȇɎɀȒȸƏȇɵȒɎǝƺȸƬǝƏȇǕƺɀȒȸɖȵƳƏɎƺɀɎȒɎǝƺȅِ
ÁǝǣɀȅƏǕƏɿǣȇƺǣɀǔɖǼǼɵǣȇƳƺȵƺȇƳƺȇɎƏȇƳȇȒɎƏǔˡǼǣƏɎƺƳǣȇƏȇɵɯƏɵɯǣɎǝɎǝƺ
companies mentioned herein.

XǔɵȒɖɀɖƫȅǣɎȅƏɎƺȸǣƏǼɎȒɖɀًɵȒɖɯƏȸȸƏȇɎɎǝƏɎɵȒɖȒɯȇɎǝƺȅƏɎƺȸǣƏǼƏȇƳٖ
Joss Cook Sush Kelly David Howell or have the necessary rights/permissions to supply the material and
ɵȒɖƏɖɎȒȅƏɎǣƬƏǼǼɵǕȸƏȇɎIɖɎɖȸƺƏȇƳǣɎɀǼǣƬƺȇɀƺƺɀƏǼǣƬƺȇƬƺɎȒȵɖƫǼǣɀǝ
Joss the is Design Manager Sush is a freelance front-end David is a journalist with ɵȒɖȸɀɖƫȅǣɀɀǣȒȇǣȇɯǝȒǼƺȒȸǣȇȵƏȸɎǣȇƏȇɵٖƏǼǼǣɀɀɖƺɀƏȇƳٖȒȸƺƳǣɎǣȒȇɀȒǔ
at cosmetics company Lush, developer and digital over 20 years’ experience in ȵɖƫǼǣƬƏɎǣȒȇɀًǣȇƏȇɵǔȒȸȅƏɎȵɖƫǼǣɀǝƺƳɯȒȸǼƳɯǣƳƺƏȇƳȒȇƏɀɀȒƬǣƏɎƺƳɯƺƫɀǣɎƺɀً
specialising in UX/UI design. consultant based in the publishing and runs his own ɀȒƬǣƏǼȅƺƳǣƏƬǝƏȇȇƺǼɀƏȇƳƏɀɀȒƬǣƏɎƺƳȵȸȒƳɖƬɎɀِȇɵȅƏɎƺȸǣƏǼɵȒɖɀɖƫȅǣɎ
is sent at your own risk and, although every care is taken, neither Future
In this issue he reveals what Midlands. With more digital business, Nexus Publishing.
ȇȒȸǣɎɀƺȅȵǼȒɵƺƺɀًƏǕƺȇɎɀًɀɖƫƬȒȇɎȸƏƬɎȒȸɀȒȸǼǣƬƺȇɀƺƺɀɀǝƏǼǼƫƺǼǣƏƫǼƺǔȒȸ
a typical week is like for a UX products and services, it is In this issue he takes time ǼȒɀɀȒȸƳƏȅƏǕƺِáƺƏɀɀɖȅƺƏǼǼɖȇɀȒǼǣƬǣɎƺƳȅƏɎƺȸǣƏǼǣɀǔȒȸȵɖƫǼǣƬƏɎǣȒȇɖȇǼƺɀɀ
designer and gives an important that your forms out to talk to the small but ȒɎǝƺȸɯǣɀƺɀɎƏɎƺƳًƏȇƳȸƺɀƺȸɮƺɎǝƺȸǣǕǝɎɎȒƺƳǣɎًƏȅƺȇƳًƏƳƏȵɎƏǼǼɀɖƫȅǣɀɀǣȒȇɀِ
insight into how Lush work as well as possible. talented crew at
updated their till system. Here are some top ways to London-based agency
Page 60 get them in shape. Page 76 Fishfinger. Page 30

Charlie Harding Mark Billen

Charlie is a digital product
designer at Potato and has
Mark is a freelance writer
who has been writing about
Follow us! IɖɎɖȸƺȵǼƬǣɀƏȵɖƫǼǣƬ
ƬȒȅȵƏȇɵȷɖȒɎƺƳȒȇɎǝƺ
!ǝǣƺǔƺɴƺƬɖɎǣɮƺ Zillah Byng-Thorne
zȒȇ‫ٮ‬ƺɴƺƬɖɎǣɮƺƬǝƏǣȸȅƏȇ Richard Huntingford
worked with brands such as web design and technology Facebook: www.facebook.com/ nȒȇƳȒȇ³ɎȒƬǸ0ɴƬǝƏȇǕƺ
٢ɀɵȅƫȒǼ‫ي‬IÈÁ«٣
!ǝǣƺǔˡȇƏȇƬǣƏǼȒǔˡƬƺȸ Penny Ladkin-Brand

Google, RBS and Mozilla. In for over 15 years. In this issue www.futureplc.com Tel +44 (0)1225 442 244
this issue he reveals ten tips he takes a peek at some of WebDesignerUK
to produce a better the best-looking sites on the Twitter: twitter.com/
portfolio, how to get into UX web and gives you a little
design and how to ace a job insight into how they were webdesignermag
interview. Page 80 made. Page 16

4 __________________________________________________experts
 Meta

C ntents
Inside issue 285

Cutting-edge features, techniques and inspiration for web creatives

Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…
[email protected]
s

@WebDesignerMag
s

www.creativebloq.com

08 Generate NYC 2019

The conference for web designers is back in Cover focus
New York. Find out who’s speaking and teaching

09 Column
Experience UX founder Damian Rees asks if a
UX qualification is the best option

12 Webkit: the best must-try

resources out there
Discover the libraries and frameworks you need

16 Lightbox
A showcase of inspirational sites and the
techniques used to create them

30 Fishy Design
Fishfinger like to mix innovation, humour and
technical mastery. Find out how they do it.

38 Back issues
Catch up on any issues of Web Designer that
you’ve missed by downloading a digital edition

40 Get into UX
Our user experience special issue kicks off here.
Check this page to find what’s inside the section

92 Hosting listings
An extensive list of web hosting companies.
Pick the perfect host for your needs

94 Course listings
Want to start learning? Check out what courses
are out there with this list

98 Next month
See what’s in the next issue of Web Designer 40

16 20 30

6 ________________________________________________ contents
UX SPECIAL FILESILO
42 The golden rules of UX 96 Get the latest must-have
UX is spread across a wide spectrum. resources and videos
Check out the key rules and best practices s  "* (SBEJFOU EVPUPOF BDUJPOT GSPN
Sparklestock (worth $14)
49 Case study: Lush s  .JOJNBMJTU CVTJOFTT DBSE NPDLVQT
Design manager Joss Cook reveals how Lush GSPN 4QBSLMFTUPDL XPSUI 
replaced its existing till system
42
50 20 top tools and resources
" DPMMFDUJPO PG UIF CFTU 696* EFTJHO UPPMT XJUI
essential sites, apps, kits, templates and toys

54 Strategy and research

Doing research and deciding on a strategy are
key to ensuring a better user experience

56 How to sketch and storyboard

1SFQBSBUJPO JT FTTFOUJBM (FU B DPMMFDUJPO PG UJQT
and techniques for sketching and storyboarding 50
59 Design and the bottom line
Leah Buley, Director of Design Education at 7JTJU UIF Web Designer online shop at
*O7JTJPO SFWFBMT SFTVMUT PG SFDFOU HMPCBM TUVEZ myfavouritemagazines.co.uk
for the latest issue, back issues and specials
60 Week in the life of a UX designer
No two weeks are the same. Find out what it’s
like to work as part of a design team
DIGITAL EDITION
Do you want to get your hands on a digital edition?
80 Be a better UXer
(FU UFO UJQT GPS B CFUUFS QPSUGPMJP IPX UP HFU JOUP 69 Head to your preferred app store, download,
design and prepare for a job interview 80 install and purchase the issue of choice
Google Play — bit.ly/2wetvGp
84 New trends iTunes — apple.co/2igtBYq
What is currently popular and what is emerging
in the world of user experience. Find out.

TUTORIAL
62 Prototype with Adobe XD
Design seamless transitions with the Auto-
Animate feature and control with your voice 62
70 Wireframing with Sketch
Learn what you need to know to create, refine
and present your wireframes
© iStock / Getty Images Plus; scyther5

76 Design UX-friendly forms Subscribe

*OUSPEVDF
69
QSBDUJDFT
UP
HJWF
VTFST
B
CFUUFS

experience and help increase conversions
today and
86 Write tests for Redux save
applications bit.ly/2sGwB3h
Use Jest to create unit tests for data stores 70

contents _________________________________________________ 7
 News
CONTACT US AT: [email protected] | @WebDesignerMag

Header The tools, trends and news to

inspire your web projects
STAT
ATTACK
SOCIAL
Are you going to MEDIA
Facebook is number
Generate NYC 2019?
The web conference for web designers is back in New York.
one, but what about
the rest?

Check out the speakers, workshops and how to get a ticket Facebook

72.55%
G
enerate – the number Designing Great iPhone Apps. can do about it. Miriam is an author,
one conference for web According to his Twitter bio (@ performer, musician, designer and
designers – is heading bigmediumjosh) he is also Maine’s 11th web developer – working with CSS Sitting in top spot across
back to NYC on the 24th strongest man. Now you know who he Tricks amongst others. She will be the world
and 25th of April for another year, is, and how strong he is, but what is he hosting a workshop – Advanced CSS
bringing with it top class speakers and going to be revealing at Generate NYC for Modern Applications – and a talk
skill-busting workshops. 2019? All we are going to tell you at entitled Dynamic CSS: Layouts &
Last year saw a host of well-known this time is his talk is titled AI is your Beyond. Jim Kalbach is a noted author, Pinterest

14.25 %
faces including Abby Covert, Amélie new design material. You can find out speaker and instructor in user
Lamont, Brenda Storer, Cynthia more at www.generateconf.com. experience design, information
Savard Saucier, Dan Mall, Henri Josh is not the only star of the architecture and strategy. He is
Helvetica, Val Head and Wes Bos. show. The 2019 line-up also includes currently Head of Customer Inspiration more popular
This year the trend continues with Sophia Prater, Miriam Suzanne, Jim Experience at MURAL, the leading than words?
a keynote from the mesmerising Josh Kalbach and Sam Richard. Sophia is online whiteboard. He will be hosting
Clark. Josh is a UX design leader who the founder of Rewired, a UX studio a workshop – Design & Innovation
helps organisations build products for based in Atlanta, GA. She’s also the Sprints – on the 24th April. Last, but
what’s next. He is the founder of Big “chief evangelist” for object-oriented not least, we have Sam Richard. A Twitter

7.26 %
Medium, a New York design studio UX, a methodology she began developer with design tendencies,
specialising in future-friendly popularising back in 2013. Currently Sam is currently working at Google
interfaces for artificial intelligence, Sophia is focused on bringing the where he helps companies build and
280 charcaters is all
connected devices and responsive magic of OOUX to companies and deliver their applications for Chrome you need
websites. His clients include Samsung, teams around the world. She will be and Chrome OS. He will be doing a talk
Time Inc, ExxonMobil, About.com, hosting a workshop titled on Design System Magic with Houdini.
TechCrunch, Entertainment Weekly, Object-Oriented UX: simplify your To view the full line-up and get
eBay, O’Reilly Media and many others. pixels and your process and more details head to www.
As if that wasn’t enough Josh has also presenting a talk Hunting and generateconf.com. To get your ticket YouTube

2.91%
written several books, including Gathering in a Digital World: Why now head to www.generateconf.
Designing for Touch and Tapworthy: humans are confused and what we com/generate2019/begin.

Popular but nowhere

near Facebook

Instagram

2.15 %
e Everybody loves
to see your pics

today and save

40%
Source: http://gs.statcounter.com
(correct as of January 2019)

https://bit.ly/2qLxVl4

8 _____________________________________________________ news
 Header
Comment

Do you need a
UX qualification?
Damian Rees considers whether a UX qualification is the best option

A
common question I get asked is whether someone needs a qualification to
take up a career in UX. The reality is that it depends on the person or
organisation that’s hiring. It’s an unregulated field that pretty much allows
anyone to slap UX next to their existing job title and command a higher
wage. While I find it hard to give a clear yes or no answer to this, what I can
do is unpack my approach from an employer’s perspective. But I would heavily caveat this
with the fact that other employers will see things differently.
In my experience as a long-term UX mentor and someone who has hired people for UX
roles for web agencies, the BBC and my own business, I have a process when assessing
someone for a role. I’m generally not too interested in people who have done a General
Assembly-type course. In my view these courses are a great insight into what a UX role
entails, and I certainly wouldn’t discourage anyone from doing a course like this, but I don’t
feel they are enough to give me confidence that I could hire and send someone out into the
real world on a project. Without other experience, I would only invest time in someone with
this qualification if we had a junior role available and the other candidates were not great.
If someone has done a course in UX, has some digital experience and has a degree in
psychology with a BSc rather than a BA, then that might well push them into an interview
pile. A background in experimental psychology provides an excellent foundation, with a
deep understanding and appreciation for how humans process information and make
decisions. The added Bachelor of Science aspect ensures that they bring a clear
understanding of the experimental method, how to design tests, how to observe and stay
impartial and how the experimenter can influence the behaviour of the participants – all of
which is critical in user research.
If a candidate has a Masters in HCI (human-computer interaction) or a related field, then I
would be interested. There are some excellent courses available that would give me
Damian Rees confidence that this person has a deeper understanding of the field and has some good
Founder & UX director coursework to demonstrate their knowledge. This might raise my interest and get them into
experienceux.co.uk the maybe pile. Coupled with experience in the field, and/or a BSc in psychology, then that
would move them across to the interview pile.
If a candidate pops up with none of the above but has strong experience in design –
particularly in product or digital design – and has played a UX role before then that probably
puts them into the interview pile. It would depend on factors like how much experience they
had and with what types of organisation and projects.
What really matters Once into the interview, I focus on soft skills and the intrinsic motivations of the
candidate. I’m looking for them to demonstrate their empathy, compassion and ethics. These
is not whether you can characteristics are an essential part of a good UX professional. In addition, I want to see some

create wireframes in emotional intelligence from them when describing their experiences on projects – how they
read emotions of others and reacted accordingly, and how they managed their own

Sketch or if you know emotions. I’ll look for humility when talking about their role in projects, how they made
decisions and had to change their thinking. Finally I look for their desire to do UX beyond the

how to code. It’s the surface level. I believe the best UX people have a deep desire to make the world a better
place and to enhance the lives of the people they are designing for.
soer skills and who I get frustrated when I look at job adverts listing all the tools and qualifications they want
people to have in a UX role. What really matters is not whether you can create wireframes in
you are as a person that Sketch or if you know how to code. It’s the softer skills and who you are as a person that

makes the difference makes the difference between an average and an excellent UX person. So before you pursue
a UX qualification, first dig deep and assess who you are as a person, and if you fit the profile
I’ve described then focus on how to demonstrate that through the work you’ve been doing.

Comment_______________________________________________9
 24 – 25 APRIL 2019

BOOK YOUR TICKET

www.generateconf.com

INTERESTED IN SPONSORING GENERATE?

Please contact Michael Pyatt, Advertising Manager
[email protected] | + 44 (0)122 568 7538

Brought to you by
 Combining the authority of net magazine, Creative Bloq and Web Designer magazine,
this unmissable event brings together a community of like-minded individuals, comprising
of web designers, web developers, graphic designers and creative minds for two days
of education, inspiration and networking.

2019 Speakers and Sessions Include

Josh Clark
Keynote
AI is your new design material

Miriam Suzanne
Workshop
Advanced CSS for Modern Applications
Dynamic CSS: Layouts & Beyond

Jim Kalbach
Workshop
Design & Innovation Sprints

Sophia Prater
Workshop
Object-Oriented UX: Simplify your pixels
and your process
UX for Lizard Brains

Sam Richard
Design System Magic with Houdini

And many more!

www.generateconf.com #generateconf
webkit Discover the must-try resources that
will make your site a better place

Jest
https://jestjs.io/en
Jest is a JavaScript testing framework with a
focus on simplicity that works with projects
using Babel, TypeScript, Node, React, Angular
straight out of the box with most JavaScript
projects, it has a well documented API and a
host of excellent features that you need to
and Vue. It needs zero configuration, works check out.

TOP 5
UXCONFERENCES
FOR 2019
Into UX? Then check out this selection
of conferences to boost your UX skills

UX Camp Brighton UX Copenhagen

www.uxcampbrighton.org https://uxcopenhagen.com
An ‘unconference’ for anyone involved or A two-day conference for professionals
interested in user experience design, user working with and around User Experience
research, usability, accessibility and more. Design set in the Danish city of Copenhagen.

12 _____________________________________________ resources
 Header
Resources
CONTACT US AT: [email protected] | @WebDesignerMag

Blobmaker WebsiteVoice
www.blobmaker.app https://websitevoice.com
This is an easy-to-use web app that allows Introducing voice offers greater accessibility for users
users to create, customise (colours/shape) and also convenience. This tool turns articles into
and then download as an SVG. audio quickly and easily.

wiv.js Color Koala

https://jjkaufman.github.io/wiv.js https://colorkoala.xyz
What can you do with a <div> tag? Lots, but Want to quickly create a cool colour palette?
can you make them wiggly? Check out this Choose light/dark/bright and a hue and
library for a bit of fun. generate a new palette with a single click.

UXinsight UX in the City UX London

www.uxinsightevent.com https://uxinthecity.net/2019/manchester https://2019.uxlondon.com
An international UX research conference that Located in Manchester this is a hands-on, Learn from the authors, founders, directors
gives the community a boost by sharing User Experience and Design conference for and designers who are helping shape the
knowledge, experiences and ideas. the web and mobile community. industry and push it forward.

resources ______________________________________________13
webkit Discover the must-try resources that
will make your site a better place

Design Library
https://wpdesignhub.com
WordPress is the base for many a website,
and the recent update means that it is even
easier thanks to the new Gutenberg editor.
section designs for the new editor, meaning
designers can create complex page designs
much faster than ever before. Check out the
This site provides an impressive collection of free designs or sign up for the pro designs.

TOP 5
WEB DESIGN
CONFERENCES
Get yourself a seat at the biggest and
best conferences coming your way soon

UpFront Pixel Up
https://upfrontconf.com https://pixelup.co.za
If you make stuff for the web then this Three days of UX, design, content and
conference could well be for you. Check out research in Cape Town, including 16 speakers
the speakers for this inclusive event. and two workshops.

14 _____________________________________________ resources
 Header
Resources
CONTACT US AT: [email protected] | @WebDesignerMag

Accessibility statement Blendy

www.w3.org/WAI/planning/statements https://blendy.ml
Accessibility means inclusivity and an accessibility This is a tool that lets users play around with
statement is great to let users know what you are background blend modes. Preview blend modes,
doing. Use this generator to get one done. change colours and apply gradients.

WDS-1 Percy
https://wds-1.com https://percy.io
This is a Web Drum Sequencer. Choose from Percy is an all-in-one visual review platform. It
a host of different samples, patterns and touts itself as the ‘new way to design, develop,
presets and get creating. and deliver software with confidence.’ Give it a try.

Offset Generate Activate

www.iloveoffset.com www.generateconf.com www.activateconf.com
An inspirational, educational and vocational The conference for web designers heads A three-day event that looks to build bridges
conference for the design industries. There back to NYC for 2019. Speakers include UX between future and current workforces to
are 100 speakers too to check out. design leader Josh Clark. See you there. increase interest in careers in technology.

resources ______________________________________________15
 Designer:
360 Mirror my360mirror.com Stella Petkova behance.net/stelfy

16 ________________________________________________ lightbox
 LightBox

Bulgaria-based Interactive Art Director Stella Petkova presents this

stunning 3D web shop for a revolutionary 360-degree mirror

Colours

#AEADAA #999999

#434245 #1DD6F2

Tools
WebGL, GSAP, SVG,
PayPal

Fonts

The Graphik font family

by Christian Schwartz,
and available via
Commercial Type, is used
exclusively on all site text
in Extralight, Regular and
Semibold variants.

lightbox_________________________________________________17
 Top
Aside from parallax scrolling techniques, draggable sliders are
used to control the expanding 3D virtual mirror model
Above
Navigate down to the 'Why 360 Mirror' section of the
single-page site to find clickable hotspots detailing key
product advantages
Right
The mobile version of the site is almost identical, providing a
seamless browsing and buying experience on smaller screens

18 ________________________________________________ lightbox
 LightBox
g
360 Mirror

Make an animated
extending menu
Use CSS and JavaScript to create content space and reveal navigation options

1. Document initiation for(var i=0; i<nodes.length; i++){ achieved by using padding on each side, so that
Start with the HTML document. This consists of the nodes[i].style.animationDelay = time+”s”; they are clearly distinguishable from each other.
document container HTML tag, containing a head and time += 0.2;
body section. The head is used to reference the external } nav.extend > a{
CSS and JavaScript resources, and the body is used to *** STEP 4 HERE display: none;
contain the visible page content that will be created next. }); position: relative;
opacity: 0;
<!DOCTYPE html> 4. JavaScript: icon management padding: 0 1em 0 1em;
<html> A second search is also required by JavaScript. This text-decoration: none;
<head> time the focus is on finding the first child element color: #777;}
<title>Extending Menu</title> inside the identified navigation containers. This
<link href=”styles.css” rel=”stylesheet” element has a click event applied to toggle the 7. Open states
type=”text/css” /> application of the 'open' class to its parent element, JavaScript applies and removes the open class to
<script src=”code.js”></script> the navigation container. As a result, CSS can be the navigation icon that has been clicked. This class
<body> used to define specific styling based on whether the is used to specify presentation changes when the
*** STEP 2 HERE navigation is 'open' or not. navigation is open. Firstly, on the icon a rotate
</body> transform is applied, which will appear animated due
</head> var nodes = document.querySelectorAll(“nav. to the transition applied in step 5. Secondly, the
</html> extend > *:first-child”); navigation links are changed to display as an
for(var i=0; i<nodes.length; i++){ inline-block to become visible, along with the 'open'
2. Navigation content nodes[i].addEventListener(“click”,function(){ animation to control their appearance.
The example content consists of a navigation this.parentNode.classList.toggle(“open”);
container that stores a collection of links. The only }); nav.extend.open > *:first-child{
exception to this is the first element of the navigation } transform: rotate(45deg);
container, which will be used as the interaction icon. }
Take note of how the navigation container has the 5. CSS: navigation icon nav.extend.open > a{
'extend' class applied – this will be used to identify that Create a new file called 'styles.css'. This step sets the display: inline-block;
this navigation is to have the effect applied. appearance of the first child of nav elements using animation: open 1s forwards;}
'extend'. A bigger font size, along with inline-block
<nav class=”extend”> display, enables it to be automatically positioned 8. Open animation definition
<span>+</span> alongside the navigation links, but with the ability to The last step is to define the opening animation
<a href=”#”>One</a> be treated like a block. A transition is set to the required for step 7. With links set to use relative
<a href=”#”>Two</a> transform property to enable step 7 to trigger an positioning, this animation starts the navigation links
<a href=”#”>Three</a> animation effect. two characters before their natural text flow position
<a href=”#”>Four</a> and animates them to where they should be.
</nav> nav.extend > *:first-child{ Opacity starts from invisible to fully visible, making
display: inline-block; each link appear into view as they animate.
3. JavaScript: link management cursor: pointer;
Create a file called 'code.js'. This step searches for all user-select: none; @keyframes open {
of the links inside the navigation(s) using the 'extend' -moz-user-select: none; 0% {left:-2em; opacity:0;}
class. Each link found has an 'animationDelay' style transition: transform .5s; 100% {left:0; opacity:1;}
applied, which is calculated in relation to its index font-size: 2em; }
position. As a result, any CSS animation applied to transform: rotate(0deg);
these links will appear in ascending order based on }
the link position. Note how this code is inside a 'load'
event listener applied to the window. 6. Navigation links
Links inside the navigation container using the
window.addEventListener(“load”, function(){ extend class also need styling. To be hidden by
var time = 0; default they use relative positioning, so that
var nodes = document.querySelectorAll animation can move them towards their natural text
(“nav.extend > a”); flow location. Horizontal spacing between links is

lightbox________________________________________________ 19
Game of the Year gameoftheyear.withgoogle.com

20 _______________________________________________ lightbox
 LightBox

Designer: Google
Google Brand Studio blog.google demonstrates
its natural
speech
synthesis
technology
WaveNet
with this
entertaining,
mobile-first
quiz about
the year's
searches

Colours

#4285F4 #FBBC04

#EA4335 #33A752

Tools
Google Cloud, Google API,
WaveNet, Hammer.js

Fonts

Unsurprisingly, the site’s

text is wholly styled using
the proprietary Google
Sans typeface developed
for the brand, applied
here in Regular and
Medium weights.

lightbox_________________________________________________21
Above
Slider controls allow you to
customise the host’s voice in
terms of speed or pitch, hinting
at WaveNet’s power
Right
If you opt to enter your name,
the quiz’s virtual host will
pronounce it when giving you
your final score
Below
Questions are based around
2018’s trendiest search terms
and can be answered quickly
with a click, tap or swipe

22________________________________________________ lightbox
 LightBox
g
Game of the Year

Create an animated
off-kilter title
A selection of animations to make a page title appear unusually balanced

1. Initiate HTML document *** STEP 4 HERE forwards;

The first step is to define the webpage document } }
with HTML. It consists of the HTML document }); .animate.forwards > span{
container, which stores a head and body section. animation: animateForwards 1s ease-in-out
While the head section is used to load the external 4. JavaScript: modifications forwards;
CSS and JavaScript resources, the body is used to The animation items from step 3 need to be updated }
store the page content created in the next step. so that their word content is contained inside a span
element. Firstly, the existing HTML content is reset to 7. Mixed animation
<!DOCTYPE html> blank, then a loop is used to make the word in the The mixed animation is defined using the same settings
<html> identified 'words' list a span element. Additionally, an used for the forwards and backwards animations.
<head> 'animationDelay' style is applied – calculated in Instead of applying the animations to every child of the
<title>Off Kilter Text Animation</title> relation to the initial delay specified in step 3 and the parent, the nth-child selector is used to apply alternating
<link rel=”stylesheet” type=”text/css” href= word’s index position. animation settings. The backwards animation is applied
”styles.css”/> to every even-number child, while the forwards
<script src=”code.js”></script> nodes[i].innerHTML = “”; animation is applied to every odd-number child.
</head> for(var i2=0; i2<words.length; i2++){
<body> var item = document.createElement(“span”); .animate.mixed > span:nth-child(even){
*** STEP 2 HERE item.innerText = words[i2]; animation: animateBackwards 1s ease-in-out
</body> var calc = (delay+((nodes.length + i2)/3)); forwards;
</html> item.style.animationDelay = calc+”s”; }
nodes[i].appendChild(item); .animate.mixed > span:nth-child(odd){
2. Page body content } animation: animateForwards 1s ease-in-out
The page content consists of three h1 title tags that will forwards;
show the different variations of the animation effect. 5. CSS word presentation }
While any text can be inserted into these tags, their Create a new file called 'styles.css'. This step sets the
animation is defined by the names in the class attribute. presentation rules that will be part of every word 8. Animation definitions
The presentation and animation settings for these class element in the animation, controlled by their span The animations used in steps 6 and 7 are made with
names will be defined in the CSS from step 5 onwards. tag. Display as block, combined with centred text an initial 'from' starting position, with no vertical
alignment, will result in each word appearing on a position or rotation adjustment. The 'to' position is the
<h1 class=”animate backwards”>The Animated separate line horizontally aligned to the middle of its final state of the animation, which sets the elements
Title</h1> container. Relative positioning will be used to with an adjusted vertical position and rotation state.
<h1 class=”animate forwards”>The Animated animate in relation to its text-flow position. Slightly different ending settings are used for both
Title</h1> animations to avoid the text becoming unreadable due
<h1 class=”animate mixed”>The Animated Title .animate span{ to overlap in mixed animations.
</h1> display: block;
position: relative; @keyframes animateForwards {
3. JavaScript: search and define text-align: center; from { top: 0; transform: rotate(0deg); }
Create a new file called 'code.js'. The purpose of this } to { top: .9em; transform: rotate(-15deg); }
step is to find all page elements with the 'animate' }
class and create an array list representing each word 6. Backwards and forwards @keyframes animateBackwards {
of the inner text. The initial animation delay is also Animation elements that have the backwards and from { top: 0; transform: rotate(0deg); }
defined in this step. Page content is not available forwards class have a specific animation applied to to { top: 1em; transform: rotate(25deg); }
until the page has fully loaded, so this code is being them. This step defines the animation to apply to }
placed inside the window’s 'load’ event listener. span elements whose parent container has both the
'animate' and 'backwards' or 'forwards' class. Note
window.addEventListener(“load”, function(){ how there is no space between the 'animate' and
var delay = 2; 'backwards' class reference, meaning the parent
var nodes = document.querySelectorAll element must have both.
(“.animate”);
for(var i=0; i<nodes.length; i++){ .animate.backwards > span{
var words = nodes[i].innerText.split(“ “); animation: animateBackwards 1s ease-in-out

lightbox________________________________________________ 23
 Designer:
Victor Work 19” victor.work/home Victor Luis Costa http://victor.work

24________________________________________________ lightbox
 LightBox

The portfolio of South America’s Victor Costa showcases not only

stellar project work but also an impressive use of technology

Colours

#DEDEDE #000000

#A18985 #BC435E

Tools
WordPress, jQuery,
TweenMax (GSAP)

Fonts

GT Sectra Display font

designed by Moiré’s Marc
Kappeler and Dominik
Huber, plus Noël Leu of
Grilli Type, appears in
Regular Italic.

Helvetica and Helvetica

Light by LinoType is a
system font that features
alongside the classic Times
New Roman.

lightbox________________________________________________ 25
 Above
An initial splash page
provides a very stark and
simple choice between
“Normal” and “High
Performance” versions
Left
Various featured case
studies, for clients such
as Adidas, provide
eye-catching imagery of
Victor’s UI designs across
devices.
Below
Scrolling between case
projects on the main
menu triggers a highly
sophisticated 3D ripple
effect through each
preview image.

26________________________________________________ lightbox
 Li htBox
Victor Work 19”

A title intro image slide effect

A picture speaks a thousand words. Use this fancy effect as part of a titled gallery or page introduction

1. Page template background: #000; after a one second delay set by “transition-delay”.
The first step is to define the web page. While the HTML }
element represents the page as a HTML document, this article:target{
is used to store a head and body section. While the 5. Article setup left: 0;
head section is used to load the external CSS and The article containers are set to use absolute }
JavaScript resources, the body section is put in place to positioning and with a size to match the user’s article:target > *{
store the visible page content that’s created in step 2. screen. Articles should only be visible when selected opacity: 1;
from the navigation, hence their default co-ordinates font-size: 3em;
2. Page content are set to be positioned out of view using a negative color: #fff;
The main content consists of a navigation and two left co-ordinate. A default black colour is applied to transition-delay: 1s;
article containers. While the navigation stores links the background, while the default content colour is max-height: 1em; }
that reference the article containers via their ID, the set to white.
articles store the content to display for the screen 8. Unique text attributes
navigation. For simplicity, each of the articles use two article{ Some unique styles are required for the span
span elements to contain text, followed by an image. position: absolute; elements. The data-tag attributes applied to the
left: -100vw; element containers created by Javascript are used
3. JavaScript manipulation height: 100vh; to identify the elements containing a span element.
Create a new file called “code.js”. Javascript is used to width: 100vw; Each of the span elements can be referenced using
alter the page content setup in order to keep the overflow: auto; this combined with the nth-child selector, upon
CSS simple. Specifically, a search identifies each first background: #000; which co-ordinates are set using top, left, bottom
level child element inside the articles so that they color: #fff; and right.
can be wrapped inside a span tag. A “data-tag” }
attribute is also applied to these span elements in article:target > [data-tag=”span”]:nth-
order to overcome the inability of CSS to select 6. First level article children child(1){
parents that contain a specific type of element. All first level children inside the article share a set of top: 20vh;
attributes – i.e. the Javascript created span containers. left: 5vw;
window.addEventListener(“load”, function(){ While absolute positioning allows them to be placed }
var nodes = document.querySelectorAll anywhere inside their parent article, the transition will article:target > [data-tag=”span”]:nth-
(“article > *”); animate any changes to their max-height and opacity. child(2){
for(var i=0; i<nodes.length; i++){ Max-height, opacity and overflow are set to hide bottom: 20vh;
var clone = nodes[i].cloneNode(true); visibility of these elements. TranslateY of transform is right: 5vw;
var newNode = document.createElement set to allow position handling of these elements to be }
(“span”); managed from below their middle.
newNode.setAttribute(“data-tag”,clone. 9. Image Attributes
tagName.toLowerCase()); article > *{ The child item containing the image is referenced
newNode.appendChild(clone); display: block; with the help of the applied data-tag attribute set to
nodes[i].parentNode.replaceChild position: absolute; “img”. Its max-height, width and position co-ordinates
(newNode, nodes[i]); transition: max-height 1s, opacity 1s; are set in relation to the screen, allowing it to appear
} opacity: 0; responsively. The inner image is also set display at a
}); overflow: hidden; size matching its parent container. Setting the image
height: 100vh; width to bottom helps with the reveal effect when
4. CSS: navigation max-height: 0; the parent span opens.
Create a new file called “styles.css”. A feature for user color: #fff;
convenience, this step sets the navigation to appear font-size: 3em; article:target > [data-tag=”img”]{
across the top of the screen using fixed positioning. transform: translateY(-50%); } max-height: 50vh;
As a result, the menu will stay in the same position width: 50vw;
regardless of whether the page is vertically scrolled 7. Article switch on bottom: 0;
to a different position. The target selector is used on the article containers left: 25vw;
when they are targeted via the URI via its ID. Firstly, transition-delay: .5s;
nav{ articles are positioned into view by setting their left }
position: fixed; co-ordinate to zero. Secondly, the first level span article [data-tag=”img”] > img{
top: 0; containers are set to display with full opacity and position: absolute;
width: 100%; one character height. The changes are set to be width: 100%;
z-index: 9999; animated using the transition applied in step 6, but bottom: 0; }

lightbox________________________________________________ 27
 andreceive

WIRELESS
With a subscription to
Web Designer you’ll...
- save money off the
cover price
- never miss an issue
- receive 13 issues a year

WORTH

£35
IT’S EASY
OR CALL: 0344 848 2852 AND QUOTE HP19
SUBSCRIBING FROM OVERSEAS? VISIT BIT.LY/2MCDARC
28______________________________________________subscribe
 PLUS with your
subscription you
have access to
900+ FREE RESOURCES
from previous issues
with FileSilo. See page 96

CHOOSEYOURPACKAGE! *
PRINTEDITIONONLY ONLY PRINT&DIGITALBUNDLE ONLY
£29.75
SIX-MONTHLY
£34.50
SIX-MONTHLY

6 months of Web Designer

g in print,
p , 6 months of Web Designer
g in p
print
plus headphones and digital, plus headphones
* OFFER NOT AVAILABLE FOR DIGITAL EDITION ONLY PACKAGE

Terms and conditions: This offer entitles new UK Direct Debit subscribers to pay just £29.50 every six months plus receive KitSound Harlem Wireless
Headphones. Gift is only available for new UK subscribers and is subject to availability. Please allow up to 60 days for delivery. In the event of stocks
being exhausted we reserve the right to replace with items of similar value. Prices and savings quoted are compared to buying full-priced print issues.
You will receive 13 issues in a year. Your subscription is for the minimum term specified and will expire at the end of the current term. 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. 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: www.bit.ly/magterms. Offer ends March 31st 2019.

subscribe _____________________________________________29
è;0A
,-;1/6
VIEWING DIGITAL DESIGN
THROUGH A DISTINCTIVE LENS,
FISHFINGER HAS A SINGULAR
APPROACH AND PERSPECTIVE
THAT BRANDS HAVE FLOCKED
TO. MIXING INNOVATION,
HUMOUR AND TECHNICAL
MASTERY, THIS AGENCY IS
WORKING TO DEFINE TODAY’S
DIGITAL LANDSCAPES

30 __________________________________________________profile
 ?07
FISHFINGER

?0)<
Branding, web design, illustration,
animation and video production

?0-:-
4 Bittacy Business Park,
Bittacy Hill, London, NW7 1BA

web
fishfinger.me

3-A +41-6<;
[1] King
[2] WWF
[3] The Association of
British Insurers
[4] Riot Games
[5] Google

profile____________________________________________________31
 here is nothing typical repeat the same successes for my dad’s other four
about Fishfinger: from businesses. As time went on, I had more and more
the design of its ideas about how to expand the group of companies
website to the attitude but didn’t have the necessary skills to implement
of its founder, this them. To get things moving quickly, I found two very
agency approaches talented young designers who brought a new level
each project with a of excitement to the group that I’d been missing.
fresh perspective that “After the work for these companies was
is rare in a design finished, I didn’t want to let go of the strong team I’d
environment where created. I knew we could do the same exciting work
originality can be hard for other companies. Also, I had the feeling that it
to come by. was vital for me to achieve something off my own
“The birth of Fishfinger was unusual,” founder back. At this point, the idea of Fishfinger was born.”
and director Richard Salmon explained to Web Undoubtedly one of the most unusual elements
Designer. “I studied product design at Leeds of this agency is its name. Richard explained how
University, and I’ll be the first to admit that my this came about: “I believe the agency name is vital.
graphical skills are suspect, to say the least. My It has also played a significant role in the type of
interest has always been in the problem-solving clients that approach us. A name instantly tells your
aspect of design. At Leeds, and even before then at audience what you’re about, whether you take
school, I made sure to surround myself with the yourself seriously, your personality, even the type of
most talented people for team projects and life in work you do. No one goes to an agency called
general. It gave me the extra drive and knowledge Fishfinger for something typical and boring.
that great things come when working alongside Richard continued, “We sat around a table
gifted people.” coming up with names, with nothing quite sticking. I
For Richard, the path to starting Fishfinger remembered a story my dad told me about how, in everything to us,” Richard said. “When we launched,
began after his formal education was completed. the early 1980s, ever the entrepreneur, he tried to we were going to have a wafer-thin portfolio, so we
“When I finished university, I went to work for my set up a production company called Fishfinger. Its needed something to make us stand out from the
dad’s air conditioning company as a summer temp, logo was a photo of two fish fingers on a plate with crowd. We wanted to create something that no
as I had done every year since I was 15 years old. It some peas and a hefty squirt of tomato ketchup. other agency had done, so we spent a lot of time
happened to be a quiet summer due to the Needless to say, this particular venture never took researching what other agencies were doing.
often-disappointing British weather, so I took it off. However, we loved the name. It just felt right for “A common sleek and shiny theme seemed to be
upon myself to use my so-called ‘skills’ to begin what we were trying to achieve – a fun, light-hearted the trend at the time, with the About Us pages full of
redesigning the company’s uninspiring website. brand that isn’t afraid to be risky. impressive stories and tangible staff photos –
“I saw massive potential for improvement and “Getting the .com domain name was quickly something we couldn’t achieve with our uber-young
managed to get the website designed and built ruled out: we were on a shoestring budget, and the team of three. We had to bypass these crucial factors.
before my contract was due to finish. Fortunately, owners of the domain were seemingly holding out We did this by creating a mythical design agency run
there was an instant impact on the company’s for Captain Birds Eye to make a big offer. We were by make-believe characters: a Tour de France-winning
online sales and all other trackable metrics. looking at the list of available suffixes and, almost chef, his best friend Dave the duck, alongside their
“It was never my intention to stay working for the instantly, we knew that we’d stumbled upon the team of Fishfinger minions who carried out the hard
family business. However, after the triumph of the winner, fishfinger.me. It cemented everything we graft. This direction let us hammer home the
redesign, it seemed to make clear sense for me to wanted the brand to be. Strangely, an unusually branding and allowed us to create fantastical stories
high number of enquiries that didn’t need to stack up – just amaze.
Richard (director) we received in the early “We knew it was always going to be a ‘love it or
and Ashley days (when we had no hate it’ website, with no middle ground. When we
(project manager)
portfolio) were from launched in 2014, we uploaded the site on a few
people that purely design blogs, and out of nowhere we had almost
contacted us because of 100,000 visitors in under a week. We had
our domain name!” companies all over the world asking us to do work,
After coming up with a and we were in no way prepared to cope with this.
unique name for his “It was always my intention to run Fishfinger as a
agency, Richard then small boutique agency, with never more than six
turned his attention to his in-house team members specialising in different
own website. Of course, fields. We hit that number almost overnight. I’d
to support the unusual known lots of companies in similar industries that
approach Fishfinger expanded quickly beyond their control, where
takes, the website needed quality dipped and the owners lost touch with the
to be equally different. day-to-day goings-on – with some ending tragically.
“Our website is It was imperative to me that Fishfinger never lost its

32 ___________________________________________________profile
 Fi s hy d e s i g n

:-4)=6+0 ×FÕ

fishfinger.me

THE AGENCY’S new website is the very embodiment of the Fishfinger

ethos. Every single member of the team brought their skills to the table to
create a seamless, dynamic and exciting website experience.
The team discussing
new ideas in their The website brings together creative, illustration, branding, graphic
London office design, UI/UX, animation, web design and user testing to ensure that
visitors get the ultimate journey.
All websites should instantly engage their audience no matter the
industry. In a sea of competitors, if you don’t stand out you will sink.
Fishfinger’s approach with this project was no different. The agency
wanted to be loud and in your face, going all-in using large, fun and
colourful animations, which has become its signature move.
Fishfinger likes to surprise people that come back to visit, so users may
see an entirely different homepage animation when they return. The
team also like to add hidden Easter eggs to their projects. Most people
will never find them, but they’re there. They often get emails from users
who have discovered them, sharing their joy.
As a web design company, it can be hugely difficult to find a web
developer that can accurately follow a build plan. It took Fishfinger years
of learning the hard way to find a developer that met its high standards,
but now have an amazing partner that genuinely knows how to build a
website. They keep the team informed of the latest tech, so the team can
always stay ahead of the crowd. Fishfinger claim they’ll never let them go!

A high concept that’s developed and then masterfully realised is the

essence of what makes a design from Fishfinger different

profile___________________________________________________ 33
Fi s hy d e s i g n

Making the uninteresting fun

and exciting is at the core of this
insuranceexperiments.org.uk design for the ABI’s new website

1:-+<7: :-)<1>-
1:-+<7:
Web
-;1/6-: <0-16;=:)6+-
-@8-:15-6<;H <0-);;7+1)<1767.*:1<1;016;=:-:;
IT’S NOT OFTEN that you find the dream client, and The project is another example of the full
probably less often are they in the insurance industry! Fishfinger team getting on board. The point of an
615)<7: <:)<-/1;< :72-+< The Association of British Insurers (ABI) was agency like this is to be able to create projects that
)6)/-: willing to take a risk and venture away from the a standard web agency couldn’t tackle alone. The
usual dull and uninteresting content typical of its skill is in ensuring that everyone’s talents are used
industry. The brief was to get the attention of effectively at the right stage of each assignment.
people who had no interest in insurance and get The Insurance Experiments site was even
them to willingly learn more about the topic. more of a success than Fishfinger could have
Fishfinger devised a plan that would prick the imagined, and it’s become a favourite resource for
consciousness of the public through a social media the industry. The team are continuing to build
campaign. The team created a host of often-clumsy more experiments to make the site even better!
animated scientists, who would be the stars of the
‘Insurance Experiments’. They would feature in a
wide range of exciting 15 to 20-second animations,
each covering a different aspect of insurance.
These social media videos encouraged
viewers to see more experiments, hosted on a
website that Fishfinger created, full of infographics
with animated stats, built-in quizzes and other
interactive content.

Hala (Web Designer)

preparing a storyboard for A well thought through, integrated mix of bold graphics, audio and
a new animated website animation engages with audiences to communicate strong brand messages

34___________________________________________________profile
 Fi s hy d e s i g n

The Fishfinger team

taking a break

intimate family feel. We obviously still work with “Also, as far as reputation goes, I’m
I’m never sure if our
external agencies and freelancers when working on never sure if our customers have ever customers have ever heard
larger projects. However, we limit this at all times, so heard of us before they pick us. The of us before they pick us. The
we never lose control.” insurmountable accomplishment of our insurmountable accomplishment
Richard concluded, “Over the years, our fully unusual brand is that 95 per cent of our of our unusual brand is that 95
booked work schedule stopped us from regularly customers have already decided to go per cent of our customers have
updating the website – something I always ahead with us before we even pick up already decided to go ahead
regretted. It got to the point that I couldn’t bear to the phone.” with us before we even
look at our own site anymore, even though it was With such a wide range of clients to pick up the phone
somehow still bringing in work. It continued to play choose from, how does Fishfinger 1+0):, )4576
FOUNDER AND DIRECTOR
on my brain, so finally I refused to take on any more decide who to work with? Richard
work until we relaunched our new website in late continued, “Due to the number of
2018. Keeping the site up to date is now a top enquiries we receive and our limited team size, “We’re always conscious of not taking on
priority. I always want to feel proud and desperate we’re able to filter out the projects that we’re not projects that are beyond our capabilities or too big
to show someone our work.” excited about. It’s not so much the who that we for our size. When beginning a project, our process
As Richard explained, Fishfinger has enjoyed choose, rather than what. We like a challenge, and commences with our strategist, project manager
almost instant success. The innovative and quirky we specialise in turning so-called boring subjects and creative director all putting the cogs in motion
website the team created was highly attractive to into something exciting. Just because it’s a big with a sound plan to achieve the project goals.
brands. Has this ability to attract new clients brand it doesn’t mean that the project is going to “When the client gives the all clear, depending
continued? “We’ve always been fortunate in this be fun! on the type of job, our design team collaborates to
regard and feel we’re still riding the wave of our “The work we did for the Association of British get the very best out of each member’s specialities
early success,” Richard told us. “A large amount of Insurers is a good example. Even insurance can be – in branding, UI/UX, animation and website design.
our business is through word of mouth and entertaining. We don’t usually set limits on the type Our project manager sees the job through from
returning customers. The rest of our customers are of work we take on. We generally don’t like projects beginning to end to ensure we hit our milestones.
Google searchers or people that have fallen upon to go on for more than four months, mainly for the “For websites, the build is always the most
one of our live projects. On the rare occasion that sake of our sanity, and we want to keep a mix of time-consuming part. We like to design a lot of
we feel that work is getting a bit quiet, we switch on projects on the go. We have refused a few projects animated UI transitions and include plenty of other
a Google AdWords campaign that quickly fills the on ethical grounds, but as an agency we like to animated elements that need to be fully optimised
gaps in our diary. remain apolitical. for mobile and slow internet connections.”

profile___________________________________________________ 35
Fi s hy d e s i g n

Irati (strategist) and Ashley

(project manager) at work

How the agency approaches each project will the biggest advocates of pumping advertising
depend on the brief, but when it comes to the tools money into traditional social media outlets,” Richard
they use, personal preferences will always explained. “Facebook and Twitter can be amazing
determine how a project is completed. “We’re for some campaigns, especially if the client already
pretty tied down with the Adobe Cloud as it’s what has a presence, but social media is certainly not the
all our team knows,” Richard told us. “Although right approach for every project.
we’ve been using Sketch for websites over the last “When Fishfinger launched, we used design
couple of years, which far outshone the Adobe blogs and award sites to get us seen. We later
alternative at the time; we’re not sure we’ll ever created internal marketing campaigns that got
switch over to Adobe XD.” picked up by the major international press and were
Richard also explained their approach to the seen by millions of people. We achieved this with
technologies and tools they use: “For the past year almost no budget, using platforms like Reddit and
web fishfinger.me
.7=6,-: Richard Salmon or so we’ve been taking full advantage of the great submitting to popular curated blogs. The larger
A-):.7=6,-, 2014 Bodymovin plugin for After Effects, and the amazing mainstream news sources picked up our content
+=::-6<e5847A--; 6 Lottie library from Airbnb – great for keeping the from there. The Twitter and Facebook sharing came
47+)<176 London power of After Effects animations and rendering as a result of this, rather than being the cause.”
them in-browser. We’re excited to see how far we Richard’s intention has always been to keep his
SERVICES can push animated elements across our websites, agency small. Finding the right people to fill the
[1] Website Design
from dancing fish to fancy menu icons.” essential roles in his business has meant locating
[2] Branding
Fishfinger has been able to enjoy almost instant people that have the skills needed but also
[3] Animation
success. As an agency it still pays attention to how understand what Fishfinger stands for. “Our story
[4] Social Media Campaigns
[5] Digital Marketing the digital landscape has evolved, none more so began with me working with people far more gifted
than across social media. “Oddly, we’re not always and talented than me, and that mantra has always

 ×ÕÖÙ  ×ÕÖÙ ×ÕÖÚ ×ÕÖÛ ×ÕÖÛ

After months of Game of Thrones – Fishfinger’s ESPN – Fishfinger designs Fishfinger creates a new, Fishfinger works with
preparation, Richard first interactive web project – a custom, bespoke exciting range of apparel WWF to raise awareness
launches the Fishfinger brings hundreds of thousands typeface for one of the designs for Riot Games to of green eating
brand and website. of visitors. biggest sports brands. launch in their webshop. through animation.

-5847A--;Ø -5847A--;Û -5847A--;Û -5847A--;Û -5847A--;Û

36___________________________________________________profile
 Fi s hy d e s i g n

Innovation and
dynamic thinking with
strong technical skill
came together to
create The Tea Circle
Flawless animation, strong storytelling and a dash of
wry humour come together to ensure Fishfinger’s
website stands out from the crowd

followed,” Richard outlined. “When I employ

someone, it’s because they have something special,
a skill that I could only dream of having.
“We’re inundated with portfolios of graduate
designers that only have coursework to show: no
personal projects, no further proof that they love
<0-<-)+1:+4-
THE TEA CIRCLE began as a collaborative project
between the Fishfinger team and a close partner
live, as though you were physically making the
blend yourself. The creator also uses algorithms
design. If you want to be successful in this industry, that shared the team’s passion for tea. The brief that calculate the tea’s flavour profile and its
you need to be able to show your real passion for was to produce a tool that allowed users to create holistic benefits.
our trade. As a boutique agency, we’re very strict their own bespoke tea blends. Once the user has created their tea, the tool is
about hiring nice people. We’ve turned down many As creatives, the team’s thoughts are always able to print off bespoke packaging containing all
talented candidates because of the fear they would set on wanting to invent something that is outside the information about the blend and the
ruin the team dynamic.” the box – something that has never been done personalised Tea Circle on the front of the box.
The future for Fishfinger is to stay a small, before. They want to create unique experiences It was a hugely ambitious project, and
intimate agency that does groundbreaking work that wow, whether through print, brand identity, Fishfinger put everything it had into it. Amazingly,
that defines the space they are working within. “We packaging design or online. This project had it all. the team managed to secure private funding to
always run ambitious company projects alongside To get the creative juices flowing, the team turn the Tea Circle operation into a reality, and it
our client work,” Richard concluded. “These projects likes to get hands-on with any product they work will be launching later this year.
have no rules and no external feedback that we on, so they bought heaps of loose-leaf tea and
have to adhere to. We’re currently creating an started making patterns for inspiration. After lots
ambitious app that aims to change the way the of playing around, they discovered that arranging
world looks at weather – another unexciting subject the individual leaves, fruits and spices could create
that we’re looking to transform!” a striking visual representation. In this eureka
Taking what can seem mundane and turning it moment the Tea Circle was born.
into an exciting experience has defined the ethos They created an online, interactive tea-
that the team at Fishfinger live by. Uncoupling blending tool, enabling you to mix multiple
themselves from the design mainstream has ingredients into a unique Tea Circle – a beautiful
enabled them to innovate, where others just follow and dynamic visual representation of the tea you With their partner, Fishfinger created a completely
or imitate. create. The visualisation changes in front of you innovative approach to bespoke tea-making

×ÕÖÜ ×ÕÖÜ ×ÕÖÜ ×ÕÖÝ ×ÕÖÝ ×ÕÖÞ

The agency brings life to The team work on Comico King – Fishfinger starts a Interhigh – working with Tea Circle – Fishfinger A top-secret app project.
insurance through a fun – A close-to-heart project long-term animation one of the largest creates a beautiful web Keep an eye out for this
social and digital branding a comic project with the folks that animated billboards in the experiment to change the paw-some weather
campaign for ABI. book convention. crush candy. world, Motion@Waterloo. way tea’s blended. project coming soon!

-5847A--; Û -5847A--; Û -5847A--; Û -5847A--; Û -5847A--; Û -5847A--; Û

profile___________________________________________________ 37
 NEVER MISS AN ISSUE!

ISSUE 283
JAVASCRIPT 2019 – 25 frameworks,
tools and APIs, WordPress 5, CSS
liquid effects, build a webVR scene
and React & Redux

SAVE UP
Issue284 TO 43%
Think fonts, think colours, think design,
responsive layouts, manage Redux with WITH ADIGITAL Issue 278
Immutable.js, get productive with npm SUBSCRIPTION What’s new in JavaScript, say hello
to Google Flutter, build with CSS
and optimise your SEO SEEPAGE28 Grid, work with WebRTC and create
patterns with CSS

GOT AN APPLE DEVICE?

Download Web Designer’s digital edition for your iPad, iPhone or iPod touch

https://apple.co/1hsGYgl
38___________________________________________ back issues
CATCH UP ON ANY ISSUES YOU’VE MISSED BY DOWNLOADING
OUR DIGITAL EDITIONS https://bit.ly/2rh73Xk

ISSUE 282
What you need to know to become
Issue 281
Design, develop and create with top
Issue 280
30 best HTML, CSS and JS APIs and
Issue279
Pro tips to build animation for the
a CSS pro: animation, Grid, Sass, Google tools, add glitch effects with elements, research your keywords, web, 23 ways to make your app
optimisation, methodologies, hot CSS, animate with GSAP and code interactive JS charts and What is the shine, work with variable fonts and
new properties and APIs UX patterns Web of Things? what’s new in Node 10

Issue 277
Hot new CSS properties for today,
Issue 276
Build your own augmented reality
Issue275
50 must-try tools for designers and
Issue274
The new rules and top tools for UX,
build interactive 3D, streamline your app, get started with three.js, developers, how to add awesome 5 hot new CSS properties, use the
design workflow with Sketch and power up with Sass and Stylus and audio, Progressive Web Apps and CSS Paint API, add particle effects
code a real-time React app generate web components interactive images and discover JSX

PREFER TO READ ON ANDROID, PC OR MAC?

Web Designer magazine is also available on Google Play and Zinio

https://tinyurl.com/yalm3wul https://bit.ly/2xPbv4p
back issues___________________________________________39
 GE
INT
40 _________________________________________________feature
ET
42 GOLD
LDEN RULES OF UX
UX IS SPREAD ACRROSS A WIDE SPECTRUM.
CHECK OUT THE E KEY RULES AND BEST PRACTICES

49 CA
C SE STUDY: LUSH
DESIGN MAN
ANAGER JOSS COOK REVEALS HOW LUSH REPLACED ITS
EXISTING T
TILL SYSTEMS WITH THEIR OWN SOLUTION

50
0 20 TOP UX TOOLS
A COL
LLECTION OF THE BEST UX/UI DESIGN TOOLS AVAILABLE WITH
ESSE
ENTIAL SITES, APPS, KITS, TEMPLATES AND TOYS

5 STRATEGY & RESEARCH

54

TO
DOING RESEARCH AND DECIDING ON A STRATEGY ARE KEY TO
ENSURING A BETTER USER EXPERIENCE

56 SKETCH & STORYBOARD

PREPARATION IS ESSENTIAL. CHECK THIS COLLECTION OF TIPS AND
TECHNIQUES FOR SKETCHING AND STORYBOARDING

59 THE BOTTOM LINE

LEAH BULEY, DIRECTOR OF DESIGN EDUCATION AT INVISION,
REVEALS THE RESULTS OF ITS RECENT GLOBAL STUDY

60 THE LIFE OF A UX DESIGNER

NO TWO WEEKS ARE THE SAME. JOSS COOK GIVES AN INSIGHT INTO
WHAT IT’S LIKE TO WORK AS PART OF A DESIGN TEAM

62 PROTOTYPE WITH ADOBE XD

DESIGN SEAMLESS TRANSITIONS WITH THE AUTO-ANIMATE
FEATURE AND CONTROL WITH YOUR VOICE

7 WIREFRAMING WITH SKETCH

70
LEA
ARN WHAT YOU NEED TO KNOW TO CREATE, REFINE AND
PRESSENT YOUR WIREFRAMES

76
6 DESIGN UX-FRIENDLY FORMS
INTRODU
UCE UX PRACTICES TO GIVE USERS A BETTER EXPERIENCE
AND HELP INCREASE CONVERSIONS

80 BE
B A BETTER UXER
GET TEN TIPS FOR
O A BETTER PORTFOLIO, HOW TO GET INTO UX
DESIGN AND HOW TO PREPARE FOR A JOB INTERVIEW

84 NEW
W TRENDS
WHAT IS CURRENTLY POPULAR AND WHAT IS EMERGING IN THE
WORLD OF USER EXPEERIENCE. FIND OUT

feature _________________________________________________ 41
 GOLDEN
RULES OF

WHEN WE THINK UX, WE THINK USABILITY, OR AT LEAST WE USED TO.

TODAY, UX IS SPREAD ACROSS A MUCH BROADER SPECTRUM, SO LET’S TAKE
A LOOK AT THE 7 ESSENTIAL RULES OF UX FOR 2019 AND BEYOND

42__________________________________________________feature
 7 GOLDEN
RULES OF

DESIGN F
alling in love with ‘good’ ideas is
easy. Too easy, in fact, and
seemingly harmless until we
realise that it’s not love at all – it’s

FOR
infatuation, and infatuation
inevitably fades with time. This is
what causes freelance designers to
constantly redesign their portfolio;

USERS
they’re motivated by their temporary
infatuation with visual aesthetics
rather than the user’s needs.
Thankfully, figuring out whether or
not ideas have user-value (or at the very All-in-all: don’t overthink it (too
least, business-value) isn’t too difficult. much) and simply enjoy building
It revolves around asking users two high-quality relationships with your
BEFORE
core questions: main advocates.
MAKING
DECISIONS,
REMEMBER:
Q “Do you want this?” (asked during GATHERING FEEDBACK
user testing) Getting face-to-face with users,
WE ARE NOT Q “Can you use this?” (asked during
THE USER either in real life or with remote user
usability testing) testing tools, is what designers fear
most about user testing, but it’s
Not very romantic, we know, but at actually really useful, not to mention
least we won’t end up wasting the best way to build relationships
resources and time designing the with our main advocates.
wrong thing (or the right thing in the That being said, don’t let it
wrong way). It’s safer to simply ask be known that face-to-face
users what they want and need. interviews are the only way to
Scarier, sure – but safer, and when receive quality feedback.
the results are in, you’ll feel relieved, Here are a few excellent tools that
even if the feedback is negative. are not only useful individually, but
Substituting guesswork for qualitative can be superhumanly powerful when
feedback from users should be observed linked up using automation software
as more of a blessing than something to like Zapier (https://zapier.com).
be feared, and when done correctly, it can
bring huge amounts of motivation, Feedback survey tools (free):
positivity and clarity to the product Q Typeform
Have an idea, roadmap. With the right attitude, Q Google Forms
but not sure feedback can be our mightiest resource!
what to do with Feedback management tools (free):
it? Don’t force it into a USER TESTING Q Trello
It’s likely that you already know what Q Asana
design; instead, maintain user testing is, and have heard the Q Google Sheets
a creative outlet such as benefits of doing so countless times,
Dribbble or a scrapbook so here are some undervalued HOW A ZAPIER
and save it as testing tips that often end up taking WORKFLOW WORKS
inspiration the back seat: (also known as a ‘Zap’)
for later. Collect feedback with Typeform,
Q Maintain a list of loyal testers and then send it to a column in a Trello
DANIEL SCHWARZ use them often board (aptly named ‘New feedback
Editor-in-Chief at UX Tricks Q Award free access in exchange for to discuss’), then, optionally, create
regular feedback a notification in Slack. Setting up
Q Have fun automating the workflow these workflows is really fun, not to
with various apps mention it saves bundles of time,
Q Regularly sit down with the team allowing teams to collect feedback
and organise the feedback at the drop of a hat.

feature _________________________________________________ 43
 PROVIDE
CRYSTAL W
hen users become
confused, a number of
PROPORTION
Proportion — similar to ‘size’, but with

CLEAR
things happen. They one fundamental difference.
become stalled, they trust our brand Proportion is a relative
a little less, and most importantly, measurement, size is the
they hit the back button, never to measurement in itself (ie making

CLARITY
return again. something large doesn’t add clarity if READ MORE
Sadly, we live in an increasingly other elements are just as large). We 7 PRINCIPLES
impatient world, where a cheaper, can optimise visual hierarchy by OF DESIGN
faster, better alternative is always ensuring that important elements https://bit.ly/2DEPtUG
right around the corner. Users cannot stand out simply by being relatively Discover the principles of
be taken for granted, so being clear is sized in relation to other elements. good design.
an absolute must. But, what exactly
CLARITY STOPS
CONFUSION DEAD do we mean when we say clarity? PROXIMITY
Let’s take a look at a few examples. A tap target by itself is just that – a tap
IN ITS TRACKS
target – however, where the link is
COLOUR displayed can say a lot about what it
Colour is one of the many ways users does and in which scenario users
learn how to use and understand should click on it. A tap target in the
how an interface works. Where it’s main navigation tells users that it’s a
human nature to recognise rather link to somewhere else, but it might not RESOURCE
than recall, colour is subtly one of necessarily be the link the user needs. PRINCIPLES.
the most recognisable aspects of Alternatively, a set of horizontal DESIGN
https://principles.
everyday life, despite colour cards each containing a button design
meaning different things in various (think: a pricing table on a pricing A curated list of design
cultures, and in different contexts. screen) illustrates that a choice values held by different
Want to convey error? Well…the best needs to be made. So, as you can companies.
choice is to use red. see, proximity conveys how various
elements are related, whether that’s
DESIGN PRINCIPLES for choice-based interactions or
As well as colour, a combination of navigational items.
contrast, repetition, proportion and
proximity* can help to establish clarity. UX COPY
Last but not least, there’s the
CONTRAST wording itself. Imagery is subjective,
YOUTUBE CHANNEL
Contrast, in short, helps elements but words offer a chance to be literal. NIELSEN
stand out. We can optimise contrast The intent of a button saying ‘Let’s NORMAN
with colour, size, depth and more, do this’ could be inferred from the GROUP
which in turns aids clarity by shifting context, but the added cognitive https://bit.ly/2N51asm
the user’s attention. It’s a non-verbal load from this (and other Nielsen Norman Group
way of clarifying what the user contributing factors) just isn’t worth delivers the most concise
should be looking at above all else. the chance to sound cool. understanding of
Hitting the submit button on a fundamental UX
REPETITION contact form infers that the user’s teachings today.
Reinforcing a concept through email was sent, however, a
repetition is another sure-fire way to properly worded confirmation can
infuse clarity. Is the next step in the go a long way, especially in the event
journey to click a certain button? If so, of a lost connection.
contextually display it a few times. Words matter!

44 _________________________________________________feature
 7 GOLDEN
RULES OF

GIVE A
s humans, we haven’t yet long before they existed, simply by
evolved to mind-read, and direct messaging multiple users
given the endless options that at once.
some apps and websites offer, that’s a These setbacks would eventually

USERS
shame. Let’s take eCommerce stores warrant the implementation of the
for example, which often have a ton feature itself, but until then, control
of items in a ton of categories. On top allowed users to tailor their experience
of that, items can be further in a way that suited their own agenda.
distinguished by defining features such

CONTROL
as colour. THE NEGATIVES OF
This means that search results are ZERO-CONTROL TWITTER
UENO
often further narrowed by filters and Micro-interactions are often hindered https://bit.ly/2TL3nf3
tags, requiring more interactions than by a lack of control, but even when Ueno redesigned Airbnb
the average interface, but that that’s user flows are designed to be relatively back in 2014, including
not a bad thing, and this doesn’t get linear (for instance, a sign-up flow or their search.
CONTROL HELPS mentioned enough. Users want to some other form-based interaction),
USERS FIX AND customise their experience. control means the user can fix and edit
OPTIMISE THEIR without any trouble. If we compared
EXPERIENCE THE BENEFITS this to a human-to-human interaction,
OF CONTROL a lack of patience would surely make
A holidaymaker isn’t just looking for an the encounter less than friendly.
Airbnb, they’re looking for their Airbnb; Consider splitting up lengthy forms
the home that’s going to make their into several smaller micro-interactions
RESOURCE
holiday special in a way that no (or not (where the user can save their data
HOW TO
very many) other Airbnbs can, periodically and even navigate IMPROVE
indicating that control goes way back-and-forth between the different ADVANCED
beyond the considerations of usability; sections), and also adding a SEARCH UX
it actually enriches the overall confirmation screen so that the user https://bit.ly/2SOAXmU
customer experience. can check over their input before A resource showing how
Control can also lead to the hitting the magic button. As an added huge companies design
development of new features and bonus, if the user can log in and
boosted engagement. Think about it: correct mistakes after they’ve been
despite a few usability setbacks, Slack ‘sent’, that’s even better.
users could create ‘Private Groups’ In short, let the user take the wheel.

READ MORE
HOW TO CRAFT
A KICKASS
FILTERING UX
https://bit.ly/2E5V1sW
Laura Cunha shows us
how to design filtering UX.

feature _________________________________________________45
 PREDICT, THEN ADAPT MORE CHOICES = MORE TIME, AND USERS DON’T HAVE TIME

H
ick’s Law states that the time it If that seems risky, there are a
takes to make a decision number of data-driven ways to lesson
correlates with the amount of the risk. Firstly, there’s analytics tools
choices the user has to make — too that track user behaviour, and then
long, and the user won’t make a there’s heatmap tools, which can show
choice at all. us where users are actually clicking (or
This kind of cognitive overload is not clicking), which in this scenario is RESOURCE
known as analysis paralysis, the act of the better option. If you’d rather take a LIST OF
not being able to make a choice when toe-dip approach, A/B testing can help COGNITIVE
there are too many options. Let’s take us test layout changes with a fraction
BIASES
https://bit.ly/1cpQYCM
a look at two ways to reduce choices. of our audience before committing Numerous cognitive
them app/site-wide. biases describe human
CONTEXT nature in regards to
Luckily, by keeping layouts minimal, Here are three tools to help you kick how we react to things
both conceptually and visually, we can things off: we deem relevant or
help users make decisions faster, and not relevant.
thus increase the likelihood of Q CrazyEgg (A/B testing and
conversion. But, is this a task easier heatmaps)
said than done? After all, it can be quite Q Hotjar (heatmaps and on-site
difficult to force an element to take the feedback tools)
back seat in favour of something else, Q Google Analytics (free web tracking
especially when said element is also software)
somewhat important.
RELATION
THE SOLUTION? Artificial intelligence helps users access
CONTEXT relevant content without them having to
EXPERTS TO FOLLOW
PSYCHOLOGY
What’s important on one screen may search for it. Here are a few examples:
TODAY
not be important on another screen, in https://twitter.com/
which case tucking away not-applicable- Q Further Reading PsychToday
in-the-current-context menu items in a Q Similar Books Get inside the mind
hamburger menu actually makes sense Q Products You May Like of your users.
(yep, the hamburger menu isn’t as bad Q Customers Also Purchased
as we might think!).
These types of UI components are built
upon data, either data collected from the
user themselves (hopefully with
consent), or collected from other users
(ie Customers Also Purchased).
READ MORE
Personalised experiences have
HICK’S LAW:
proven to be highly valuable in recent MAKING THE
years. From Spotify’s Made For You CHOICE EASIER
Playlists to Netflix Recommendations, FOR USERS
users enjoy products that seem as if https://bit.ly/2ebMd4K
they were built just for them, and while Everything you need to
the ability to customise products is of know about Hick’s Law.
course a huge selling point, the true
value proposition is revealed when
artificial intelligence does the bulk of
the work. Remember, design dynamic
products that users can customise!

46 _________________________________________________feature
 7 GOLDEN
RULES OF

MAINTAIN CONSISTENCY
CONSISTENCY HELPS USERS REMEMBER AND ANTICIPATE

C
onsistency has long been a to the top of the screen and write
key element in branding, but your status in the input field. To
consistency also contributes share something in a group, even if
heavily to user experience as well. you’d never done so before, you’d
Brains are designed to learn mimic that behaviour because it’s
mental shortcuts, right up to the what you’d expect. This is an ideal
point where we don’t even realise example of consistency.
we’re doing it. When traffic lights EXPERTS TO FOLLOW
MEASURING ALLA
turn green, we don’t analyse the
situation and then make a conscious CONSISTENCY KHOLMATOVA
https://twitter.com/
decision to accelerate, we just do Back to colour. We fill out an online craftui
it instinctively. form, then submit by clicking, say, a Alla Kholmatova is the
Now imagine that one day, the blue button. Then we fill out another author of the Design
typical green, yellow, red setup was form, and the submit button is also Systems book.
replaced with Go, Get Ready and blue. Eventually, we decide to
Stop. You’d be taken aback for sure, subscribe, and the call-to-action is…
and even if just for a few seconds, blue. Every time we interact, we
you’d contemplate what the hell is become better, faster and overall more
going on before accelerating off. efficient by learning how things work
Problem is, these few seconds are and recognising design patterns.
critical when it comes to design. Users The time that it takes, known as
simply expect things to make sense, task time, is one of the metrics used RESOURCE
and can quickly become frustrated to measure the level of usability, APPLE’S
when they don’t. Let’s take a quick which again shows the benefits of HUMAN
look at a more digital example: usability testing as mentioned earlier. INTERFACE
sharing something on Facebook. GUIDELINES
CONSISTENCY &
https://apple.
You already know that to share co/2I5FUDF
something on Facebook, you’d flick INNOVATION “A consistent app
Naturally, consistency limits implements familiar
innovation; however, innovation can standards, features
be a game-changer so long as the and behaviours in ways
lack of consistency is worth the value people expect.”
it brings to users in the long run. In
this scenario, a well thought-out
onboarding UX that introduces users
to the app (or certain features) can
be a suitable alternative.
In a nutshell, don’t underestimate
the power of sameness!
READ MORE
DESIGN
PRINCIPLE:
CONSISTENCY
https://bit.ly/2p8k04P
Anton Nikolov talks about
the different types of
consistency.

feature _________________________________________________ 47
TREAT USERS AS CUSTOMERS & VICE-VERSA TREAT EVERY USER LIKE YOUR BEST CUSTOMER, AND THEY WILL BE

W
ait, aren’t users and customers Q Bad reviews could stop other users from
becoming customers EXPERTS TO FOLLOW
the same thing?
RICHARD
A user is somebody that uses BRANSON
the app or website, but some users are also The solution? Treat customers like they’re https://twitter.com/
customers (ie they pay us for something). still users. Go for hard sell at every richardbranson
Others – well – we just wish they were opportunity, never stop giving. And “A complaint is a chance
customers, because at the end of the day, vice-versa, treat users like your best to turn a customer into a
money is the nutrition businesses need to customer, and they will be. lifelong friend.”
stay alive.
But what happens once a user becomes a CUSTOMER EXPERIENCE RESOURCE
customer? Do we stop caring about them? Curious about how to improve the customer CUSTOMER
Well, actually, many companies do exactly experience? EXPERIENCE
that – sell the product, abandon the Follow up with free updates, feedback RESOURCES
https://bit.ly/2RTpnm8
customer, and then acquire new customers requests, or simply just check up on the
50 resources to help
because it’s much cheaper to do so than it is customer to see if they’re doing alright.
execute your customer
to take care of current customers. Perhaps let them know we’re around if
experience strategy.
It’s a method labelled ‘Churn and Burn’. needed by reminding them of our customer
Here’s why that’s really bad business for support, or that we can answer any
most businesses: questions they may have on social media. A READ MORE
10 CUSTOMER
Q Consumers often experience anxiety
huge contributor to customer experience is
EXPERIENCE
how we treat the user or customer when
PREDICTIONS
about their purchase even after
purchasing, which can result in buyers
they’re not being a user or customer. It FOR 2019
shows we care beyond the revenue. https://bit.ly/2EvelzT
remorse Also, if you happen to catch their name, A roundup of rising
Q A bad customer experience could mean use it during communications. Users love to customer experience
they’ll never return hear the sound of their own name! trends.

COMMUNICATE VALUE PROPOSITION

COMMUNICATE VALUE TO STOP THE USER FROM GIVING UP
YOUTUBE CHANNEL
AJ&SMART
https://bit.ly/2qduJLA
AJ&Smart’s YouTube channel
Boring form? shares tips and insights into the
“YOU’RE STEPS AWAY FROM product design process of defining
HAVING AN ACCOUNT!” value before usability.

V
alue isn’t understood Don’t get me wrong, we’re never going RESOURCE
subconsciously, it has to be to convince users that forms can be fun, but UNIQUE VALUE
communicated and consciously a little encouragement can be the PROPOSITION
understood. As human beings, we motivation the user needs to keep going. If CHECKLIST
https://bit.ly/2TSJNxa
constantly look for instant gratification, and the user feels like you want them to stick
A checklist for defining your Unique
at the surest sign that there isn’t any, it’s all around, they’ll want to stick around.
Value Proposition (UVP).
too easy to close the tab and move on. Long story short, treat every step like a
When we think value proposition, we think fun adventure, where each one has its own
about the product itself, but if we can objective and benefit once completed. And READ MORE
remind the user of the positive outcomes of at the end, say, for example, when the user
HOW TO
COMMUNICATE VALUE
even the most boring interactions, the is checking out, make sure to remind them
BEYOND DESCRIBING
sense of fulfilment is higher. of the product benefits… to be safe. FEATURES AND
Selling a book? BENEFITS
https://bit.ly/2Sq05B4
“YOU’LL BE A GENIUS Learn how to communicate value
BY TOMORROW!” through storytelling.

48 _________________________________________________feature
 CASE
STUDY

DESIGNING
LUSH’S TILL
SYSTEM LUSH DESIGN MANAGER JOSS COOK REVEALS
HOW THEY REPLACED ITS EXISTING THIRD
PARTY TILL SYSTEMS WITH THEIR OWN
SOLUTION, DESIGNED AND BUILT IN HOUSE.

i
n the past year, we have rolled out our new till
system to over 100 UK Lush stores. As a result, our
shop managers have seen reduced staff training
times and greater efficiency in processing payments
and refunds. We continue to refine and improve the
4 REFINING
Having
ironed out
the creases within our
interface designs, we
UX, with collaboration and feedback from Lush staff. were able to start
polishing the
THE CHALLENGE navigation and user

2
As a design team, we were tasked with creating an flows. We created a set of visual components that were
intuitive new interface for the Android-based point of CONCEPTING & PROTOTYPING flexible enough to work across each of the different
sale (POS), along with the back office administration Having gained an understanding of the views, enlisting the help of a visually impaired consultant
web views, where both shop staff and business features and functionality needed for the who advised us on contrast and legibility throughout.
managers could generate and read sales reports. POS, we began sketching out quick ideas for the Once deployed to a small number of stores, we have
interface, drawing heavy inspiration from online continually received feedback and have tweaked,
shopping experiences where the shopping cart is scrapped and overhauled a number of features based on
always visible and users are just one click away from the experience of using the systems live in store. We have
taking payment. We utilised the help of shop staff to also made optimisations to the responsive views, so the
validate our ideas at the earliest possible stage, using POS can be used on mobile devices by staff, when
paper prototypes and task based exercises. roaming up and down busy queues.

1 UNDERSTANDING
We needed to work out the issues that our staff
members were having with the current systems,
so by auditing the interface and the information
architecture of the existing point of sale (POS), we
3 TESTING
To properly test our designs, we needed to get
a convincing prototype together so our users
would find the experience believable. We set up some
task scripts and used InVision and Keynote prototypes
5 THE ADMIN
Not the most glamourous aspect of the
project, but as key to its success as the POS
itself, the back end web views were vital to store
managers and the retail accounts team to ensure that
worked out where the pain points were, questioning to create a number of journeys that our test subjects our sales and account balancing was all present and
each and every function and its value to our staff. From could click through and provide feedback on. We correct. We deployed our internal design style to the
this, we were able to create and refine new information stripped out a number of steps needed to complete back end views and worked closely with all relevant
architecture and start mapping out the journeys refunds and returns, at the same time limiting the staff roles to ensure that the back end was performing
needed to perform each task within the interface. navigation to only that which was required. its functions effectively.

Case study____________________________________________49
 TAKE THE HASSLE OUT OF SOURCING THE BEST UX AND UI DESIGN TOOLS AVAILABLE
WITH THIS ROSTER OF ESSENTIAL WEBSITES, APPS, KITS, TEMPLATES AND TOYS

CURSOMIZER AXURE RP
https://cursomizer.com www.axure.com
Created as a tribute to user interface pioneer Douglas Englebart, this site A commercial rapid prototyping application for Mac and PC, Axure RP allows
project from KIRKDESIGN invites UX designers to build custom mouse designers to sketch, wireframe and prototype UX projects using intuitive
cursors. By tweaking various graphical properties across shape, colour and drag-and-drop editing. Broader features add flow diagramming and
visual effects, visitors can prototype various options, test and even share their animation support, plus team collaboration tools including a cloud-based
selections with colleagues by copying a link. Axure Share facility for sharing published prototypes across devices.

50 _________________________________________________feature
 20 TOP TOOLS
AND RESOURCES

MOCKFLOW STORIESONBOARD
KWWSVPRFNÿRZFRP https://storiesonboard.com
Describing itself as a UI and UX planning suite, this online application requires no Available as a subscription SaaS product, StoriesOnBoard is primarily a user
download and enables designers to quickly brainstorm their user interface ideas. journey or ‘story’ mapping solution that invites UX designers to plot software
A free basic package scales up to Enterprise level, offering access to various project pathways. Narrative flows, goals and steps can be collaboratively
feature modules across wireframing, site mapping, crafting design specifications, visualised using cards, much like sticky notes, to arrange and rearrange story
collaborative review, screenshot annotation and even site hosting. maps rapidly while attaching unlimited detail and comments.

BOORDS HELIO
https://boords.com https://helio.app
This online collaborative storyboard creator is available as a free trial alongside Plus, Helio, formerly known as Solidify by ZURB, is a web-based app that not only
Team and Enterprise packages. Its built-in frame editor takes care of drawing the generates clickable prototypes from uploaded interface mockups but also
sharable storyboards, while an integrated ‘Animatic Tool’ adds dynamism and the crucially delivers feedback data. Designers can leverage user opinions and
inline script editor allows for the convenient addition of narrative text. Other notable perspectives from 100,000 panellists to get valuable ‘Design Insights’ on
features include client feedback collection, voiceovers and multiple export options. specific audience demographics and their behavioural patterns.

UX APP DESIGN MIRROR

www.ux-app.com www.psmirror.net
Another cloud-based tool, UX App enables designers to ‘wire up’ fully interactive This clever preview plugin for Photoshop, Adobe XD and Sketch is joined by
prototypes for desktop applications, mobile apps and websites without any companion apps for Android and iOS devices. Once installed, designers can
coding required. Its visual actions designer provides a toolbox of genuine HTML display their interface designs on the most popular smartphones via Wi-Fi,
and JavaScript-based components, with the ability to define custom events, USB and browser link. Features include Windows and Mac cross-platform
transitions and actions, or alternatively export designs out purely as PNG files. support, pinch zooming, swipe navigation and screenshot triggered saving.

feature __________________________________________________51
 UX KITS WIPEBOOK
https://uxkits.com https://wipebook.com
Products of Eric Miller Design, these ‘kits’ are essentially graphical templates and Which UX designer has never wished they could wipe their sketchpads clean
interface card decks for UX brainstorming purposes. Wireflows, website flowcharts of bad ideas? Well, with Wipebook you can do just that and be eco-friendly
and sitemaps can be independently purchased for Illustrator, OmniGraffle and too with a range of instantly erasable flipcharts and notebooks. Numerous
Sketch, or in three format bundles. Wireframe and website card decks then provide sizes and correctable markers are available, with Wipebook Scan capable of
a more tangible way to assemble pages or interfaces on any flat surface. saving those temporary doodles to the cloud before they vanish.

SMARTLOOK ADOBE XD
www.smartlook.com www.adobe.com/uk/products/xd.html
Smartlook is a qualitative behavioural analytics platform across website and mobile Part of its Creative Cloud suite of applications, Adobe XD is actually a free
apps. Key features include the ‘always on’ recording and replay of real video product for transforming interface ‘comps’ into interactive prototypes. Smart
recordings that track how users interact, along with heatmaps for highlighting visual editing tools include the dragging of wires to link artboards, easy import
precisely where they click most. Automatic event tracking reveals overviews of of other CC assets, plus support for animation and voice too. Additionally, a
popular feature usage, while funnels give detailed statistics on conversion pathways. companion mobile app allows for native previews on iOS and Android devices.

KEYNOTOPIA UI STENCILS
https://keynotopia.com www.uistencils.com/collections/stencils
Keynotopia represents an impressive collection of over 5,000 royalty-free, Geeks love gadgets and UI/UX designers are no exception. This trendy eShop
vector-based user interface templates and components, plus over 200 icons too. provides a number of accessories including sketchpads and pens, but primarily a
Uniquely, they have all been created within Apple Keynote and Microsoft PowerPoint, range of seriously cool interface stencils and ‘framer’ rulers. Made from durable
while allowing designers to edit and customise each example without requiring other stainless steel or thick translucent plastic, the stencils support iPhone, Android, iPad
tools. Individual and bundle packs are available from $39. and website drawing along with general bubble symbols for diagramming user flow.

52 __________________________________________________feature
 20 TOP TOOLS
AND RESOURCES

IDEAPAINT USERBRAIN
https://ideapaint.com https://userbrain.net
Picture the scene – your brainstorming session has yielded a superb UX design This cloud-based user testing solution promises to simplify the process by letting
idea, but the whiteboard is AWOL and paper is scarce. Well with your boardroom website designers watch videos of real visitor interactions. Userbrain basically
decorated in dry erase IdeaPaint you can simply scrawl directly on the walls! provides access to a worldwide network of new users ready to share feedback via
Magnetic primer lets wipe-able wall coverings be stuck instead, with a number of continuous capture of experience insights. Findings can be quickly shared between
erasers and cleaning products also available for office proud startups. teams and stakeholders, with anything open for testing if it has a valid URL.

UX – A USER EXPERIENCE TESTING TIMER UX COMPANION

https://apple.co/2UGdmSQ www.uxcompanion.com
This free app from Alexander Cox is available for iOS devices and essentially UX Companion from Cyber-Duck Ltd is an Android, iOS and Amazon Alexa skill
provides a timer for timing usability tests. Multiple tests can be set up to app that provides users with a useful UX glossary. Aside from merely defining
contain a number of customisable constituent tasks for the test subject to terms and jargon, it lists descriptions and resources on UX theories, tools and
complete, logging completion time for each. Results can then be captured as leading principles to give everybody greater insight into the practice. Totally
screenshots stored and made accessible within the iOS camera roll. free to download, the app boasts 80 plus topics and regular updates.

FRAMER X POP
https://framer.com https://marvelapp.com/pop
Framer is a web-based rapid prototyping tool that places emphasis on not just Marvel’s POP stands for ‘prototyping on paper’ and has free apps for iOS and
being responsive, but realistic. Drag-and-drop components make screen design Android smartphones. Here designers can take photos of their interface
and plotting navigational flow beautifully intuitive, while the addition of 3D effects sketches or design from scratch using POP’s drawing tools and stock assets,
add the wow factor. Access to the Framer X Store also provides thousands of before linking screens together using interactive hotspots. Sharing options
additional resources and UI kits so designers needn’t start from scratch. across email, SMS and social media then encourages collaboration.

feature _________________________________________________ 53
 A SOLID UX STRATEGY INVOLVES PLANNING YOUR
REQUIREMENTS AROUND USER GOALS AND
STAKEHOLDER BUSINESS STRATEGIES. IN THIS
ARTICLE WE WILL TAKE YOU THROUGH A 7-STEP
STRATEGY THAT YOU CAN FOLLOW ALONG WITH

DEFINE YOUR STRATEGY

Before you start planning your strategy, it would
make sense to understand what it entails and
whether or not you actually need one based around
the user goals and business strategy. But investing in a
UX strategy makes sense and businesses that do so
enjoy increased ROI and enhanced productivity, as well
as reduced product development risk.

RESEARCH AND LEARNING

Research would be the very first thing any
UXer should start with. A well designed
strategy is founded on a bedrock of
data-driven research and will give you a clear idea of
‘who, what, why, when and how’. Research can be
done using two types of methods – quantitative and
qualitative. Qualitative methods tend to be
stronger for answering ‘why’, while quantitative
methods do a better job of answering ‘how’.

UX PLANNING
Based on the research you’ve
obtained, you can now define
your users as personas, which
will then allow you to start creating user
stories, scenarios and user flows. User
stories highlight the needs that may differ
from user to user, and these stories are
elaborated upon through scenarios. Lastly
a user flow can be created based on these
stories and scenarios.

EXPLORE COMMUNICATION &

We now have a solid idea of how our USABILITY
product will flow, and now we can As the saying goes, ‘content is king’ as it’s
begin to explore creative ideas. This can the content that feeds the design. Dealing
be done the old fashioned way by using a pen with content can be tricky. Have we got the right
and paper and can be done alone or as a team. images? And do we need a UX writer? Then we need
These sketches will then lead on to wireframes and to think carefully about accessibility and usability, are
will give you a clearer idea of the layout and we complying to set guidelines and regulations. For
functionality. Then we can start adding some us, to be user-centric we need to make sure our
functionality by creating prototypes. product is open ground for the targeted user.

54__________________________________________________feature
 DO YOUR
RESEARCH he saying goes, if you’re
not doing research, then
you’re not doing UX.
Basically, user research is
the comprehensive and
multi-layered activity whose aim is to
collect information about the
potential target audience of the
product. The user researchers collect
and then analyse the information
obtained from real users, and this
outcome usually allows the UX design
team to work on the optimal solutions
that will make the product
user-friendly, less problematic and
more attractive. The research can be
done by many ways, but offering user
surveys (quantitative) doing
face-to-face interviews (qualitative),
creating personas and organising
focus groups, are the most popular
ways and will return the most useful
data. Even though research will weed
out potential issues, it should also be
remembered that removing the
mistakes in design, even if it’s already
high-fidelity level, is faster, cheaper
and less painful for users than fixing
negative issues with an already
launched and operating product.

USER RESEARCH:
WHAT IT IS AND WHY
YOU SHOULD DO IT
https://bit.ly/2tRKAkL

INTERACTION & DESIGN TESTING

At this point we are now ready to begin Designing products is all about
the visual design. This step can be creating the best experience you can.
somewhat subjective as most designers So testing it in various ways is vital to
have their own process. But in general you would its success when it’s put out there in the real
expect designers to create a style guide or a UI world. A/B testing is a great way of assessing
pattern library first. You could also create mood things and is probably the most common
boards that allow you to get inspiration from others. way of testing, along with surveys or polls that COMPLETE
And lastly think about responsiveness (mobile first) allow you to ask your active users for their BEGINNER’S GUIDE
and how they will interact with your product. honest opinion. TO UX RESEARCH
https://bit.ly/2N7gq7R

feature _________________________________________________ 55
 SKETCHING
FOR
SKETCHING IS A VITAL ASPECT OF THE UX
PROCESS. LET’S TAKE A LOOK AT THE BENEFITS
OF SKETCHING, AND WHEN AND HOW TO DO SO

espite living in a very digital world (where there’s an app for

everything), sketching still holds a ton of value. In fact, when it
comes to ideation, no other method is faster.
Sketching can come into play at any stage in the UX workflow,
although when we think sketching, rough ideas are usually what
come to mind as they offer a quick and easy way to iterate through various
low-fidelity ideas in a short space of time – although there’s no reason why
sketching can’t be used for mid-fidelity design too, so long as collaboration
isn’t an issue.

56__________________________________________________feature
 SKETCHING
FOR

THE FOUR-STEP
SKETCH TECHNIQUErguably the best sketching technique, the
four-step sketch involves taking notes,
sketching initial ideas, iterating over the best
idea, and finally, storyboarding this idea as a
means of planning what will eventually
become a testable prototype.
The four-step sketch is an effective technique because
the methodology demands that sketching is fuelled by
user insights, iteration and it’s also pretty darn fast, so it
doesn’t take up too much of your time. If you were
looking to reap the most value from your time, using the
four-step sketch methodology would be a decent
approach — it’s a terrific way to diverge and converge, all
the while staying lean and energetic and not be bogged
down with creative block and unnecessary details.

STEP 1
TAKE NOTES FOR 20 MINUTES

STEP 2
SKETCH ROUGH IDEAS FOR 20 MINUTES

STEP 3
SKETCH 8 ITERATIONS FOR 8 MINUTES (IE CRAZY 8S)

STEP 4 Paper by WeTransfer (formerly FiftyThree) (https://paper.bywetransfer.com) loosens the reigns a little, helping
TURN THE BEST ITERATION(S) INTO A SIMPLE 3, 4, OR 5-STEP
STORYBOARD (THIS SHOULD TAKE ROUGHLY 10 TO 20 MINUTES) designers explore ideas in a more artistic way — this is fine as long as we’re not getting overly carried away with
minor details that might be better considered later down the line. Tip: for best results, pair with a digital pen!

SKETCHING
TOOLS he 2018 uxtools.co design survey
(https://uxtools.co/
survey-2018#brainstorming)
revealed that the majority of
designers chose ‘Paper/
Whiteboard’ as their method of sketching
and brainstorming. In our opinion this will
never change, although there are some
scenarios where using an app is
advantageous or even necessary to complete
the task at hand.
Of course we’re talking about
collaboration, however, many designers
also enjoy a sketching app for ideating on
the move. InVision Freehand (www.
invisionapp.com/feature/freehand) is
whiteboard-sketching-brainstorming app for
the digital age — its intuitive drawing features
can result in spotless sketches, while also
allowing stakeholders to collaborate.

feature _________________________________________________ 57
 STORYBOARDING FOR
STORYBOARDING HELPS CONCEPTUALISE THE USER’S
OVERALL EXPERIENCE, NOT ONLY AS THE USER FLOWS FROM
SCREEN TO SCREEN, BUT ALSO WHAT MOTIVATES THEM TO
WANT/NEED YOUR APP OR WEBSITE

SIMPLE SKETCHES
Eventually, one idea will begin to stand out, and this
is where storyboarding comes into force. In order to
user test our solution with a real audience, we’ll
need to create an interactive wireframe; but, how

TO FOLLOW
many screens do we need? What exactly do these
screens need to show? Remember, our sketches are
just that — simple sketches, but an interactive
wireframe, while still relatively low-fidelity, will
SKETCHNOTE demonstrate the various screens and functions
ARMY needed for the user to carry out their objective. A
twitter.com/SketchnoteArmy storyboard helps us decide how many screens are
needed, and the functionality of each one.

EMOTIONAL JOURNEY
Sketchnote Army is an eye-catching
showcase of sketchnotes and
sketchnoters curated by
Mike Rohde, Mauro Toselli and As you can imagine, a storyboard takes us on an
Steve Silbert. emotional rollercoaster. At first the user is at a
disadvantage — they may be being bullied at school
and have recently lost their uncle Ben, but
JAKE KNAPP an issue curses their day-to-day life. Then,
https://jakeknapp.com/sprint something happens; they use/discover an app or
Knapp helped co-create the sprint feature (ie your app or feature), and their life is new
methodology, which heavily features and improved.
sketching and storyboarding to help Minus getting the girl, the user now feels like a
teams quickly validate cool ideas. million bucks. Fundamentally, all storyboards take
There’s no reliable or convenient way for users to the same approach (as do all superhero movies),
test a sketch, but we also can’t willy nilly draft up a but storyboarding isn’t just about having a cool plot,
RACHEL KRAU wireframe without holistically mapping out the user it’s the emotional journey that helps users see the
twitter.com/rachelkrau flow of our idea. value in what we’re building. Jetpack sneakers
Rachel Krau is a user experience sound like a really cool idea, but ultimately nobody
specialist at Nielsen Norman Group, is going buy them if they don’t help the user level up
in any way.

PROBLEM SOLVING
and often tweets and retweets
about storyboarding. A storyboard conveys the why and the how, and
is a valuable stepping stone in mapping out the user
Additionally, we need to conceptualise the why as flow and constructing our first user-testable
RAZA SHAH well as the how. Why does the user need our app wireframe. As a bonus, no special tools are required
www.instagram.com/lexshah or website? What problem does it solve? Where beyond what you’re already using for sketching.
Designer Raza Shah often shares storyboarding originates from the fields of fiction
sketches, insights and wireframe writing, filmmaking and animation, storyboarding
should also convey the user as the classic

MENTAL MODEL
timelapses on his Twitter and
Instagram accounts. underdog superhero.

Here’s an example: When sketching ideas, it’s important to calibrate

KRISZTINA FRAME 1: the user encounters a supervillain (ie an our frame of mind, and that is the mental model of
SZEROVAY issue), but isn’t strong enough to beat them (ie diverging and converging.
twitter.com/krisztaszerovay they need help) When diverging, the aim is to explore as many
Krisztina Szerovay runs FRAME 2: the user finds their superpower (ie your ideas as possible, increasing the odds of locating the
sketchingforux.com, a weekly app) one that best solves the problem. When converging,
newsletter, and often tweets about FRAME 3: they defeat the villain (ie solve their the aim is to narrow down the ideas into a more
UX sketching on Twitter. issue) refined iteration, and eventually a storyboard.

58__________________________________________________feature
 EXPERT
COMMENT

DESIGN AND THE

BOTTOM LINE INVISION STUDY FINDS EUROPEAN DESIGN
TEAMS PUNCHING ABOVE THEIR WEIGHT
he screen has become the most important place in the world. Today,
whether you are a bank, a hotel chain or a clothing company, you are also a
technology company, and the primary touchpoint between you and your
customers is digital. In this context, design has become a key differentiator in
the battle for hearts, minds and wallets – and as a result, many companies have
begun to invest in their design practices.
Some are seeing impressive results. According to The New Design Frontier, a global study
recently released by InVision, the organisations that have mastered design have seen
outcomes that go far beyond just product usability and customer satisfaction to positively
impact bottom-line metrics.
Ninety-two per cent of the companies that ranked at the highest levels of design maturity
could connect the efforts of their design team to their organisation’s revenue. Another 85 per
cent said design had delivered cost savings, and 84 per cent said that design had improved
time to market for their products.
Notably, European companies are disproportionately represented at the highest levels of
design maturity, despite having design teams which are smaller on average than their global
counterparts. The good news is the study revealed the exact behaviours that have led to their
success, and can be replicated by organisations that want to achieve similar results:

1
Involve customers in the design process. Avoiding assumptions in the product
development process is essential, and that means getting digital products in front
of users early and often. Sixty-five per cent of the design teams with the strongest
business impact co-create products with their customers – four times more than their
peers at the bottom of the pack.

2
Hire design leaders with experience. Nearly two-thirds of the highest maturity
companies in the study have teams led by design leaders who are directors and
above. The takeaway? It’s essential to hire leaders who can inspire their teams,
create and execute on a vision, and advocate for design with company leadership. The
more you invest in senior design leadership, the greater the likelihood that you’ll be
able to impact the bottom line.

3
Use data to inform design strategy. The companies that are using design to
drive significant business benefits leverage sophisticated analytics and
reporting techniques to measure the impact of any given project as it
progresses. What’s more, designers are empowered to use this data to choose which
opportunities to pursue in the future.

4
Encourage design adoption throughout the organisation. Hallmarks of a mature

LEAH
design practice include a cohesive design culture with tools, quality standards and
principles that enable design at scale. Equally important, individuals outside of the

BULEY
design team have regular, substantive contact with designers and actively participate in the
design process. And lastly, stakeholders in engineering and product actively work with
designers to deliver on shared goals.

DIRECTOR OF DESIGN In today’s digital world, leaving design to chance isn’t an option. Even many of the
EDUCATION AT INVISION
url invisionapp.com organisations who know this and are investing in their design practice have work to do ensure
twitter @leahbuley that their design teams are supported both culturally and structurally. The good news is that
when all of these elements come into play, the results can be extraordinary.

comment _____________________________________________59
 A WEEK IN THE LIFE
OF A UX DESIGNER
AS A UX DESIGNER, NO TWO WEEKS ARE THE SAME. JOSS COOK GIVES US AN INSIGHT
INTO WHAT IT’S LIKE TO WORK AS PART OF THE DESIGN TEAM AT LUSH DIGITAL

On Mondays I typically arrive in the office at from your desk. We also carried out some observations website checkout they’ve been building from my
about 8.45am. I’ll start the day by consulting of our staff using our Point of Sale (POS) app to see if designs. We had a few concerns around the
our UX Design Trello board to see what projects they’ve created any workarounds or have subconscious international shipping flow that arose once we had the
the team are working on for the coming week. struggles that didn’t come up in conversation. interface live in code, so decided to take the site in its
Our designers sit as a central function to the The train journey home from London was a good staging environment around the office to run some
Lush Digital team and work across multiple product opportunity to write up the notes from the day, along quick users tests. Working in the same building as our
squads. As the squads work in two-week sprints, each with some suggested actions, ready to feed back to the finance, events and media teams means we have
designer may be juggling a number of projects at any rest of the product squad. people on tap to borrow for short guerilla tests that can
time, and it makes sense to have a central place where quickly help validate decisions or expose areas that
we can keep track of our top-level tasks. I’m working Wednesday is usually ‘work from home’ day for need further refining.
across two squads at the moment so will attend short our digital design and engineering teams. It’s a
daily standups for both of these at 9.30 and 10.00am, good opportunity to get your head down, turn Friday is ‘20 per cent’ time at Lush Digital. It’s
usually making sure the engineering teams have off Slack notifications for a few hours and focus the day of the week where we have permission
everything they need to push forward with their tickets. on work, without any of the interruptions that to work on projects that sit outside of our
We’re currently working on our new website strategy come from sitting at a desk in an office. roadmap, and we’re also encouraged not to
and have been creating proto-personas for our I’ll usually spend Wednesdays in Sketch, using the schedule any meetings! Google popularised
audience that are driven not by demographics but by quiet time to work on any project-related interface the idea, and products like Gmail and Google Maps
their needs and behaviours. This Monday I spent most design, or making updates to our design system if were the result (bit.ly/2GlyZ6Z).
of my time fleshing these out and validating them required. We have a Sketch file that houses all of the At the moment I’m working on designing two
against some recent vox pop research collated by our components of our design system, and we keep this in digital hubs for our manufacturing and retail
social team. sync with the React Storybook component library that recruitment teams, as they currently don’t have any
our front-end developers use. Both are always evolving digital format to tell their department’s stories to
We have our own till system in each of our UK as needed and have become a vital tool for keeping all prospective employees. This Friday we had two
Lush stores that is designed, built and of our interfaces consistent. one-hour workshops to gather together all of the
supported in-house, so naturally there is always This Wednesday I spent the morning working on a content that needed to be included and sketched out
feedback to action and feature requests to landing page for a new campaign and designing the wireframes for the one-pagers. I could then go away
validate and prioritise. I spent Tuesday in one of emails that will be going out to promote it. Working from and digitise these to be shared with the wider teams
our flagship stores in London, interviewing the retail home also means that I can spend time with other for feedback.
staff and shop managers to understand any niggles and designers outside of Lush Digital, so myself and a friend Friday is also the time to have a bit of fun, and for an
frustrations they’d been having with the application over will often go to each other’s houses for the afternoon amusing end to the week I’ve routinely created ‘Topical
the busy Christmas period. and work side by side. It’s a great way to get a fresh set Tims’ using the face of Tim, one of our very talented
Nothing beats face-to-face conversations to of eyes on your work and share new tools, tips and tricks front-end developers. Tim becomes the centrepiece of
understand your user’s pain points, and building we’ve discovered. a topical picture that goes out to the design and
relationships with the people who use your digital engineering teams via Slack – a recent favourite being
products every day encourages them to collaborate and On Thursdays we have our weekly catch-up ‘Mary Poptims’, to celebrate the cinema release of the
share ideas that you as the designer can’t conjure up as a digital design team. Aside from project Mary Poppins sequel.
standups I don’t really have too many
recurring meetings, but this hour every week
is an invaluable opportunity for the
designers to catch up as a group. We usually stick to a
loose agenda, discussing ways of working, critiquing
work in progress and rounding up with ‘anything cool
we’ve found from the design community’. I’ve
discovered some great new podcasts, sources of
inspiration and events from these catch-ups, as well as
it being a forum to give and receive honest feedback.
Joss Cook (second left) discussing ideas and I spent the rest of the day with a few of our Joss Cook (second left) discussing improvements and
improvements for Lush Digital front-end developers and QAs, reviewing part of the ideas with members of the the engineering and QA team

60 _________________________________________________feature
 A WEEK IN THE LIFE
OF A UX DESIGNER

,VSHQW7XHVGD\LQRQHRIRXUÿDJVKLSVWRUHVLQ/RQGRQ

”
LQWHUYLHZLQJWKHUHWDLOVWDIIDQGVKRSPDQDJHUV WR
QGDQ\QLJJOHVDQGIUXVWUDWLRQVWKH\áGEHHQ
LWKWKHDSSOLFDWLRQRYHUWKHEXV\&KULVWPDVSHULRG

feature _________________________________________________ 61
 Tutorials

Build prototypes
with Adobe XD Desi n se eam
mless raan tions bet een
screens using ‘Auto-Animate’ and
control it with your voice in Adobe XD

Subscribe
today
Go to page 28
to learn more

DOWNLOAD TUTORIAL FILES

www.filesilo.co.uk/webdesigner
62__________________________________________________tutorial
 Tutorials

i
n contemporary web and app design there 2
are often times when the interaction
doesn’t open a whole new page or screen.
The modern approach to creating interactive
content requires transitions between design interface
elements so that the user is surprised and wowed by
the experience of changing content. This all happens
on the same screen or page, without a refresh.
Designing these kinds of interactions and refining
them to work properly can take time, but it’s worth
doing before writing your code.
This is what Adobe XD has spent the last few
months of development getting right. Create content
in one state on one screen, move that content to the
new state on the new screen and simply choose the
‘Auto-Animate’ option to transition. All the content that
is the same on both screens automatically animates
from one position to another. If you don’t want all the
content visible on both screens, make the content
invisible on the first and it will transition into place.
Going beyond that, a new feature of XD enables
the user to control interactions with their voice. We’ll 3. Place the cabin 3
explore this as a design feature and how the app can The next image for the design will be the ‘cabin.png’.
speak back to the user as well, which can provide Just import this in the same way you did in the
some interesting design opportunities. previous step and then place it to fill the screen.
Finally, import the image ‘trees.png’ and place it at
1. Starting the project the bottom of the screen with the trees over the lake.
If you don’t have Adobe XD, you can download and
install it from adobe.com/ca/products/xd.html. Once 4. Bring in the logo
the install has completed, open the software and the The reason those images are separate layers is so that
welcome screen will enable you to choose a screen size when a transition is created between screens they can
to download for. In this case choose the iPhone 6/7/8, as move separately. Go to the File menu and choose
that’s the right size for this project, but you will see there Import. This time select ‘logo.ai’, which is a vector 5 6
are a variety of sizes available. image. Place this image in the top centre of the screen.

2. Import the first image 5. Add a circle

There are different ways to import images, but in this Select the circle tool and draw a circle just slightly
first instance go to File>Import. Choose the ‘assets’ larger than the logo. In the Properties panel on the
folder from the project files and the first image to right, remove the stroke and make the background
import will be ‘sky.png’. Place it on the top of the screen black. Select Background blur and reduce the
and move it a just couple of pixels down. brightness to -30 so that the circle is still black.

1
6. Reorder the graphics
Now the circle needs to move behind the logo.
Select Object>Arrange and send backwards. Like in
other Adobe products, it is also Cmd/Ctrl+[ to move
any graphic backwards in the layer order. Using the
right square bracket, meanwhile, will bring an object
forwards in the order.

7. Drop the mic

Now import the ‘mic.ai’ image and resize the image
to be relatively small. Place this at the bottom of the
screen. Draw a circle around this and uncheck the fill

Hidden panels
The Asset panel and the Layer panel are available
from the bottom left of the XD Interface. These
enable you to store asset styles and rename or
reorder layers.

tutorial _________________________________________________63
 Tutorials
Build prototypes with Adobe XD

7 11

so that it’s removed. Then make the stroke white and In the Layer panel, rename the whole group ‘logo’ 13. Add a label
two pixels wide. Position that around the ‘mic’ image. so that it is easily identifiable if you need to edit this Using the Text tool, add the label ‘Forest Cabin’
again later. For the moment the design for the first below the text and use the Assets panel to style the
8. Text message screen is complete. text in the saved style from step 8. Select the image
Use the text tool to add the words ‘speak to search’ and the label and group them together. Name the
below the microphone. Make the text white and 11. Extra elements group ‘left cabin’ in the layers panel.
change it to Helvetica Neue Condensed Black. In the Even though the first screen is complete there are
bottom left of the screen click the Assets panel icon still more design elements that need to be added. 13
to open it. With the text selected on the screen, click This is how animation is created by changing the
the ‘+’ icon next to ‘Character styles’ to save this elements’ positioning between screens. Go to the
format for the text. rectangle tool and hold Shift to add a square on the
screen, making the border white.
9. Join a group
Select the Layer panel icon in the bottom left of the 12. Different import
screen. On the screen, select the ‘search’ text and Now open the folder for the assets through your
Shift-click to add the circle and the mic icon. Go to operating system. Select the ‘cabin1.png’ image and
Object and choose Group. In the Layer panel rename drag this directly onto the square that you created in
this group ‘Search’. It’s useful to name groups, the previous step. It will automatically be masked inside
especially when animating these. this. Double click to edit the position of the image and
make sure that the cabin is visible in the square.
10. Group the logo
Just as in the last step, select the logo and the 12
blurred circle around it, then group them together.

10

Different modes
There are two different modes in Adobe XD; the
design view that allows you to lay out your
screens, and the prototype view, which enables
you to wire up the interactions.

64 _________________________________________________tutorial
 Tutorials
Build prototypes with Adobe XD

Working with
responsive design
If you are designing web
pages then it’s always
difficult to design for
different screen sizes.
Adobe XD understands
that designing modern web
pages means designing for
different screens. By default
the Responsive Resize option
is turned off for an artboard.
Turn this on when you want
to resize your artboard. It’s
usually a good idea to make a
copy first for the different-
sized screen. XD does a
pretty good job of resizing
your content, but if anything
doesn’t stay together that
should then simply group
those elements. After
resizing, you can manually
adjust anything that isn’t to
your liking, which makes it
much faster than most other
design programs to convert a
design from screen to screen.

14 16 18

14. Duplicate the group 16. Text title 18. Duplicate the screen
Normally repeating an interface element is the Add text to the page with the text ‘Search results for Select the artboard by clicking on its name, then
perfect job for the ‘Repeat Grid’ tool. However, this is cabins’. Give this the Rockwell typeface and save this double click the artboard and change the name to
going to need specific animation, which doesn’t work to the Character Styles in the Assets panel. Now ‘home’. Copy and paste the artboard and rename it
with the Repeat Grid. Select the image and text position the ‘lower cabin’ group right at the bottom ‘search’. Now select the logo and move it up to
group, then copy and paste it so that it sits next to of the screen and take the appearance down to zero almost off the screen, then reduce its appearance
the original, and add the image ‘cabin2.png’ instead. so that it is invisible on this screen. to zero.

15. Rename then copy again 17. Changing opacity 19. Move the backgrounds
Change the text to ‘Snow Cabin’, and in the layers Now select the left and right cabins, move them to Select the sky image and nudge it up slightly on the
panel name this ‘right cabin’. Select both the left and the bottom of the screen and take the appearance screen. Select the cabin image and move it up until
right cabin and duplicate them, position the slider to zero. Repeat again for the search text. When the cabin is at the top of the screen. Then click on
duplicates below and update their text and images we move to another screen these will all animate to the trees image and move it over the cabin. Finally,
with ‘cabin3.png’ and ‘cabin4.png’. Group both of their new positions. In the Layer panel, move the ‘left select the ‘search’ group and reduce the
these together and name the group ‘lower cabin’. cabin’ above all of the other cabin groups. appearance down to zero.

15 17 19

tutorial _________________________________________________65
 Tutorials
Build prototypes with Adobe XD

20 23

20. New elements appear the Action to Auto-Animate and Easing to Snap. Make Trigger to Time, make the delay 0s and set the
Select the search results in the Layer panel and bring the duration 1.5s. In the search screen click on the Action to Speech Playback. Make the speech ‘search
its appearance up to 100. Move it up on the screen. back button and drag the blue arrow back to the results for available cabins’.
Repeat this for the left cabin, right cabin and lower ‘home’ screen. Just change the Trigger to Tap.
cabin. Use the pen tool to draw a simple back button 25. Speech confirmation
and add a circle around it. Make the background blur 23. Test the prototype Test this now with the play button to hear a voice
and take the brightness of that down to -30. Over in the top right of the XD interface is a play confirmation of the search. Close the prototype when
button. Click on this and a working prototype will you have tried this out. Another screen is going to be
21. Complete the back button now pop up on the screen. On the homepage you created, so let’s click back on the ‘Design’ view in the
Select the back arrow and circle, group them together will need to hold down the Space-bar while you top left of the XD interface. Click on the search screen
and name them ‘back button’ in the Layer panel. speak the voice command ‘search’. When you let go by clicking the name, and then copy and paste it.
Switch over to the ‘Prototype ‘ mode by pressing of the Space-bar it will take you to the next screen
‘Prototype’ in the top left of the XD interface. Select the and animate the graphic interface into position. 25
homescreen, drag the blue arrow to the search screen
and a pop-up panel will appear. 24. Going back
Once the transition has run you can press the back
22. Voice command button to get back to the homescreen. Close the
Change the Trigger to Voice and type the word prototype and click on the search screen, then click
‘search’ as the voice command to control this. Change the blue arrow to the right (don’t drag). Change the

22 24

26. Scaling the image

Rename the new screen ‘cabin’. Double click the
image for the ‘left cabin’ layer. Resize the corner
handles so that it fills the screen, then reposition the
image inside so that it covers that screen. Click on
the search results text and take the appearance
down to zero to remove it from view.

26
Test on a device
Your final testing of the app is not just
limited to testing on the desktop – your
prototype can also be tested on a device
to get the right kind of feel for how it will
look on the device. First of all, download
the Adobe XD app from your device’s
respective app store, then connect the
device to the computer with a USB cable.
Click on the small mobile phone icon in
the top right of the XD interface. In the panel
that pops out you should be able to see the
name of the device and, provided you have
the XD app running on that device, you will
be able to see and test prototypes. It’s also
possible to avoid using a USB cable and
transfer via the Creative Cloud.

66 _________________________________________________tutorial
 Tutorials
Build prototypes with Adobe XD

27

27. New screen elements 29 Auto-Animate. Keep Easing as Snap but reduce the
Double click the ‘Forest Cabin’ text as it is part of the duration of this to 0.6s. This ensures that the
group. Enlarge the text size to 26 pixels and move it animation doesn’t drag – the movement of the first
up slightly on the screen. Add text to the screen in screen to the second screen had a lot of movement
Helvetica Neue Medium at 14 pixels size and set it to that required a longer transition.
white to stand out against the background. Add a
white line with the line tool under the heading. 31. Link up the back button
Now select the back button from the final screen and
28. Create a button drag the blue arrow from this back over to the ‘search’
Use the Rectangle tool to draw a rectangle on the screen. All the settings from the previous transition
screen at the bottom of the design. Drag in the should be remembered. You are now ready to go
corner handles to give this shape round corners. Add mode by clicking the word ‘Prototype’ in the top left ahead and test this by clicking on the play button.
the word ‘Reserve’ to this, using the saved character corner. In the search screen click on the ‘forest cabin’
style in the Assets panel for Helvetica Neue in group of the image and text. Drag the blue handle 31
Condensed Bold. from this over to the ‘cabin’ screen.

28 30. Animation settings

In the pop-up panel for the transition between
screens, choose Tap as the Trigger, then make Action

30

Repeat Grid
Often when designing interface elements there
29. Move to Prototype mode are a number of repeating items, so be sure to
All the design elements are in place now for the use ‘Repeat Grid’ for these.
entire design of the app. Move to the ‘Prototype’

tutorial _________________________________________________ 67
 Tutorials
Build prototypes with Adobe XD

32

32. Auto-animate 34 35
What you will see with the auto-animate now is that
the image expands to fill the screen, and the
elements that are no longer needed will fade away
while the new text will fade in. The opposite happens
when going back. This provides a good way to see
the auto-animate working across three screens.

33. Save the project

By default your project should automatically save to the
Creative Cloud, but it is a good idea to save a copy to
your own hard drive in case there are any issues. Click 36. Video version
File>Save, change the location to your own computer Another prototype can be shared by recording the
and name the project with a suitable name. interface in action. Click the share button and choose
Record Video. This will open a window, and when
33 you close this you will be prompted to save a
34. Sharing the project recording of the screen as an MP4 file, which is also a
The whole point of prototyping is to test the project useful way to share your prototype.
on other people. Fortunately there is a share button
on the top right of the XD interface that makes this a 36
breeze. Click the share button, and in the drop menu
that appears select the option Share for Review.

35. Publish prototype

In the next screen you are told that auto-animate
support is not yet available for the web, but it is
coming soon. Click Create Public Link and then click
the link in the top right to visit the public link in a web
browser. You will need to hold the Space-bar down to
use the voice command with the prototype.

68 _________________________________________________tutorial
Special offer for readers in North America

SAVE 30% When you subscribe

PLUS
you’ll receive The 100 Best Typefaces Ever e-book!

FREE
resource
downloads
eve y issue

+44 (0) 344 848 2852

2UGHUKRWOLQH
Expires
2QOLQHDW myfavouritemagazines.co.uk/WCUEB
*Terms and conditions This is a US subscription offer. 30% saving refers to the USA newsstand price of $14.50 for 13 issues at $188.50, compared
with $132 for a subscription. You will receive 13 issues in a year. Please provide a valid email address to receive your e-book. You can write to us or call us
April
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
XSRQ UHTXHVW 8. FDOOV ZLOO FRVW WKH VDPH DV RWKHU VWDQGDUG À[HG OLQH QXPEHUV VWDUWLQJ  RU  DUH LQFOXGHG DV SDUW RI DQ\ LQFOXVLYH RU IUHH PLQXWHV
DOORZDQFHV LI RIIHUHG E\ \RXU SKRQH WDULII  )RU IXOO WHUPV DQG FRQGLWLRQV SOHDVH YLVLW ELWO\PDJWDQGF 2IIHU HQGV $SULO 
2019
 Tutorials

Master
wireframing
in Sketch
Discover the essentials you need to create,
refine and present your wireframes
Subscribe
today
Go to page 28
to learn more

DOWNLOAD TUTORIAL FILES

www.filesilo.co.uk/webdesigner
70 _________________________________________________tutorial
 Tutorials

1 2

W
hether you’re new to user know what to do and what steps to take? This tutorial with pop up. Take advantage of the predefined
experience design or you’ve aims to answer those questions. artboards that are suggested by Sketch on the
been active in the field for years, right-hand panel to set up your artboards quickly, or
you will have no doubt heard of 1. The ideation phase create a custom size.
wireframes. For the modern designer wireframing is The first problem you should address is trying to
an essential step in translating a concept for a digital figure out how your product can help customers to 4. Name artboards appropriately
product into reality. accomplish their goals. Begin with as many ideas as When it comes to naming the artboards (click on
With any wireframe clarity is key. By only taking possible in order to work towards better and better ‘Artboards name’ in the left panel), use a suitable
into account the essential components needed at an solutions. Start by inserting some shapes and text naming pattern that will be obvious to you and your
early stage of the design you can guarantee that the (Insert>Shapes, Insert>Text) to identify very simple team members. By adopting the action of the
resulting wireframe will have a huge impact on the areas of the layout, or alternatively use pen and paper screen – for example Homepage_VIDEOPOPUP –
outcome of the final product, as you’ve only for this step. you will eliminate any questions about its purpose
concentrated on what’s important. By only using the when sharing the wireframe at a later date.
core components for your design – header, footer, 2. Organise your file with pages
navigation, buttons – to begin with, you can always As your wireframes grow, keeping organised is 5. Decide on a grid system
ensure that your focus is on the user, without getting essential to ensuring you stay efficient. Therefore If you work in a team of developers, do them a
distracted by a design direction or font family you you should make use of pages. Create a page (+ icon favour and work to the correct guidelines. Get a grid
had in mind. next to Pages) for each screen of the app or website
In recent years, Sketch has risen to one of the top that you’re making wireframes for.
vector graphics editors among designers. Its Predefined wireframes
Wireframes are a very popular tool, and many in
features, such as symbols, text styles, artboards and 3. Create artboards for each the design community have created free-to-use
prototyping enable users to create a wireframe they screen variant examples. Websites such as Sketch App Sources &
can be proud of. Use artboards (Insert>Artboard) to act as possible InVision provide open source wireframes to
But where does wireframing fit into the design interactions or steps that users can initiate on a download, so be sure to check them out.
process? If you’ve never done it before, how do you particular screen, such as homepage and homepage

3 4

tutorial __________________________________________________71
 Tutorials
Master wireframing in Sketch

6 7 system set up (View>Canvas>Layout Settings) and

work to that setup from the beginning. To toggle the
layout settings, press Ctrl+L or Cmd+L.

6. Use rulers to define

heights and widths
Press Ctrl+R or Cmd+R to bring up the rulers
functionality in Sketch. To create a ruler line, click on
the horizontal or vertical axis and drag and drop the
line to wherever you see fit. Use the rulers as a guide
to your elements on the page and to keep your
layout in check – for example your navigation will be
Collaboration & sharing 100px in height.

Sketch’s cloud feature is an online

presentation of your pages and
7. Set up a monochrome
artboards in one location. Anyone colour system
can sign up to use Sketch Cloud to Using a monochrome colour palette while
view, download and comment on wireframing in varying shades will enable you to
Sketch files that have been shared
create a strong visual hierarchy by only highlighting
via a URL generated by Sketch.
To upload and share your areas of importance and interactivity. Click on the ‘+’
wireframe, click on the Cloud icon under Document Colours with your colour
(it could be hidden behind the >> highlighted to keep a collection of your palette.
icon in the tab), sign up with an
account and upload your designs
to the Sketch Cloud. From this
point onwards your link will remain
the same, so if you make any
future amendments to your work
just click the cloud icon and click
Update in the share pop up to push
through your changes.
The dashboard on the cloud
is pretty self-explanatory, with
prototypes, artboards and symbols
available to view in order. Get
feedback on your wireframes 8
using Sketch Cloud.

72 __________________________________________________tutorial
 Tutorials
Master wireframing in Sketch

9 10

8. Research plugins and let 11. Master the power of symbols

them do the heavy lifting This is without doubt the best feature in Sketch. It’s
Depending on how you work, plugins are a great way similar to text styles, but for all combinations of
to speed up the wireframe process. Plugins such as shapes and text. It’s powerful and will save you a lot
Icon Font can import font libraries like FontAwesome of time. To create a symbol, highlight some nested
directly into your designs, so make sure you take content, such as a button, then right click on the
advantage of them. folder and click Create Symbol.

9. Make use of text styles 12. Use symbol overrides

Sketch offers the ability to save and reuse your text The power of symbols doesn’t stop there. Once saved, 11
styles. Once a text style is saved it can be copied to you can ‘override’ the content within the symbol to
new pieces of text. Want to update the style? No enhance your designs. To see it in action, highlight
problem – changing a text style will affect all pieces your symbol, and in the right-hand panel you should
of text using that style. be able to change the text, text style and button style.
Grouping symbols
Think about others when grouping your symbols.
10. Group your text styles 13. Name symbols with slashes If you plan to share your wireframes in the future
Sketch has recently allowed text styles to be Depending on the depth of your wireframe, using apps like Zeplin or on Sketch Cloud,
grouped, enabling users to keep their text styles organising symbols could be invaluable to your identifying the symbols’ purpose early on will help
better-organised. To try this out, use slashes when wireframe setup. Use slashes just like with text styles when building the design, for example button/
naming your text styles to group them, for example to help organise your symbols and maintain an button primary, button/button secondary.
Headings/H1, Body/p. efficient bank of elements at your disposal.

13

tutorial _________________________________________________ 73
 Tutorials
Master wireframing in Sketch

14 14. Organise your symbols page

As you begin to create your symbols, they will start
to populate your ‘Symbols’ page in the left-hand
panel. Sketch has no clever way of organising these
symbols unfortunately, so it’s best to drag and drop
them into grouped areas to make sure everything
doesn’t get too confusing. It’s a great way to keep
everything in order when multiple designers are
working on the same project.

15. Make your symbols responsive

Symbols should be set up so that their layout doesn’t
break when you stretch them horizontally or vertically.
Luckily, Sketch can handle this. For each element
included in a symbol, you can set up how it will react
when the symbol is stretched by using a control in
the Properties column to the right. Use a
combination of the properties in ‘Resizing’ to make
your symbol responsive.

16. Don’t improvise a folder

structure: keep it organised
As your wireframe starts to grow, make sure that
you maintain a folder structure that makes sense. In
the left-hand panel, try to group each page block
and its subfolders into a readable hierarchy that
anyone can understand, for example
Header>Navigation>Logo.

17. Make it personal

Once you’re happy with your wireframe, why not
add a bit of flair? If you’re creating this for a client
then be sure to include a font style, copy or any
low-fidelity graphics that could help to bring it to
life a bit more – as long as it doesn’t overshadow
the important elements on the page and adds a bit
15
more character.

16

74 __________________________________________________tutorial
 Tutorials
Master wireframing in Sketch

18

17

19

20

18. Create variations of important 20. Presenting your wireframes

pages and elements Be sure to know the preferred options of your
It’s always beneficial to you and your team if you teammates on how they receive the wireframes.
come up with multiple concepts in your wireframes. Some of them may prefer to browse the file, or they
After setting up your symbols and text styles, you could expect something more polished, like a fully
only need to concentrate on changing the layout. It’s working prototype using InVision or Zeplin. Either
also useful if your team members or clients are way be sure that you don’t lose your audience at the
expecting more than one direction. very first hurdle!

19. Sketch prototyping 21. Don’t use layers in

You may have noticed a ‘Prototyping’ tab on the your Sketch artboard
right panel and the option to add animations When working with developers, try to avoid using
between your artboards. Using the Prototyping tab is layers on your screens in Sketch. Most developers
a great way to add links between your artboards to will find it annoying, because they will have to hide
visualise interactions. To add a link, highlight an and show lots of layers in order to learn how a
element, for example a button, click the ‘+’ symbol next screen looks and is intended to behave. Instead, just
to Prototyping, and under ‘Target’ select an artboard to use more artboards for presenting the different 21
navigate to. Click preview in the tabs to view it in action. screen variants.

tutorial _________________________________________________ 75
 Tutorials

10 tips for better

online forms
Introduce UX practices into forms to give users a
better experience and help increase conversions

Subscribe
today
Go to page 28
to learn more

76__________________________________________________tutorial
 Tutorials

A
s users we generally don’t enjoy
filling in forms online. This is down to
a number of reasons. Forms tend to be
time-consuming – we are already
thinking about the product or service that waits
beyond the thank you page, and we want to get there
as quickly and easily as possible. Forms often seem
complicated, and the increased cognitive load they put
on us makes completing the actions even harder. And
then of course there is the risks and issues around
personal data. Everyone is now much more aware of
GDPR – and anyway, why do you really need to know
my birthday for me to sign up for this service?
Forms are the key touch point between our users 3
and us, so it is odd that they tend to be neglected by
designers. Having done all the hard work to sell the
product or service we then force the user to prove
themselves worthy by navigating a long form with
obscure error messages and input fields.
With this in mind, what steps can we take when
building these touch points for our users that will
make the process simpler and generally more
enjoyable? Try using some of these suggestions in
your next project.

1. Ask as little as possible your submissions, and most importantly will help to
Following the recent GDPR legislation your attitude guide the user.
towards collecting data will most likely have changed a
little, and really you want to only ask the bare minimum 5. Auto-focus
in order to let your user complete their goal. The less Remove a click straight away by auto-focusing on the
the user has to fill in, the more likely it is that they will. first field in the form. It gives the user a good starting
point. Make sure the focus itself is styled to be clear
2. Visually ‘chunk’ your forms and prominent. This will really help the user to see
Sometimes you have no choice but to request lots of where they are in the process.
data for a sign-up or registration. In this case it really
helps to visually break your content down into bitesize 5
amounts. You can usually group these based on the
type of information you need.

3. Embrace a single-column layout

Although two-column layouts can look visually nice in
a design and are often used in print, the eye will
2 naturally track vertically. By having a two-column form
layout the user’s eye will have to zigzag left to right in
search of new lines, which will impair the user’s ability
to give you the info you need.

4. Use input constraints

Make use of constraints on your user’s inputs. It may
be quicker just to use text fields for everything, but
the well-planned use of number fields or JavaScript
to ensure that only a certain type of data can be
added will ensure you have less erroneous data in

tutorial _________________________________________________ 77
 Tutorials
10 tips for better online forms

6. Prefill and preselect

where possible
If you have data relating to a user, or they have filled in
some information previously, then use it to prefill elements
of the form. A perfect example would be a billing/shipping
address. Make sure you give the user the option to use the
same address rather than type it in twice.

7. Error checking
Now your user has entered their data, make it as simple
as possible for them to rectify any errors. Always show
your errors inline next to the field in question, and 7
explain the issue so the user knows what to do to solve
it. If possible use real-time validation to check as the
user fills the form in, and perhaps give a signal via an
icon, such as a tick, to show when it is correct.

8. Show that optional

fields are not required
As mentioned, with the new GDPR guidelines you should
only hold the information on a user that you really need.
With this in mind everything on your form should be
mandatory, so indicate optional fields rather than adding
an asterisk to every required field.

9. Explain why you

need information
If you do want to make someone’s experience better
with extra personalisation, make sure you explain what
you will use the information for. Bear in mind that the
information you’re asking from a user could be personal
so they won’t want to just give it away. A site like
Facebook will use this information to try and build a
personal relationship with you, but generally you should
follow the ‘less is best’ rule and not ask if it isn’t necessary.

10. Make your CTAs work 8

Now the user has filled in your form, make sure the
design and visual hierarchy of the page works so that
they naturally press the submit button. There are loads
of ways to visually do this.

Favour the user

It may be easier as a developer to receive a telephone
number split into country, area code and digits, but it
is not easiest for the user. You should always try to let
your back-end process or some JavaScript do the
heavy lifting and get your data into shape. Likewise
you could take the user’s full name in one field. 9 10

78__________________________________________________tutorial
 HEAR FROM THE PROS
SIGN UP TO THE

NEWSLETTER TODAY!
DA RY
FRI T EVE
Y
OU

Get weekly news, tips & inspiration

SIGN UP NOW!
bit.ly/2KI5b7Y
 BE A
BETTER
UXER
TIPS FOR
A BETTER
FIRST IMPRESSIONS COUNT: YOUR PORTFOLIO
IS OFTEN THE FIRST THING. TELLING A STORY,
NOT OVERSHARING AND REMEMBERING YOUR

PORTFOLIO PORTFOLIO HAS USERS ARE JUST SOME OF

THE THINGS TO KEEP IN MIND

TELL A STORY

1
Working with a client or stakeholder on their product is a
fascinating story. You and your team of heroes face a challenge;
an unresolved point of tension – your client’s product is failing
and its users are suffering. Using your complementary skillsets, will
your team successfully navigate business constraints, timelines and
technical debt to save the day? There lies the potential for a wonderful
story arc – be the conduit for that drama, detailing the highs and lows,
and ensuring you grab the reader’s attention.

MAKE IT VISUALLY COMPELLING

2
The work we do is visual: users make sense of the products and services
we design through our explicit visual hierarchies and relationships.
Granted, great UX is more than eye-catching buttons and slick
interactions, but taking the time to ensure your portfolio demonstrates a basic
grasp of typography and layout will convince whoever picks up your portfolio
that you’re confident in what is predominantly a visual medium.

DON’T OVERSHARE

3
Mastering good communication is about knowing how much to
share and when. Your portfolio should strike a balance between
sharing enough detail on the problem you faced, your process,
deliverables and outcomes, whilst not detailing every single meeting,
conversation or pixel pushed in pursuit of the outcome. This takes
practice — being aware of it is a great start!

80 _________________________________________________feature
 BE A BETTER
UXER

BE HONEST

5
THINK ABOUT It is totally fine if, BE ARTICULATE
THE USER after testing or Interviewers are looking for a clear and

4
Your portfolio is an experience shipping your concise exposition of how you’ve placed
too! Take some time to solutions, you find they the user at the heart of your
understand and empathise with didn’t have the impact or
problem-solving process to date. Ensure you can
those browsing your portfolio: what outcomes you’d hoped.
would you like them to know? How In fact, humility and the
articulate this clearly for every case
would you like them to feel? What ability to self-reflect on study or work example you wish to
actions should they take when they’re the weaker points of discuss in the interview.
finished? Remember to ask for feedback your process humanises
on your portfolio from your peers or you to those reviewing
even recruiters. Just like your client’s your portfolio. Just make
products, your portfolio will benefit it explicit how you would
from constant pruning and iteration. change your approach REMEMBER TO SHARE
next time! A BIT OF YOU

6
It’s your portfolio after all. Reviewers are looking, first and
foremost, for evidence of your ability to apply a
human-centered design process to problem solving, but
they’re also interested in hiring a decent, good-natured human
being. Share a bit about what you like to do in your down time or
on side projects to reassure the reviewer you’re not a UX robot.

TAKE LOTS OF PHOTOS

7
Photos can speak a thousand words, elevating a dry process write-up to
an engaging human-centered story. Take lots of photos during
workshops and user testing sessions because they’ll come in handy
when detailing your process in your portfolio case studies. Get your team to
take to take photos too or you’ll be the only one not in them!

WRITE NEWSPAPER HEADLINES,

NOT CLIENT OR PRODUCT NAMES

8
This is a personal choice. We love to see portfolio case studies
with titles in the tone of a salacious tabloid headline. A case
study that simply uses the client or product’s name is a dull
point of entry to a potentially exciting journey. The best examples
capture the essence, drama and outcomes of the project in one pithy
sentence. This is a skill that comes with practice but get it right and
you’ll have portfolio reviewers hastily clicking to find out more.

MAKE IT FOR MOBILE

9
This should go without saying but being able to browse your portfolio on
small screen devices is a must. I’ve seen a number of portfolios from
experienced and talented candidates who’s portfolios render beautifully
on large screens but degrade very ungracefully on smaller screens. If users are
browsing your portfolio on a small screen, there are also other challenges to
consider such as limited attention spans and different interaction expectations.
Plan your content accordingly.

BUILD YOUR OWN PORTFOLIO

© iStock / Getty Images Plus; aurielaki

10
You work in a digital medium: it is simply not enough to
provide your portfolio as a printable document.
Squarespace, Wix and GoDaddy all offer simple, flexible and
affordable website building tools so there’s really no excuse to not have a
digital presence. If you really want to pique your future employer’s
attention, design and build your portfolio yourself. Learning to code has
never be easier with online courses from the likes of SuperHi.

feature _________________________________________________ 81
 HOW
TO
GET
INTO
MEETING WITH DESIGNERS FROM
COMPANIES YOU’RE APPLYING TO FOR
A CHAT IS A GREAT WAY OF FINDING
OUT WHAT’S EXPECTED OF A NEW HIRE

t’s a great time to get into UX. In the last decade agency life is for you. Or maybe you’d prefer to gain
or so, UX has grown from an occupational a deeper domain knowledge, iterating on a single
backwater to a highly valued role within any product with data-driven insights? Then maybe an
customer-first organisation. They’ve never been in-house team or a startup is for you.
more in demand, with everyone from startups to Use social media to reach out to designers from
large multinational companies recognising UX’s the teams or agencies that appeal to you and ask
ability to transform customer experiences and them to give you an idea of what to expect in such a
deliver organisational change. So if you’re thinking role at that organisation. Take an interest in what are
about nabbing your first job in UX design, there’s a they’re working on — even ask if they’d like to meet
few things you should do. for a coffee so you can pick their brains. Flattery can
First of all, you’ll want to understand the nuances get you a long way! Use this opportunity to get a feel
of UX job titles. In a typical ‘UX Designer’ role you for how they, as future colleagues, might be able to
should expect, above all, to be an advocate for help you meet your ambitions too.
human-centered design processes. You’ll be Meanwhile, building a strong foundation of
responsible for gathering user pain points, wireframing user-centered design skills is a must. Make the most
solutions and testing them with your users. of your current workplace to start practising activities
You’ll see roles like ‘UX/UI Designer’ or ‘Product like interviewing and requirement discovery. This is a
Designer’ too: the former expects you to be crucial skill to develop as a UX designer: building
well-versed in the role of a UX Designer but also be understanding through gentle intergotation and
visually literate, taking wireframes from greyscale cross-examination is vital for getting to the heart of
interaction blueprints to colourful, brand-compliant, business and user motivations. Study the work of
high fidelity designs. ‘Product Designer’ is the latest strong visual designers and ‘steal like an artist’; use

DESIGN
flashy job role on the block. Interpretations differ but resources like Dribbble, Pinterest and Behance to
there’s an expectation that as a Product Designer, build up an understanding of visual trends and apply
you’ll have a sharper focus on delivering business them to your own work.
value. As such you’ll find these roles frequently It’s also worth exploring the current design
advertised by startups. education landscape. Companies like General
After you’ve got your head round the roles, you’ll Assembly offer three-month or yearly (‘Immersive’)
UX design can be a highly rewarding courses in UX Design, with the goal of preparing
have to think about what type of team or
career path but it’s not always
organisation you want to join. The type of work you students for their first role in industry. General
obvious how to break into the
do and the people around you will have a big Assembly typically place their students with partner
industry. Get your head round the
industry landscape, flatter your impression on you early in your career so think hard companies, giving them hands-on experience with a
peers and start practising those about your personal ambitions: are you looking to ‘real’ project. If price, time and location are inhibiting
human-centered design processes work on a wide variety of projects, pitching new work factors, SuperHi offer a short course on UX Design for
now to find your way in to clients and selling your process? Then perhaps those wishing to get a taste of what the role entails.

82__________________________________________________feature
 BE A BETTER
UXER

HOW TO
ONLINE UX COURSES

ACE A JOB SUPERHI

https://bit.ly/2tcvOXE
A collection of user experience design short courses

INTERVIEW
where users learn best practices.

The job interview can be the most nerve racking part of landing your dream UX role.
Consider what the interviewer is looking for, prepare (but not too much) and be humble GENERAL ASSEMBLY
https://ga.co/1p1AC7V
UX interviewer is nearly always looking about how a product should work or what we believe Ten week part-time courses or a one week
for three things. First and foremost, to be true to make a product a success. Are you able accelerated course for gettting started in UX.
they’re looking for evidence that you’ve to reflect on these limitations of your understanding
participated in a human-centered design without data or user validation? Can you hold your
process. HCD encourages teams to hands up when something went wrong? Being able to
place users at the heart of any problem-solving talk through the tougher points of a project with a joke
process, popularised by design studio, IDEO. For junior and smile is a highly prized trait!
roles, an awareness of what makes an ideal user With that said, preparation is key. With the job
focused process should suffice; for more senior description, some online research and the scraps you
designers they may be looking for evidence that may have pieced together from the hiring manager,
you’ve designed and facilitated this process, both with you should be able to have a stab at a few of the UDEMY
the team and stakeholders. questions the interviewer is likely to ask. Jot them https://bit.ly/2BpbK8C
They’re also looking at your ability to down and consider how you’d respond to them. Don’t A collection of courses covering different levels and
problem-solve. Are you able to show evidence of over prepare though: sometimes learning answers different areas of UX.
having taken a business problem, identified a user rote can wrong-foot you in the interview if the line of
pain point and found a way to resolve both? At a more questioning takes a slightly different slant.
senior level, can you problem-solve at a process and Ask lots questions too! Be interested in the role,
relationship level? Building empathy for users, find out what your day-to-day would look like. How
understanding where business value lies and does the team your joining collaborate and share their
collaborating as a team all require trust and experiences? What opportunities are there to grow
communication. If you can demonstrate that you and seek learning opportunities? For more senior
place a high value on both of those things, you’re roles, it’s important to take an interest in what the
halfway there. wider business is doing and how leadership sees your INTERACTION DESIGN
They’re also looking at your soft skills: can you role as contributing to the wider vision. If you can FOUNDATION
clearly, concisely (and enthusiastically!) articulate your engage your interviewer on business transformation https://bit.ly/1VviLc3
impact on previous projects? Humility is a key and better yet, give examples of how you’ve impacted Online and self-paced UX Design courses with
personality trait for UX Designers because most of the business transformation in previous roles, you’ll have meetups and instructors.
time we’re working on assumptions: beliefs we hold the interviewer eating out of your hands.

TALK ABOUT THE UNKOWN

5HÿHFWRQWKHOLPLWDWLRQVRI\RXUSURFHVVDQGGHOLYHUDEOHV
We’re often dealing with numerous unknowns on a project,
from user needs and motivations to the perceived value in
our solutions. If you can talk lucidly about these unknowns, UX TRAINING
the interviewer will see a interviewee in pursuit of the truth, https://bit.ly/2DdApgG
not one who’s kidding themself that they already have it. Learn UX Design and get a diploma with classroom,
online and in-house training.

feature _________________________________________________83
5 EMERGING

DESIGN TRENDS IN 2019

WITH TECHNOLOGY ADVANCING RAPIDLY, IT HAS BECOME MANDATORY FOR INDUSTRY
PLAYERS TO CONSTANTLY ADAPT TO NEW UX DESIGN STRATEGIES. SO, IN THIS ARTICLE, WE
WILL TAKE A LOOK AT FIVE EMERGING UX DESIGN TRENDS…

VOICE USER STORYTELLING FOR A MORE UX FOR

INTERFACES (VUIs) MEMORABLE EXPERIENCE WEARABLES
Voice user interfaces (VUIs) allow the user From a consumer’s point of view, UX During the past year, we’ve been
to interact with a system through voice or design is no longer a unique selling point, witnessing the rise of a variety of
speech commands. Virtual assistants, such it’s now an expectation. Humans become wearables, from smartwatches to portable
as Alexa and Siri, are common examples of engrossed in stories and a good story has devices to monitor the quality of your
VUIs today. The way users interact with voice user the power to create empathy with the user. sleep or your heart rate, for example. And their
interfaces is very different to graphical ones, so you Because more brands seek new and innovative popularity will just continue to grow in 2019. So, it’s
may quickly find yourself unsure of how to create ways to stand out from the rest, we will see a up to the UX designer to optimise the experience
great user experiences for VUIs. The intricate growing trend towards storytelling in UX. of these devices.
nature of user’s conversing with a VUI means a However, learning how to incorporate storytelling It’s an appealing space for designers that are
designer needs to pay close attention to how into the design process will be one of the biggest intrigued by the idea of working at the intersection
easily a user might overstep with expectations, challenges for UXers this year, but it also of fashion, technology and wellness, which adds
because individuals normally associate voice with represents a huge area of opportunity for both that additional layer to the significance of user
personal communication. brands and UXers who want to stand out. experience design.

84 _________________________________________________feature
 EMERGING
TRENDS

© iStock / Getty Images Plus; hiro-hideki

Wearables such as
smartwatches

AI FOR PERSONALISED UX TO DRIVE

present a whole
new approach to
EXPERIENCES BUSINESS designing for
the user
With the rise of artificial intelligence and Based on the trends we’ve already
machine learning, companies now have spoken about, UX design will continue to
the opportunity to take a more be the driver of business success, as morre
personalised approach towards and more companies discover the return
customers. AI will not replace UX designers but of investment when designing great products.
they can work together to give the user what they The potential for design-driven growth is massive e
want. It’s about matching user information that AI in both product and service-based sectors. In
collects with the knowledge of the UX designer. short, a good user experience is clearly good for
Brands such as Netflix have known to curate business. According to a study by Forester,
content recommendations with their proprietary companies who invest in UX, see a lower cost of
algorithm. This way, you’ll deliver a great customer acquisition, lower support cost,
experience based on the preferences, tastes, increased customer retention and increased
behaviours and characteristics of your user. market share.

feature ________________________
_ ____________________________85
 Tutorials

Write tests for React-

based Redux apps
Use Jest to write unit tests for the data store and
keep the application on the right track
Subscribe
today
Go to page 28
to learn more

DOWNLOAD TUTORIAL FILES

www.filesilo.co.uk/webdesigner
86 _________________________________________________tutorial
 Tutorials

T
ests are a great way to be confident 2

about the code that gets written. It is

not always possible to review every
page and state in an application after
each change. When something gets updated, we can
run the tests and see if anything unexpected has
been broken in the process. Unit tests are the building
blocks of most test suites. Each part of an application
is broken down into bitesize pieces that can be tested
on their own. When a single piece changes, we only
need to re-run the unit tests related to that piece.
Redux is a collection of those pieces. Actions,
reducers and selectors all come together to move
data around an application. They are built as pure
functions, which enables them to both be connected
together as well as tested separately.
In this tutorial we will go through how to test each
part of a React application that involves Redux – from
action creators through to the connected
components themselves.
Throughout this series we have been building an 3
application called Photo Share, a photo-commenting > cd app/tutorial
app that makes heavy use of Redux. While this tutorial > yarn
will focus primarily on the process of adding a > yarn test
comment, the techniques learned can be used across
the rest of the application. By creating test helper 2. Testing a reducer
functions and classes, we can keep the amount of Reducers are the backbone of any Redux application.
repeated code to a minimum in the process. They transform actions into meaningful data updates,
which makes them a great candidate for testing. Open
1. Install dependencies up reducers/newComment/newComment.test.js and
The first thing we need to do is install all of the create a new set of tests for the newComment
necessary dependencies for our project. These reducer. The ‘describe’ function will hold all the tests
include a package for making requests called axios, we need to run.
which we will come to later on. We will be using Jest as 3. Testing initial state
the testing framework, which comes as part of import reducer, { initialState } Reducers are pure functions, meaning that their return
‘react-scripts’ in the package.json file. Download the from “./newComment”; value is always the result of the parameters passed to
project files and use ‘yarn’ on the command line to describe(“new comment reducer”, () => them. When the application first loads up, the reducer
install the dependencies. Then start the test runner, { uses the initial state defined as the default parameter
which will watch for any changes in files and re-run // Tests go here in the function. We need to make sure that this default
the tests. }); parameter does not cause any issues. Write a test to
cover that case inside the describe block from the
previous step. We can call a reducer just like any other
1 function. If all goes well, we have our first passing test!

it(“returns the initial state”, () => {

const state = reducer();
expect(state).toEqual(initialState);
});

4. Set up new comment test

Next we need to make sure the reducer works with
every action it is designed to handle. For each one, we
need to create a test and a corresponding action object.
Create a new test for the ‘ADD_NEW_COMMENT’
action. Keep the ‘left’ and ‘top’ values as separate

Set up and tear down

Jest provides ‘beforeEach’ and ‘afterEach’ hooks
to run code before and after each test. These can
be used to clean up and reset any values that may
have been changed and could impact other tests.

tutorial _________________________________________________ 87
 Tutorials
Write tests for React-based Redux applications

4 another describe block inside for ‘getNewComment’

tests to keep related tests together.

describe(“new comment selectors”,()=>{

describe(“getNewComment”, () => {
it(“gets the details about the
new comment”, () => {
// Tests go here
});
});
});

8. Check getNewComment
The ‘getNewComment’ selector will fetch the
position of the new comment if one is currently
being written. We need to write a test to make sure
that this is the case. Like before, we can use the initial
state as a base for the data. Create an updated state
object and pass it through.

constants to make the assertion in the next step constructor, it can generate and run these tests where const left = 12;
easier to write. we need them. const top = 34;
const stateWithNewComment = {
it(“handles the `ADD_NEW_COMMENT` const tester = newComment: initialState.merge({
action”, () => { new ReducerTests(reducer); left, top })
const left = 10; tester.initialState(initialState); };
const top = 20; tester.action( expect(
const action = { initialState, getNewComment(stateWithNewComment)
type: ADD_NEW_COMMENT, { type: ADD_NEW_COMMENT, ).toEqual({ left, top });
payload: { left, top } payload: { left: 10, top: 20 } },
}; initialState.merge( 9. Cover no new comment
}); { left: 10, top: 20 }) If we check the behaviour of ‘getNewComment’, we
); can see that it returns ‘undefined’ if there is no new
5. Compare old and new states comment. In order for our tests to catch any errors,
In the previous tutorial in this series we made use of 7. Set up selector tests we need to cover this behaviour as well. Add a new
the Immutable.js library for our state. We can use the Selectors can be a bit more varied in their behaviour. test for this situation. As the initial state starts with no
initial state ‘record’ to create the new state we expect The data they return depends on the current state, new comment, we can use that here:
to receive back. By using the imported initial state as a which makes it important to test each permutation.
starting point, create old and new states and check Open selectors/newComment/newComment.test.js it(“returns `undefined` when there
that the reducer returns the new state. and set up new tests for related selectors. Create is no new comment”, () => {

const oldState = 8
initialState;
const newState =
initialState.merge({ left, top });
const state =
reducer(oldState, action);
expect(state).toEqual(newState);

6. Convert to test helper

These kinds of tests are very common for reducers.
To avoid repeating ourselves, we can use a helper
class that will generate the tests for us. Replace the
two tests we wrote with a couple of calls to a
ReducerTests class. By passing the reducer in the

Test promises
A test must always wait until its function has
finished. To have this work with Promise, the test
can be marked as ‘async’, which enables the
promise to be called with ‘await’.

88 _________________________________________________tutorial
 Tutorials
Write tests for React-based Redux applications

Testing connected components

When combining components with Redux we make
use of the ‘connect’ method, which passes in state

<Component> and ways to update that state. There are a couple of

approaches we can take to test these components.
One way is to test the component as a whole. As we

<Component> are exporting a connected component, our tests must

wrap everything in a <Provider> component to supply
the store. This makes it difficult to interact with the
mapStateToProps component itself, and an error in any of these layers –
mapStateToProps including those supplied by Redux – will fail.
An alternative approach is to export all the parts
mapDispactchToProps separately. The component and the mapping functions
mapDispactchToProps can be passed example data and tested in isolation.
connect(...) The connect method is not tested, as this is solely part
of Redux. One drawback of this approach is that it does
not confirm that all parts are wired up correctly.
connect(...) Unless there is a good reason, it is usually best to
test units as small as possible. Tests will run faster and
be less brittle.

const stateWithNoNewComment = { writing tests, we need to set up some values to 14. Make use of mock store
newComment: initialState populate the store in advance. Create a new describe The ‘createMockStore’ method we created takes a
}; block to hold all this information: value that is used as the initial state for this test. This
expect( can vary depending on what is being tested. Back
getNewComment(stateWithNoNewComment) describe(“submitComment”, () => { inside actions/newComment/newComment.test.js,
).toBe(undefined); const comment = “This is a comment”; create a mock store using the values from step 12. By
}); const left = 12; having this inside the ‘beforeEach’ hook, a new store is
const top = 34; created before each test runs.
10. Set up action tests const currentPhotoId = “1”;
The final pieces of Redux-specific code we need to const user = { let mockStore;
test are the action creators. These are responsible for id: “2”, beforeEach(() => {
the updates being sent to the reducer, so they are name: “Matt” mockStore = createMockStore({
important to get right. Open up actions/ }; newComment: { left, top },
newComment/newComment.test.js and set up the }); ui: { currentPhotoId },
describe block for these tests. user
13. Generate a mock store });
describe(“newComment actions”, () => { The ‘submitComment’ action creator is a thunk – it can });
it(“creates an dispatch multiple actions depending on the result of
`ADD_NEW_COMMENT`action”, () => { these asynchronous calls. Instead of checking the 15. Mock network requests
// Test goes here returned action object, we have to check which Our tests should run quickly and not be reliant on a
}); actions were dispatched instead. The ‘redux-mock- third party. As the ‘submitComment’ action sends the
}); store’ package mimics the Redux store and lets us see data to a server, we need to block those requests
which actions were dispatched. Create a new helper with mocks. These requests are made using axios – a
11. Test a synchronous action inside testHelpers/createMockStore.js that uses this Promise-based HTTP client. Use Jest to mock any
Synchronous actions are functions that return package to generate a store: axios call at the top of this test file. After the code from
objects rather than trigger any kind of network the previous step, add another hook that resets this
request. These can be tested in a similar manner to import reduxMockStore mock after each test.
the reducers and selectors. Write the test for the from “redux-mock-store”;
‘addNewComment’ action creator. Check the return import thunk from “redux-thunk”; jest.mock(“axios”);
value is using the correct type and payload. export const createMockStore = [...]
reduxMockStore([thunk]); afterEach(() => {
const left = 12; export default createMockStore; axios.post.mockReset();
const top = 34;
expect(addNewComment(left, top))
.toEqual({ 13 15

type: ADD_NEW_COMMENT,
payload: { left, top }
});

12. Create submit comment block

The ‘submitComment’ action creator is asynchronous,
which means we need to test it differently. These have
a few more moving parts that need to be set up for
testing, including a Redux store. Before we start

tutorial _________________________________________________89
 Tutorials
Write tests for React-based Redux applications

What is code coverage?

Tests are designed to cover every condition
a codebase can be in. This not only includes
when things go right but also when
things go wrong. What happens if the
server responds with an error or supplies
unexpected data?
Testing frameworks often provide
coverage-checking tools to see which lines
of code are executed by at least one test. For
example, when running tests with Jest using
the ‘--coverage’ flag, it breaks down exactly
what tests are currently covering and where
to improve.
The aim is to have 100% code coverage.
Everything in Redux is built using functional
concepts, which makes all aspects easier to
test – only data that is passed to a function
will affect the test.
While 100% coverage does not mean
the project is bug-free, it goes a long way
to being confident that a change is not
affecting something that wasn’t expected.

}); ) dispatch.mockReset();
it(“submits a comment”, async () => { ); });
// Test goes here // Iterate over props
}); 18. Test mapStateToProps });
Redux interacts with React using connected };
16. Define a response components. These have two methods within them, export default dispatchMap;
Submitting a comment involves receiving a successful which map the state and the action dispatcher to
response from the server. We can temporarily tell props on that component. Create a new helper in 20. Test each new prop
axios to return a specific response in order to check testHelpers/stateMap.js to test the ‘mapStateToProps’ The ‘mapDispatchToProps’ method returns an object
that everything works in that scenario. To do this, method. All we want to check is that it does not throw an containing the props it generates. We can iterate over
create a response object and have axios return that error when it gets called. the keys and make a test for each one. After the
on any POST request. When the thunk action fires, it ‘beforeEach’ call in the previous step, call each prop
receives this data instead. Finally, dispatch the action const stateMap = (mapStateToProps, one after the other. If the mocked dispatch function
to the mock store. state, props) => { has been called, the ‘mapStateToProps’ method is
describe(“mapStateToProps”, () => { working and the test passes.
const commentId = “1”; it(“maps without error”, () => {
const response = { expect(() => mapStateToProps( Object.keys(mapped).forEach(key => {
data: { id: commentId, state, props)).not.toThrow(); it(`wraps ${key} in a dispatch call`,
comment, left, top, user, }); () => {
photo_id: currentPhotoId } }); expect(dispatch).not.toBeCalled();
}; }; mapped[key]();
axios.post.mockResolvedValue(response); export default stateMap; expect(dispatch).toBeCalled();
await mockStore.dispatch( });
submitComment(comment)); 19. Test mapDispatchToProps });
The other method is a little more involved. The role
17. Check the actions of the ‘mapDispatchToProps’ method is to wrap 21. Add tests to component
The mock store keeps a record of every action it actions in a dispatch function. We need to check that Finally, we can put these helpers to the test. The
receives, which can be accessed through its dispatch function gets called each time the prop container components both export ‘mapStateToProps’
‘getActions’ method. It returns an array of objects that function is called. Start another helper in testHelpers/ and ‘mapDispatchToProps’ separately, which means
have been dispatched. Check that the actions are dispatchMap.js. Within that, set up the tests by we can import them inside the test file and run these
what we expect them to be. We can use the other running the function. We will create a test for each helpers on them. Open up components/container/
action creators to make the test easier to read. prop that it returns in the next step. newComment/newComment.test.js. Right before the
end of the describe block, create a new mock store
const actions = mockStore.getActions(); const dispatchMap = and run our new helper functions.
expect(actions[0]) (mapDispatchToProps, props) => {
.toEqual(submitCommentStart()); describe(“mapDispatchToProps”, ()=>{ const store =
expect(actions[1]).toEqual( const dispatch = jest.fn(); createMockStore(rootReducer());
submitCommentSuccess( const mapped = stateMap(mapStateToProps,
commentId, comment, mapDispatchToProps(dispatch, store.getState(), props);
left, top, user, props); dispatchMap(mapDispatchToProps,
currentPhotoId beforeEach(() => { props);

90 _________________________________________________tutorial
Discover another of our great bookazines
From science and history to technology and crafts, there
are dozens of Future bookazines to suit all tastes
 Get your listing in our directory
To advertise here call the ads team on 01225 442244

HOSTING LISTINGS
Featured host: Netcetera
netcetera.co.uk
03330 439780

About us
Formed in 1996, Netcetera is one of infrastructures. A state-of-the-art data
“ Premier provider of
data centre colocation, cloud
hosting, dedicated servers
Europe’s leading web hosting service centre environment enables Netcetera and managed web hosting
services in the UK
”
providers, with customers in over 75 to offer your business enterprise-level
countries worldwide. colocation and hosted solutions.
As the premier provider of Providing an unmatched value for your
data centre colocation, cloud hosting, budget is the driving force behind our
dedicated servers and managed web customer and managed infrastructure
hosting services in the UK, Netcetera services. From single server to fully
offers an array of services designed to customised data centre suites, we focus
more effectively manage IT on the IT solutions you need.

What we offer s


Data centre colocation –

s



Managed hosting – A full Single server through to full
range of solutions for a cost- racks with FREE setup and a
effective, reliable, secure host. generous bandwidth.

s



Cloud hosting – Linux, s



Dedicated servers – From

Windows, Hybrid and Private QuadCore up to Smart Servers
Cloud Solutions with support with quick setup and
and scalability features. fully customisable.

5 tips from the pros knowledgeable staff available 24/7 to

1. Reliability, trust & support provide you with assistance when you
Reliability is a major factor when it need it most. Our people make sure
comes to choosing a hosting partner. you are happy and your problems are
Netcetera guarantees 100 per cent resolved as quickly as possible. Testimonials
uptime, multiple internet routes with Roy T
the ability to handle DDOS attacks, 4. Value for money “I have always had great service from Netcetera. Their technical support is
ensuring your site doesn’t go down We do not claim to be the cheapest second to none. My issues have always been resolved very quickly”
when you need it. service available, but we do claim to
offer excellent value for money. We also Suzy B
2. Secure and dependable provide a price match on a like-for-like “We have several servers from Netcetera and their network connectivity is
Netcetera prides itself on offering its basis, as well as a price guarantee for top-notch, with great uptime and speed is never an issue. Tech support is
clients a secure environment. your length of service. knowledgeable and quick in replying. We would highly recommend Netcetera”
It is accredited with ISO 27001 for
security along with the options of 5. Eco-friendly Steve B
configurable secure rackspace available Netcetera’s environmental commitment
in various configurations. is backed by use of eco-cooling and
“We put several racks into Netcetera, basically a complete corporate backend.
They could not have been more professional, helpful, responsive or friendly. All
hydroelectric power. This makes
the team were an absolute pleasure to deal with, and nothing was too much
3. 24/7 technical support Netcetera one of the greenest data
trouble, so they matched our requirements 100 per cent”
Netcetera has a committed team of centres in Europe.

92__________________________________________________ listings
Supreme hosting SSD web hosting

cwcs.co.uk bargainhost.co.uk
0800 1 777 000 0843 289 2681
CWCS Managed Hosting is the UK’s Since 2001, Bargain Host have
leading hosting specialist. They offer a campaigned to offer the lowest possible
fully comprehensive range of hosting priced hosting in the UK. They have
products, services and support. Their achieved this goal successfully and built
highly trained staff are not only hosting up a large client database, which includes
experts, they’re also committed to many repeat customers. They have also
delivering a great customer experience won several awards for providing an
and are passionate about what they do. outstanding hosting service.
s


Shared hosting
s


Colocation hosting s


Cloud servers
s


VPS s



Domain names
s



100 per cent network uptime Budget hosting with high-performance hosting products
as well as the infrastructure for the
efficient operation of sites. A combination
UK-based hosting of stable technology, attractive pricing, Agency hosting specialist
flexible support and services has enabled
hetzner.com Hetzner Online to strengthen its market
+49 (0)9831 505-0 position nationally and internationally.
Hetzner Online is a professional web nimbushosting.co.uk
cyberhostpro.com hosting provider and experienced data s


Dedicated/shared hosting 02031266781
0845 5279 345 centre operator. Since 1997, the company s


Colocation racks Nimbus Hosting have partnered with
Cyber Host Pro are committed to has provided private and business clients s



SSL certificates agencies to develop our revolutionary
providing the best cloud server platform STORM. With a team dedicated
hosting in the UK; they are obsessed to outstanding support, our 5-star Google
with automation. If you’re looking for a reviews truly speak for themselves. Join
hosting provider who will provide you the thousands of agencies and
with the quality you need to help your freelancers who are benefitting from a
business grow, then look no further control panel that speeds up your website
than Cyber Host Pro. developement as well as your client’s
websites. Supercharge your digital
s


Cloud VPS servers projects today with STORM.
s


Reseller hosting s TFDPOE 8PSE1SFTT JOTUBMM
s



Dedicated servers s %FQMPZ EJSFDUMZ GSPN (JU)VC
s &BTZ UFBN NBOBHFNFOU

Cluster web hosting

Flexible cloud servers

fasthosts.co.uk elastichosts.co.uk
0808 1686 777 All-inclusive hosting operates across ten countries. With a 020 7183 8250
6,CBTFE
BOE
PQFSBUJOH

GSPN
comprehensive range of high- ElasticHosts offer simple, flexible and
dedicated UK data centres. Fasthosts performance and affordable products, 1&1 DPTUFŇFDUJWF DMPVE TFSWJDFT XJUI
keep over 1 million domains running offers everything from simple domain high performance, availability and
smoothly and safely each day. Services registration to award-winning website scalability for businesses worldwide.
can be self-managed through the 1and1.co.uk building tools, eCommerce packages and Their team of engineers provide
Fasthosts Control Panel. 0333 336 5509 powerful cloud servers. excellent support 24/7 over the phone,
1&1 Internet is a leading hosting by email and with a ticketing system.
s


Dedicated servers provider that enables businesses, s


Easy domain registration s Cloud servers with any OS
s


Cloud servers developers and IT pros to succeed s


Professional eShops s Linux OS containers
s



Hosted email online. Established in 1988, 1&1 now s




)JHIQFSGPSNBODF
TFSWFST s 24/7 expert support

listings__________________________________________________ 
Get your listing in our directory
To advertise here call the ads team on 01225 442244

COURSE LISTINGS
Featured:
Northcoders
northcoders.com
Twitter : @northcoders

“
Facebook: Northcoders
No matter what your
About us
Northcoders is the coding bootcamp full-time bootcamp, or fit their course
background, you can
for the north, based in the heart of around your life with their 24-week fast-track your career and
Manchester and built upon northern
values of grit, determination and
part-time bootcamp. Their internal
career support team will help find you
become a web or software
developer in 12 weeks
”
community spirit. No matter what work as a developer, setting up .
your background, you can fast-track interviews with your choices of
your career and become a web or Northcoders Hiring Partners across
software developer in 12 weeks at their the north of England.

What we offer
s 'VMMUJNF s 1BSUUJNF
Fast-track your career Fit our curriculum around
in just 12 weeks your life in 24 weeks

5 tips from the pros

 (FU TUBSUFE XJUI DPEJOH for you, set aside a few evenings
The best way to know if coding each week to really start making
is for you is to just try it! We progress! If coding is for you,
recommend the free, online this should be fun.
JavaScript track of
Codecademy to get you  #F QSFQBSFE
started with the basics. We’ll be with you every step of
the way when you apply. Make
 %P ZPVS SFTFBSDI sure you go through all the
Make sure you read plenty materials we recommend and
of student reviews to make ask for help if you’re stuck.
sure you’re applying
somewhere reputable. Read  (FU TPDJBM
their blog and have a look at With Northcoders, you’re not
their social channels. just on a course, you’re part of a
community that will stay with
 5ISPX ZPVSTFMG JO you long after you graduate.
Once you’ve decided it’s right Make the most of it!

Becoming part of this vibrant, caring community was Northcoders delivered their part of the bargain in spades.
something I hadn’t expected before the course, but They provided tremendous assistance in turning me into
now I couldn’t be without it. To be a Northcoder is to the full product – a well-rounded, capable future tech
be enlightened, inspired and supported employee – and they have the contacts to deliver the
Joanne Imlay opportunities for such people.
Primary school teacher to software developer at Careicon Joe Mulvey
Maths teacher to software developer at Auto Trader

94 _________________________________________________ listings
 WE GOT CODERS

UDEMY
udemy.com wegotcoders.com
[email protected]
Twitter: @udemy We Got Coders is a consultancy that
Facebook: udemy provides experts in agile web
development, working with startups,
The inspiration for Udemy began in a agencies and government. Take one of
small village in Turkey, where founder their 12-week training courses that covers
Eren Bali grew up frustrated by the all that is required to become a web
limitations of being taught in a developer, with highly marketable
one-room school house. Realising full-stack web development skills.
the potential of learning on the internet,
he set out to make quality education s


Classroom-based training
more accessible. Udemy is now a s


Real-world work experience
global marketplace for learning and s


Employment opportunities
teaching online. Students can master
new skills by choosing from an
extensive library of over 40,000 FUTURELEARN
courses, including HTML, CSS, UX,
JavaScript and web development.

40,000+ courses: There is a

course for every designer and dev. futurelearn.com
Self-paced learning: Learn how [email protected]
to code at your own pace. Choose from hundreds of free online
courses, from Language & Culture to
Business & Management, Science &
Technology to Health & Psychology.
THE Learn from the experts. Meet educators
IRON YARD from top universities who’ll share their
experience through videos, articles,
theironyard.com quizzes and discussions.

Twitter: @TheIronYard s


Learn from experts

Facebook: TheIronYard s


Free courses
s


All-device access
The Iron Yard is one of the world’s
largest and fastest growing in-person
code schools. It offers full-time and GYMNASIUM
part-time programs in back-end
engineering, front-end engineering,
mobile engineering and design. The
Iron Yard exists to create real, lasting
change for people, their companies thegymnasium.com
and communities through technology [email protected]
education. The in-person, immersive Gymnasium offers free online courses,
format of The Iron Yard’s 12-week designed to teach creative
courses helps people learn to code professionals in-demand skills.
and be prepared with the skills needed Courses are all self-paced and taught by
to start a career as junior-level experienced practitioners with a passion
software developers. for sharing practical lessons from the
design trenches.
12-week code school: Learn
the latest skills from industry pros. s


Gain real-world skills
Free crash courses: One-night s


Get expert instruction
courses, the perfect way to learn. s


Career opportunities

listings__________________________________________________95
 Free with
your magazine
Essential assets Exclusive Tutorial Plus all of this
and resources video tutorials project files is yours too…
Get textures, fonts, Learn to code/create $OOWKHDVVHWV\RX·OOQHHG ‡$OOQHZWXWRULDOILOHVWRKHOS\RX
backgrounds and more with HTML, CSS & JS to follow our tutorials PDVWHUWKLVLVVXH·V+70/&66
and JavaScript techniques
‡$,JUDGLHQWGXRWRQHDFWLRQV
from Sparklestock
(www.sparklestock.com)
‡0LQLPDOLVWEXVLQHVVFDUG
mockups from Sparklestock
(www.sparklestock.com)

Log in to www.filesilo.co.uk/webdesigner Free

for digital
Register to get instant access readers too!
to this pack of must-have Read on your
tablet, download on
creative resources, how-to your computer
videos and tutorial assets
The home of great
downloads – exclusive to
your favourite magazines
from Future!
Secure and safe online
access, from anywhere
Free access for every
reader, print and digital
Download only the files
you want, when you want
All your gifts, from all your
issues, in one place

Get started
Everything you need to
know about accessing
your FileSilo account
Unlock
every
issue

 Follow the instructions on

screen to create an
account with our secure FileSilo
system. Log in and unlock the
issue by answering a simple
question about the magazine. gifts from more than 70 issues
Access our entire library of resources with a money-saving
VXEVFULSWLRQWRWKHPDJD]LQH²WKDW·VPRUHWKDQIUHHUHVRXUFHV

Over 70 hours More than Over 2500

of video guides 400 tutorials creative assets
 You can access FileSilo
on any computer, tablet
or smartphone device using any
Let the experts teach you Get the code you Templates, fonts, textures
to create and code need to get creative and backgrounds
popular browser. However, we
recommend that you use a
computer to download content,
as you may not be able to
download files to other devices.

Head to page 28 to subscribe now

 ,I \RX KDYH DQ\
problems with
accessing content on FileSilo,
Already a print subscriber?
+HUH·VKRZWRXQORFN)LOH6LORWRGD\«
More thhan
More
take a look at the FAQs online
or email our team at the
Unlock the entire Web Designer FileSilo library with your
XQLTXH :HE ,' ² WKH WHQGLJLW DOSKDQXPHULF FRGH SULQWHG DERYH
90
00 re
easoonss added
every
address below:
[email protected]
your address details on the mailing label of your subscription
FRSLHV²DOVRIRXQGRQDQ\UHQHZDOOHWWHUV to
o sub
bscriibe issue
 NEXT MONTH
BEST H T
NEW DESIGN
TOOLS
We get the pros to reveal the latest and
greatest you need to create perfect pages

WORK WITH REDUX-FORM CREATE IMPRESSIVE

WEB SPEECH API MASTERCLASS TEXT EFFECTS
Learn how to speak into an interface to fill out Components and tools made to work with Redux Introduce simple but effective animated effects to
forms or transcribe text for validation, formatting and data structure text headlines to engage users and visitors

Visit the WEB DESIGNER online shop at ALL IN YOUR NEXT

WEB DESIGNER
myfavouritemagazines.co.uk Issue 286 on sale
for the latest issue, back issues and specials Tuesday 2 April 2019
SUBSCRIBE TODAY Go to pa e 28 to learn more
98 __________________________________________next month