Page 1

UTILISE 3D VIDEO TEXTURES

Add video textures to objects and create 360-degree video

The voice of web design

Issue 329 : March 2020 : net.creativebloq.com

SPLIT RGB CHANNELS

Manipulate the RGB channels of a webcam feed with shaders

PLAN WEARABLE UI Build better user interfaces for watchOS

UI

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

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

ISSUE 329


CONTENTS Issue 329: March 2020 : net.creativebloq.com

FEED

FEED

SIDE PROJECT

12

CLIENTS FROM HELL

13

BEYOND PIXELS

14

WORKSPACE

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

15

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

The latest in our series of nightmare clients

Ally Morris shares how fishing improved his mental health, creativity and productivity

VOICES TRY YOUR HAND AS PM

18

ESSAY

20

SHOW, DON’T TELL

24

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

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

VOICES

INTERVIEW

SMOOTH WEBSITE MIGRATION 32

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

Q&A

33

BIG QUESTION

34

6

march 2020

26

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

Ali Spittel explains why she’s on a mission to teach code in a non-intimidating way

Our experts predict how their jobs will change by 2030

Photo by © Nico Kaiser (NodeConf EU)

Dale Murray examines if proprietary cloud services clash with GDPR

SAVE UP TO

77

%

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

TURN TO PAGE 16

to find out more about the savings on offer for subscribers


Contents REGULAR

GALLERY

38

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

REGULARS EXCHANGE

08

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

SHOWCASE PROFILE

46

HOW WE BUILT

52

Stink Studios discusses advertising’s original sin, cloud tools and WebAR’s future

Red Collar on how its in-house project draws attention to marine conservation

PROJECTS FEATURES THE ULTIMATE UI DESIGN GUIDE

BUILD A PERFECT

58 DESIGN SYSTEM

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

66

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

PROJECT

ADD VIDEO TEXTURES TO 3D OBJECTS

76

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

RGB SPLIT CHANNEL EFFECT

82

PURPOSEFUL HERO HEADERS

86

DESIGN WEARABLE APPS

92

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

Daniel Schwarz shows you how to put purpose over form when designing headers

Vamsi Batchu on the best practices for creating watchOS wearable apps

march 2020 7


SUBSCRIBE TODAY

SAVE UP TO 77

%

ON YOUR ANNUAL BUNDLE

myfavouritemagazines.co.uk/net/promo20 Offer does not apply to quarterly or 6-month subscriptions

16

march 2020


GREAT REASONS TO SUBSCRIBE ●

Print edition delivered to your door

13 issues in a one-year subscription

iPad and iPhone edition download

Android edition download

Money-back guarantee

CHOOSE A PACKAGE PRINT EDITION

SAVE UP TO

47

%

12-month subscription (13 Issues)

PRINT & DIGITAL

SAVE UP TO

77

%

12-month subscription (13 Issues)

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

march 2020 17


VOICES Essay

20

march 2020


Essay

DIGITAL SOVEREIGNTY

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

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

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

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

march 2020 21


GALLERY Inspirational sites MARK BILLEN

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

Sensational design and superb development

w: markbillen.com t: @Mark_Billen

VUE, CORE-JS, CSS

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

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

38

march 2020

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


Inspirational sites

SI T E OF T HE MON T H

TENSORFLOW, JAVASCRIPT, OPENGL

RUNWAY PALETTE

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

march 2020 39


SHOWCASE

How we built

HOW WE BUILT

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

3

4

1

2

5

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

52

march 2020

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

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


How we built DENIS LOMOV

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

Right now, there’s no shortage of people expressing their concerns about the environment. But is there anything that web designers and web developers can do? New York digital agency Red Collar believes the answer to that question is yes and took 14 days out to put their talents to good use. Despite including the world’s largest mammals (blue whales), whales are hidden below the surface and their plight is often ignored. In the summer of 2019, however, a succession of news stories hit the headlines about a Russian ‘whale jail’, where companies that supply marine mammals to aquariums illegally caught and held

almost 100 beluga whales and orcas. The publicity prompted Red Collar to build save-whales.com, a website that draws attention to marine conservation in a spectacular and entertaining way, using fun effects and 3D animation. We caught up with co-founder and creative director Denis Lomov to find out how the team went about it. What was the initial brief for the creation of this site? The idea of the project was born during a discussion at Red Collar. It often happens that someone will suggest an idea for a site, event, merchandise or similar. We advocate for environmental protection and keep up with the news. At the time there was this scandal in the news about a ‘whale jail’ in the Russian Far East. We wanted to speak up about the conditions these creatures were kept in and publicly share information and advice on how we all could do something to help the whales. Once we finalised the idea, we decided to complete the project within 14 days. This was a challenge for everybody but the guys did it to the day. The periscope effect that lets you change the perspective on the

TIMELINE

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

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

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

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

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

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

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

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

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

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

march 2020 53


FEATURES The ultimate UI design guide

58

march 2020


The ultimate UI design guide

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

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

march 2020 59


FEATURES Build a perfect design system

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

66

march 2020


Build a perfect design system

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

march 2020 67


PROJECTS P5.js

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

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

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

P5.JS

CREATE AN RGB SPLIT CHANNEL EFFECT

Mark Shufflebottom shows you how to use shaders to manipulate the RGB channels of a webcam feed

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

82

march 2020

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


9000

P5.js

IN-DEPTH

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

The preload function loads up the shader files and a disc, which will spin while the buffer is filled. function preload() { camShader = loadShader(‘effect.vert’, ‘effect.frag’); img = loadImage(‘img/disc.png’); } Next the setup deals with how the screen should look as the project starts. The canvas element is set to fill the whole screen display. The ability to draw a stroke on elements is turned off and the pixelDensity is set to 1 so that a high-definition screen uses the same ratio as CSS. The camera is set up and then sized to fit the display – since the camera will originally show as a video element in HTML, the display is turned off. A shader layer is created that will display the final result and then a for loop adds in an empty graphics element for the 90 frames that will be stored. function setup() { createCanvas(windowWidth, windowHeight); noStroke(); pixelDensity(1); cam = createCapture(VIDEO); cam.size(640, 480); hRatio = (windowWidth / cam.width) * cam.height; cam.size(width, hRatio); cam.hide(); shaderLayer = createGraphics(windowWidth, windowHeight, WEBGL); for (let i = 0; i < numLayers; i++) { let l = createGraphics(windowWidth, windowHeight); layers.push(l); } background(0); }

In the fragment shader, colour values are required as values of zero to one. Most of us have been around the RGB model of zero to 255 enough to be able to guess the values but our software gives us those values easily enough through the various colour pickers! Converting a colour value over does involve a bit of maths. Changing the value into a percentage will definitely help but even then it’s only part of the way there as the decimal place has to be moved. Start by heading on over to https://www.calculator.net/ percent-calculator.html – an online percent calculator. Selecting a colour in something like Photoshop gives us easy access to those RGB values. If the colour selected has a red value of 92, in the online calculator you can add in the value where it asks ‘92 is what % of 255’, then hit calculate. This in turn leaves you with the result of 36.07843%. Now all that needs to happen is for the decimal place to be moved two places to the right so that the value is ‘0.3607’ and now lies between zero and one. Of course smart readers will realise that this very value can also be achieved by simply dividing 92 by 255, again giving 0.3607, but it’s always good to make sure using the long way!

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

“Shaders are powerful because they are offloaded to the GPU and provide advanced filter effects” march 2020 83

Profile for Future PLC

Net 329 (Sampler)  

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

Net 329 (Sampler)  

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