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 T N I A P
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
Sites of the month
01. Solar Digital
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.
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
T-shirt illustrations, labels and patches from the talented hand of Alexander Shimanov.
19 styles. 6FC5CC
Denim â€“ A Data Deep Dive
Fashion hub Lyst presents a rich digital report detailing the data captured around denim buying habits and worldwide search trends.
Tools jQuery, CSS3, Soundcloud
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.
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
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
Partner & Creative Director
NO. OF PEOPLE INVOLVED
Partner & Business Director
Giovanna Crise Brand Developer
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
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
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
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
You can subscribe to this magazine @ www.myfavouritemagazines.co.uk