Page 1

FREE

100 CREATIVE CODE AN API-DRIVEN APP WITH THE IONIC FRAMEWORK RESOURCES

LEARN HOW TO BUILD WITH THE JAMSTACK

Expert tutorials, techniques and inspiration

FON TM ETR ICS

PI A T OU Y LA

API

API T N I A P

TYPED OM

P & V ROPER ALU TIE ES A S PI

TS E L RK WO

MAKE DESIGN MAGIC WITH THE APIs SHAPING CSS TODAY CREATE AN INTERACTIVE WEBGL HEADER

SIMPLIFY ACCESS TO LOCAL FILES WITH THE FS API

INSIDE WEBXR: AR, VR & MR COME TOGETHER

MAKE A DYNAMIC CUSTOM CURSOR

ISSUE 293


Header

Inspiration

Sites of the month

02.

01. 01.

03.

01. Solar Digital

04.

https://solar-digital.com A red overlay and sweet animated waves transition the user from one image to the next, and the next...

02. QI Catalog https://qodeinteractive.com/catalog A stylised bottom text navigation system reveals an image for each item as the user passes over the text.

03. ViiSUALiiZER https://boniver.withspotify.com Bon Iver and Spotify turn data into an interactive dot pixel animation that mesmerises and engages in equal amounts. It’s even better if you like them!

04. #24HourAce http://24hourace.gucci.com Gucci come up with another nod to webs past with garish colours and a selection of excess design elements.

Graphics

Colour picker

Typesetter

WordPress

https://bit.ly/2lyi6y9

https://bit.ly/2mIUjf6

https://bit.ly/2ndn0Rn

https://bit.ly/2mDvt04

Created by Chilean designer Salvador

A modern and clean Gutenberg WordPress

RodrĂ­guez, Campora is an eclectic typeface

blog theme featuring six smartly designed

with a retro flavour of the Eighties, featuring

home page options.

Logos and badges 2019

No Sensibility

T-shirt illustrations, labels and patches from the talented hand of Alexander Shimanov.

C4DFB7

Campora

Gutentim

19 styles. 6FC5CC

A8D4B7

90CCB5

7ABEB8

inspiration_______________________________________________9


Denim – A Data Deep Dive

16_________________________________________________ lightbox


LightBox Designer:

www.lyst.com/denim-report

Drench www.drench-design.com

Fashion hub Lyst presents a rich digital report detailing the data captured around denim buying habits and worldwide search trends.

Colours

#D5D3EA

#3A5CDD

#CCBB4C

#E24047

Tools jQuery, CSS3, Soundcloud

Fonts

Brown font by Aurèle Sack appears in its Regular and Bold forms for supplementary text paragraphs.

Adieu font from Good Type Foundry is used in the Black style for lead paragraphs and titles.

lightbox__________________________________________________17


Celebrating an illustrious seventh birthday, could Italian agency illo prepares for its big Turin bash by building a Tarot reader capable of predicting the future?

Project url Agency Agency URL Follow

illo.tv/tarotobot illo illo.tv @illotv

O

ne of the toughest and most coveted skills within any design discipline is the ability to predict the future. Not for forecasting the lottery numbers, although that would be a helpful trick, but in order to predict and influence the hottest style trends. This is useful for communicating effectively to audiences, capturing attention and appealing to those “fashionable” sensibilities that maybe instill trust in a message. Like much of the tech trade, web design as an industry is fixated on foretelling the next big thing, and that’s the premise behind Tarot-o-bot. An in-house project produced by Italian agency illo, the purpose was to celebrate their seven-year birthday and promote a big party being held in Turin. The theme was to be “Prediction”, and with seven years regarded as quite a mystical number, it seemed appropriate to not only reflect illo’s past but also into an exciting future. Boasting an international team of 12 staff and specialising in areas of motion design, illustration and set design, their portfolio includes clients such as Bloomberg, Airbnb, Ferrero and Snapchat. Having come a long way since being founded by creative partners Ilenia Notarangelo and Luca Gonnelli in 2012, it seemed like an ideal moment to speculate on what’s to come for motion design and communication. “That’s how Tarot-o-bot came into being, creating an online experience that can predict the digital future,” the team begins. “At the touch of a button, users can trigger the draw of three differently illustrated special tarots. Tarot-o-bot reads the data beyond the three Sacred Cards and generates a special and ironic prediction over design,

30d������������������������������������� design diary


PROJECT STATS PROJECT DURATION

TEAM Ilenia Notarangelo

10 weeks

Partner & Creative Director

NO. OF PEOPLE INVOLVED

Partner & Business Director

4

Luca Gonnelli

Giovanna Crise Brand Developer

Nima Farzaneh

Data Scientist & Web Developer

design diary_______________________________________ 31


Th e Vi sua l Ag e n cy

Information as Art

At The Visual Agency information becomes a beautiful, compelling visual feast. Applying technical prowess with a design sensibility born out of the age of data, this agency shapes our perception with striking images that communicate their messages with innovative style and clarity

38p���������������������������������������������������profile


Th e Vi sual Ag e n c y

Who The Visual Agency What Infographics, Interactive, Data Visualization, Static, and Motion Graphics Where V  ia Panizza 7, Milano, 20144, Italy Web h  ttps://thevisualagency. com Key clients B  rembo, Eni, Corriere della Sera, Barilla, Luxottica

profile___________________________________________________39


Tutorials

Create an interactive WebGL header Use curtains.js and WebGL filters to create an interactive displacement image that transitions from black and white to colour as the user moves over it.

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner 56t�������������������������������������������������tutorial


84f�������������������������������������������������feature


WEBXR UNIFYING REALITY TECHNOLOGIES WEBXR IS THE LATEST EVOLUTION IN THE EXPLORATION OF VIRTUAL AND AUGMENTED REALITIES. IN THIS ARTICLE, YOU’LL LEARN WHAT WEBXR IS AND INVALUABLE RESOURCES TO GET STARTED USING IT.

As the pace of technology races along, it has become critical to unify approaches and standards, before fragmentation inhibits further growth. WebXR taps the power of the web along with the unification of these realities, under one philosophical umbrella.

Richard Mattka Creative Director | Designer | Developer

9000

twitter.com/synergyseeker

feature__________________________________________________85

Profile for Future PLC

Web Designer 293 (Sampler)  

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

Web Designer 293 (Sampler)  

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