2.2. La conception de l'arborescence et du zoning
Vous avez toutes les cartes en main pour envisager la croissance de votre futur site web en commençant par votre plan de site. Le rôle de l'arborescence est simplement de représenter visuellement les connexions entre les différentes sections de votre site web ou application mobile.
La page d'accueil se trouve en toute première position, et les pages qui se trouvent en dessous se chevauchent les unes les autres. Lors d'une refonte, l'arborescence est un outil très utile pour mettre en évidence les déséquilibres dans la répartition des pages. Il s'agit alors de comparer le niveau actuel d'arborescence des pages à un nouveau niveau qui incorpore ou élimine certains niveaux de pages.
L'arborescence est l'un des outils les plus importants pour tout projet de développement web. Les développeurs doivent pouvoir s'y référer pendant la phase de codage pour avoir une compréhension rapide de la hiérarchie des pages. En outre, ils commencent généralement par développer la page d'accueil avant de passer aux pages de niveau supérieur pour approfondir le site web.
La notion visuelle de l'organisation fonctionnelle du site est complétée par les zonings. Il s'agit de schémas dont le but est de rendre compte du positionnement des blocs élémentaires (textes, bouton, menu, logo). Aucun élément graphique ou couleur n'est intégré à ce stade. Le zonage permet donc un gain de temps important lors du processus de développement. En réalité, les zonings déterminent les aspects fonctionnels du site sans tenir compte de leur aspect visuel. L'accent est mis sur l'ergonomie, composante essentielle de l'expérience utilisateur du futur. Par conséquent, le codage HTML du site web peut commencer avant que les choix graphiques aient été vérifiés.
2.3. La création de maquettes graphiques
La création de maquettes graphiques suit le développement des maquettes fonctionnelles (zonings et wireframes). Elles intègrent des éléments graphiques tels que les polices de caractères, les jeux de couleurs, les arrondis, les effets visuels, etc. Globalement, ils saluent le travail effectué par les UX designers sur l'interface utilisateur à venir. Il est rare que les développeurs soient capables de coder une maquette de conception graphique exactement comme elle apparaît. Leur métier les oblige à tenir compte de la variabilité des écrans et, par conséquent, des rendus. La création de maquettes graphiques doit se faire à l'aide d'un programme d'édition graphique comme Photoshop, ou bien à partir d'une courte section de code HTML et CSS simple.