Now - A Contemporary Landscape for Digital Thinkers by Aleksandra Ikonomova

HEAD HERE FOR MORE INFO AND FURTHER RESOURCES: awwwards.com/now2

208 – 212 RESOURCES

18 – 19 AI AT PRESENT

& VIRTUAL ASSISTANTS

Movies Are To Blame

The Year Of The Virtual

For Everything!, 21

Assistants, 34

The Old Archillect

Less Cognitive

Bot, 23

Processing From The

8 – 17 HUMANS OF LATE CAPITALISM

Machine Learning:

The Augmented

A Complete

Reality Transformation

AI-Generated

& Content Creators’

Short Film, 24

Teaching A Sausage How To Get Dressed, 24

Paradise, 12

Transhumanism & The Digital Messiah, 17

ce With Illustration, 54

Designers + Creative

Custom Cursors Typography-Based

Command Interfaces,

Layouts, 62

37 Variable Fonts, 66

& ML for the Masses, 39

More Resources To

The Day That A Chatbot

Explore & Learn

Taught Me A Lesson, 40

Web-based ML, 28

32 – 33 VOICE INTERFACES

Straight To Hell, 90

The Evolution Of Voice

42 – 49 THE NEXT UX

Decorated, Augmented And Big Paragraphs, 70 Animation: Secondary Elements & Organic Motion, 74

116 – 207 CASE STUDIES Frans Hals Museum By Build in Amsterdam, 119

Press & Hold And Go

Integration, 36

Technologies, 25

Sharing Economy, 16

Users, 48

Developers, 92

Explosion, 13

& Safety, 30

Don’t Shame Your

Crafting A Singular Voi-

Through Web

Social Mobility & The

Effects, 86

More Multi-Platform

Fortnite Cube

Designing For Privacy

Of Distortion & Wave

Users, Less Apps &

sistant, Voice Interface

Technology, 16

Manipulation, 47

The Era Of Independent

Furby & Clippy, First As-

5G The Game Changing

Image Effects, The Curse

50 – 115 WEB DESIGN TRENDS

Machine Learning

The Verificable Web, 15

Humor & Emotional

& Mouse Effects, 96 Hero Menus, 98 What About Navigation?, 102 Color Schemes With Personality, 106 Mixing 2D & 3D Elements, 110

Cute Microinteractions

Editorial Style

& Minigames, 78

Layouts, 112

Visual Search, 44 Brutalism & Maximalism

PWA Is The

Microcopy &

- Wild Forces Tamed At

New Responsive

UX Writing, 46

Last, 82

Web Design, 114

If This Then Domino’s By Legwork, 126 Ueno 3D Interview By Ueno, 134 Foosball World Cup By AQuest, 140 Kopke since 1638 By Burocratik, 144 The Dime Trap By Superhero Cheesecake, 152 Red Collar By Team Red Collar, 158 Louis Ansa Portfolio By Louis Ansa, 168 BryBry By Bryan James, 178 Digitaldesigner.cool By J. Baptiste Giffard, 119 Moment Zero By Locomotive, 200

7 FOREWORD

Originally the idea was to write a really special foreword, we played around with a few options, but none were really cool enough. Finally we had a revelation - Siri, Cortana and Alexa would come up with the foreword for our book! The idea seemed nuts and we really really tried but the reality is we couldn’t get anything from them. Siri, Alexa and Cortana all failed us, after hours and hours of conversation with evasive answers.

– “I'M NOT SURE I UNDERSTAND.” – “I DON'T KNOW WHAT YOU MEAN.” – “THAT’S NOT OK, YOU CAN’T SAY THAT.” As experts in the word of digital we have concluded that assistants still haven’t reached a stage of technology advanced enough to think up cool forewords. This book is like waking up after a futuristic dream, we have collected everything that has surprised us this year and summarized it with our analysis of trends in web design, motion design, UX writing, visual search, AI bots, 5G, Furbies, Fortnite, and sausages that use machine learning to work out how to put a shirt on.

“Humans of Late Capitalism”

[1]

is a well known Twitter account

that expresses with humor, and a certain degree of despair, the incongruities of our age. We, the first batch of digital natives whose excrescent culture keeps on pushing the limits. Over 400 people die each year taking selfies, we produce hundreds and thousands of tutorials on applying eyeshadow

[2]

opening Kinder Eggs. [3] We have communities of “Birds with Arms”,[4] 3D Virtual Influencers, [5] people that smoosh their faces into bread [6]

and derivatives. The great tragedy of humanity is turning into a

comedy... meanwhile thousands of Instagram accounts relentlessly knead slime with glitter, [7] An observer from a far away planet would be astonished at so much pointless activity. We are the products of a blind evolution, marching towards a beautiful abyss. We are living through an age of paradigm changes coming fast and thick, whilst overtaking the pace of past milestones at a breakneck speed. We come from the relatively new invention of the internet, but have already developed web standards and protocols, It’s all quite wild and unpredictable on the Internet, our

The televisions that previously produced and spread social

children no longer look up to sports/pop stars, their references are

phenomenons are becoming less and less influential. The way of the

YouTubers with foreign accents. At any moment, any one person with

internet has taken over, but has done so in a spectacularly fragmen-

a YouTube channel could go viral and generate a “butterfly effect” all

ted manner, making way for varied schools of thought and consumer

over the world. These are the wonders of connection, globalization

behaviour, creating strange cultural niches, soon all digital experien-

and at the same extreme fragmentation. It’s like a real life hologram, [9]

ces will be personalized - à la carte.

in which the fragments contain everything and vice versa.

smart phones, apps, geolocation, 3D printing, cryptocurrency, etc.

THE AUGMENTED REALITY TRANSFORMATION & CONTENT CREATORS’ PARADISE

From looking at all these fantastic resources, it could seem like augmented reality is reduced to nothing more than cute three dimensional Pokemons in the palm of our hands, which couldn't be

Now we have an important challenge, to supply our new augmented

further from the truth. The real potential comes when AR is mixed

worlds with quality content. For us as digital creatives it’s a fabulous

with AI technologies like computer vision. The same instagram filters

situation.“The future is augmented”, every element in our surroun-

you use to see yourself with a cute bunny rabbit nose, also have

dings will have a huge variety of information, we are replicating the

beneficial commercial uses, such us allowing customers to try on

world with different layers of information and interaction.

glasses in an app without having to go all the way to the store [15].

Technologies such as AR, VR and their fusion Mixed Reality (MR) and Extended Reality (XR)

[10]

will add more layers of informa-

tion that will require a lot of work in terms of designing interfaces and content. In short, a golden opportunity for creators. [P. 12]

In the last few years the stocks and communities of 3D re-

Impressive right? Very soon it will be difficult to distinguish the reality in these digital realities. In these new scenarios, every time we make advances we find ourself facing new sets of problems with serious social implications.

sources have grown enormously, and their future is even brighter.

FORTNITE CUBE EXPLOSION

This has been due to the creation of games for the mobile apps

On the 4th of November we attended the Fortnite cube explosion

market, made easy by tools such as Cinema 4D, Blender and Unity,

in our living rooms, plenty of crazy children were totally absorbed

with the advent of 3D printing being another trigger of its grow-

by the event. Fortnite is an authentic religion for millions of people,

th. Today there are numerous communities, such as Sketchfab [11]

many of them children, and the the community has a strong sense of

offering great resources to download, buy and sell models that

belonging. Fortnite publishes weekly updates and launches events -

can be used in any media, WebGL, games and 3D printing. There

like the explosion of the cube, that are followed by millions of users

are unlimited scenes created with VR tools such as Tilt Brush [12]

in real time, who are, literally, an army.

from

Will there one day be legal and ethical controls of these

Google, a excellent resource to download low poly 3D resources

Gamification strategies to prevent them from directly affecting our

perfect for WebGL, VR and AR. There are also many 3D communities

health? Will webs and social media platforms have to think about li-

oriented towards open source 3D printing, such as MyMinifactory,

miting the time users spend on them for their own good, like they’ve

and Google Blocks. [13] Another community of note is Poly

[14]

Thingiverse, and CGTrader.

done with tobacco? This is only one example from thousands of possible games and social media platforms that generate the same level [11]

of dependence. There are already many movements that advocate abandoning social media, and accuse these types of phenomenons as posing serious health risks.

[14]

THE VERIFICABLE WEB The main theme of the predictions in the study Fjord Trends 2019 [17] is the “the search for value and relevance”. This will be the objective of all companies and big corporations, but will depend directly on their capacity to create transparency and trust. Organizations will have to show transparency to consumers and also earn enough trust to persuade them to part with their personal details. There’s no doubt that this will generate a need for

[16]

homogeneous international legislation. In 2018 the EU put in place the new General Data Protection Regulation (GDPR) and we all suffered the barrage of emails and notifications. We accepted or not, trusting that the keeper of our details was really treating them appropriately, we’re not only talking about commercial use, but as well their protection in terms of computing security. Blockchain will be like a layer of trust for the internet, it will be able to guarantee the security of our private data, verify contracts, track commercial transactions and carry out bank movements in a secure way. But, we still have to wait for the technology to be perfected and for widespread adoption.

[11] Sketchfab. [14] Poly by Google. [16] Believe it or not this shoe is AR!.

is Whimapp,

[19]

an app that emerged in Helsinki in 2016, its goal is

We are at the brink of a revolution that will allow us to put all of

for citizens to do away with personal cars within the next few years.

our previous advances into action, an incredible wireless network

It offers a service that let users book door-to-door trips integra-

that will interconnect billions of devices with sensors and sources

ting various modes of transport, including public transportation,

of data. 5G will radically increase the transmission speed of data,

bikeshare, trains, taxis or car sharing all within the app. This actua-

to approximately 20 times the speed of a 4G network. 5G uses new

lly working depends on the APIs of the governments and private

radio frequencies and shorter wavelengths, and according to The MIT Technology Review [18] will be a technological paradigm shift. All industries will benefit from this advance, but especially the whole ecosystem of the Internet of Things (IoT) and as a result the utopia of smart cities and self driving cars. Itâ&#x20AC;&#x2122;s estimated that in 2020 there will be over 20 billion IoT devices installed around the world. In the Chinese region of Canton, it is forecast that by 2022 the 5G network will be working.

SOCIAL MOBILITY AND SHARING ECONOMY Mobility as a service (MaaS) and the sharing economy are two fundamental themes for resolving problems such as pollution and urban growth, and a step towards a more sustainable way of life. Airbnb and Uber have changed the way in which millions of people travel and in the future, Google Maps will be recognized as one of the key inventions of our generation.

Another more recent example in the field of smart cities

companies, as they are systems that progressively get better by integrating themselves into other centralized systems.

TRANSHUMANISM & THE DIGITAL MESSIAH Thereâ&#x20AC;&#x2122;s much more to say about emerging technologies, social utopias and hallucinations of beautiful and perverse futures. Despite all the disturbing examples about big corporations, airports scanning our faces, and the shocking birth of Lulu and Nana [20] we should be optimistic. Ideas with the potential to change the world and improve our living conditions are appearing thick and fast. Faith in technology is substituting religious beliefs. Now, not only God can give us immortality, or create other realities. Quantum physics, virtual reality or genetic modification can do it too. Transhumanism

[21]

has the prophetic vision to transcend the

species beyond our biological destiny, to abandon forever the darkness of a world out of our control, previously guided by bibles and legends and protected by saints and shamans.

5G, GAME CHANGING TECHNOLOGY

REAL PERSON NOT A REAL PERSON

"Hello, how can I

"Hi, I'm calling to book a

help you?"

women's haircut for a client. Umm... I'm looking for something on May 3rd." "Sure, give me one second." "Mm-hmm." "Sure, what time are you looking for around?"

"At 12 pm."

We couldn’t start this chapter without mentioning the famous

For all the control, limits and laws that are imposed on AI

telephone conversations between virtual AI assistants and the

systems, they will surely be out of our control at some point of in-

employees of two real-life companies [1] This conversation was pre-

flexion. Far from being in conflict with the human species, they are

sented for the first time at Google IO 2018. The Google assistants

part of our own evolution, although the concept will feel very far

make an automatic call, scheduled beforehand by the user, in order

from organic.

to book an appointment at a hairdressers and later a table at a

the tasks without being detected, appearing totally human. Their surprising “humanness” is helped by the use of colloquial expres-

[Fig. 5]

In one episode of the television series Star Trek: The new

sions, pauses to imply the caller is thinking of the answer, elongated

generation, famous for predicting our technological future on

words and the use of interjections like “Hmmmm” “Uhhh” and

numerous occasions [4], Data, an android that tirelessly works to in-

“Oh I gotcha’”.

tegrate himself with his human counterparts, surprises himself by

These prodigies form part of the project Duplex, which has

talking to himself like any human wrapped up in their own internal

received many years of investigation with the aim of improving te-

dialogue does

chnologies like natural language processing, deep learning and text

- he has transcended the machine and continues to develop his

to speech. As a case in point, this year Google Duplex will be imple-

consciousness and other capabilities, supposedly only belonging to

mented as a star feature on the Pixel phone in the U.S. [2]

humankind!

. At one point, Data has a moment of revelation

[5]

Their capacity to imitate human conversations without

In the history of literature, above all in the history of cine-

being detected is generating big questions about the tasks that AI

ma, we can find numerous examples of “transhumanism”, seen in

assistants should be allowed to partake in. [3] It’s quite disturbing to

characters such as Golem, Frankenstein, Metropolis, Blade Runner,

not know when you could be talking to a bot. There is currently a

Matrix, and Black Mirror, to name but a few.

debate raging on whether virtual assistants should be required to

MOVIES ARE TO BLAME FOR EVERYTHING!

[Fig. 7]

Recently, Keiichi Matsuda, the creator of the famous short

identify themselves at the beginning of conversations. There are

film “HYPER-REALITY”

also a large amount of anomalies that could take place if virtual as-

which the users have totally lost control, presents “Merger”

sistants act autonomously without direct human supervision.

short 360º film which manifests the same fears. The protagonist is

