Mois : février 2020

Illustration technique PWA

Pour simplifier à l’extrême, faire une PWA, ou “Progressive Web Application” est une manière de “transformer” une application web en application native sur un mobile ou une tablette.

On peut la lancer sans la barre d’adresse du navigateur, directement depuis une icône d’une des pages principales de notre smartphone préféré, sans avoir à taper la même adresse à chaque fois.
Cela permet aussi de disposer d’un mode offline s’il est développé pour l’application, et de bien d’autres choses encore.

Comment expliquer cela simplement aux utilisateurs de KIKLOS, le projet sur lequel je travaille bientôt depuis un an pour le Comité Européen des régions ?

Et bien on a simplifié en quelques étapes, pour iOS et Android, et on l’a illustré pour donner du mouvement à l’ensemble.
Voilà une composition fraîche et dynamique, toute en vecteurs :

L’illustration montrant une des valeurs ajoutées du point de vue utilisateur: “J’ai une icone pour démarrer l’application rapidement”.

Et ce flyer A5 qu’elle vient animer :

Le flyer est même lisible à 75% de sa taille normale, comme il est présenté ici. Il a été tiré à 500 exemplaires.

Durant l’événement du client, il a été bien accueilli sur le stand du village d’accueil où nous étions pendant deux jours. Des dizaines de personnes se sont servies et ont pu installer l’application en suivant ces simples étapes.

Illustration pour une bannière d’Intranet

Le site Intranet MYCOR (pour My Committee Of the Regions) recevait sa dernière mise à jour, et pour le lancement, le responsable métier du projet m’a demandé de réaliser rapidement une illustration fraîche et propre pour mettre en image l’évènement.
Pour faire simple : j’avais un jour.

Dans ce genre de situation, révolutionner l’art de la conception graphique est toujours possible, mais on fera bien de miser sur du classique, et c’est ce que j’ai fait. 🙂

J’ai donc récupéré la dernière version validée de la homepage réalisée sous Illustrator.
Puis j’en ai fait une projection isométrique avec un script d’action personalisé.

Ensuite, en décalant certains éléments du design vers le haut en prenant quelques points de repères, on créait plusieurs niveaux de profondeur, un peu comme le Matérial Design, qui définit des valeurs virtuelles pour créer une profondeur et y attache un rendu particulier basé sur les ombres.

On a ensuite fait quelques variations pour valider la direction créative …

Et c’est finalement cette dernière qui a été choisie.