Web Designer 284 (Sampler) by Future PLC

FREE 138 CREATIVE DESIGN RESOURCES Expert tutorials, techniques and inspiration

OPTIMISE

GET CREATIVE WITH

WEBGL

YOUR SEO The critical meta tags you need to adopt today

Build beautiful interactive 3D backgrounds

HOW TO USE fonts, colours and ctas TO influence USERS FASTER NPM 21 ways to improve productivity CSS LAYOUTS Create responsive sites without media queries MANAGE REDUX Use Immutable.js to control state updates

DESIGN WITH

Issue 284

CSS SHAPES

Break out from the norm and add imagination

Meta

Contributors

This issue’s panel of experts

Welcome to that bit of the mag where we learn more about the featured writers and contributors…

Future PLC Richmond House, 33 Richmond Hill, Bournemouth, Dorset, BH2 6EZ

Editorial Editor Steven Jenkins

steve.jenkins@futurenet.com 01202 586233

Art Editor Andy Salter Acting Editor in Chief Claire Howlett Senior Art Editor Will Shum Production Editor James Price Contributors Paul Betteridge, Mark Billen, Leon Brown, Joss Cook, Matt Crouch, Tam Hanna, David Howell, Sush Kelly, Richard Mattka, Damian Rees, Mark Shufflebottom Photography James Sheppard All copyrights and trademarks are recognised and respected

Joss Cook Joss Cook is the Design Manager at handmade cosmetics company Lush. He specialises in UX and UI design. He won Creative of the Year in the Wirehive 100 Awards, 2014. In this issue he delves into the world of fonts, colours, calls to action and dark patterns, and how they can influence the user and your designs. Page 46

Knowing your users is more important than ever, getting “inside their heads and understanding the power of fonts, colours and dark patterns to influence is an essential tool ” Matt Crouch

Mark Shufflebottom

Matt is a front-end engineer for Vidsy in London. Safely updating data within single-page applications can be tricky. In this issue, Matt continues his Redux series by exploring how the Immutable.js library can help. Page 72

Paul Betteridge

Mark is a professor of Interaction Design at Sheridan College. In this issue he explores using CSS to create more complex shapes than just rectangles to form interesting design elements and layouts. Page 56

Sush Kelly

Paul has over 15 years’ experience pioneering digital marketing solutions across some of the largest global brands. In this issue he tells you which meta tags are paramount when performing SEO alongside your keywords. Page 62

Tam Hanna

Sush is a freelance front-end developer and digital consultant. This month he takes us back to basics to see how carefully crafted HTML and use of modern layout techniques can produce accessible, responsive layouts. Page 66

Mark Billen

Tam is a programming veteran and lives for self-optimisation and not having to type long commands. This issue he shows a few ways to cut the fat from your interactions with Node Package Manager. Page 78

4___________________________________________________experts

Mark is a freelancer writer who has been writing about web design and technology for over 15 years. In this issue he takes a peek at some of the best-looking sites on the web and gives you a little insight into how they were made. Page 16

Richard Mattka Richard is an award-winning creative director, designer and developer specialising in VFX and entertainment projects. In this issue he shows how to create beautiful WebGL backgrounds for your projects. Page 84

David Howell David is a journalist with over 20 years’ experience in publishing and runs his own business, Nexus Publishing. In this issue he takes time out to talk to the talented people at Florida-based agency helium creative. Page 38

Advertising Media packs are available on request Commercial Director Clare Dove clare.dove@futurenet.com Senior Advertising Manager Mike Pyatt michael.pyatt@futurenet.com 01225 687538 Account Director George Lucas george.lucas@futurenet.com International Licensing Web Designer is available for licensing. Contact the Licensing team to discuss partnership opportunities. Head of Print Licensing Rachel Shaw licensing@futurenet.com Subscriptions Email enquiries contact@myfavouritemagazines.co.uk UK orderline & enquiries 0344 848 2852 Overseas order line and enquiries +44 (0) 344 848 2852 Online orders & enquiries www.myfavouritemagazines.co.uk Head of subscriptions Sharon Todd Circulation Head of Newstrade Tim Mathers Production Head of Production Mark Constance Production Project Manager Clare Scott Advertising Production Manager Joanne Crosby Digital Editions Controller Jason Hudson Production Manager Nola Cokely Management Brand Director Matthew Pierce Chief Content Officer Aaron Asadi Commercial Finance Director Dan Jotcham Head of Art & Design Greg Whittaker Printed by William Gibbons, 28 Planetary Road, Willenhall, WV13, 3XT 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 responsibly managed, certified forestry and chlorine-free manufacture. The paper in this magazine was sourced and produced from sustainable managed forests, conforming to strict environmental and socioeconomic standards. The manufacturing paper mill holds full FSC (Forest Stewardship Council) certification and accreditation All contents © 2018 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be used, stored, transmitted or reproduced in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. Registered office: Quay House, The Ambury, Bath BA1 1UA. All information contained in this publication is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. You are advised to contact manufacturers and retailers directly with regard to the price of products/services referred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not responsible for their contents or any other changes or updates to them. This magazine is fully independent and not affiliated in any way with the companies mentioned herein. If you submit material to us, you warrant that you own the material and/ or have the necessary rights/permissions to supply the material and you automatically grant Future and its licensees a licence to publish your submission in whole or in part in any/all issues and/or editions of publications, in any format published worldwide and on associated websites, social media channels and associated products. Any material you submit is sent at your own risk and, although every care is taken, neither Future nor its employees, agents, subcontractors or licensees shall be liable for loss or damage. We assume all unsolicited material is for publication unless otherwise stated, and reserve the right to edit, amend, adapt all submissions.