[6]

which imagines an augmented world in [7]

restaurant in the city. In both cases the virtual assistants complete

THE OLD ARCHILLECT BOT

a woman overwhelmed in her career due to having to compete with the computers that surround her, that at any moment could take

[Fig. 10]

control of the productive process.

Chinese government to develop a Social Credit System

[10]

is an AI-bot which interacts almost every day

on social media, it’s an experimental project that came about in

As a case in point, could Black Mirror have inspired the [8]

Archillet

2014, which currently has over 1M Twitter followers. Archillect acts

like the

as a content curator and does such a good job that it has gained

one which features in Nosedive? [9] The first episode of the third se-

popularity, with its publications getting lots of engagement from its

ries, in which we see a society influenced by a system of points that

followers.

fluctuate according to people’s interactions, people’s scores can

“Archillect [archive + intellect] is a synthetic intelligen-

end up affecting the services they receive and in turn the shape of

ce. She is a living inspiration archive. She is a digital muse.”

their whole lives. Somebody needs to tell these modern sci-fi creators that life is hard enough already and they should be careful what

Archillect is a type of Machine Learning algorithm that

they dream up next, as these far out ideas have a worrying habit of

analyses tags and trends and looks for the most inspiring images to

creeping into the real world!

interest its followers, learning autonomously through likes, retweets and comments. According to its creator Murat Pak [11], Archillect is not especially complex, like current Deep Learning Systems. It was designed

[7]

[5]

as a “trend getter”, but it’s got so famous that it’s now actually starting to influence the tastes of its users. On occasion it’s had to vary its algorithm, giving more clout to the opinions of long term users so that its capacity to predict doesn’t get unduly affected. Our relation with this bot is highly satisfactory, almost all the images that it shows grab your attention so well that it’s easy to forget that it’s an artificial system and it has, in our view, the same influence

[5] Star Trek TNG - Data talking to himself. [7] Merger 2018 by Keiichi Matsuda. [10] Archillect.

systems we could already be interacting with, do you know?! If you

[10]

as any other expert or human creator. Who knows how many similar

fancy it, right now you can try to see if you are capable of identifying which composer is human in these musical fragments. [12]

Benjamin produced the film in just 2 days without any human intervention, as part of a 48-hour challenge of the Sci-Fi London film festival. It must be said that the result, despite being a

MACHINE LEARNING: TEACHING A SAUSAGE HOW TO GET DRESSED [Fig. 13]

Machine Learning can do some really surprising things,

things that we would never have imagined, this is probably one of the oddest examples. “Machine learning teaching a sausage how to get dressed”

[13]

Once we get over the hilariously absurd nature of the concept, it’s actually a very sensible project that fuses deep reinforcement learning (deepRL) with cloth simulation to find the optimum way to put on various pieces of clothing, what’s the objective? It could be used to develop a robot assistant to help people get dressed.

milestone is pretty creepy. Zone Out uses “face-swapping” like the controversial

[16]

“deepfakes”, AI-generated videos that show one person’s face on another’s body. Deepfakes use open-source machine learning tools like TensorFlow and the Face2Face Algorithm

[17]

to swap faces in

recorded video. [18]

MACHINE LEARNING THROUGH WEB TECHNOLOGIES This all sounds very futuristic but how do we use AI, what do we understand by machine learning, what is the model? How is it trained, and how can we implement it? Luckily for us, this year has been

[Fig. 14]

Zone Out

[14]

is the first film totally generated by artificial

intelligence. The director and screenwriter is Benjamin, an AI sys-

full of examples of AI powered web experiments. Many of them can be used quickly in our projects or to prototype other experiments, as they are based on JS libraries and don’t require particularly complex server architecture (as we will see next).

tem created by the Director Oscar Sharp and the AI researcher Ross

If what you’re looking for is to start using different mo-

Goodwin. Together they formed and trained Benjamin with dozens

dels which have already been created and implement some of the

of sci-fi screenplays, mainly from 80s and 90s films. The system lear-

functions quickly with common web technologies, do not hesitate

ned to imitate the structure of a screenplay and to predict words

to start with TensorFlow.js

and phrases that typically go together.

(machine learning) models in the browser.

[15]

, a JavaScript library for training ML

[19]

A COMPLETE AI-GENERATED SHORT FILM

TensorFlow.js is a very powerful tool based in Node.js.

don’t know where to start, download “The Teachable machine Boilerplate” [21] and have a play around with it.

which we can use with existing javascript ML models or even create our own, by training them or retraining existing models using data

EMOJI SCAVENGER HUNT

coming from sensors connected directly to the browser. We only

[Fig. 22]

interact with the client side, meaning the response is very quick.

Emoji Scavenger Hunt [22] is a machine learning game based

on web technologies that use neural network to recognize objects

If you’re looking for AI-powered examples to use right now,

through the phone’s camera. Emoji Scavenger uses Tensorflow.js

take a look at the following experiments.

too and runs on your mobile web browser locally without back-end TEACH THE MACHINE USING YOUR CAMERA [Fig. 20]

With this app

[20]

or cloud services. You can access the open-source code on GitHub

you can train your computer to recog-

and read this article [23] which explains in detail how they re-trained

nise physical gestures to then carry out instructions, you can train

MobileNet, to adapt it to the needs of the game.

your neural network model locally thanks to TensorFlow.js. If you THE TEACHABLE KEYBOARD The teachable keyboard [24] is an example with which you train your application to control the keyboard with movements and to write without using your hands OR your voice. Obviously software already

[13]

[20]

exists which helps people with impaired mobility, but this example shows you how to do it with web technologies in a simple way. ALT IMAGES GENERATOR [Fig. 25]

In this simple example

[25]

created by Sarah Drasner, you

[13] Synthesizing Dressing Motion via DeepRL. [14] Zone Out Sci-Fi Short Film Starring Thomas Middleditch. [20] Teach the machine using your camera. [22] Emoji Scavenger Hunt.

Just send the image to the API and it will return back a sentence with short image description.

[14]

[22]

can dynamically generate alt text for images using Azure Vision API.

MOVE MIRROR: AN EXPERIMENT TO FIND

AI POWERED JAVASCRIPT EXAMPLES

GIFS BASED ON YOUR MOVEMENTS [Fig. 26]

[Fig. 29]

This experiment [26] is based on computer vision techniques

Here aijs.rocks [29], you can find a curated collection of ins-

pirational AI-powered JavaScript apps. The difference between this

like pose estimation. Move Mirror uses PoseNet, an open-source pose

and the previous resource is that it doesn't just highlight big projects

estimation model, that uses TensorFlow.js. Basically PoseNet analysis

but also small implementations of ML, simple scripts that we can find

the video, detecting the key body joints to determine the pose.

in GitHub, Codepen or Glitch. These simple scripts can be a big help as the code is available and we can clone the archives, also in other

TENSORFLOW, MOBILENET AND UNSPLASH API

cases itâ&#x20AC;&#x2122;s possible to try the demos editing the parameters online.

This app [27], uses the Unsplash API to find images according to a particular search term. When it receives the image from the Unsplash API, it sends it to the MobileNet Tensorflow.js, a pre-trained model that analyses it and returns a list of characteristics or tags of the image. There are certainly other more advanced tools such as Google Computer Vision services or Microsoft Azure, but they re[25]

when you use MobileNet however, everything is done locally on the

[28]

quire making an enquiry to the cloud and paying for their services,

client side.

Without doubt the first place that you should go to get up-

to-date is A.I. Experiments

, which showcases experiments that

[28]

demonstrate the uses of machine learning in a simple way, through

music, drawings, art, etc.

[25] Script to dynamically generate an ALT description for the image. [26] Move Mirror: Find GIFs based on your movements. [28] AI Experiments. [29] Move Mirror: Find GIFs based on your movements.

[Fig. 28]

[26]

A.I. EXPERIMENTS BY GOOGLE

[29]

MORE RESOURCES TO EXPLORE AND LEARN WEB-BASED ML

P5.JS + OPENCV Here [30] you can play with lots of examples using computer vision

of privacy”

OpenCV and p5.js.

accurate as your mother in predicting your personality. While the

TRACKING.JS: COMPUTER VISION ON THE WEB

[32]

says that AI algorithms only need 100 likes to be as

Chinese artificial intelligence company SenseTime

[33]

has been

scanning and categorizing the population on a massive scale, they [31]

is a JavaScript library that offers different computer

vision algorithms for real-time color tracking, face detection, matching images with different perspectives, and more.

even managed to detain a delinquent at a concert thanks to a real-time facial recognition system. As you can read in our eBook “AI Driven Design” [34], the au-

DESIGNING FOR PRIVACY AND SAFETY

thor Joël van Bodegraven explains that there are plenty of examples

We really need transparency in all uses of artificial intelligence.

was working on their AI to help them sort through hundreds of CVs

We’ve seen cases of Dark patterns in which we could be talking with

and find the best candidate, for some reason the system was only

a bot or have an AI assistant carrying out our personal tasks without realising it. Big companies are patenting systems to optimize their returns from publicity, using our personal details in indiscriminate and unsafe ways, while bots are also being used to influence public opinion, by manipulating elections etc. “We urgently need strategies and legislation to regulate the immediate future - this issue has been around for years, but

of AI going wrong and being racist, sexist and so on. When Amazon

selecting men and, as well as arbitrarily not selecting women, was also giving any female word a negative score, Why? Because it was based on a past where there had traditionally been a less female presence. On the other hand, we have numerous positive examples, such as LYNA, which uses Google Computer Vision to detect breast

until now we’ve been burying our heads in the sand - ignoring it

cancer, correctly identifying metastasis patterns in 99% of cases

for the convenience of free services.”

compared to the 62% found by human pathologists. [35]

Tracking.js

This production by Stanford University called “The end

THE YEAR OF THE VIRTUAL ASSISTANTS

the internet, the evolution to voice command interfaces will be an

This year virtual assistants have arrived to the masses and establi-

easy and natural next step. Introducing text on mobile keyboards

shed themselves as a consumer product. Siri and Google Assistant

is complicated, tedious and generates many mistakes. We’ve seen

are already widely used on mobile devices, and have transformed

this change before with smart TVs, where voice search using Google

into, soon to be, essential electrical appliances. Google Home and

Assistant has become standard, instead of an increase in the use

especially Alexa are developing enormous ecosystems that allow

of keyboards. As well as graphic interfaces, as optimized as they

us to interact with them and integrate them into our products and

may be, they will always have to load numerous assets and come up

services.

against the availability of the web and performance. [1]

from September 1st

The famous Gartner report into emerging technologies

[3]

2018, over 50,000 Alexa Skills have been developed and it/she(!?) is

predicts that 30% of webpage visits will be by voice in 2020 and

compatible with over 20,000 smart home devices all over the pla-

ComScore estimates that in the same year voice will account for

net. About 30.000 of these skills are on the U.S market.According to

50% of all searches.

this Amazon report [1] from September 1st 2018, over 50,000 Alexa

The Gartner Customer Experience Summit 2018 [4] has re-

Skills have been developed and it/she(!?) is compatible with over

vealed some very interesting statistics about the intentions of big

20,000 smart home devices all over the planet. About 30.000 of

brands to invest in virtual customer assistants (VCA) and technolo-

these skills are in the U.S market.

gies like AR in the coming years. Gartner Says that by 2020, a quarter

According to data collected in May 2018, 21.6% of the adult

of customer service operations will use virtual assistants and by 2019,

population in the United States had access to a smart speaker wi-

20% of brands will actually abandon their mobile apps. This could

thin their nuclear family, [2] only 4 months earlier it was 9.7% less. A

be due to applications not generating the return-on-investment

smart speaker is a “multi-user” device and this figure would actually

(ROI) predicted, not meeting the expectations of user engagement

be much higher if it showed the accounts of minors which aren’t

and other important costs like customer support, maintenance,

included in the statistics.

upgrades, etc.

According to this Amazon report

Due to mobiles being the main device we use to access

LESS COGNITIVE PROCESSING FROM THE USERS, LESS APPS & MORE MULTI-PLATFORM INTEGRATION

how to integrate all these innovations. The purpose was to instruct

Why is it such an important step for Human-computer interaction?

then.. You order a Domino’s pizza, or if it’s your birthday or maybe if

Voice-command interfaces or conversational devices are relevant

there’s a zombie apocalypse!!

the user, showing them the value of platforms like IFTTT, [5] that allow you to connect a multitude of services and apps to automatically perform tasks based on events, like for example if it’s a rainy day,

because they reduce the time and effort of the interaction. With

[6]

was ca-

voice command we can log in to a platform, saving us the bother of

rried out by Starbucks, Alexa and Ford in 2017. Here, Starbucks

remembering and typing passwords, navigating the application, un-

developed an Alexa skill

derstanding its interface, content structure etc, soon we will be able

process. Later Ford, thanks to its SYNCH3 system with Alexa, de-

to configure hundreds of actions and use a simple word as a trigger.

monstrated how to order a Starbucks while driving.

offers on Linkedin” Virtual assistants reduce the number of apps and platforms that we have to manage. Soon we’ll have “skills” and more comprehensive tasks that will save us lots of time. We’ll communicate with all these platforms through APIs, and navigate towards a future where content will be even more independent from design.

[7]

that was a fully voice enabled shopping

THE EVOLUTION OF VOICE COMMAND INTERFACES [Fig. 8]

But, wait a minute! Managing interfaces by speaking out

loud does not seem like a good idea in many of the situations we face every day. Imagine if you had to respond to something urgently while in the cinema, or a silent doctor’s waiting room. You’re all thinking that simply using the graphic version of the same interface

“We’ll communicate with all these platforms through

would solve this problem - but somebody has taken it ever further.

APIs, without ever seeing them, without logging in or even appa-

Introducing Arnav Kapur, a graduate student from MIT Media Lab,

rently interacting with them .”

who has created a device called AlterEgo that’s capable of interpre-

[Fig. 5]

In one of the case studies featured in this book, “If This

Then Domino’s“ (p. 124), a project was put in motion which showed

