Un peu plus haut, je vous parlais de l’importance de l’expérience utilisateur sur un site, notamment lorsqu’un visiteur y met les pieds pour la première fois.
Le design joue un rôle important là-dedans, tout comme l’architecture et l’organisation de vos contenus. L’idée est de lui rendre la navigation la plus agréable et fluide possible.
Si vous ne l’avez pas encore fait, commencez par créer une arborescence pour votre projet de site web.
En arrêtant vos différentes rubriques, vous allez structurer le contenu de vos pages et leur niveau de profondeur (il est conseillé d'éviter plus de 3 niveaux).
Vous pourriez très bien vous arrêter là, mais il est possible et recommandé d’aller plus loin en embrayant sur les wireframes ou “maquette fil de fer”, en français.
Un wireframe permet de matérialiser les différents composants d’une page web, à l’aide de blocs (qui représentent l'emplacement de vos futurs contenu textes, vidéos, images, navigation,...). Il s’agit d’une représentation visuelle “grossière” de votre futur site web et de la façon dont il sera parcouru par l'utilisateur.
Attention, l’apparence et l’attrait visuel ne sont pas des facteurs à prendre en compte à ce stade. Votre principale préoccupation avec une maquette fil de fer doit être de présenter votre contenu de manière intuitive, naturelle, logique et familière à vos utilisateurs.
Ici, vous allez donc agencer et hiérarchiser votre contenu dans les éléments présents dans votre wireframe (ex : texte, images, vidéos etc.).
Son but ? “Rendre le site web le plus ergonomique possible et faciliter la navigation pour les internautes.”
Enfin, reste une dernière étape avant le développement technique : le maquettage. Vous allez présenter de façon graphique et précise le contenu de vos wireframes.
Le Conseil pratique :
De l’arborescence aux wireframes, une feuille et un crayon peuvent très bien faire l'affaire. Sachez qu’il existe aussi différents logiciels pour le faire comme Balsamiq, invisionapp, adobexd, Axure ou encore Mockflow.