Retour Retour

Case Study

Au tout début

Le briefing nous a été donné par M. Di Nunzio. Il nous a introduit ce travail comme s'il s'agissait d'un vrai client afin de nous donner plus de réalisme lors de la conception.

« Anna et Peter, un couple de jeunes passionnés de cuisine et d'architecture d’intérieure sont en train de mettre au monde leur tout nouveau bébé: le Cupcake Factory, un salon de thé namurois situé dans le centre des rues commerçantes. »

Après réception des informations importantes et de la demande du client, j'ai commencé par établir un design process avec un planning afin de pouvoir finir chaque phases dans les temps. Je n'ai pas défini ce planning par jour précis mais par semaine afin d'être plus flexible avec les cours.

La première phase de mon processus créatif était de rechercher une identité graphique. J'ai donc pour cela créer un nouveau tableau sur Pinterest afin de recueillir mes sources. En même temps, j'ai défini une palette de couleurs. Celles-ci devaient rappeler le côté doux du chocolat et le côté chaud du thé, créant un savant mélange d'harmonie.

Le contenu du client étant un brut, j'ai retravaillé celui-ci. Il y avait pas mal de fautes d'orthographe et des choses inutiles ou en double. J'ai donc réécrit en me basant sur ce qu'il avait envoyé.

Avec les informations du client, j'ai établi une architecture de celle-ci : « de quoi ai-je besoin ? » en énumérant chaque pages possible, « qu'est-ce qui va ensemble ? » en les plaçant dans des catégories et « quel chemin l'utilisateur doit parcourir ? » en les structurant. J'ai aussi pensé à la navigation et aux liens entre chaque pages.

Première approche

J'ai commencé à gribouiller et créer ma première recherche de logos. J'étais satisfait au début. L'idée me paraissait sympa de placer une usine au dessus d'un cupcake, jouant ainsi sur le nom de l'enseigne. Commencer par l'identité graphique est important pour moi. Elle me permet de penser aux éléments restants en partant simplement du logo.

Premier logo
Première idée de logo

J'ai ensuite commencer par crée une première ébauche de design avec des wireframes papier. Par habitude, j'utilise toujours une grille classique de 960 pixels avec des colonnes de 60 pixels et des gouttières de 20 pixels.

Par après, j'ai mis ce design au propre sur Photoshop.

Premier design au propre
Page d'accueil du premier design

Mais j'ai vite réalisé mon erreur : le client ne voulait pas un site de e-commerce mais un site vitrine.

Seconde tentative

M'étant planter, je devais donc recommencer depuis le début. Pas de problème, j'étais encore dans les temps ! Je me suis ensuite rendu compte que mon logo ne me plaisait pas. Quelque chose n'allait pas dedans. Il n'était pas aussi harmonieux que je l'espérais, l'usine au-dessus me paraissait lourde.

Je suis donc reparti pour une recherche de logo et de couleurs toujours avec le souhait de jouer sur le nom du commerce. Une nouvelle idée m'est venue en voyant une animation d'un rouage tourner. Celui-ci faisait un lien avec le côté « usine » tout en restant « chic » de par son aspect et l'animation.

Recherche de logos
Recherche de logos & logo final

En ce qui concerne le design, il était clair pour moi qu'un site vitrine ne devait pas avoir trop de pages. Une simple landing page était suffisante en réduisant les informations à son strict nécessaire. Au lieu de recommencer mon design process depuis le début, j'ai simplement repensé l'organisation des pages pour savoir dans quel ordre chaque section allait apparaître.

J'ai ainsi redessiné un unique wireframe de ma page et j'ai remis celui-ci au propre sur Photoshop. J'ai utilisé la même dimension de grille que le précédent design.

Design final au propre
Maquette final au propre

Un travail d'équipe

M. Di Nunzio nous a ensuite annoncé ce qu'il nous préparait ! Nous n'allions pas intégrer nous-même notre maquette mais nous devions intervertir celle-ci avec un autre élève. Long Chen s'est ainsi proposé pour intégrer la mienne et que j'intègre ainsi la sienne.

Long est un super designer. Ses designs sont épurés, toujours sobres et classes. Malgré son daltonisme, je suis toujours étonné dans la justesse de ses couleurs. J'avais aussi la possibilité de vérifier si mon propre design était visible à ses yeux. S'il y a bien une personne que je vais suivre son travail « après l'école », c'est lui.

Quand j'ai reçu sa maquette, j'ai fait un gros « waow » puis je me suis dis « comment je vais intégrer ça ? ».

Maquette final de Long
Maquette final de Long

Son design n'était en effet pas le plus simple à faire. Un vrai challenge pour moi. J'y suis arrivé malgré tout et je suis plutôt content du résultat.

Réception et conclusion

Long m'a envoyé son intégration en même temps que je lui ai envoyé la mienne. Il a fait du super boulot, pile ce que j'espérais. Après les dernières vérifications et les corrections à faire pour l'un et l'autre, nous avons pu rendre notre travail dans les temps.