Comment créer le design de votre site web en accord avec l'expérience-utilisateur?

Vous manquez de temps? Téléchargez les 10 étapes de la conception d'un site web en agence.

Voici l’étape 5 de la conception d’un site web en agence: Le design de votre site web doit être au service de l’expérience-utilisateur.

Une fois la structure des étapes précédentes définies, vient l’étape du design. Nous prenons alors les maquettes en fil de fer de l’étape de l’expérience utilisateur approuvées par le client et nous y appliquons la direction artistique qui rendra le tout visuellement attrayant et cohérent avec la marque.

Planche d’inspiration et Direction artistique

En nous inspirant de ce que la marque possède déjà comme identité visuelle (couleurs, choix typographique, traitement photo), nous allons bâtir la direction artistique du site web en adaptant au besoin les éléments de l’identité visuelle à la plateforme numérique. Nous pourrons également compléter au besoin l’identité visuelle en ajoutant certains éléments qui nécessitent parfois moins de présence dans les formats imprimés que sur un site web, par exemple en créant une famille d’icônes.

Cette direction artistique peut être présentée sous forme de planche d’inspiration (moodboard) afin d’être validée par le client ou bien directement appliquée sur les maquettes selon l’enveloppe budgétaire. L’utilisation de la planche d’inspiration permet de rapidement communiquer l’idée générale de la direction artistique et de voir l’ensemble de celle-ci d’un coup d’oeil sans prendre le temps de l’appliquer directement à la structure établie des maquettes en fil de fer.

La création des maquettes

Une fois la direction artistique établie, la création des maquettes à proprement parler peut commencer. Nous allons ainsi prendre le travail fait par le designer UX et appliquer la direction artistique pour créer visuellement une vision unifiée entre les deux. Si la rédaction des contenus est faite à cette étape, nous pourrons intégrer les contenus afin d’avoir l’idée la plus nette possible du site web. Nous créons les icônes nécessaires suivies par une sélection de photos et le choix des polices de caractères ainsi que leur grandeur et leur espacement.

L’animation et dynamisation des maquettes

Nous pouvons suggérer des types d’animations qui s’accordent avec la direction artistique pour qu’ils soient programmés aux prochaines étapes. Nous prévoyons l’état des boutons au survol et au clic, l’état des formulaires, lorsque sélectionnés et remplis. Nous planifions le style de chaque élément HTML type comme les listes à puce, les citations, les accordéons, les pop-up, etc.

Une fois toutes les maquettes produites et approuvées, nous livrons les fichiers sources à la programmation.

Téléchargez les 50 questions à se poser avant la refonte d’un site Web