Future plc is a public company quoted on the London Stock Exchange (symbol: FUTR) www.futureplc.com

Chief executive Zillah Byng-Thorne Non-executive chairman Richard Huntingford Chief financial officer Penny Ladkin-Brand Tel +44 (0)1225 442 244

Contents

Meta

Inside issue 284

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…

webdesigner@futurenet.com 08 World of web browsers Web Designer takes a look at the latest happenings in Chrome and Firefox

•

@WebDesignerMag

•

www.creativebloq.com

Cover focus

09 The power of empathy UX Director Damian Rees considers the importance of empathy in web design

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 Across the line Goal unveils its roll call of the world’s 50 best

footballers. Find out how it got made

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

38 Creating experiences A group of creative thinkers, writers, musicians

and technical denizens: Web Designer needed

to find out more about helium creative

46 Think DESIGN Explore how the power of fonts, colours and CTAs can produce better sites and apps that will engage and influence users

84 Get creative with WebGL Learn how to create beautiful, interactive real-time backgrounds for your projects

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

6_________________________________________________ contents

Tutorials

filesilo

96 Get the latest must-have resources and videos

56 Design with CSS shapes Go beyond the standard rectangle and create stunning design elements

• 6 animated Instagram templates, 90 hi-res geometric colourful backgrounds, 15 hand-drawn gold and silver patterns and 27 retro actions from Sparklestock

62 Optimise keywords Discover which meta tags are paramount when performing SEO alongside your keywords

66 Build a blog layout with CSS

Create responsive layouts without the need for media queries and JavaScript

70 Add animated text effects Introduce dynamic drawn lines to navigation

72 Manage Redux state Keep reducers simple and their data easier to work with by using Immutable.js

78 Improve productivity with npm Learn 21 ways to tweak npm and save yourself valuable time on projects

66 Visit the Web Designer online shop at myfavouritemagazines.co.uk for the latest issue, back issues and specials

Digital edition 70

Do you want to get your hands on a digital edition? Head to your preferred app store, download, install and purchase the issue of choice Google Play — bit.ly/2wetvGp iTunes — apple.co/2igtBYq

Subscribe today and save 38

bit.ly/2sGwB3h

contents__________________________________________________ 7

News CONTACT US AT: webdesigner@futurenet.com | @WebDesignerMag

Header

The tools, trends and news to inspire your web projects

What’s happening with web browsers? Web Designer takes a look at the latest news in the world of Chrome and Firefox

s we all know, browsers are a key component of the web experience. Everybody who’s connected to the web will be using them. Last issue we talked about how Microsoft Edge/IE had finally given up on its own engine and intended “to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the web for all web developers”. In one way it is a sentiment that has to be applauded, but it is not the popular choice with some. We at Web Designer are swinging towards this being a good thing, but also understand the implications. This got us thinking about what else has been happening in the world of browsers recently. Flash – yes it is

still clinging on – is getting ever-closer to saying goodbye to support. This story does seem to have been going on forever, but Mozilla is helping it along its way by disabling Flash support by default in Firefox 69. This is expected to hit the web sometime later in the year. According to the Firefox Release Calendar, September is the scheduled release. You can take a closer look at wiki.mozilla.org/ Release_Management/Calendar. This, at the time of writing, has release dates up until the end of 2019, when we can expect to see Firefox 71. Firefox is one of our personal faves, but as we all know it is nowhere near as popular as its counterpart Chrome. A quick look at the latest stats on StatCounter (gs.statcounter. com) reveals that Chrome is still surging ahead of the rest with over 62 per cent of the worldwide market

stat ATTACK Google Search Which version of the search engine is getting all the love?