ting the electrical signals of movement produced by our facial and neck muscles when we read in silence!

“Hey Google, send my curriculum to all UX Designer job

Another example of multi platform integration

It’s simply amazing, but this invention doesn't only allow us to make voice commands without actually making sounds, it allows us to continue communicating with sources of details. We can do internet searches, do calculations or order a pizza, practically

[5]

through thought alone.

FURBY AND CLIPPY, THE FIRST ASSISTANT, VOICE INTERFACE AND ML FOR THE MASSES [Fig. 9]

Going back to the film “Merger” from the previous chapter,

if you pay attention to the graphic interface that the protagonist is controlling, right there next to dozens of UI controls you can see

[8]

[9]

Clippy!

[9]

Clippy appeared in Microsoft Office ‘97 and although he

wasn’t the first Office Assistant character, he was the first virtual assistant used by millions of users, and also holds the title “most annoying” and hated until now. But Clippy is not the only primitive example of this technology, that at the time was such a novelty. Who could have guessed that at Christmas 1998, a consumer product would make its way into our homes that, although a simulation, would be our furry intro-

[10]

duction to concepts such as machine learning, language recognition and domestic robots, and would be the first voice interface for the general public. [Fig. 10]

Furby

[10]

was a toy able to learn English through interac-

tion with humans, it stopped speaking its native tongue Furbish to

[5] Domino’s pizza trigger cards. [8] Arnav Kapur’s AlterEgo. Source: MIT MEDIA LAB. [9] Clippy’s cameo role in the “Merger” graphic interface. [10] Furby, an electronic toy released in 1998 by Tiger Electronics.

acquire English at a progressive rate, in the style of natural learning. Obviously these skills were totally fake from the start, Furby was programmed to start saying words in the language of its owner, according to a series of time frames and events. It would respond to external inputs through its light and movement sensors, but at that time we didn’t have machine learning or language processing. In 2005 an authentic system of voice recognition was added and

NORMALLY ASSISTANTS HAVE DEFENSE MECHANISMS FOR THESE SITUATIONS, WHICH ARE ALWAYS VERY RESPECTFUL BUT NOT IN THIS CASE. MITSUKU’S RESPONSE SHOWED US, THIS BOT IS FIERCE. BOOM!

in 2012 it was capable of developing its own personality. Currently Furby Connect has artificial intelligence which allows it to learn from its interactions with its surroundings.

THE DAY THAT A CHATBOT TAUGHT ME A LESSON Now we’re at the section dedicated to conversational interfaces we couldn’t leave out the following anecdote. We don't know if you read our Foreword, don’t worry if you didn’t - most people don’t. On this occasion we wanted have a little joke around with the personal assistants, as they’re one of the current themes. During our conversations with AI assistants, trying to get a weird introduction to our book, we spoke to a chatbot recommended to us called MITSUKU. [11] We asked it the obligatory questions about trends, the evolution of Human-Computer interaction, design, blah blah. At some point we got tired of the conversation and…because we’re only

human - we began to troll the bot to see how far it was programmed.

VISUAL SEARCH [Fig. 3]

result is positive, additional product information is shown or “aug-

The camera is the new search box,

[1]

many applications

will eventually introduce the search system that’s already found in Snapchat, Pinterest Lens,

[2]

AliExpress

[3]

and Google Lens

Amazon was a pioneer in visual search with its Flow

[5]

mented” in the form of an Amazon card with other similar products and a purchase button.

[4]

feature in

2014. Flow, which is currently inactive, used image recognition to

[6]

look for products.

GOOGLE LENS Google is trying to make a change, a shift from text to a more visual

[3]

way of finding information. With the launch [4] of Google Lens, users can identify and buy products; such as outfits they like, identify species of plants and books etc.

AMAZON

Google Pixel, LGE, Xiaomi,etc. The app can also detect real life text

Snapchat, as an AR early adopter, wasn’t going to miss out

and copy and paste it digitally such as from recipe books, textbooks

on visual search. In September 2018 it announced [6] a new feature

WIFI passwords,etc. Lens now works in real time. It uses computer

in a strategic collaboration with Amazon. This new Snapchat featu-

vision in both ways, locally, on the client device and on the cloud to

re allows the user to “scan” barcodes using the camera. When the

identify billions of words, phrases, places, and things.

[3] AliExpress, the place where you can find anything you could possibly ever imagine, also started experimenting with image search in 2016.

[6] Snapchat: Introducing Visual Search. Source: TECHCRUNCH.

[Fig. 6]

Lens is available on supported Android devices from

SNAPCHAT AND THEIR ALLIANCE WITH

MICROCOPY & UX WRITING [Fig. 7]

HUMOR & EMOTIONAL MANIPULATION

Over the last few years we’ve witnessed a big change in the

message and communicative style of corporations and businesses,

Nowadays we are seeing a certain degree of irreverence and many

voice and tone has became fundamental. Brands are trying to use a

touches of humour, which is a very advantageous way of connecting

more human, colloquial tone - more reminiscent of a conversation

emotionally with the user. WHIMAPP, the application to plan getting

with a friend than a dealing with a client.

around using different modes of transport, is presented in the Google

[Fig. 8,9]

Play Store in a natural way, with shades of humour - very appropriate

It’s very gratifying to get a cheeky “Thanks Babe!” when you

for its target.

interact with a shopping basket, and who could resist this message from Medium: “Do you believe in destiny?” it’s impossible not to

“UFOs are not included yet but they will be added when they

click on this “call to action”.

become available to the wider public. “ Whim - Travel smarter App [10]

How was this discipline brushed aside for so many years, [Fig. 11]

with us opting for the the same old standardized messaged in our

In other occasions, using a touch of humour whilst pulling on

the heart strongs, has its rewards.

interfaces again and again?

[8] [9]

[11]

[12]

[7]

[Fig. 12]

But be careful, don’t go too far and kill the good vibes!

orientation, ideologies or compromise personal or professional re-

is a Tumblr account full of terrible examples of

lationships. Something similar happens with the suggested adverts

Confirmshaming

[12]

as part of our searches. At this stage, everyone has some story

sites attempting to convince users not to abandon ship.

about a very strange coincidence related to recommended adverts.

DON’T SHAME YOUR USERS

“Imagine if one day you invited your friends from the

In the near future, users will begin to value those applications or

Video Club over for dinner and your Netflix was full of Jackie

services that bother them the least and respect their privacy.

Chan movies“

Designers must predict the context of the user and the emotions which they could evoke in them. The context totally changes the receptiveness towards the product or service on offer.

The design of the system of suggestions and recommendations’ depends on the algorithms that are based on our history and the history of our friends’ accounts. It’s clear that we can delete

hungry and sleepy person can lose their patience and get angry very

our history or remove every like one by one, but the real problem is

quickly, on that note, is there anything worse than to be rudely awa-

when we activate by default the setting which shows us history on

kened by notifications on your mobile when you were fast asleep?

our home screen - which compromises our details.

UX is not only the design of the experience of the product,

Amazon understands users’ fears, their answer to this lack

it’s also the whole ecosystem we construct around it, including offli-

of privacy is Amazon Locker, which avoids sending embarrassing

ne interactions, notifications, newsletters and customer service.

things to your work, or your mom’s house.

Respect your users, limiting unnecessary alerts, notifications and

It’s true that we can also collect packages at non fixed

communications is as important as respecting them by protecting

hours and all that, another of the features of Amazon that protects

their details and privacy.

our privacy is to hide certain products in our buying history. Don’t

In the last few months we’ve seen some pretty eye-opening digital scandals, the politicalization of social media and attempts to

shame your users or demand more attention than they want to naturally give you.

manipulate votes. Every day we face subtle violations of our privacy

show other people's likes as part of their system of suggestions.

This may seem trivial but it could reveal data about your sexual

[7] Wonderland Studio. [8] Thanks Babe!. [9] Do you believe in destiny? Call to action message from the Medium Newsletter. [11] Sad little cat to increase Twitter interactions. [12] Confirmshaming “No thanks, I prefer canned soup” , “I prefer to troll the Internet alone”.

that compromise us in serious ways. Many social media platforms

As addressed by “Every website in 2018” [1] current day websites are

We want to make your user

Don't miss any important news.

full of annoying requirements you have to follow before you can get

experience as good as possible.

Please subscribe to our newsletter.

We use cookies. to and enjoy the actual content, often driving us away in terror be-

I agree

fore we have even got past the third disclaimer.

Your e-mail

These days, we have to prove we’re not robots, accept cookies

that we’re over 18, that we do or don’t want to subs-

cribe to their newsletter, receive notifications, etc… basically, we’ve regressed to the golden age of pop-ups! But beyond the current technical and legal inconveniences, this year has seen a magnificent manifestation of style and innovation, revealing the immediate future of interactive production.

Are you over 18? This website requires you to be 18.

Yes

Is your city New York, NY? Yes

Are you using an ad blocker?

Aw, Snap!

That's okay. But without advertising income,

Something went wrong. To continue,

we can't keep making this site awesome.

reload or go to another page

I understand

Allow

Block

We value your privacy... I agree 53

Source: bit.ly/every-website-2018

We want to: Show notifications

Walter Benjamin said in his famous essay The Work of Art in the Age of Mechanicaeproduction

[2]

from 1935, that the uniqueness of

a work of art is inseparable from its being embedded in the fabric of tradition and its ritual function. This essay is about the loss of the aura in modern arts such as cinema or photography as a result of its mass reproduction, losing the uniqueness of its ritual function. Illustration is used as an element of difference, even prevailing over commissioned photography because it culturally reminds us of the exclusive nature of art.

Crafting A Singular Voice With Illustration

In the recent age of illustration flourishing in the tech industry we have examples from Airbnb, Mailchimp, Dropbox and WeTransfer that showcase work from different designers and artists as a way of making the waiting process more pleasant for the user and to communicate emotions and brand values. [Fig. 3]

Slack has shown its capacity to craft its own unique voice

creating “Slack’s illustration voice system”,

[3]

an illustrated design

system with expressive and organic characters and bold colors, as as expressive way to get the user’s attention and transmit an idea using just one image. They have also developed a pattern system that satisfies all the different contexts where these illustrations are used as menus, footers, newsletters, etc. These illustrations, that often have narrative qualities, have been adapted to fit on smaller screens without

losing their meaning.

[3]

[4] From top to bottom: Illustrations for Airbnb and Mailchimp. [3] Illustrations for Slack, UI elements, and patterns. [4] Gucci Hallucination, illustration by Alessandro Michele. [5] Looky What We Made book showcasing by Glitch.

Another highlighted example is the collaboration of the artist Ignasi Monreal on the last few Gucci campaigns

, creating

[4]

an inspiring aesthetic complete with mythology, the great master artists of the Renaissance and Flemish paintings. [Fig. 5]

We still have more examples, like this from the innovative

platform Glitch [5]

paradise for stylish developers! Glitch, the

friendly community where youâ&#x20AC;&#x2122;ll find the app of your dreams, just launched a collection of projects with work from illustrators, which

further enriches their particular graphic style and communications.

From top to bottom: eatgenesis.com marianopascual.me springsummer.gucci.com epicurrence.com

[5]

Head here for more examples and resources: awwwards.com/now2/illustration

kikk.be/2018

This is the key trend, the masterpiece which web design has revolved around recently. Typography has always been fundamental in design, (not such much when the technology didn’t permit it) but now we have a high level of freedom, expression and experimentation, typography is taking its rightful place. In a dominant way as if joyfully getting its own back for years of suffering due to the scarcity of fonts and problems with legibility and compatibility in the primitive history of web design. Currently there are font trends with lots of personality, but it’s not so much about choosing fonts or their combinations, it’s the

Typography-Based Layouts

very use of “words” as the main element of the aesthetic, as well as the semantics. Words now have a physical presence in design, a structural element around which the rest of the composition flows. One of the uses and effects of typography to highlight is the treatment of Letterforms as graphic elements, applying deformations, effects and animations as well as the combining of different styles and weights with

serif,

BOLD , italic, Serif, san-

all appearing together in the same

paragraph.

Head here for more examples and resources: awwwards.com/now2/typography

From top to bottom: beyond-beauty.co rubxkub.com shre.ly/huff-post-existing-while-black

From top to bottom: agneslloydplatt.com louisansa.com aristidebenoist.com

Very soon this surge of creative typography will be added to by Variable Fonts - which currently doesn't have enough browser support, but should be on our list of skills / knowledge to learn. Variable Fonts are the evolution of the OpenType font specification. One font file can contain multiple variations of the typeface. Using CSS it is possible to access these variations and animate transitions between styles. Both Foreday and Plastic (p. 66) are variable fonts which we can modify the parameters of for weight and serif, allowing us to not only create animations but multiple variations of the font. We can generically animate the font axes in CSS, by com-

Variable Fonts

pressing or expanding it, but its other properties (those which refer to its morphology) will be decided by the font designer. A good example is Decovar a multistyle decorative variable font by David Berlow, which is designed to parametrize multiple properties.

Head here for more examples and resources: awwwards.com/now2/variable-fonts

Weight

200

180

Serif

Size

200

180

Weight Serif

1000

Serif

1000

Weight

1000

Serif

1000

Playing with parameters, FOREDAY variable font Pedro Leal, Dino dos Santos dstype.com/variable-fonts

Weight

Playing with parameters, PLASTIC variable font Ivana Paleckovรก, Jitka Janeckovรก plastic-typeface.com

Size

BIGGER

Decorated, Augmented & Big Paragraphs

Paragraphs are no longer regulated to simple column distributions or wrapping geometric forms. Paragraphs of now and the future are , full of hovers, emojis, microinteractions, images, style changes, and strange distributions, where expression is the king! The size has increased considerably and weâ&#x20AC;&#x2122;re not shy when it comes to combining fonts and decorative styles, Big Paragraphs are one of the key terms in trends.

discography.princeestate.com amessagefrom.earth marsell.it loveiko.com rare-syd.com

Head here for more examples and resources: awwwards.com/now2/paragraphs

