Design web & mobile

TFA – MY SMILEY – Vincent Nguyen

My Smiley:

My smiley est une application mobile qui permet de créer nos propres emoji. L’idée m’est venue en écrivant quelques messages sur Facebook à des amis. J’ai pensé qu’il serait amusant de pouvoir créer ses propres emojis ou ses propres gifs animés et stickers.

Je voulais, bien-sûr, que mon projet soit innovant, même si je ne suis pas le seul à avoir pensé à cette idée. Il est toujours possible d’être original !

Illustration d'un perso dessinant des visages

My smiley permet à chaque utilisateur de créer son propre avatar, à partir d’éléments de base: cheveux, yeux, nez, bouches, vêtements et formes de visage. Une fois l’avatar terminé, l’application peut l’enregistrer et générer automatiquement sur base de ce modèle les émotions les plus répandues : 😉, 😆, 😛 , 😘, 😄, …

De plus, l’application générera automatiquement des gifs ou stickers, en y incluant l’avatar créé. Les nouveaux visages viendront se coller automatiquement à l’emplacement prévu à cet effet.

Ma démarche

Après en avoir discuté avec mes professeurs, nous sommes arrivés à la conclusion que développer de A à Z une telle application allait être très difficile pour moi, étant donné que la plupart des langages de programmation adéquats au développement de cette application m’étaient inconnus. Nous avons décidé qu’il était préférable de simuler l’application en vidéo. Je maitrise assez bien Adobe Illustrator ainsi que l’art vectoriel, j’ai donc décidé de créer des visages dont le style serait simple et proche des emojis standards. J’ai commencé par faire toute une série de visuels, afin de fixer l’univers graphique et le déroulement logique de l’application.

Illustration d'un perso sur un plateau de tournage

Une fois l’univers graphique établi, j’ai réalisé une grande partie des illustrations qui seront utilisées par l’application. Puis, il fallait que je passe à la vidéo.

J’ai alors utilisé After Effect pour les animations de la vidéo de promotion, puis Character Animator, un autre logiciel de la suite Adobe que l’un de mes professeurs m’a fait découvrir, pour tout ce qui était animation des personnages des gifs.

Je me devais de respecter les standards de la publicité, c’est pourquoi je me suis inspiré d’autres vidéos qui promeuvent des applications existant déjà sur le net. Partant de là, j’ai développé ma propre vidéo promotionnelle en utilisant mes dessins style flat art.

La vidéo terminée, j’ai dû la mettre sur une page de présentation. Car, en effet, dans les consignes de notre examen, il fallait une landing page pour présenter notre projet. J’avais déjà fait une partie du processus lorsque j’avais developpé l’univers graphique. Il me suffisait de m’en inspirer et de l’adapter aux objectifs de cette page.

Mais, ce qui a été une véritable révélation pour moi lors du codage de la page, c’est l’utilisation des flexbox. Nous n’en avions parlé que quelques heures en cours et pourtant ce nouveau type de mise en page m’a permis d’avancer à pas de géant pour coder. J’avais enfin le sentiment d’avoir le plein contrôle du layout de ma page.

Et cela fut beaucoup plus simple lorsque j’ai dû m’attaquer au responsive. Pas besoin de demander à un élément d’aller en float right ou en float left, il m’a suffi de définir un contenair avec des colonnes puis de dire que tel élément doit venir en première, en deuxième ou en troisième position dans la hiérarchie.

Illustration d'un perso codant avec un ami

La plus part des illustrations sur ma page de présentation sont des SVG, exceptés certains boutons qui ont dû être compressés en PNG. Quant aux illustrations animées, j’étais parti sur des fichiers GIF. Même compressés, ils gardent toujours une bonne résolution et j’avais l’avantage de pouvoir jouer avec la transparence.

Cependant le gros inconvénient des fichiers GIF, c’est leur poids. En effet, j’en ai discuté avec un de mes professeurs et nous nous sommes rendus compte à quel point un seul GIF pouvait représenter le même poids que toutes les autres illustrations du site additionnées. Il m’a donc conseillé d’utiliser plutôt des fichiers vidéo MP4, beaucoup moins lourds.

Car c’est bien connu, s’il y a trop d’éléments lourds à charger sur une page, elle s’ouvrira beaucoup plus lentement. Or, l’une des consignes que nous avions étaient que notre page ne devait pas prendre plus de 10 secondes pour s’ouvrir. Je me devais donc de respecter ce délai.

Ce projet a pour but de démontrer que je suis capable de transformer quelque chose de simple, que nous utilisons tous les jours, en quelque chose de beaucoup plus élaboré et personnel en utilisant mon style graphique. Mon projet permet également de faire le lien entre l’animation et web design.

     Projet au hasard