Création d’une maquette
Maquette de la page d’accueil dans sa version ordinateur et mobile
Tout comme pour le Wireframe, j’ai commencé par démarrer photoshop pour y créer un nouveau plan de travail de 1920×1080. J’ai ensuite importé l’image animée pour la placer en haut de page, par-dessus j’ai créé une forme rectangulaire blanche avec uniquement les contours de visible, que j’ai placé au centre de l’image animée. A l’intérieur de ce cadre, j’y ai écrit le nom du site, ainsi que le nom de l’activité du propriétaire du site. J’ai continué en créant le menu avec une forme rectangulaire et en y écrivant le nom des catégories prévues. J’ai ensuite importé le logo animé que j’ai placé sous le menu à gauche, puis ai écrit le texte de présentation que j’ai placé à droite du logo. J’ai terminé cette maquette en créant le footer avec une forme rectangulaire, en y écrivant les copyrights, les mentions légales et en y ai importé les icônes de facebook et instagram dont j’ai modifié la couleur en blanc, que j’ai ensuite placé.
Maquette de la page de galerie photo
Pour la seconde page, j’ai créé un nouveau menu et ai dupliqué le footer de la page d’accueil. J’ai ensuite ajouté un fond noir, puis j’ai importé les photos de créations de bois, où j’ai ensuite ajouté une forme rectangulaire par-dessus avec 50% de transparence pour le titre de la photo. J’ai ensuite dupliqué cette forme pour la placer sur chaque photos. J’ai terminé en écrivant tous les titres.
Maquette de la page d’Essences de Bois
Pour la page des Essences de bois, j’ai dupliqué le menu, le fond et le footer de la page précédente. J’ai ensuite importé toutes les photos d’essences de bois et les ai placées.
Maquette de la page de contact
Pour finir avec la page de contact, j’ai encore une fois gardé le même menu, le même fond ainsi que le même footer que la page précédente. J’ai ensuite écrit le nom des cases à remplir du formulaire, puis j’ai tracé trois traits par-dessous. J’ai terminé en créant une forme rectangulaire ne contenant que les contours blanc, pour le bouton d’envoi et y ai écrit « valider ».