From top to bottom and from left to right: louisansa.com edkf.com.br maxkaplun.com danielspatzek.com

Animating secondary elements instead of the more obvious ones is a great way to visually enrich a site without using up excessive resources, which can lead to increased loading times. These animations often form part of the microinteractions, creating fluid user experiences. The use of tools like Lottie,

[6]

a mobile library that parses

Adobe After Effects [7] animations is improving the quality of these animations. Lottie uses JSON files exported by the Bodymovin[8] plugin from After Effects, this is a big step as it allows motion

Animation: Secondary Elements & Organic Motion

designers to keep their animations as they were designed and to not â&#x20AC;&#x153;reinterpretedâ&#x20AC;? by a front-end engineer who may lack the tools that software like After Effects provides. Lottie-style animations are fluid, organic and more complex. Of course CSS and Javascript offer many possibilities for animating interfaces, they offer a lot of control of parameters, easing curves, blending modes, filters, svg morphing, etc, but require a lot of skill.

ORGANIC ELEMENTS We often find vectorial elements animated with organic morphing, imitating liquid or gooey effects in interfaces and microinteractions, and of course typography is no exempt from these types of animations and transformations!

Head here for more examples and resources: awwwards.com/now2/animation

From top to bottom and from left to right: franshalsmuseum.nl conference.awwwards.com cultldn.com eatgenesis.com beyond-beauty.co louisansa.com/about

As we have previously mentioned, the need for expression in a more colloquial way is part of the voice and tone of many brands. This need manifests itself in the general text, in the microcopy and the small details in the animated microinteractions. Femme & Fierce [9] is an exotic example of E-commerce, full of micro interacciones and subtle details. Taking a step further and adding a touch of humour and playfulness we find mini games, a resource used to make waiting times more pleasant for the user while the content is loading, whilst

their intention to establish a close and entertaining connection with the user.

[9]

Cute Microinteractions & Minigames

at the same time showing the skills of the designer or developer and

Head here for more examples and resources: awwwards.com/now2/microinteraction

[9] Animated lips to grab the userâ&#x20AC;&#x2122;s attention & Microinteractions to display product information

User interacts with the mouse drawing over the content and revealing animations. leeroy.ca

Shoot. studio-job.com

Decorated paragraph and microinteractions. jonny.wtf

In the last few months we have lived through a strong influence of Brutalism in web design, it was flowing through our layouts, texts and interactions, but the style has progressively refined itself, to the point of being tamed for the good of the usability of our interfaces. In the minds of creatives there is always a conflict, where freedom of artistic expression continually collides with reality, the former nearly always giving up to the demands of utilitarianism. Brutalism, as it has manifested itself in web design, reached its peak

Brutalism and Maximalism: Wild Forces Tamed at Last

at the beginning of 2018; breaking all logic, usability and accessibility with its use of interfaces and interactions; and has declined in its delirious rule breaking throughout the year, leaving beautiful pieces scattered about the web for the study of the history of digital design.

This shor t pe r i o d o f â&#x20AC;&#x153; r e b e l l i o nâ&#x20AC;? w i l l go d o w n i n h i s t o r y, w e â&#x20AC;&#x2122; l l r e m e m b e r b e i n g h a u n t e d b y s t r a n ge n av i g a t i o n p a t te r n s , an d am a z e d by i n f i n i te am o u n t s o f i m a g i n abl e h o ve r s , a t i m e w h e n p r o vo c a t i ve c u r s o r s b e c am e g i g an t i c , m u c h l i ke t h e p a r a g r a p h s ,

a b u n d a n t w i t h i r r e ve r e n t i c o n s a n d f a n t a s t i c a l r o l l o ve r e ffe c t s .

However, don’t think that we have bad memories of these trends, actually they were rarely applied to websites aimed at the general public, or E-commerce. Except for some luxury retailers or publications of a more creative nature, almost all the experiments of these trends were made by agency websites, album covers or fashion labels, and by no means have been a trend represented in the design of native apps. As we have said, the experience wasn’t bad and certainly wasn’t pointless. What has stayed with us from these experimental techniques is the ability to take our layouts and interactions to the limit. It made a great contribution to our creativity - we’ve learned to say YES, that we can allow design to do more, it’s shown us that a simple paragraph can be truly original and of course, lots of these techniques and ideas are perfectly compatible with our web standards.

From top to bottom: studio-job.com uncannyvalley.studio springsummer.gucci.com

Head here for more examples and resources: awwwards.com/now2/brutalism

Head here for more examples and resources: awwwards.com/now2/image

From top to bottom and from left to right: kentatoshikura.com makereign.aristidebenoist.com themustafacelik.com aristidebenoist.com robinmastromarino.com aquest.it

This is the most hidden navigation ever. There will never be a more uncomfortable interaction, when you see it for the first time it can seem fun but when the novelty runs out, itâ&#x20AC;&#x2122;s not fun anymore. If Norman Nielsen ever did a study on Press & Hold in terms of discoverability it would conclude that 98% of everyday users are not capable of getting onto the web in question and that Press & Hold is infact a short cut to hell. In summary, although it has featured on some of the most experimental sites, it should not be a common trend.

PRESS & HOLD 91

Press & Hold And Go Straight To Hell

Recently we have observed the proliferation of independent profiles that are commissioned for projects by big agencies and studios. Itâ&#x20AC;&#x2122;s totally normal that highly talented creatives decide to only accept projects that satisfy their needs instead of staying in agencies and collaborating on less attractive projects. The proliferation of self employment is part of a socio-economic trend that has becoming more and more established for quite some time. Currently there are

The Era Of Independent Designers + Creative Developers

approximately 53 million Americans working as freelancers. Everyone has this need for freedom, to control their own creative production. The nature of the industry means that the online working model can be even more appropriate for tasks that require a great amount of concentration and inspiration. In general among these independent designers or creative developers, we find minimal portfolios based on careful images, typography and small details in the way of microinteractions.

Head here for more examples and resources: awwwards.com/now2/independent

Effects on cursors are a decorative and pretty dramatic element, although they are often uncomfortable for the user. Custom cursors have evolved since the famous trail effects, often blending effects to modify the color and opacity of the cursor according to elements they are overlapping. These “reactive cursors” change shape, size, opacity, color or animation in response to other elements or the actions of the user. An illustrative example of this trend is the cursor of Bersi Serlini - Festival 2018

, a round yellow form that adapts to the

[12]

different elements of the interface and even forms part of the tran-

Custom Cursors & Mouse Effects

sitions between sections. In KIKK 2018 [13] we also saw a reactive cursor that is at the centre of the interactions of the page, revealing the content of the elements and illustrations. As we have seen, Brutalism has been characterized by its use of custom cursors, in fact not one site with the style has a conventional cursor. We don’t really know why, but circular cursors are triumphing, maybe it’s a type of homage to Material Design and its circular reveal animation.

[12] festival.bersiserlini.it [13] kikk.be/2018

Head here for more examples and resources: awwwards.com/now2/cursor

Much like paragraphs, menus have also increased considerably in size, do you remember those tiny menus with pixel fonts from 2005? It seems incredible that in the space of a few years we have arrived at such an opposite end of the scale, fashion is so fickle! In this case, the size of menus are also influenced by mobile patterns. In designs for mobile interfaces the use of full screen overlay menus is common, as interfaces are touch based, and smaller touch targets [14] would be harder for users to hit than larger ones. But following in the footsteps of paragraphs, itâ&#x20AC;&#x2122;s not only about the size, but also decorative elements, hovers and all types of micro interacciones and effects.

Head here for more examples and resources: awwwards.com/now2/menu

Hero Menus

The most common thing that we keep on seeing is the use of layouts with long scrolling, but with divided sections, as in, not a pure “one page layout” (they do have similar navigation) but certain parts of the content are separated. They’ve also kept subtle effects such as parallax and of course lots of use of scroll triggered animations and scroll-revealed content.

MIXING SCROLLING [Fig. 15]

In badass.shoes-up.com

[15]

we see an illustrative example

of scroll in different orientations. Its navigation combines vertical

What About Navigation?

scroll and horizontal scroll in a one page layout.

EXPERIMENTATION OR GOOD NAVIGATION PATTERNS? Well it’s not really a dilemma, at Awwwards we are aware of the importance of both, this is why we like to show sites that dive deep creatively to achieve unique effects, as much as sites designed in a perfect and functional way. In terms of unusual navigation patterns, we’ll leave you with these total gems that we keep adding to in our collection “The Best of Navigation”

[16]

whose only purpose is to

delight the viewer!

103

102

Head here for more examples and resources: awwwards.com/now2/navigation

105

104

From top to bottom: imabandi.to springsummer.dk dimetrap.com

From top to bottom: badass.shoes-up.com firstaperture.com brandstudio.ru

[15]

This trend is the color scheme itself and the way in which it is used as a principal design element - we’re talking about color schemes with personality that are consistently applied throughout the whole product experience. In general we’re seeing schemes with two or three primary colors and various secondary colors. Saturated and pastel colors are combined, making way for striking high contrast effects. There are many examples of plain bold colors in the background combined with photography, typography and illustration. As an example of this special attention to color schemes

Color Schemes With Personality

we have the site of Frans Hals Museum (p. 116). The contrast between the content is spectacular, the baroque paintings of Frans Hals Vs. the “newness” of the design elements. The color scheme has bold, brilliant and saturated colors used in the background and UI elements, while in the work of the painter, black is the dominant color due to the sober dress of the time and it being characteristic of baroque paintings. However, one of the key colors of the range is “almost black ” # 2 31 f 2 0

which connects with the pallet of the

painter. The use of simple line vector icons is also a strong contrast with the baroque realism.

107

106

Head here for more examples and resources: awwwards.com/now2/color

109

108

3D animation has had a big influence on design over the last few years. 4D cinema has made it accessible to a large amount of creatives, who would not have dared before, due to the complexity of the software previously available. Cinema 4D has managed to optimize this learning curve with its designer-friendly interface, its presets and its enormous community. As we said at the beginning of the book, VR, AR and 3D printing are reactivating the production of 3D digital content. The legendary parallax effect used a fake 3D constructed by 2D planes in different Z-axis. Itâ&#x20AC;&#x2122;s very common in CSS animation

Mixing 2D & 3D Elements

to imitate this three dimensional effect. The basic idea of this trend is the search for contrast, 3D elements above flat colors or 2D planes creating a 3D fake scenario, giving place to an almost oneiric image.

111

110

Head here for examples and resources: awwwards.com/now2/3D

Thanks to the progressive standardization of CSS grid and flexbox we are implementing layouts which are more “free”, that aren’t constrained to a grid that has to be restructured in different columns for its responsive breakpoints. We should abandon the fantasy of responsive web design, nobody expects that one single design can respond in a flexible way to 10 devices.

From top to bottom: m-mediagebouw.nl emergencemagazine.org rezo-zero.com seaharvest.net.au

Head here for more examples and resources: awwwards.com/now2/layout

113

112

Editorial Style Layouts

We can officially say that PWAs are the new standard, something like the new responsive web design, due to the advances that they represent. As previously mentioned, mobile versions aren’t reduced versions, it’s a different experience which can and should be optimized to have good performance, indexation and conversions. Progressive web apps allow developers and designers to create applications based on web technologies typical of native app-like experiences with fullscreen and custom navigation bar, automatic updates, transitions between sections without loading

PWA Is The New Responsive Web Design

other urls, access icon in homescreen as well as the ability to work offline and receive notifications. But the best thing is that they keep the positive characteristics of webapps like SEO and indexation by search engines and, most importantly, avoid the effort of cloning the app with different technologies. PWA Main Features: Web technologies-based, Progressive enhancement, Native app-like experiences (fullscreen, custom navigation bar), Access icon in homescreen, Offline content, Notifications, Discoverability for search rank and SEO, Linkables, Automatic updates, Installable, App Stores You can find a lot more information in our book made in collaboration with Google and Microsoft “Progressive Web Apps. The Future of Mobile Web”

. In this free eBook, we look at what

[17]

we really mean by a ‘PWA’, the unique features they offer users, and how to design and build one.

115

114

[17] awwwards.com/PWA-ebook

117

116

Frans Hals Museum

Build in Amsterdam is a branding agency specialized in E-commerce. We combine strategy, branding and E-commerce to bridge the gap between digital and physical touch points. We see E-commerce platforms as digital flagship stores. So we intentionally develop platforms as brand experiences that inspire, engage, and convert in an infinite loop.

118

franshalsmuseum.nl

a p l a t fo r m r e n t co th e m â&#x20AC;&#x2122;s m y. useu t li a an u d c d lassic

ar or

119

e fl

n ti

Frans Hals Museum may be the oldest art museum in the Netherlands, but itâ&#x20AC;&#x2122;s as innovative as ever. The museum in Haarlem is best known for its Golden era art and its collection of Frans Hals works. In March 2018 the Frans Hals Museum merged with De Hallen Haarlem, well-known for its contemporary collections. This bold move meant a beautiful marriage of old and contemporary art, giving rise to new stimulating meanings and a new identity for the museum.

THE CHALLENGE The new identity of the Frans Hals Museum needed to introduce

[2]

[1]

visitors to this mix of old and contemporary art in a surprising and attractive way. A new platform was a vital part of this marriage. Prior to the design process of the new platform, Amsterdam based agency KesselsKramer developed a new brand identity* for the Frans Hals Museum. From there, Build in Amsterdam extended the identity to online to create a platform that aimed to reflect the contemporary and classic duality of the museum. KesselsKramerâ&#x20AC;&#x2122;s main concept was to combine the old with

[4]

[3]

the new, in a mirror. This combination was translated into every aspect of the platform, from content to visual design. Based on the visual identity, we too let the opposites meet on this new online platform, where old meets young, left meets right, and pixels meet paint. The duality of the identity can be found everywhere on the platform. The collection page on desktop. Example of how an art piece detail page looks like. The client can select a suiting colour combination for the art piece in the CMS. Everything is optimized for the client. They can upload any size of content, itâ&#x20AC;&#x2122;ll still fit on the page.

