Chapitre 1: l’histoire

Dans le cadre de l’enrichissement continu de mon portfolio, je suis fier de présenter un projet personnel sur lequel j’ai travaillé. Pour garantir la pertinence et la faisabilité de ce projet, j’ai utilisé un outil innovant, le site https://goodbrief.io/. Grâce à cet outil, j’ai pu générer aléatoirement les exigences d’un client potentiel afin de répondre aux besoins réels, tout en restant créatif et innovant., ce qui m’a permis d’adapter mon projet en conséquence.

Le projet a été conçu exclusivement pour les appareils mobiles et a été réalisé à l’aide de FIGMA.

Le thème est le suivant :

Company Name: West Tiger
Company Description: We are a little corner-shop that sells ice-cream. Our main product stands out because of its reputation and convenience. Our target audience is women. We want to convey a sense of glamour, while at the same time being fresh.
Job Description: You must create a website that will mainly spread brand awareness. The goal is to make the website easy to navigate. Besides the landing page, the website will need a contact page, product pages and a privacy policy page.
The landing page should have a About the Team section. There should be a call to action to get users to follow the company’s social media. They would prefer a luxurious design, and would like you to use the brand color, which is grey.
Take into account the client’s preferences and values.

 

Chapitre 2: Wireframe

Pour offrir un aperçu plus précis de mon prototype, j’ai élaboré le wireframe de la page d’accueil, en mettant l’accent sur les éléments clés demandés par le client. Ces éléments comprennent :

* Une section « À propos » pour présenter l’entreprise et sa mission.
* Un appel à l’action (CTA) pour inciter les visiteurs à suivre la marque sur les réseaux sociaux.

En plus de ces éléments, j’ai ajouté un carrousel pour afficher les trois derniers produits en vedette, ainsi qu’une section « Derniers articles » pour fidéliser les clients en leur proposant des tutoriels et des articles en lien avec notre thème, qui est la crème glacée.

J’ai également intégré le compte Instagram de la marque, avec les dix dernières publications, pour donner un aperçu de l’univers de la marque et de ses offres.

L’objectif de ce wireframe est d’être clair et concis, tout en mettant en évidence les différentes sections et en les différenciant visuellement. J’ai accordé une attention particulière à l’aération de la mise en page pour offrir une expérience utilisateur agréable.

Chapitre 3: Maquette

Pour répondre aux attentes de mon client, j’ai conçu un site web qui cible principalement les femmes, en mettant l’accent sur l’élégance, le glamour et une esthétique luxueuse.

En ce qui concerne la palette de couleurs, j’ai pris en compte la demande du client de faire du gris la couleur principale. Afin d’apporter de la légèreté et de créer un contraste harmonieux, j’ai associé le gris à un bleu violet délicat. Pour renforcer l’impact visuel et l’ergonomie du site, j’ai également utilisé du noir plus profond pour les boutons d’appel à l’action.

En somme, la combinaison de ces couleurs et l’attention portée à l’esthétique globale du site permettent de créer une expérience utilisateur à la fois raffinée et agréable.

 

 

Pour offrir une expérience utilisateur optimale et renforcer l’esprit luxueux du site, j’ai accordé une attention particulière à l’aération de la mise en page. En effet, il est important de laisser respirer le site pour que les visiteurs puissent naviguer facilement et apprécier le contenu.

En outre, j’ai opté pour un design minimaliste afin de mettre en valeur les produits. Le minimalisme permet de créer une esthétique épurée et raffinée, tout en laissant les produits s’exprimer d’eux-mêmes. En somme, le choix d’un design minimaliste et d’une mise en page aérée contribue à créer une expérience utilisateur luxueuse et agréable.

Chapitre 4: Prototype

Pour retrouver le prototype vous pouvez directement cliquer sur ce lien afin de tester le prototype:

https://www.figma.com/proto/yDBADs5PSQMEgVBKnoSp8p/Nicky’s-team-colors?node-id=455-626&t=mqRbbNKFq3435Iuz-8&scaling=scale-down&page-id=0%3A1&starting-point-node-id=455%3A626&hide-ui=1