Le Guide du Web Design !
Créer un site web c’est faire murir votre projet en vous posant les bonnes questions.
Et non ce n’est pas uniquement choisir la couleur du fond ! Vous découvrirez que pour être le plus pertinent possible, il vous faudra affiner votre cible, préciser le ton que vous voulez employer ou encore éclaircir les termes et les rubriques présents.
Mais pas de panique, Toutes ces questions se poseront au fil de la construction du site. C’est un peu comme… une thérapie ! L’Élan Créatif vous donne donc quelques clefs, pour construire plus facilement votre projet!
La première notion à retenir c’est : Penser Utilisateur !
Une cible affinée
Que vient-il chercher comme information ? Quel est le but de sa visite ?
-> Ces questions vont vous permettre de trouver votre cible :
Kevin à 25 ans, il est jeune cadre dynamique et il adore la randonnée. Mais ce qu’il aime part dessus tout tout c’est le matos ultra light ! Son but? Trouver la meilleure sélection de produitS et une communauté de passionnés qui comme lui adore semer leurs potes dans la montée grâce à leurs sacs de 1 kg tout compris.
Ashley est encore au lycée, elle voue un culte à Jul et quand elle n’est pas sur l’instagram du chanteur, elle cherche sur le web les dates des concerts de… l’artiste pour tapisser d’info son mur Facebook.
Bien vu ! Les choix esthétiques sont différents pour captiver ces deux utilisateurs. Par contre la stratégie de navigation, restera la même : Créer une architecture réfléchie pour que l’utilisateur arrive facilement à son but. En d’autres termes, construire une arborescence et la navigation performante qui en découle, pour répondre rapidement à Ashley et Kevin.
Une navigation Fluide
Le confort d’un site repose sur ses qualités de navigation.
Faites confiance à la règle des … Trois C !
Clair = les termes utilisés doivent être précis et évident pour le visiteur.
Simple = La navigation doit offrir au visiteur la possibilité d’aller où il veut en un minimum de clic possible.
Constant = La navigation doit être identifiable et être sous la même forme sur toutes les pages.
Petit plus : permettre au visiteur de se repérer dans l’arborescence du site par exemple grâce à des indicateurs. Et oui, toujours dans l’idée du confort du visiteur !
Une arborescence réfléchie
C’est un travail conséquent, mais il vous apportera une hiérarchie lisible dans vos contenus et une constance visuelle dans votre mise en page. Pourquoi ? Pour capter toute l’attention de l’utilisateur !
Pour ranger les informations L’Élan Créatif vous conseille d’appliquer la notion suivante :
Reprenons l’exemple de Kevin, on choisira de lui créer une page spéciale, Les Tentes Démentes. L’article traitera clairement de toutes les tentes ULTRA light pour le bivouac. À l’inverse, la page Tout l’équipement pour ronfler sous les étoiles évoquerait : tentes, matelas, réchaud et lyophilisés bio… Le risque serait de noyer l’information “tente” dans un scroll sans fin.
Ainsi, on divise les contenus longs et détaillés en contenus courts et précis.
Petit plus : ne pas négliger l’intro d’une page qui donne une indication précise pour le visiteur
Une fois votre arborescence de page détaillée, il faut maintenant les construire une par une en créant des automatisme de mise en page pour faciliter la lecture.
Le confort de lecture
La clef : Les grilles de mise en page
Cette irremplaçable technique du design graphique, fait aussi ses preuves pour le web. Qu’est-ce que c’est ? On vous éclaire, c’est comme une trame de fond, elle permet d’établir une hiérarchie visuelle pour vos blocs textes, en définissant leur place et leur taille séparément, puis les uns par rapport aux autres.
Une autre notion primordiale, le parcours et le confort visuel
En haut à gauche, puis en haut à droite et ensuite on descend en bas à gauche pour finir en bas a droite. 4 points clefs formant un Z qu’il faut garder en tête car votre page sera scannée par l’oeil en un instant. Il faut ainsi privilégier les mises en page épurées.
“C’est pour cela que Le titre de l’article principal “Le King est blond!” et en haut à gauche et que les archives sur les coupes de cheveux de Jul sont situées dans un petit menu en bas à droite” se dit Ashley.
Bien joué Ashley. Toujours dans l’optique d’apporter du confort de lecture, nous vous recommandons d’éviter les textes intégralement en capitales, ils fatiguent plus vite l’oeil et diminuent la vitesse de lecture. Pour autant c’est parfois plaisant pour les titres et les paragraphes courts / citations, et ça donnera du rythme dans vos mises en page. Même traitement pour l’italique, qu’il faut utiliser avec parcimonie.
L’ordre établi
Pour que le visiteur trouve facilement ses marques, il y a quelques habitudes à ne pas contrarier. Par exemple au niveau des emplacements: se connecter ou accéder à son espace personnel, est souvent situé dans le header en haut ou en haut à droite. Si vous changez cet emplacement, il y a de forte chance qu’il ne le trouve pas du premier coup. On identifie le même phénomène avec certaines formes rentrées dans les moeurs du web.
=> L’utilisateur ne doit pas avoir à s’interroger sur la fonction d’une forme, elle doit lui paraître évidente.
Des images appétissantes
Elles valent parfois mieux que mille mots.. encore faut-il que leurs qualités ne desservent pas vos propos !
L’image est aujourd’hui incontournable, elle illustre et attire plus l’attention que les contenus textuels. Noire et blanche, en saturation colorée, avec un traitement graphique, tout illustration, surexposée, elle est un composant essentiel dans le design de votre site et reflétera l’esprit du site. Ainsi, gare à celui qui la néglige !
Quelques erreurs à éviter:
Soyez attentif à la définition de l’image (70dpi minimum), une image pixellisée n’est pas bien vue (dans tous les sens du terme)
Comme pour les contenus textuels, citez toujours vos sources, et préférez toujours le contenu donc vous êtes l’auteur. C’est meilleur pour votre référencement et on ne peut rien cacher au Divin World Wide Web.
Des couleurs savamment dosées
Choisir les couleurs de son site, c’est pas évident. En règle générale on préférera les couleurs de fond claires et les camaïeux de gris colorés, aux couleurs vives trop agressives pour les yeux. Il faut aussi penser au contenu de son site.
Exemple : Ashley a trouvé sur son site www.jul4ever.com
Une autobiographie gratuite d’une dizaine de scroll. Sachez qu’il est moins fatiguant de lire des textes blancs sur fond foncé que l’inverse. Ainsi si votre site à pour objectif de favoriser le contenu textuel, il faudra éviter le texte noir sur fond blanc (et oui ce n’est pas comme l’imprimé !).
(image)
Un Panel de trois couleurs est suffisant pour créer l’atmosphère souhaitée. Il y a toujours une couleur dominante et la troisième sert à rehausser subtilement l’ambiance globale. Mais attention à ne pas choisir les couleurs trop criardes
Une adaptation au top
Aujourd’hui l’utilisateur a autant de chance de voir votre site web, sur son smartphone dans le bus en rentrant du travail, que chez lui sur son ordi ou sa tablette. Alors une fois la version principale (ordinateur) terminée, vous ne pourrez pas faire l’impasse, il faudra vous attaquer aux déclinaisons: mobile et tablette !
Vérifier l’affichage de votre site sur différents navigateurs (Chrome, Safari, Modzilla…). En effet les problèmes de compatibilité sont courants et sont dus à l’utilisation de technologies obsolètes par certains d’entre eux (Internet explorer on t’aime autant que Jul).
Vous aurez ainsi la meilleure expérience utilisateur possible.