Maquette de site

Contexte

Durant cette deuxième année, j’ai eu la chance d’avoir des cours sur la conception et l’intégration pour le CMS WordPress. Le but était de crée une maquette de site en partant de 0. Pour se faire nous avons suivi 3 étapes importantes : 

– Arborescence du site

– 3 propositions différentes

– Maquette

Le contexte est que nous devions crée le site web d’une agence web qui a pour cible les agences de voyages. 

L'arborescence de la maquette

Pour construire l’arborescence, j’ai réalisé un benchmark de plusieurs agence web. Le but de ce benchmark était de connaître les différents services d’une agence web. De plus ceci ma permis de savoir quel page est présente sur ce type de site. 

Ensuite pour comprendre la lecture de l’arborescence j’ai utilisé un code couleur. Le but est que le client comprend facilement sa future arborescence. 

Pour réaliser cette arborescence, j’ai utilisé adobe XD.

3 propositions

Le but de cette exercice était de faire 3 propositions différentes en gardant les mêmes photos et le même texte. le but est que le client puisse se projeter facilement sur ces bouts de sites complètement différents. Cette étape m’a permis de jouer avec ma créativité et essayer de nouveaux styles.

Pour ces maquettes je les ai réalisés sur Figma.

Maquette final

Pour la création de la maquette, j’ai choisis le prototype 2. Selon moi, c’était la meilleure maquette qui pouvait être riche et très créative.

 

Le mélange de la couleur bleu foncé et orange était pour moi le meilleur mélange. Pour choisir ces couleurs, j’ai utilisé le site web coolors pour combiner ces deux couleurs. 

 

Pour ce rendu la maquette desktop et mobile était demandé. J’ai réalisé en premier lieu la maquette desktop puis l’adapté en mobile.

 

Si vous voulez regardez l’entièreté de ces maquettes c’est juste en dessous ! ⬇️