*Brand identity: bit.ly/FHM-brand-identity

121

120

[1] [2] [3] [4]

FUN BUT FUNCTIONAL

and discovery. We wanted it to be both functional and surprising;

We reinvented the museum’s menu structure for the best browsing

an online arena for getting to know the museum and its pieces.

experience. By splitting the many pages into four clear clusters, we

For example, when we created the collection overview, it had to

were able to keep the menu clean and organized. We also made a

be more of a tool, rather than just a big overview of artworks. That

functional sidebar where one can find all useful links, like the current

is why we introduced useful and fun filter options such as colour,

active exhibitions, opening hours and the option to buy tickets. This

period, medium or even a set of random variables like food, cats

solution works perfectly with the mobile platform too. We approa-

and nudes.

ched the mobile menu following an app approach, placing it at the

To bring play to the next level, we also added three mini-

bottom of the screen. It is a combination of the top and sidebar

games to the desktop version of the platform. There is the Art

menus from the desktop version of the platform.

Roulette to mix-and-match art portraits, both old and new. Then,

KNOW THE RULES SO YOU CAN BREAK THEM We see the platform as an extension of the museum. That is why we stayed very close to the existing identity. For example, white backgrounds are nowhere to be found. The fonts are oversized and the animations are based on the two-tone layout. During the process we learned fun and original ways to make use of the identity. For example the ‘Art Roulette’ play section has the animation of a gambling machine, which suits the identity perfectly.

LEARNING PLAYFULLY Based on the main concept of old meets new in a mirror, the

123

122

platform becomes one seamless experience of playful learning

there is the ‘Gif me Frans’, a random selection of fun and con-

specific art piece coming from the collection overview. Each transi-

temporary animated images of some classical art pieces from the

tion, interaction and animation focused on their main identity style

museum collection. Imagine a priest performing some karate kid

(mixing old and contemporary art). This led to a variety of split ani-

moves or a guy enjoying his blow-dry session. For the third game

mations we tried in all kind of directions, before ending up with the

we got our inspiration from dating apps and their swipe left or right

one we currently use.

feature. Once the user is interested in an artist and goes for the ‘like’, a timeline and info on that artists opens up. Our thought: why not spice up art learning a bit?

EDUCATE THE CLIENT After the platform was designed and developed, we came to the last important step - educating the client. We organized a workshop to ensure that the content is fantastically written and the imagery is always high-resolution. We also created a guideline document so that the information, tips and tricks, could be implemented easily throughout the Frans Hals Museum team.

Furthermore we used HTML5, CSS3 (using SCSS as css preprocessor), Javascript (including our custom built framework) and SVG. We created an icon set for all the custom icons Frans Hals Museum would use in their identity. To show and animate these on the platform we had to create an SVG library that contained all the separate SVGs (converted a single path for each SVG), so we could easily access them via various ways. For example, we created a custom field for displaying the icon set in Wordpress, where the client could easily choose whichever icon would fit. For the CMS we built a custom Wordpress theme for the Frans Hals Museum, giving them complete freedom in building the

We developed the project as a Single Page Application (SPA). Using

options in the CMS they can choose from, which will define the

our custom built Javascript framework (including BackboneJS and

style and look & feel of the page. Think of the color combination, or

Marionette) we were able to provide a smooth and seamless expe-

whether or not it includes a sidebar with extra information, a map,

rience. This framework took care of routing, rendering, transitions

a carousel, etc.

and components instantiation. Having these technologies at hand helped us to create transitions where you could literally dive into a

124

pages they need to represent their museum. There are numerous

Some Libraries and Tools we used for the project contain GreenSock, HammerJS, Gulp, NPM.

125

TECHNICAL APPROACH

If This Then Dominoâ&#x20AC;&#x2122;s Legwork is an independent studio based in Denver, CO. We create animation and interactive experiences with brands and agencies all over the world.

127

T , to pai

r 126

into using

ifthisthendominos.com

p p a

nts. e v

s with

A ta st y

between Domino’s Pizza and IFTTT, a platform that allows you to

CP+B already had a site structure and user flow in mind, but were

connect a multitude of services and apps to automatically perform

open to our ideas on improvements to the UX and visual design.

tasks based on pretty much anything you can dream up. Wait…

Due to the relatively small three page scope of the site (Tutorial,

So, for example if the zombie apocalypse hits, I can automatically

Browse Applets, and FAQs) it left a lot of room for us to really

receive Domino’s pizza? In fact, you can set up any event to trigger an

workshop and refine the cornerstone features of the experience

order for Domino’s pizza! After being approached by Crispin Porter

– the animated tutorial and searchable applet grid being the two

+ Bogusky to partner in designing and building the experience we

biggest challenges.

couldn't wait for a slice of the action!.

THE CHALLENGE Our primary challenge was educating users on how IFTTT works. We were well aware that many of the users visiting the site wouldn’t have any prior knowledge of how it works. So, it was important to demonstrate the value IFTTT provides, showing how easy it is to set up and pair different apps and events with Domino’s in a fun and engaging way. In addition to the tutorial portion of the experience, we also had to prime users for the main event – a seemingly infinite grid of premade applets that users can browse and explore. The

128

SIMPLIFYING THE EXPERIENCE

“We wanted to keep things as simple and straightforward as possible.” The tutorial was initially intended to be an interactive step-by-step guide. We wanted to use bold and beautiful animated illustrations, whilst also keeping things simple and straightforward. We decided upon a mini-narrative unfolding and guiding users quickly and effortlessly through each step, and looked at handling the animation, pairing it with live text, and providing a consistent, legible user experience at every breakpoint. We distilled it down to three simple steps. Instead of animating multiple individual segments and forcing users to click through

anchoring element of this page is a search feature that allows you to

each step, the entire tutorial plays out automatically. This gives

create your own unique pizza delivery scenario where the only limit

users the option to skip if they wish. This simplified things, decrea-

to what you can set up to automatically trigger your order is your

sed clicks, and allowed us to make it seem we were using full screen

imagination.

video from desktop all the way down to mobile screen resolutions.

129

If This Then Domino’s was conceptualized around the partnership

THE APPLET GRID The toughest UX challenge was creating a custom responsive search interface accommodated by a grid of 45 unique clickable applets. Applets connect two or more services together, so when one action happens, another follows. Users can browse through the premade applets created for the site or search for and set up new ones. When designing the interface, we faced some constraints, we were dealing with a finite amount of applets, but wanted to impart a feeling of infinite possibility. We wanted to keep the branded ‘If _____ Then Domino’s’ type lockup an ever-present anchor at the center of the interface. Before we landed on a scrollable, draggable, repeating grid of applets, we went through multiple iterations and demos for this feature. Ideas included using z-space to scroll through applets as if they were zooming past you, zooming in and out of the grid when a user taps into search mode, live filtering down of search results as a user types, etc. We wanted to avoid the need for instruction here (a tutorial immediately after a tutorial would hinder the user experience). Rather, we wanted the grid’s behavior and animation to feel natural and intuitive, like an extension of the animation happening in the tutorial. The grid animates into position with the applets around the perimeter of the screen slightly cropped, suggesting that there are more to be discovered. The natural inclination is to scroll, but we wanted to allow for the ability to drag, swipe, move up, down, or dia-

131

130

gonally... whatever made things feel really responsive to the user’s

actions. We eventually landed on a solution where the search field dims back as soon as you start to drag the grid, then reappears upon release. You can essentially see the ghost of applets moving through the position of the search field as you drag, training users to click and look at the current applets in frame or search for more. This relatively simple approach kept all the necessary ui elements in place preventing the need for any complex instruction on desktop. When a user clicks into the search field or starts typing a query, the grid dims back and the search field transforms. We wanted this part of the experience to feel really intentional, like you are entering search mode. Having a strong visual shift happen here, focuses the user’s actions and clears any distractions. Instead of showing results filter down in real time, a live counter shows you how many pre-made applets match your query before you commit.

VISUAL STYLE Developing a visual aesthetic for the site was a collaboration between the Interactive and Animation teams. We explored and

TECHNICAL APPROACH For this project, we decided to leverage Vue.js, the JavaScript framework. It was a perfect choice for our single page application and we learned a lot of useful tricks along the way. Collaborating with our creative team to get assets made for PNG sequence animations and for the video tutorial was a lot of fun, but very challenging. The rich pieces of media were integrated tightly with live DOM content on the site, so it took a lot of coordination to get things positioned properly.

“The infinite grid was a real brain buster!” One of our biggest technical challenges was the infinite grid browsing view. Accounting for uneven grid item counts, different screen sizes, and different drag directions, all while maintaining smooth browser performance was very challenging. For an infinite grid to work, the initial generation of the grid has to be duplicated enough times to fill an entire screen, and then have the individual

developed three iterations from which the client eventually chose

items swap to an offscreen position in the direction that the user is

one. Informal, exaggerated linework and warmth imparted by grain

viewing. It was a real brain buster!

textures made for a very approachable and friendly illustration style. Playing off the limited red, white and blue color palette of the Domino’s brand created consistency across all illustrations. Creating 45 custom applet illustrations on top of a Tutorial animation was no simple task. For every event, we provided several

133

132

conceptual sketches for the client to choose from.

Ueno 3D Interview Ueno is a full-service agency that designs and builds beautiful brands, products, and marketing experiences. Founded in 2014, Ueno now has more than 60-full time employees and four offices in Iceland, San Francisco, New York, and Los Angeles. Clients include Google, Verizon, Airbnb, Apple, Chubb, Cisco, Dropbox, Facebook, Fitbit, Lonely Planet, Medium, Red Bull, Progressive, Reuters,

in ve ti

yf u

lly

Samsung, Globo, Slack, Uber, and Visa.

135

134

interview.ueno.co

Ueno 3D Interview this little 3D animated job interview “gamelette,” started out as something completely different. We think. Nobody really remembers. We do remember that somebody started making animated 3D characters out of some of their colleagues for fun, and then we had this idea of making a game. We didn’t really know what this game should be about, but we went ahead and started working on it anyway. The next thing we know we had this nice little 3D world, with nice little 3D people in it.

MO’ PEOPLE, NO PROBLEMS Not to brag about it, but Ueno is growing. At least for now. People keep coming to us with their money and their problems, asking us to solve their problems and take their money. To solve problems you need brains. We’re always looking for good people with good brains to join our teams. And not just anyone. We want the slightly odd ones. The ones who can do amazing things but maybe have never found a home anywhere else. People who see things differently and want to join others that see things differently too. People crazy or stupid enough to join an agency that wants to specialize in the things

[1]

it has never done before.

137

136

[1] A hot dog adventure: Chatting with the folks at Ueno.

CHOOSE YOUR ADVENTURE And so we had this idea. What if we could use our little game to find these crazy people, and help them find us? What if we could give them a little glimpse of what we’re like, and maybe see if they were the kind of people you’d want to spend your days with? And what if we made them look like a hot dog? So that’s what we ended up with. The curious job seeker — a walking, talking hot dog — is dropped into the world of Ueno. After shooting the breeze with some of the people from our New York, San Francisco, Los Angeles and Iceland offices, they go to the upper floor for a final boss battle with Halli, the our founder and CEO, who then sneakily directs them to our careers website to check out job openings.

lighting, materials, models and visual effects to breathe life into the experience. And there’s an algorithm that detects walls, furniture and helps the main character find its way through the obstacles. The Ueno house is inspired by the decor from our offices, and the characters are modeled after real people. To make the experience look as realistic as possible, we paid special attention to the materials and lighting. We also had to limit the the polygon count on every object and character to ensure good rendering performance. Our process was very collaborative and organic. We allowed ourselves time to try new things and iterate. But we didn’t have unlimited time and resources, so we gave ourselves a deadline to provide enough pressure to launch something — even if that “something” was continuously changing as we went along.

“And so we had this idea. What if we could give you a little glimpse into the madness that is Ueno?” Halli Thorleifsson, Ueno Founder & CEO

TECHNICAL STUFF The Interview is a WebGL experience built on a grid system behind a 3D model with walls, collision boxes, and hotspots that the user can

139

138

click on to move around. We added layers onto the basic grid with

Foosball World Cup 2018 AQuest combines creativity and technology to create unique digital experiences that connect brands with people. We value our talents and foster their growth with a positive corporate culture, embracing change, technology and innovation.

A Brillian

t W

GL Op

tim

141

140

foosballworldcup18.com

Foosball World Cup 18 is a side project by AQuest’s new LAB unit and winner of June’s SOTM. It's an online game, where you can play foosball as an international real-time event, like the 2018 FIFA World Cup. You can choose your team and the 3D environment reacts and adapts to the selected colors. The opposing team is chosen randomly and the gameplay lasts 3 minutes. Using the AI, the best teams display better performances online.

MAKING THE 3D STADIUM: The 3D Team designed the stadium starting from the playing field, calculating its ratio, then developing the outer parts step-by-step. The low poly modeling was a style choice, in order to speed up the rendering process. The ultimate version of the stadium inclu-

effects applied to the whole scene and glow effects of the players

des about 7500 polygons and each single player has less than 500

and outer lines of the stadium.

polygons.

For the optimization, the AQuest team created some cus-

For the neon, they used the light baking technique, ex-

tom shaders materials to render fake lights directly on to the object,

porting the texture at 4K and then projecting it on the stadium. An

without using “real” ones in the scene, this sped up the performan-

environment where the players, the moving ball and the stadium's

ces and also gave us a high level of customization and interaction.

limits are illuminated by a dynamic neon light, following a precise

players and the trajectory of the ball, making the actions realistic and engaging. The most spectacular thing about this project is the opti-

142

mization of the graphics, we have a 3D scene with post processing

TOOLS & TECHNOLOGIES Graphics and 3D: Photoshop, Illustrator, After Effects, Maya, Cinema 4D, Principle Audio: Logic Pro X Development: Threejs, Oimo.js, GSAP, GLSL, ES6, Vue.js. [6] Dynamic neon light illumination [7] Animated menu of countries. [8] Impressive post processing effect applied to the whole scene.

