08 Fév Construire un site Web, c’est dessiner
Bien avant de réaliser ces documents de haute qualité contenant tous les détails de la future page Web, appelée « maquette graphique », il existe plusieurs étapes vont construire un site Web :
L’arborescence est une représentation graphique de l’architecture des contenus, son organigramme.Qui est supérieur à qui ? Où ranger quoi ? Elle débute généralement avec la Home page, puis présente les catégories, les sous catégories parfois les pages d’un site Web. L’organisation des liens reprend une présentation similaire à celle de l’arborescence, mais elle indiquera les liens hypertextes entre les pages. Ce schéma, permet donc de comprendre la navigation Web souhaitée par la marque, le parcours utilisateur.
Le zooning : ce travail permet d’identifier les éléments présents sur une page Web et leurs emplacements. Ce sont des rectangles ou des carrés permettant de visualiser les éléments de base de la page Web (header, footer, sidebar, textes, images etc.)
Le mockup est un travail plus réaliste où l’on comprend à quoi va ressembler la page Web. On ajoute donc plus de détails que dans le zooning afin d’obtenir une visualisation claire de la page. Le design (couleurs, espacements, visuels etc.) n’est pas encore intégré à cette étape.
Le wirframe est un autre type de dessin qui a pour objectif de montrer la fonctionnalité des éléments présents sur la page. Que se passe-t-il lorsque l’internaute passe la souris à cet endroit ? Lorsqu’il clique ? Le wirframe est généralement couplé avec le mockup ou la maquette graphique afin de présenter un site fonctionnel pour intégration.
La maquette graphique est le document que l’on donne à l’intégrateur pour réaliser une page Web. Elle doit indiquer tout ce que verra l’internaute concernant le design (couleurs, espaces, emplacements, textes, etc.) mais aussi les contenus qui doivent être ceux qui seront utilisés sur le site.
La plus grande partie de ces éléments peut être faite sur un morceau de papier ou sur un logiciel de dessin très simple. Il existe aussi des outils en ligne qui offrent une interface simple d’utilisation pour réaliser ces schémas facilement.