Site internet BOP!
(lien Adobe Xd en bas de page)
BOP! est une entreprise fictive de figurine créée dans le cadre de la certification PAO de l'école CEFIM à Tours en 2021.
Explication
Le site a été conçu pour faire du e-commerce. On va y retrouver tout l'univers de BOP! avec ses couleurs (dont celles du logo). Le site comprend 3 catégories majeures : "Crée ta figurine !", "Figurines" et "Goodies".
Description
Le site reprend les couleurs du logo (en ajoutant quelques autres) pour obtenir un style proche du vintage/retro tout en étant moderne. Les couleurs principales du site sont donc : blanc (#FFFFFF), gris foncé (#131414), rouge (#B51212), jaune (#E5A517) et jaune clair (#FFD36C). Les polices d'écriture sont "Bahnschrift" pour le texte basique et "Mutter Krause" pour une touche de fantaisie retro.
Étape 1 : Arborescence
L'arborescence est très importante puisqu'elle m'a permis de prévisualiser la construction du site. J'ai utilisé le logiciel XMind pour la réaliser.
Étape 2 : Zoning
Le zoning consiste en un brouillon d'une maquette. On va prendre une page (ici la page d'accueil) et la faire de manière très simpliste avec des carrés et des rectangles pour délimiter des zones de texte ou d'image... Ici, j'ai aussi fait le choix de mettre un peu de couleurs afin d'avoir une meilleure vision de ma future maquette. Ce zoning a été fait sur le logiciel Adobe Xd.
Étape 3 :
Maquette web
Enfin vient la création de la maquette web avec le logiciel Adobe Xd. Grâce à ce logiciel, la maquette est interactive et donne l'impression de naviguer sur un vrai site internet publié en ligne. Pour la maquette web de mon site
d'e-commerce, il a fallu faire une page d'accueil, de création de compte, de panier, de fiche produit, etc...