143

study of the shadows. The high framing follows the movement of the

Kopke since 1638 BĂźrocratik, a branding and interactive award-winning agency with studios in Coimbra and Porto. Designers, engineers and coders driven by exceptional design and craftsmanship. We are digital specialists with our heart and soul on strategic branding.

144

kopke1638.com

e s u

o r h

i lt

h g u

e s

i d e

r o t

e t y

n lli

s nt

145

o pl

g in

t s e

r o p

kopke1638 it takes time to make Port wine, in fact Kopke has 4 cen-

“The video was shot in a one-very-long-day

turies of it reflected into their products, expertise and know-how,

session that ended with everybody going,

that had to be properly explained for the audience. So time was a

leaving us acting as hand models for the final

key element behind the website thinking: visitors would need a small

shots. Designers can’t really quit, can they?”

portion of it to understand and enjoy all the storytelling involved

fact that Kopke are the oldest port wine house frozen in time.

AGE VALIDATION [Fig. 1]

Cookies and alcohol have much in common online, for some

strange reason you need to authorise their usage on websites. We took this constraint a step further and made it part of the experience

The 1-minute video was divided into parts that would present the brand tone of voice along with the website sections. To make this interaction smooth we used countless elements such as titles, images, buttons and a timeline that compose UI using the GSAP animation framework timeline. [Fig. 2]

music and voice audio interactions: one main music, 4 voices and

by locking the website behind a nice 1638 gate (look for the top of it)

other 4 music clips for interrupting it. Pizzicato.js gave us the juice

and a drag option that opens it. We’ve sliced the video into frames

we needed and made the experience we were looking for.

and coded them in base64 inside a JSON file. This JSON is loaded and the frames manipulated through the GSAP draggable module.

MAPBOX [Fig. 3]

146

All these elements had to be perfectly in sync with the

The terroir section was one of the most important sections

THE STORYTELLING

for the client. But we were out of money for content (Red cameras

The first part of the website is all about providing the brand tone to

are amazing but they drain as much money as batteries). Mapbox

the visitor. Port wine needs time to be properly tasted, and so the

came to the rescue, as we could base the interactive experience

website should as well. As people don’t spend a lot of time reading

we needed allowing a custom customisation of the UI based on the

websites we used other tools: video with special attention to details,

geographic information we needed to transmit, blending it perfectly

music to transmit a Portuguese flavour (made by Andy an English

into the layout and experience. MapboxStudio helped us create the

musician living in France) into the blend and a nice voice giving the

layers/styles, and geographic data and Mapbox GL JS API gave us

key elements of the brand positioning.

the tools to blend it as a nice experience. 147

and all the multimedia elements integrated into it should reflect the

What the client send us to put on the website.

How we translate for the XXI digital century.

[3] [1] [4]

[5]

[1] Yep it’s a real gate alright. [2] Titles & Images showing up with GSAP animation framework timeline. [3] Mapbox: Print vs Interactive. [4] Is it a bird? A plane? Not, it’s 3D type flying on scroll!. [5] Scroll like there’s no tomorrow. [6] Store and Big bottle. Big.

149

148

[2]

HORIZONTAL SCROLL & 3D Kopke’s website demanded a clear segmentation between the brand positioning and store, so we made a horizontal scroll for the former and a natural vertical scroll for the latter. This gave us a clear language distinctions for the sections and a considerable extra headache for the development - right Daniel? After careful sorting of the necessary elements (type, video, images, timelines, logo, burger), animations and interactions connection to the scrolling process we

give an extra smooth continuous navigation between the products. Selecting bottles on the product navigator doesn’t cut the seamless experience we aimed for as the bottle floats across sections and gives a continuous flow across the two parts of the website. Each bottle (they have only around 50 products) needed a dedicated page for targeted products campaigns, so each one has a generous page with an infinite scroll that allows the user to keep exploring the products range.

made a custom virtual scroll with the help of VirtualScroll.js to keep the mouseWheel data and experience as consistent as possible across all browsers and operating systems (LOL). For the sections titles we made a subtle 3D animation related to the horizontal scroll.

[6]

The 3D elements we made on Blender, exported to Three.js and animated with GSAP. In our spare time, on a Sunday afternoon, we did a rollback static option for any WebGL problems or hiccups.

PORTFOLIO & STORE wine making: wood for barrels, leather for the high-end finishings,

TECHNOLOGIES

the cork was replaced over the last minute by the client, for a me-

Frontend Frameworks and Libraries: HTML5, CSS3, JavaScript,

morable last stop before the store revealing Kopke’s full product

Pizzicato.js, Three.js, GSAP, Mapbox GL JS

range. For the products store WooCommerce was integrated into

Backend Technologies: Wordpress, WooCommerce, PHP

Wordpress. With a necessarily simpler design, accessible to all users

Server Architecture: Nginx

age ranges, we’ve made a real effort to keep the user engaged and

Tools: Node, Gulp, Sass

151

150

We’ve used photography based on key craftmaships related to Port

The Dime Trap

Superhero Cheesecake is a boutique digital studio from Amsterdam (opening a US office in 2019) with a global reach and little overheads. Specialised in crafting best-in-class interactive experiences with a carefully selected and talented

unfilt

team.

a b look

t ks

age

Iâ&#x20AC;&#x2122;s e . vo T lut ion.

153

152

dimetrap.com

The Dime Trap all kicked off when T.I. approached us to create an

as the concern, how do we compress all of this visual information

interactive experience, marking the release of his new album (of

into a performant website? The solution was to leverage a form of

the same name), which takes listeners on a journey through his past

compression often used in graphics programming called deferred

experiences and adversities, which shaped the evolution of “Trap

shading. Meaning the whole artwork is pre-rendered in high quality

Muzik” from his early beginnings.

along with a variety of textures, or maps.

to art direct the project. Taking formative moments from T.I.’s life, renowned sculptor Kris Kuksi created a physical sculpture on which they could create the album art and frame the stories. We then translated this artwork into an incredibly detailed 3D space for users to explore T.I.’s evolution. As the album art was so strong we set out to build our interactive experience around that, giving the audience an opportunity to discover the beautiful artwork in more detail with the whole experience narrated by T.I. himself.

THE TRAP

[Fig. 1]

sequence of layers, each describing something specific about the forms and the environment (or lighting). This process involves transcoding various types of data from the 3D model, (positional and textural) into color and eventually back into 3D information within the application. The form of the sculpture was described via a depth map, flattening the 3D information onto a 2D texture, with the color relating to where the corresponding point exists in 3D space. Next, a normal map was created to store the surface information, describing the precise angle of the surface at every point. Finally, we described the texture by a specular map to determine the reflective quality of the materials. [Fig. 2]

A high-definition irradiance map was created to capture

“Stop looking at what you ain’t got and start

the environmental lighting conditions in the scene. For this we used

being thankful for what you do got.” — T.I

a panoramic HDR image. [Fig. 3]

154

This process involves parceling the entire scene into a

HDR photographs include layers of different exposures

Starting with such a beautifully detailed sculpture we realized the

within a single file which gave us increased control over the final

biggest technical challenge for the project would be how to preser-

exposure and gamma of the light. Taking an original HDR image as a

ve the breathtaking details and overall quality? The geometry of the

starting point we could then further simplify and process the image

artwork would be way too detailed to render using WebGL as well

to extract only the light information.

155

Grand Hustle Records chose the incredible Micky Coyne

These steps allowed us to overlay the high quality render with real-time rendered lighting and shadows, making the audience [1]

feel as if they’re dealing with a real 3D model. The downside here of course is that by using a pre-rendered image there is no way to have the camera move around the model, so that was something we had to work around while designing the interactions.

“There’s triumph, tragedy, lessons, loss, glamour and gunfire.” — T.I. Using custom scripts within our 3D modelling software we were able to discern and export all of these objects within the 3D scene helping to define areas of interaction. Taking each object in the sculpture, we could flatten the 3D space into flattened shapes. Once the scene was broken down in this simplified state we could

[2]

[3]

From here, clicks and touch areas were additionally defi-

[5]

[Fig. 4]

[4]

start building the experience, mapping stories to different areas.

ned via a texture we called an hitarea map. [Fig. 5]

Camera positions and zoom levels for these different areas

would be defined in an external file to give us control over the interactions. Overall we wanted the camera to feel natural and the experience intimate.

Technologies : WebGL

156

Frameworks : GSAP, soundjs

[1] [2] [3] [4] [5]

Depth, normal and specular trap-maps. Panoramic HDR image. Compressed and simplified HDR left, exported map right. Flattened shapes. Object picker.

157

TECHNOLOGIES

Red Collar Red Collar is where we create impressive digital things for bold brands; things that help get into the minds and hearts of people. New technologies, a creative approach and an aim to be always one step ahead â&#x20AC;&#x201D; these are the key values of work in our agency.

o b ile

zatio i m i t p

C se

ive

at A Cre

159

158

team.redcollar.digital

THE PROJECT

MOBILE SITE OF THE WEEK

This is an inside agency project that is full of our spirit and main

We have already entered the mobile era in every way: smartpho-

values of our work. We did our best to show the pleasure with which

nes cannot be put down, everything from messages to the hottest

we’re diving into digital and solving the tasks. We had loads of fun, showed our abilities, and honed our front-end skills along the way, which we later used in some tasks for our clients. The global aim of the project was to find new like-minded people for our team. Web-design and development-wise the task

news is received online. While surfing at a café table or under one’s blanket late at night — it should be easy and comfortable for anyone to get acquainted with our team at any given moment. For the maximum availability of our project we gave our special attention to its mobile version by thinking the user’s path through and by maintaining a splendid experience.

was to show that mobile sites might not only be simple and easy to use, but contain complex interactions, work fast and provide cool

The tasks that were set before us:

new experiences.

•

A non-standard and interesting navigation. We’ve created a single page with an unusual scroll: you solve a task to see what’s next.

THE IDEA •

the devil (and some maggots).

to our principles and approach to work: we do not talk away, we do stuff instead; we’re located in an industrial area and are limited by

•

160

It’s easy to use from any device. We’ve thought of content placement on every type of device.

the tasks for our clients, but we’re free in our own creative way and so we win loads of awards all over the world; we’re perfectionists in

Impressive experience. All the details were elaborated: there’s

•

Fast loading. Lots of professional “heavy” pictures: we’ve redu-

love with our work, and we grow employees inside the team, just like

ced the weight of the files and the site in general without loss of

in an incubator — to create excellent professionals.

quality.

161

We came up with the most crazy things in our style and linked them

NAVIGATION AND INTERACTIONS [Fig. 1]

We’ve come up with a story: for every one of the six pages

we’ve created a task that opens the way to the next screen. So we’ve transformed the process into a game, that’s how a user puts their hand and finger to the very creation of the site’s history. IMPRESSIVE EXPERIENCE: •

For the top-notch mobile experience we’ve made letters that get distorted by a touch as if they were under water.

•

The active area of the circle on the first page and the “Freedom”

sible to play with it and throw it to different points of the page,

[1]

page was made bigger than its real size so that it would be pos-

but still be able to hit the right spots to continue using the site. •

It’s possible to pull and throw the circle around the screen, it has physical characteristics so that its speed decreases but the circle doesn’t leave the screen.

•

We’ve written the microinteractions so that when user brings the circle close to the key area, it would be nicely drawn into the area to complete the action for user.

FLASH FACT ON ANIMATION You would need math to do creative front-end develop-

ment: starting with the primary school basics and going up to linear

[2]

[Fig. 2]

163

162

algebra and mathematical analysis. Libraries may help but you’d have

to carve out all the smallest details and to make interesting and catchy interactive elements yourself. For instance, for the circle on the first screen to draw on top of the ring in the right and smooth way during the interaction without finishing the action too soon we’ve divided everything into sectors and written down the conditions of the tracking: if you don’t go through the 1st sector you can’t get into the 2nd one and so on. The length of the arch was calculated through inverse tangent with respect to ‘x’ and ‘y’ coordinates.

CONTENT AND SPEED Everything on the site is built on Canvas without CSS and HTML —

FILE OPTIMIZATION All the content of the site is handmade, graphic and heavy. Every detail for every screen was created manually. We’ve made lettering with cola pen, shot our gag portraits in a studio, caught and washed maggots in our kitchen sink and had our pictures taken naked outside in the snow. We used only professional photo equipment and processed all the pictures in visual editors. To lighten them and boost the loading performance we:

•

the help of TexturePacker. This is how we boosted the loading

that’s why we paid a lot of attention to the layout of the elements

performance of the site by means of reduction of the number

themselves on a page depending on their resolution, and then, in

of requests to the server and decreasing the weight of the files.

JavaScript we’ve written the conditions that draw the elements on Canvas in particular places of the screen.

Took a picture in svg/png/jpeg format and created Sprite with

•

Ran the result through tools to make the weight even less. We’ve used programmes such as TinyPNG/SVG Cleaner/ImageOptim.

CONTENT AND PLACEMENT When creating the adaptive version we tried not to lose the richness

•

The last step was to minify css and js.

of the interactions and aesthetics of the site. For this purpose we’ve been continuously trying different variations of the content layout

On top of that animations and text are being rendered on PixiJS,

to find the most convenient one — so that the text won’t interfere

inside Canvas, which means there’s no requests to the DOM-tree,

with screen interactions, at the same time being easy to read and

and it makes everything work faster. For all the static assets and

leaving space to play with elements; to make the whole picture look

images — HTML, JS, CSS — we used CDN.

165

164

beautiful, convenient to tap and so that nothing is cropped.

DIFFERENCES BETWEEN DESKTOP AND MOBILE [Fig. 3]

As we already mentioned above, we didn’t use CSS and

HTML, everything works on Canvas, so the only difference is that in the desktop version the actions of the mouse are handled for the interactions, while for the mobile version it’s all touches. There’s no parallax on the mobile version, although there’s a great alternative to it — gyroscope, which we successfully used in many of our other projects.

