Création d’un Wireframe
n°1 : Réaliser des illustrations, des graphismes et des visuels
J’ai tout d’abord démarré photoshop et créé un nouveau plan de travail de 1920×1080 pour la page d’accueil. J’ai commencé par créer tout ce que contiendra le « Header », j’ai donc créé une forme rectangulaire avec une croix pour mon image animée, j’y ai rajouté une autre forme rectangulaire par-dessus pour y écrire le nom du site et le slogan. J’ai ensuite ajouté un rectangle pour le fond du menu et j’y ai ajouté d’autres rectangles par-dessus pour chaque catégorie prévue.
Pour le « Main », j’ai ajouté une forme carré avec une croix pour le logo du site, avec le texte de présentation juste à côté.
Pour finir avec le « Footer », j’ai ajouté une forme rectangulaire ainsi que deux carrés avec une croix pour les icônes des réseaux sociaux, puis j’ai ajouté les textes de copyrights et de mentions légales.
J’ai ensuite dupliqué deux fois ce plan de travail pour le refaire dans sa version mobile et tablette. J’ai donc modifié leurs tailles en 768×1024 et 480×640. Où j’ai modifié le menu en version burger, puis j’ai mis le logo au-dessus du texte de présentation, et où j’ai modifié la disposition du « Footer » en mettant les copyrights au-dessus des mentions légales et des réseaux sociaux.
Wireframe de la page d’accueil dans sa version ordinateur et mobile
Wireframe de la page de galerie photo
Pour la seconde page, j’ai dupliqué le menu et le footer de la page d’accueil. J’ai ensuite ajouté une forme carré avec une croix, où j’ai ensuite ajouté une forme rectangulaire par-dessus avec 50% de transparence pour le titre de la photo. J’ai ensuite dupliqué 3 fois ces formes et les ai placé côte à côte. J’ai ensuite dupliqué la totalité de ces calques plusieurs fois pour que cela constitue la galerie.
Pour la version mobile et tablette, j’ai gardé les mêmes menu et footer que la page d’accueil, que j’ai donc dupliqué. J’ai ensuite dupliqué les cases photos que j’ai placé les unes par-dessous les autres pour n’en garder qu’une à la fois sur l’écran.
Wireframe de la page de galerie photo
La troisième page étant une galerie photo également, j’ai donc entièrement dupliqué la page précédente. J’ai ensuite supprimé les cases semi-transparentes et ai collé toutes cases « photo ».
Pour la version mobile et tablette, j’ai gardé le modèle de la page précédente et toute comme dans la version ordinateur, j’ai supprimé tous les rectangles semi-transparents. J’ai modifié les cases « photos » pour les rendre plus rectangulaire et les ai placé les une par-dessous les autres.
Wireframe de la page contact
Pour finir avec la page de contact, j’ai encore une fois gardé le même menu ainsi que le même footer. J’ai ensuite ajouté deux formes rectangulaires l’une au dessus de l’autre pour le nom et l’adresse mail de l’utilisateur voulant envoyer le message. Et un autre rectangle plus large pour le corps du message.
Enfin, pour les versions mobile et tablette, j’ai toujours gardé le menu et footer des pages précédentes, et ai gardé la même disposition pour les rectangles, que j’ai tout simplement rendu moins long.
