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.

Illustration 3D – “Nouvelles Perspectives”

Je voulais rédiger un premier post sur Linked In, pour tenir un peu mon réseau au courant de mes dernières aventures, et vu que j’avais un peu de temps devant moi pour exprimer mes envies de communication au travers de la 3D et de Blender, je me suis mis sur un petit projet rapide de rendu d’illustration.

La base a été un dessin automatique fait en attendant d’avoir un.e conseill.er.ère pendant un appel à pôle-emploi.

scan d'un dessin au bic noir
scan du dessin automatique original réalisé au bic noir.

Dès l’appel fini, j’ai réalisé en regardant la feuille de papier que j’avais quelque chose sous les yeux qui avait un certain potentiel, du genre dont il fallait faire quelque chose.

Continuer la lecture de « Illustration 3D – “Nouvelles Perspectives” »

Animation pour la transition vers le nouveau logo de l’entreprise Atys Concept

Tous les éléments graphiques ont été réalisés dans Illustrator et animés dans After Effects sans aucun plugin, montage final et export réalisés dans Première.

Continuer la lecture de « Animation pour la transition vers le nouveau logo de l’entreprise Atys Concept »

Plaquette pour un site web de services

Pour communiquer sur le logiciel et les services qui l’accompagnent, j’ai réalisé une plaquette A4, à partir d’un brief et d’une pré-maquette powerpoint fournie en amont.

Pour dynamiser la composition sur deux pages, j’ai proposé d’utiliser une vue schématique en 3D et une vue en perspective isométrique sur la deuxième page.

Continuer la lecture de « Plaquette pour un site web de services »

Migration et redesign d’un site existant

La société EsHa (pour Energie Service, Habitat Atypique) avait besoin de mieux communiquer sur ses activités via son site, toujours de qualité mais pas forcément lisible pour ses clients et ses futurs clients.

Il a été décidé de scinder l’ensemble : www.es-ha.fr en deux sites www.guichethabitat.fr et www.guichetgdv.fr, tout en assurant un renouvellement de l’identité visuelle de la société.

Les deux sites devaient afficher la même identité de la société, tout en communiquant sur les axes qui leur sont propres, au moyen de visuels spécifiques et d’une composition de page adaptée, par exemple.

Techniquement, l’extension de l’identité visuelle existante et sa mise à jour on été conçues en réunions sur plusieurs itérations, puis réalisées par étapes successives dans Illustrator et intégrées en code en 8 jours au total.

Schneider Electric – Ensemble de la mission

effetgraphique-site-vignettes-articles_schneider-intro-mission

Un objectif

Depuis fin 2010, la branche Energy & Automation de Schneider Electric  m’avait demandé de collaborer avec les différentes équipes projet de sa R& D pour assurer l’intégration de leur design de marque, et veiller à l’utilisabilité et la conception de l’expérience utilisateur de leurs nouveaux logiciels en développement sur le site de Lattes.

Le but de cette série d’articles est de présenter le détail de cette collaboration, la démarche et les flux de travail utilisés, les éléments réalisés et les domaines sur lesquels a porté l’intervention.

Ce sera une occasion pour le lecteur de découvrir en quoi consiste mon travail, et dans quelle mesure mes compétences peuvent l’intéresser pour son ou ses propres projets.
Continuer la lecture de « Schneider Electric – Ensemble de la mission »