CROSS BROWSER COMPATIBILITY At the beginning of our work on the project we decided to use PixiJS, which is a cross browser platform. There was no HTML or CSS, so there’s great compatibility across browsers.

FINAL TOUCH Speed and reliability are significant for a site’s performance. To test web-behaviour we use Google, TestMySite, PageSpeed Insights, Chrome’s Web Inspector, and Webpagetest.org. There we see how well the files are optimized: their weight, their merge in Sprite, the level of minification in CSS and JS and how well it worked to reduce the number of requests to the server, as well as the layout of the

167

166

content and accuracy of its work on different devices.

Louis Ansa Portfolio Louis Ansa is an art director, he studied his master degree in design at the amazing Gobelins school before working with Mediamonks, Watson DG and now makemepulse.When it comes to design, he likes playful things, moving stuff and creative layout. Animation is a big part of his creative process and he always tries to design things in a way where animation is really

going to bring something on the table.

li i l s fo r a g a t o reat portf de

169

168

louisansa.com

NEW PORTFOLIO I (Louis) remember working on my first portfolio back in 2014, just graduated from Gobelins school, I wanted to show the world how far I could go in term of animations. Now that I have a bit more experience, I feel like my projects are talking for themselves and that users should focus more on the content than on the cover. Of course, I enjoyed working on small details but with my new portfolio [1] I wanted to design something clear and simple.

MAIN CONCEPT [Fig. 1,2]

The main concept of the site is the number 3. Why? We

[1] Cursor shapes into different states.

used the repetition principle to animate elements of the site. The intro animation displays 3 rectangles back to back, the main project list features 3 times the same image and of course the type animation as some letters animating 3 times as well. As for design elements, I really enjoyed working small interface animations such as the arrow cursor or the loading cursor. Itâ&#x20AC;&#x2122;s probably what took me the least time to design but itâ&#x20AC;&#x2122;s what I like to do.

THE STRUGGLE Designing a portfolio is always a struggle when it comes to gathering and sorting out the project content. I spent hours and hours expor-

[2] Project Index

171

170

ting and modifying previous projects for the case studies. Baptiste &

I also spent some time tweaking and perfecting timings and easings

BODYMOVIN

for interface animation but it’s such a good feeling when you hit it

Since Louis does a lot of motion design on top of art direction, we

right.

wanted to include small animation details as custom cursors. He

FRONT END TECHNOLOGIES BACKBONE We're using Backbone.js coupled with Marionette.js as front-end framework. The website being a SPA, we basically just needed a router that can bring views in & out of the app with transitions. GSAP

ended up animating these in After Effects and exporting the animation data as .JSON files using lottie-web. Once you have all the animations exported, you really have to just follow the documentation. There's almost no code needed at all, so thanks Hernan for this awesome plugin!

TECHNOLOGIES FOR PERFORMANCE OPTIMIZATION

TweenMax and TimelineMax from GSAP are simply the best and they've been so since the early days of Flash. A good article that

BUILD PROCESS

my friend ayamflow wrote (4 years ago!) is still one of the best cheat

Using npm scripts with gulp we're compressing all JavaScript and

code list about GSAP.

CSS files into one single, minified file. Respectively, uglify-js and clean-css have been used.

CANVAS2D Some animations have been done using the Canvas2D API, like du-

FFMPEG

ring the preloader. We needed to do some masking, and canvas is

We used ffmpeg CLI to compress all video assets present on the

simply the best answer when it comes to that!

website. In my experience it always saved a couple of MBs and the quality still looks pretty much the same.

We've also used three.js for some 2D animations; on the homepage

NETWORK INFORMATION API

and the about page. Mostly to wrap some GLSL shaders and to avoid

Using the Network Information API—where it is supported, aka.

having to write plain WebGL for just a couple of small elements.

Chrome only—we're delivering different file sizes based on the user 173

172

THREE.JS

175

174

Animated with organic morphing.

connexion. If the NetworkInformation.effectiveType value is lower than 4g, then it will load a smaller image size: full-resolution image vs low-resolution. The lower file sizes are also delivered if the client is using a phone or tablet device.

BACKEND TECHNOLOGIES We wanted to focus on crafting the front-end of the site more than linking any back-end, and since the content of the site is pretty straightforward, we ended up using a simple .JSON file that gets loaded during the preloader of the site. So, there's no back-end at all!

CREDITS Designed by Louis Ansa Developed by Baptiste Briel

[4] Homepage list displays projects thumbnails 3 times. [4]

177

176

Louis Ansa Portfolio 2018: vimeo.com/290730953

BryBry Bryan James is an English Creative, Designer and in some areas Coder residing in Europe. I try to link creative ideas to development-based approaches, and attempt to make people feel something when they come to interactive projects.

cr ea tiv

de A vi

ntr e c o

e. as wc ho e s 179

178

brybry.co

4 YEARS!= 4 YEARS: PROJECT ORIGIN

A new folio was necessary, but I had a couple of other underlying problems I needed to solve, which are important in getting

My new online presence for my digital work – BryBry.co –

into the vibe of how I was approaching this project. I am in myself

came 4 years, 3 months after my previous one had gone online. It’s a

above anything else, a creative – as time goes by, I realise more and

strange statistic mentally. I look back at the projects I made 4 years

more that some kind of creative approach, idea or anchor is the

ago and a little beyond, and I still have a place in my heart for them.

theme I attempt to run consistently from project to project and this

I can see they are rough around the edges compared to my pre-

is integral before anything like design, development, flow or ani-

sent-day taste, but the heart is there which I feel has stood the test

mation have had even a sniff. The new site needed to express this

of time, and so they have a place among my favourite pieces. Yet,

concept-led approach.

[Fig. 1]

my old folio site from that same period felt dated, and had become a big problem.

[Fig. 2]

So I needed to somehow bring this to the fore in a way which

wouldn’t intrude the collection of work, but would also express that

Portfolio websites for agencies and designers alike, are

I’m a human being they can talk to, relate to and interact with to

the playground where design is allowed to be whatever it can be,

come up with something special if we worked together. Something

unrestrained from client chains, boring budgets or technical twists.

seamless, something whispered – but something which could allow

The consequence of this? Folio sites age very quickly because they

another human being to come away feeling as though they know

are immersed within a space which is ever-evolving – they show the

‘me’. This was the bedrock of my personal brief.

wrinkles, and begin to tell a story of an entity stuck in the past within a cutthroat space where this is not entertained. Just like so many (Come on, I know you’re guilty too), I’d

Something seamless, something whispered – but something which could allow another

fallen into that horrible loop of releasing projects and placing them

human being to come away feeling as though

on my folio site under the guise of ‘case coming soon’, linking to the

they know ‘me’. This was the bedrock of my

live project and then tooootally never uploading such a thing. In fact,

personal brief.

I had left some of those notices up for so long, that the sites weren’t

181

180

even live anymore.

VIDEO BUILT THE RADIO STAR: THE CONCEPT The base creative for the site centers around utilizing video as the only medium to showcase my selection of works, in an ever-present central element. Aside from it being a more engaging medium than

[1]

using flat imagery (which by this point is simply no longer connected to what I feel is the most important part of my work), I realised it could be a sensible way of future-proofing my previous projects. Many of the sites I’d worked on were either being taken offline via being part of temporary advertising campaigns or were being heavily affected by browser updates, so snapshotting the projects as video screencasts seemed a sensible way to go too. [2]

[Fig. 3]

A specially timed and mixed version of my showreel acts

as the way of navigation rather than being the traditional ‘skip intro’ reel which is prevalent among many sites where they are utilized as a foreword. Users are instructed to click and hold at any time during the course of the showreel, to open the particular project being shown at the time. I felt this could be an interesting way of fusing the

[2]

clip-centric reel which quickly communicates my abilities in a short burst, with the human-expectancy of experiencing something you like, and thus wanting more of that thing. This is all backed up with

182

[2] A couple of the original visuals I put together in the process – the latter of which is an extra secondary project presentation part of the site which I later discarded to keep things purer to the concept.

a circular timeline which gives the overall composition some visual interest, as well as a secondary door to the content.

183

[1] The previous website had become dated and removed from modern trends in 2018

Then as a final icing on the cake to round off the video-cen-

the brief of communicating the person a visitor might choose to

tric creative route, the playthrough of each case study is fully

work with. I’m lucky enough to have an Awwwards video interview

narrated by myself to give an insight into the thinking that went into

and so with this being a video-centric website, how better to com-

the project, in a digestible and personable manner which in terms of

municate yourself than in how you talk, move, and otherwise look

the brief, adds the touch I desired to connect with the human being

awkward in the eye of the camera? This is layered with small touch

at the end of the interaction. For this layer, I teamed up with my very

points delivered to the user by the time of the video. This allows

trusted friend Bart Claessens, who recorded and mixed my words

small, absorbable content to be read in the way a human normally

into a consistent, production-ready form.

would with rhythm and timing.

THERE’S SOMETHING ABOUT BRYBRY: A REBRANDING PROJECT

ART DIRECTION

[Fig. 4]

As a small branding aside, the move to changing things up to be fronted by ‘BryBry’ came along because I hated the URL bryanjamesdesign.co.uk; James was probably a candidate for when

I’m a firm believer that if you have an idea which you truly believe in, then the need for art direction and design to have their own poignant features diminishes greatly. I believed in the base ideas within my site and so dropped way back on visual quirks while allowing subtle touches to try to finish off for a complete and pleasant experience.

Morrissey was naming The Smiths and it made me sound like a $5 logo artworker (no dis, fam) and BryBry is something multiple dis-

I’m a firm believer that if you have an idea

connected friends have called me over the years without me having

which you truly believe in, then the need for

mentioned that term beforehand – so I felt okay, let’s make this real

art direction and design to have their own

personal.

poignant features diminishes greatly.

This desire for personability attempts to be re-inforced in the site, with an About section which tries to go beyond a few para-

184

pro wrestler(lie), or be other such things and instead again answers

[Fig. 5]

I kept with yellow as my branding colour for many years

now, and it always allows for pinging in just the right spots I feel.

185

graphs of text about how I totally don’t paint, be a dad, be a DJ, be a

There was still space for exploration in one small area of the site – the loading screen between two videos loading. For this, I explored a style I have loved ever since seeing it utilized on my own personal favourite website of all time, Maki-san. This repeating pattern background mixed with fluid movement gives a sense of verve and swag,

[3]

and works well to indicate loading.

HEY YOU(TUBE): USING AN API TO POWER VIDEO With the heavy use of video in the site, and a repertoire of development skills which can never match those of an agency, the best approach was always to anchor off of an existing API, and I swung with YouTube for this site. I’d worked with it before, knew that it was

[4]

pretty rock solid and good with load times, so it made a lot of sense. The very intro to the site supplied a small development challenge. YouTube will attempt to load a video in as quickly as it can, which is great for usability – the drawback is that if you want something to be the very beginning of your visual-centric piece of work, then the first intro people have to your work can be blurry, pixelated and shoddy. So what really happens when you load the site

[5]

in, is that we do wait for the YouTubeAPI-connected full showreel to be ready to play. The showreel then actually plays invisibly for

186

triggering the site to show the interface to click and hold. An HTML

[3] Circular timeline. [4] Loading screen of one project, using a repeating pattern relevant to the piece. [5] Loading screen of one project, using a repeating pattern relevant to the piece.

187

just over a second, before then pausing at a very specific moment,

5 video element is also in place while all of this is happening – which

to constantly ask for a time). This per cent is easily translated into

contains the small startup of drum hits which crash the site into

DrawSVG code of a circle, with:

action – but because it’s an HTML 5 video element, the quality is crisp and playback is exactly as in the original. When visitors then click and hold to enter the site, this video plays out before removing

TweenMax.to(timelineTimePath,0.2,{drawSVG:timePercentDraw, ease:Linear.easeNone});

itself to reveal the YouTube version of the reel. Most of the experience achieved via YouTube hooked in is

This code results in a smoothly running timeline following

fairly straightforward, and something like the cool and very functio-

the % the video has ran through. Small touches such as the co-

nal slow-down upon click and hold is fully integrated and utilizable

lour-changing background within the reel also try to get the most

within the API. Slowing down the video wasn’t just a cool touch added

from having this constant-running video time – in this instance, sim-

to the experience; it made the chance of a user crossing over into

ply asking at what point in the video the user is in, and changing a

the next project as they click and hold a lot less, slowing everything

data-attribute to the background colour element to fit.

down and limiting the time the video advances before they either release or a project is engaged. Setting the following line will slow down a video to half of it’s speed:

player.setPlaybackRate(0.5);

The other technically challenging part of the site is the creation of a circular timeline hooked into the YouTube API, but it’s a lot more simple than it might seem. Without getting into too much detailed code, the time of a video is simply a % of a total time, so

189

188