Google.com share, while Firefox has plateaued at around 5 per cent and Safari at around 15 per cent. So what has been happening with Chrome? Getting rid of annoying ads is one thing that Google has been trying to achieve in recent years. The search giant follows the Better Ads Standards (betterads.org/standards), which looks to help filter out specific ads. Currently the coalition only covers North America and Europe, but it recently announced that it is expanding cover to all countries worldwide. Google is following suit, and from 9 July 2019 Chrome is expanding its user protections and looking to stop showing all ads on sites in any country where it operates. If you want to see when the next release of Chrome is expected and what’s on offer, go to chromestatus. com/features/schedule.

62.45% Unsurprisingly, the .com version is way out in front

Google.co.in

5.57%

India comes in at number two in the world of Google search

Google.com.tr

3.76%

A surprising entry at number three is the Turkish version

Google.co.uk

1.77%

creativebloq.com In-depth tutorials, expert tips, cutting-edge features, industry interviews, inspiration and opinion. Make sure to get your daily dose of creativity, design and development.

The .co.uk version of Google makes a up a small portion of searches

Google.de

Subscribe today and save

40%

https://bit.ly/2qLxVl4

8______________________________________________________ news

1.35%

The German version of Google takes fifth spot Source: gs.statcounter.com (correct as of December 2018)

Header

Comment

The power of empathy Empathy is a great design tool but must be used properly

Damian Rees Founder & UX Director experienceux.co.uk

Empathy is a powerful tool in the design process. It allows for a deeper understanding of the design problem and the people who need a solution

n a world where there seems to be a disturbing lack of empathy, there are an awful lot of things being written about it. If you believe the headlines, empathy can boost your profits, make you a better leader, help you create amazing innovations and deliver award-winning designs. Yet when you dig deeper into these articles, there’s little substance on how empathy actually works and how it can deliver these magical results. Aside from being something you should be doing, how should empathy be used in the most effective way, and what pitfalls should you be aware of? Many design thinking and human-centred design processes have empathy as the first step in their process. They outline user interviews, empathy mapping and ‘adopting a beginner’s mindset’ as some of the tools to adopt. The purpose of this phase of the process is to see through the eyes of the user and to understand the problems you need to solve in the proceeding steps. Undoubtedly, empathy is integral to truly solving any problems users are having. If you can’t see a problem from a different perspective than your own, you will struggle to really see the nuances and context where the problem exists. But empathy isn’t just a step in the process, or something to be turned on and off. It shouldn’t be seen as a set of deliverables created by one team and then passed over to another. There’s a danger in this process that empathy gained in that first stage is lost in translation when an artefact from that phase is passed to a team member who wasn’t involved. A set of personas, an empathy map or research report risks being misunderstood or simply ignored when it is ‘handed over’. As with many deliverables in the UX process, it’s the journey, not the destination, that holds the most insight. The deliverable is simply a summary of all the insights gathered to that point. I believe that empathy is more of a continual thread throughout a project. Rather than a set of finite deliverables within a stage, it should be thought of as a scale that runs throughout the work – with apathy at one end and empathy at the other. Apathy is a lack of interest or concern for the problem or the people who’ll engage with your design. And empathy provides a deep insight into the people, their feelings and the problem they face. After the empathy phase is complete in a project you can’t dial empathy back all the way to apathy and still produce a great solution. It has to remain a constant throughout the project, with regular contact with users to keep in touch with their perspective. However, the danger with empathy is that if you sit too far down the other end of the spectrum, in full empathy, you can’t help but feel the emotions of the people you are designing for. While this can be extremely useful to shape your understanding of the problem, it’s unlikely you will be able to see the solution when bogged down with the emotional baggage you have inherited. Great design comes from being able to step back a little from the problem. It happens when you feel compassion for the people you are designing for, where you are invested in them and the problem you are working on, but detached just enough to see it from different angles. Moving the dial away from full empathy and turning down the emotions just enough to allow space for a solution to emerge is often the ideal level. Empathy is a powerful tool in the design process. It allows for a deeper understanding of the design problem and the people who need a solution. But it has to be used carefully. It’s not something you can dip into once and then forget about, but equally too much immersion in empathy can lead to strong feelings that can shroud the real solution. It’s your job to find a solution for the user, not to become one of them and feel what they feel.

Comment________________________________________________9

Header

Inspiration

Sites of the month

02.

01. 01.

03.

04.

01. 2018 Year In Review dribbble.com/year/2018 Dribbble is the home of creative talent, and this site shows off the talent out there with a touch of dignity and style.

02. Trunk Dunk trunkdunk.com An attention-grabbing illustrative style and different level animated backgrounds bring this homepage to life.

