La réalisation des maquettes est une étape déterminante dans la création d’un site internet. Parfois pour mieux avoir une vue d’ensemble, prendre un papier et un crayon peut se révéler payant.
En dessinant les blocs de contenu de la page d’accueil, cela devient un jeu d’enfant de hiérarchiser les contenus principaux de ceux qui sont superflus tant par rapport à vos objectifs et aux attentes des utilisateurs.
Pour esquisser le design, la première étape est de définir l’objectif sur le site (vitrine, site informatif, commercial…), puis de schématiser les pages, les différents niveaux de navigation et les liens entre les pages. L’arborescence ou plan de site prend alors forme. Cette première étape de la conception d’un site web doit être validée. A partir de là, on va pouvoir concevoir la page d’accueil et les principales pages.
Découper en zones
On va découper la page d’accueil en différentes zones (zoning), par exemple, on va marquer un rectangle horizontal pour le logo et le menu principal, un rectangle vertical à gauche pour le menu secondaire, etc.
Ensuite, on passe des zoning au wireframe (maquette fonctionnelle) où on rajoute les principaux textes et les composants graphiques.Le concept de votre page d’accueil est crée. C’est le moment d’affiner le menu de navigation, en indiquant les sous menus éventuels, les liens avec les autres pages et le type de comportement au survol. Le pied de page pourra être également formalisé. C’est élément ne doit pas être négligé car il sera présent sur toutes les pages. En plus de la page d’accueil, une page secondaire va être dessinée qui reprendra les éléments de l’en-tête et du pied de page et comportera les points forts de ce type de page. Il faut encore réfléchir en bloc le contenu, tout en se laissant toute latitude par la suite de faire évoluer l’esquisse.
La forme au service du contenu
Vous ne créer pas pour vous même un site, mais pour une multitude de personnes au profil divers (geek, malvoyant, novice en matière de web, utilisateurs de mobile, daltoniens…). Il faut donc prendre en compte cette diversité en simplifiant la navigation. La tendance actuelle est ainsi d’adopter un design « one-page ». la page d’accueil comporte tous les éléments du menu de navigation. Mais même dans ce cas de figure, il faut donner une certaine aspérité à votre site en travaillant les ruptures visuelles entre les différentes sections. Les séparations peuvent être ainsi crayonnés, de même les effets visuels comme de larges images ou courte vidéo en arrière plan. Les couleurs du site seront également esquissés, en ayant à l’esprit que certaines couleurs peuvent rendre difficile la lisibilité pour certaines personnes.
Les croquis réalisés doivent être par ailleurs déclinés pour la version responsive (tablette et téléphone portable). L’occasion d’écarter les éléments superflus et de visualiser les répercussions sur le site d’une largeur d’affichage plus réduite.
Les formulaires, notamment ceux qui concerne l’inscription à un compte ou la finalisation d’un achat peuvent être de plus crayonnés.
Tous ces schémas finalisés et validés peuvent être transcrits grâce à des logiciels tels que Axure RP, moqups, wireframe, balsamiq, Canva ou Adobe Experience design. Ils vous permettront de créer un squelette de votre site web. Durant toutes ces étapes de préparation, prenez le temps nécessaire à la réflexion et à la validation.Le soin que vous y apporterez vous évitera bien des écueils quand vous avancerez dans le projet et vous permettra à terme de gagner du temps.