you have a % always present (with requestanimationframe running

Digitaldesigner.cool From A to Z.

Jean-Baptiste Giffard is a French digital designer based in Paris and designing multi-device digital experiences since 2001.

g the al p

sin

st sy

as a

em.

bet

navigat

191

190

digitaldesigner.cool

come for me to look towards new horizons. The time arrived to

final release… until I tested on firefox and safari :( :( :(

design a fresh new portfolio and to put my nose inside the latest

The frame rate was so dramatically low on firefox and the

coding techniques, trying to publish something cool before jumping

aliasing of safari was such a disaster that all my hopes to use those

into the job jungle again.vimeo.com/298571634

effects were gone at this moment.

Like a lot of people, my initial problem was to find the best way to describe myself. I was working in the digital industry for more than 15 years and I have been able to develop many digital skills which define myself today. After some hesitation, I finally decided to use only two words to sum it up: digital designer and to find a great unconventional domain extension to get a nice meaningful website name at the end. The number of available domain extensions is absolutely amazing now but some of them are so incredibly expensive. The .cool extension corresponded exactly to my budget. (FYI : www.digital.design is still available for only $2,599)

EVERYTHING STARTS WITH AN EPIC FAIL My first direction was in fact to build something around liquid animations, based on gooey effect and svg filters. I developed a first

192

I was very happy with the result and confident about the

Failure is only the opportunity to begin again, only this time more wisely. Henry Ford

DIGGING INTO THE PAST I had to start all over again at the bottom… then I remembered a past abandoned portfolio concept I had done a couple years ago. The idea was to introduce myself from A to Z using the alphabet as a main navigation system and presenting a content for all the 26 letters. A concept that I had never taken the time to develop (like many others

Original 2016 screenshots: vimeo.com/300472948 The good point of the alphabet was that everybody already knows the beginning and the end of the story. You don’t have to explain it too much and a strong concept is of course a good strategic way to stand out.

demo as far as I could, spending many days designing all the pages

The bad point of the concept was that I had to find 26

and building a functional coming soon page. vimeo.com/298563445

meaningful contents to present myself. Staying aware that people

digitaldesginer.cool 1.0 visible now on : jb-giffard.com

wouldn’t end up watching more than 4 or 5 at the end.

193

After 8 years working for a digital marketing agency, the time has

It finally sounded good to me that users would get a first overview of all the contents and choose the ones they wanted to see a second time.

A TO THE Z I decided to mix everything : projects, skills, career items, personal information and to add some classic menu sections to group all this stuff together. When I started to distribute all my contents on the 26 letters

[1]

and I was really happy to see that all the names of the companies I used to work for, started with different letters and that it was the same for the main projects. By completing with some additional

Skills content: vimeo.com/300469501

pointless contents, it was finally not so hard to fill the full alphabet.

CREATIVE CONTENT [Fig. 1]

For the projects and career sections, I had already a lot

of visual material to use but I still had to create everything for the skills and about pages. So I tried to symbolize each skill and each content of the about page with some unexpected pictures and svg animations. [Fig. 2]

Working on your own portfolio could be a never-ending

unsatisfying activity, but itâ&#x20AC;&#x2122;s the best opportunity to work without

About page: vimeo.com/300471327

195

194

inspired by them.

[2]

limits and also a good place to try some new techniques and get

SCROLLING, SCROLLING AND SCROLLING AGAIN... The main part of the project focused on the alphabet navigation system. It has to show all the 26 contents as a list but also be used as a normal slider to switch between the contents preview. [Fig. 3]

Working with scrolling interactions was much more compli-

cated than expected and much more tricky than mouse interactions. It took a lot of time to calibrate all the transitions and the sensibility of the scroll, fighting with all the existing devices: magic-mouse, classic mouse, trackpad, touchscreen and all the browsers scrolling native parameters.

a real nightmare to deal with… I was much more satisfied with the

[3]

In particular, the inertial scroll of the magic mouse was

mobile gesture navigation scroll which uses push, swipe and even a rollover interaction.

DESIGN PRINCIPLES I tried to base all my UI/UX design on 3 main principles : Simplicity, Fluidity, Dynamism. •

Simplicity : to provide intuitive navigation by using a minimalist black and white UI design, system fonts and common graphic elements. The purpose was to minimize the style of the page in order to increase the contrast with the contents. Fluidity : to get a modern user experience by using breakingless

197

196

•

transitions between all the pages. It also helps to visually understand the sitemap of the website. •

FRONTEND FRAMEWORKS AND LIBRARIES:

Dynamism : to balance with the simplicity of the UI design by

Jquery as usual.

animating every element of the website (3D effect, parallax,

Swiper API & Touchswipe plugin for sliders and mobile gestures

appearance effects...)

GSAP : for the all the animations, custom easing and SVG morphing

AND FINALLY… EVERYTHING FINISHED WITH ANOTHER FAIL! A few days before the project was published, I found a bug which

I didn’t use any frameworks for appearance and parallax animations. I preferred to build my own library instead, using same techniques but with some specific modifications.

wasn’t there before. On the Z letter section, I used a script which initially closed the browser after clicking on SEE YOU LATER. It should have been a good ending joke... something like a Mic Dropping effect. But in fact the last Chrome update just killed this feature... I already knew that I didn’t have any content for this part and that I had to find another way to finish the story as I planned… I finally used a basic link to an incredible page called imaninja.com which could look like a full black page, but which isn’t. I was also able to create my own black page but I had to send the user somewhere else after clicking for it to make sense. I don’t know anything about its author but for me it’s the most beautiful minimalist and useless page of the internet. That finally gave me the opportunity to close the website almost as expected and to drive the concept to the end. Exactly like in this case

199

198

study, because both start with an A and finish with a Z.

Moment Zero Locomotive stands apart from other agencies and offers a wide array of creative and strategic services for brands, companies, foundations and other remarkable organisations. We assist and educate our clients in making the best use of the solutions we build with them.

v o c

t ar

hi 's

y r o

s ei

a at

201

200

moment-zero.com

Locomotive releases its first internal Pilot® R&D

structured information on best UX/UI practices for VR, especially

project; MOMENT ZERO, an immersive experience

for designers. Since it was our first time playing with virtual reality

inside worldwide seismic activity using USGS open data, VR technology and WebGL.

and open-data, we had to figure out a lot of stuff on our own: Try, fail, learn from it, try again. From these few things that failed, here’s a few things we did

CORE FEATURES AND TECHNOLOGIES [Fig. 1]

MOMENT ZERO can be experienced on multiple platforms.

Experimenting with VR technology, open data visualization in 360 degrees and WebGL, the user can choose a year and experience earthquakes all along the 365 days in an accelerated timelapse. The

to enhance the UX/UI of our VR experience: •

visual cues and icons •

We created sound design for ambience, buttons and micro-interactions

•

We added a mandatory tutorial to the user flow to explain the sequence of events

data was extracted from the USGS’s web-based earthquake catalog by using their API. Therefore, a streamlined data structure could be

We tried to minimise the use of textual CTAs to focus on more

[Fig. 2]

We also dug into a lot of examples of data visualization and

built specially for MOMENT ZERO. A simple, framework-only imple-

animations to help us find how we wanted the data to look. What

mentation of Charcoal locomotive.ca/en/charcoal runs behind

came out from this research was a feel of outer space: A lot of mole-

the scenes in order to feed the custom dataset to the front-end.

cular animations, implosions, explosions, raw power, shapes, colors,

Source of MOMENT ZERO seismic data: U.S. Geological Survey. Visit the USGS at usgs.gov.

sounds and movement. In terms of navigation, we wanted to create a fluid storyline around some kind of dashboard view, focusing most of the action

It takes time to get acquainted with a VR environment.

202

When we started this project in early 2017, it was still hard to find

in the center of the screen. While exploring different open data options for this project, we used specific available metrics for this experiment: a time and place, a force (magnitude) and a geoposition (latitude and longitude).

203

ART DIRECTION: DESIGNING FOR VR

SOME CHALLENGES WE MET •

Bridging together the very raw open data and a highly immersive concept known as virtual reality in 360 degrees. We had to find interesting and relevant ways to display the data in an environment that was new to us.

•

Managing different rendering techniques to make the experience as seamless as possible on all types of devices, whether using a cardboard head-gear or a desktop computer.

•

Representing a map-o-sphere using particles and a colorset for continents was also a challenge. We needed to have enough

[1]

particles to create a nice rendering, but also had to take into account performance in order to avoid lag and hindering of the overall experience and navigation. •

The USGS’s earthquake dataset for all available years (from 1970 onwards) is huge and provided much more data than we needed. Since the design and UI requirements were bound to change along the development of the project, we developed a versatile shell script to extract the needed data from the USGS API. It

[1]

combed the API month-by-month, from 1970 to 2017, calculating values that were originally unavailable (average earthquake

205

204

magnitude for a month).

CREATING THE MAP-O-SPHERE [Fig. 3]

We needed a landscape to lay down our story. We used an

image of a map with continents of different colors and put it in an

this project had to be based on technologies we could easily engage with. That’s why we went with wholly web-based solutions. We went out of our comfort zone, and we learned a great deal.

off-screen canvas. This canvas allowed us to recover the colors of each pixel from the image, and send it to our shader which was then applied to a THREE.Points. Our shader also manages a noise which allows a wave effect on the map-o-sphere. This wave varies according to the average of the magnitudes of the visible seisms. You can start here with a simplified code for the map-o-sphere: gist.github.com/quentinhocde

PILOT®: PAVE THE WAY very challenging project that could be (who knows!) a

world premiere for visualizing USGS’s seismic activity data in such

[3]

[Fig. 4]A

way. About 18 months ago, Locomotive chose to put their talent at the centre of company culture and created Pilot®. An approach aimed at empowering all team members to express their creativity and curiosity through internal R&D projects that they can manage on their own, just like MOMENT ZERO; the first initiative in this direction.

Navigating through the 360 VR technology (for virtual reality in 360

[4]

SOME NEW THINGS WE LEARNED degrees) means developing web-based 3D skills in order to deliver a

207

206

fully immersive experience. One thing was clear from the beginning:

[21] Transhumanism TechnoCalyps Part I TransHuman TechnoCalyps Part III The Digital Messiah

AI AT PRESENT [1] Google IO - AI assistant voice call [2] Pixel phones to begin making Google Duplex AI voice calls in November [3] The lifelike AI will identify itself when talking to people

We need a button that makes us ‘invisible’ to creepy AI

[1] Humans of Late Capitalism

[4] 15 Star Trek Gadgets That Exist In Real Life

[2] Makeup Tutorial!

[5] Star Trek TNG - Data talking to himself

[3] Opening Kinder Eggs

[6] HYPER-REALITY

[4] Birds with Arms

[7] Merger

[5] 3D Virtual Influencers

[8] Chinese Social Credit System

[6] Feel Good with Bread Face [7] Slime.net Instagram Account [8] I’m not a robot [9] How Holograms Work [10] What really is the difference between AR / MR / VR / XR ? [11] Sketchfab [12] Tilt Brush [13] Google Blocks [14] Poly [15] SPEQS App [16] Believe it or not this shoe is AR! [17] Fjord Trends 2019 [18] MIT Technology Review

208

Human or bot? Google Duplex scares me

[9] Black Mirror: Nosedive [10] Archillect [11] Murat Pak: Designing the Mind of an Online Curator [12] Deep Learning Explorations: Human or AI? [13] Learning to Dress [14] Zone Out [15] AI-generated films [16] AI-Assisted Fake Porn Is Here and We’re All Fucked [17] Face2Face: Real-time Face Capture [18] Deepfakes [19] TensorFlow.js [20] Teachable Machine [21] Teachable Machine Boilerplate [22] Emoji Scavenger Hunt

This Technology Is About to Change the World

[23] How we built the Emoji Scavenger Hunt

The rise of mobility as a service

[24] The teachable keyboard

Here’s your definitive guide to the future of mobility

[25] Alt Text with Azure's Computer Vision API

[19] Whimapp

[26] Move Mirror: Find GIFs based on your movements

[20] Lulu and Nana controversy

[27] Tensorflow, MobileNet and I’m fine

209

HUMANS OF LATE CAPITALISM

[28] A.I. Experiments

[5] Amazon Flow Uses Instant Image Recognition To Search Store

[29] aijs.rocks

[6] Introducing Visual Search

[30] P5J + OPENCV

[7] Wonderland Studio

[31] Tracking.js

[8] Femme & Fierce

FACE-API.JS: Face recognition in the browser

If you leave me now: the microcopy of saying goodbye

Deploying Machine Learning Models in the Browser

Stop Shaming Your Users for Micro Conversions

[32] The end of privacy

Content Recommendations and the Creation of Emotions

[33] China is now home to the most valuable AI startup in the world a

[9] Whim - Travel smarter App

[34] Artificial Intelligence Driven-Design

[10] Progressive Web Apps Download

[35] Google AI claims 99% accuracy in metastatic breast cancer detection

[11] Confirmshaming Page 3 [12] Confirmshaming Page 9

VOICE INTERFACES & VIRTUAL ASSISTANTS [1] IFA 2018: Alexa Devices Continue Expansion [2] Voice Shopping Consumer Adoption Report 2018 [3] Virtual Customer Assistants by 2020 [4] The Gartner Customer Experience Summit 2018 [5] IFTTT [6] Starbucks, Ford and Amazon allow in-car orders via Alexa [7] Starbucks Alexa Skill [8] Say Goodbye to Alexa and Hello to Gadgets [9] Clippy, Office Assistant [10] Furby Furby Connect Bluetooth Protocol Hack [11] MITSUKU Voicebot Smart Speaker Consumer Adoption What is the future of the web interface?

Confirmshaming

WEB DESIGN TRENDS [1] Every website in 2018 [2] The Work of Art in the Age of Mechanical Reproduction [3] Creating Slack's illustration voice [4] Gucci Hallucination [5] Glitch [6] Lottie [7] Adobe After Effects [8] Bodymovin [9] Femme & Fierce [10] Shadertoy [11] Norman Nielsen Group [12] Bersi Serlini - Festival 2018 [13] KIKK 2018 [14] Ideal Mobile Touchscreen Target Sizes [15] Badass.shoes-up.com [16] The Best of Navigation [17] Progressive Web Apps. The Future of Mobile Web

[1] ARtillry Briefs, Episode 19: The Camera is the New Search Box

Structural Typography

[2] Pinterest Lens

Variable Fonts

[3] AliExpress' Coach Marks For Mobile Feature

Variable fonts guide Languages Edit Advanced

[4] Google Lens: real-time answers to questions about the world

Introduction to variable fonts on the web

211

210

THE NEXT UX

CASE STUDIES

[1] Frans Hals by Build in Amsterdam Brand identity

[2] If This Then Domino’s by Legwork [3] Ueno 3D Interview by Ueno. [4] Foosball World Cup 2018 by AQuest [5] Kopke since 1638 by Bürocratik Website video [6] The Dime Trap by Superhero Cheesecake.com [7] Team Red Collar by Red Collar [8] Louis Ansa by Louis Ansa [9] BryBry by Bryan James [10] Digitaldesigner.cool by Jean Baptiste Giffard

213

212

[11] Moment Zero by Locomotive

Published and distributed by awwwards. January 2019 ISBN: 978-84-942007-5-5