03. HAPPY 2019 CHALLENGE happy2019.sretks.com The 3D space background built with WebGL sets the scene for this mini game that asks the users a set of questions.

04. Katlas katlasproduction.com/#home A gorgeous lava-like, undulating background does enough to keep visitors interested and engaged before revealing more of itself.

Graphics

Colour picker

Typesetter

WordPress

bit.ly/2Hr1L8q

bit.ly/2T7sMPM

bit.ly/2Hm2uri

clany.vamtam.com

A redesigned, extended and enhanced

Making cleaning cool? This theme takes on

reincarnation of the popular TT Supermolot

a niche in the market and adds in

and TT Supermolot Condensed font

illustrations and contemporary fonts to

families. Great for contemporary designs.

grab visitors’ interest.

Mixtures

Warm Glow

There is some design madness/creativity going on here thanks to the talented artist Maybe* Bernardo Henning.

#E23201

#DC2100

#D61007

#FC8B01

#E84A03

10I�� Inspiration

TT Supermolot Neue

Clany

Advertorial

Warhead

Explore code-free web design with Warhead Is this free tool the Muse alternative you’ve been looking for?

ith Warhead you’re able to design any website you can imagine without having to write any code. This revolutionary web design platform is powered by CSS Grid technology, enabling you to create complex layouts quickly and easily via an intuitive drag-and-drop interface. And you can try it for as long as you like, completely free. FREE TO SIGN UP Warhead has the functionality to take on everything from a simple blog to an advanced e-commerce site. And great news for designers: it integrates smoothly with your Creative Cloud apps, so it will slot straight into your existing workflow. If you’re looking for an Adobe Muse replacement, the hunt is over. CREATIVE CLOUD INTEGRATION Warhead is Creative Cloud-connected, so it’s designed to work seamlessly with your other design tools. For users of the now-depreciated Muse, it could be an ideal replacement. ACCESS TO ADOBE FONTS AND STOCK IMAGES There are more benefits, too. Because Warhead is linked up to Creative Cloud, you can also make use of Adobe assets – including Adobe Stock images and Adobe Fonts – in your designs. That means you’ll have access to an extensive bank of resources, all from directly within your design tool. POWERED BY CSS GRID CSS Grid is a powerful layout system that makes it possible to create editorial-style

layouts online — something that’s never really been possible before. With Warhead, you can harness the power of CSS Grid without having to wrangle with any complex CSS. ELABORATE LAYOUTS IN DOUBLE-QUICK TIME Warhead’s creators believe a design tool shouldn’t compromise or limit a designer’s imagination. Its simple drag-and-drop system enables you to create layouts visually, while Warhead does the hard work in the background. The system is so easy to use there’s no need for preset templates: create exactly the site you want instead of fumbling with other people’s templates. Warhead offers a massive choice of components, ranging from simple text blocks to galleries, so you can build a website that suits your exact needs. Once you’ve crafted your custom site, the tool’s robust, intuitive dashboard ensures that it’s easy to manage. There’s no limit on the number of pages, so your site can grow and change as you need it to – and any updates are pushed out in real time, across all platforms.

TRY IT FOR FREE (FOREVER) Many design tools offer a free trial period, but Warhead has gone one step further. There’s a free-forever plan that lets you explore all of the tool’s features. Then, once you have had the chance to see how it fits into your workflow, upgrade to the $15 per month hosted plan to attach a custom domain to your slick new website. The deal is even sweeter for students: you get one free site with a custom domain for life – ideal for your first portfolio site. Want to know more about Warhead’s work with students and educators? Take a look at Warhead on Campus (bit.ly/2TEdUrJ).

Above: Warhead’s intuitive Layout Manager makes it easy to create elaborate layouts in double-quick time

For more information about this exciting design tool, head over to the Warhead FAQ page warhead.com/launchpad, or go ahead and sign up to Warhead’s free plan at warhead.com now.

Advertorial_____________________________________________ 11

9000

webkit

Whimsical whimsical.co

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

So what is Whimsical all about? If you need to use flowcharts, wireframes and sticky notes then this tool could be for you. Broken down into its three core components Whimsical

provides an easy-to-use graphical interface to quickly create flowcharts, wireframes and sticky notes to visually manage your projects.

Innovio

Lebe

bit.ly/2FFnesm

bit.ly/2MkzBL2

A multipurpose theme with options for one-pagers, agency, blog and more – all with an engaging and attractive illustrative style.

An e-commerce theme with many different faces. It goes big on imagery and uses a host of contemporary fonts to get its message across.

Top 5

WORDPRESS THEMES A collection of themes to give your site a new look

12r�� resources