Sites web gratuits et Agence Web en ligne
        
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Le webdesign de votre site est déterminant pour sa réussite, il va permettre de convaincre, conserver et fidéliser vos visiteurs. Lire aussi : Introduction au webdesign
Voici les 7 règles de base à respecter pour que vos lecteurs puissent être à l'aise sur votre site et qu'ils aient envie d'y retourner.

Règle n°1
Suivez
les standards

En visitant plusieurs sites internet, un internaute va acquérir des habitudes dans la manière de les aborder.
Il va alors inconsciemment essayer de reproduire ces mécanismes pour naviguer, lire ou réaliser une tâche sur votre site. 
Pour éviter de le perturber et pour qu'il s'adapte rapidement, il est recommandé que votre site web soit cohérent avec les autres sites et respecte certaines conventions du web.

En-tête

L'en-tête (ou header) de votre site doit contenir votre logo, couramment situé en haut à gauche, accompagné de préférence d'un slogan (ou tagline). Celui-ci rappelle à l'internaute où il est et qui vous êtes. Le logo permet également à votre visiteur de revenir à la page d'accueil à tout moment. Il est donc important d'y intégrer un lien redirigeant vers l'accueil de votre site pour l'aider à se repérer.
On y retrouve également une fonction de recherche, généralement en haut à droite, un outil très utilisé par les internautes, qui souhaitent souvent trouver une information rapidement.
 
Navigation

Un site est composé d'une barre de menu principale généralement située en haut en format horizontal, elle donne accès aux rubriques principales de votre site. En fonction du type de site, on peut y retrouver également une navigation secondaire en format vertical, à gauche pour une navigation des sous-rubriques ou à droite pour les navigations complémentaires.

Liens

Le lien hypertexte doit être reconnaissable et se différencier du texte ordinaire. Traditionnellement bleu, il peut se distinguer désormais de plusieurs manières : une différence de couleur marquée, un soulignement ou l'association d'un pictogramme. Il est par ailleurs déconseillé d'utiliser le soulignement pour vos textes, car il est souvent associé aux liens. Pour faire ressortir un texte, utilisez plutôt une différence de taille, de graisse ou de couleur.
 

Et sur Quomodo ?

  • Les designs Quomodo proposent systématiquement une structure et une navigation vous permettant de suivre ces standards.
  • Pour l'en-tête de votre site, si vous avez un doute sur l'emplacement de vos contenus, optez pour une bannière en mode automatique. Elle proposera une mise en page optimisée et adaptée à votre design.

Règle n°2
Organisez
et aérez vos pages

Une page bien organisée et aérée permet à vos visiteurs de bénéficier d'une lecture plus reposante et de ne rencontrer aucune difficulté à trouver l'information qu'ils recherchent.
En effet, une accumulation compacte d'informations fatigue l'œil et peut oppresser l'internaute. 

Prenez de l'espace et organisez vos contenus en les hiérarchisant et en les alignant les uns aux autres.
Privilégiez des blocs de contenu larges, alignés dans des colonnes de mêmes largeurs et séparés par des espaces, afin de les rendre plus lisibles et d'obtenir des pages plus structurées et harmonieuses. N'ayez pas peur des espaces vides entre vos éléments, elles permettent de laisser respirer vos internautes, aident l'œil à circuler et mettent votre message en valeur.

Gadgets

Ne surchargez pas vos pages d'informations inutiles, allez à l'essentiel.
Présenter trop de contenus superflus risque de perdre votre visiteur. Épurez votre site et privilégiez ce qui est important pour vos utilisateurs.
S'ils ne se justifient pas, oubliez les gadgets, comme l'heure, les compteurs de visites, les animations flash ou autres indications que vos visiteurs ne recherchent pas. Ils distraient le regard, fatiguent l'œil et font de l'ombre à votre véritable message.
 

Et sur Quomodo ?

  • Pour ranger et aérer facilement vos contenus, il est vivement conseillé d'utiliser la grille de section.
    Elle positionne automatiquement vos smartnotes dans des colonnes et vous permet d'organiser aisément vos contenus, de les aligner entre eux, et de les aérer, grâce à des espaces adaptés automatiquement à votre design.
  • Avec la grille, les blocs s'alignent dans chaque colonne les uns au-dessous des autres. Utilisez le séparateur de section pour réaligner leurs bords supérieurs.

Règle n°3
Donnez
des repères

Lorsqu'un internaute visite un site, il a besoin de repères afin de ne pas s'y perdre et savoir sur quelle page il se trouve. Il est donc important de l'aider et de lui indiquer à quel endroit il se situe sur votre site.
Mettez des titres à vos pages, et mettez en surbrillance la rubrique ou la sous-rubrique dans laquelle il se trouve dans la barre de navigation. S'il y a plusieurs sous-rubriques imbriquées, un fil d'Ariane peut être utile.
 
Cohérence entre les pages
Les structures de vos pages doivent être cohérentes entre elles. En effet, vos utilisateurs vont inconsciemment se forger un modèle mental de vos pages pour appréhender le volume d'information. Ils vont s'attendre à trouver le même type d'information au même endroit.
Dans la mesure du possible, adoptez une présentation uniforme de vos éléments sur chacune de vos pages et placez vos barres de navigation au même endroit.
 
Titres et sous-titres
En réalité, un texte ou un article sur le web est rarement lu en entier. Lorsqu'un internaute arrive sur une page, il la survole et « scanne » les informations. C'est pourquoi il faut orienter la lecture de vos utilisateurs, en structurant vos textes à l'aide de plusieurs niveaux de titres. Cela leur permet d'avoir une lecture plus aisée des différentes informations et de choisir ce qu'ils souhaitent lire ou non.
 

Et sur Quomodo ?

Vous pouvez ajouter à vos contenus plusieurs niveaux de titres.
Avec la smartnote titre :
- Un titre de page, pour introduire ou indiquer au visiteur dans quelle page il se situe.
- Un titre de section, pour organiser votre page en plusieurs parties.
Et avec les différents formats de la smartnote billet :
- Un titre de contenu, pour diviser vos paragraphes ou attirer l'oeil sur une information importante.
- Un sous-titre de contenu,  pour diviser à un second niveau vos textes ou compléter le titre de contenu.

Règle n°4
Soignez
votre lisibilité

Afin d'offrir une lecture fluide et agréable à vos visiteurs, il faut rendre vos textes le plus lisibles possible : d'une part, il est plus fatiguant de lire sur écran que sur papier, et en outre beaucoup de personnes ont une vue basse ou moyenne.
 
Couleurs et tailles

Il est alors important de veiller à ménager un fort contraste entre la couleur du texte et la couleur de fond. 
La solution la plus efficace est l'écriture noire sur un fond de page blanc. Si vous vous éloignez de ce standard, soyez prudent sur le choix de vos couleurs et pensez à préserver un fort contraste clair/foncé. Privilégiez les fonds clairs, les fonds foncés ont tendance à davantage fatiguer les yeux.
Souvenez-vous que d'instant l'œil évite les zones sombres et se dirige vers les zones claires.
La taille des écritures détermine également sa lisibilité. Une écriture trop petite décourage la lecture. Vos paragraphes doivent être au minimum à 12 pixels et atteindre jusqu'à 16 pixels pour une lisibilité optimale.
 
Police d'écriture
Pour les textes courants, il est fortement recommandé d'utiliser des polices de caractère bâton, de style Arial, Verdana, Helvetica. Si vous souhaitez utiliser une police stylisée, privilégiez-la plutôt pour les grands titres,  car elle est moins lisible et ne facilite pas la lecture de textes longs.

Vous pouvez tester la lisibilité de vos textes, grâce à plusieurs outils en ligne, comme http://​colorsafe.​co/ (en) qui est mesurée à partir des niveaux de conformité officielle du web.
 

Et sur Quomodo ?

  • Les couleurs Quomodo s'adaptent automatiquement, de façon que les textes conservent une lisibilité parfaite, quelle que soit la couleur du fond sur lequel ils se trouvent.
  • Dans le panneau Habillage, vous pouvez également choisir, parmi une sélection, une police optimisée pour vos contenus et une police compatible, identique ou différente, pour vos titres.

Règle n°5
Veiller à la
cohérence graphique

Un site web doit avoir un habillage graphique cohérent. Les styles de présentation, les couleurs, les tailles, les polices d'écritures... doivent être homogènes sur toutes les pages de votre site.
Pour cela il faut d'abord élaborer une « charte graphique ». La charte graphique a plusieurs enjeux et joue un rôle important dans l'impression que vont avoir les internautes en arrivant sur votre site :
  1. Elle renforce l'identité de votre marque

    Tout projet, organisation ou entreprise dispose d'une identité visuelle afin d'être reconnu par les clients ou partenaires. On l'identifie par un nom, un logo mais aussi par des couleurs, une typographie spécifique ou des formes graphiques qu'on retrouve sur tous les supports de communication de la marque, y compris le site internet. En appliquant sur votre site une charte graphique définie à partir de votre identité visuelle, vous renforcez votre image et votre crédibilité.

  2. Elle donne des repères visuels

    Garder une cohérence visuelle a également un impact sur l'ergonomie de votre site. Une homogénéité entre vos pages facilite la navigation et la lecture grâce à l'utilisation de repère visuels. Lire aussi règle n°3 donner des repères. L'utilisateur va par exemple mémoriser la couleur que vous avez donnée aux liens puis facilement les repérer si elles sont répétées sur toutes vos pages.
 

Et sur Quomodo ?

Vous pouvez modifier le design de votre site dans le panneau habillage.
  •  Afin de coller au mieux à votre image, une sélection de designs vous est proposée en fonction de critères correspondant à vos valeurs et à vos objectifs. Ces critères détermineront l'ambiance générale de votre site.
  • Chacune design possède ses styles de textes, de smartnotes et de sections, vous permettant de garder une cohérence sur l'ensemble de vos pages et d'élabore votre charte graphique.
  • Choisissez vos couleurs et polices, elles s'adapteront automatique à votre design ainsi qu'à l'ensemble de votre site.

Règle n°6
Utilisez
des visuels de qualité

Une nouvelle tendance se dégage depuis ces dernières années. Les sites accordent de plus en plus d'importance aux images : photos, vidéos, illustrations, infographies, icônes, ... permettant de compléter ou remplacer un texte.
Cela s'explique, tout d'abord, par les progressions technologiques qui nous permettent de consulter des sites plus riches qu'auparavant, et plus particulièrement, à l'évolution de nos attentes face à un site web. Les internautes sont plus réceptifs aux images qu'aux textes, car elles sont plus attrayantes et leurs permettent de repérer et mémoriser une information rapidement et sans effort de lecture.
 
Photos 

Il est donc nécessaire d'étoffer votre site de photos de qualités, afin de :
1. Faire passer un message :
Illustrez vos propos par une image cohérente, afin de favoriser l'attention et la compréhension de votre message à vos lecteurs.
2. Créer une ambiance :
Plus particulièrement en fond, les larges images ont un côté immersif et rendent vos pages plus séduisantes. Dans ce cas, choisissez de préférence une image en haute résolution (1800 x 1200px minimum)  qui met en valeur votre texte sans que cela puisse désavantager sa lecture.

Notez tout de même que l'abus d'images peut freiner le chargement des pages.
 
Icônes
Utiliser des pictogrammes ou icônes, peuvent également aider vos utilisateurs à saisir et comprendre une information.
On peut les utiliser, accompagné d'un texte ou seule intégrant par exemple un lien. Dans ce cas, faites attention au choix de votre symbole graphique, certaine icône sont comprise différemment du sens qu'on lui attribue. Notamment pour le web, il est recommandé de suivre les normes les plus acquis, pour garantir son efficacité. Dont les plus connus :
 
une loupe : pour symboliser une fonction de recherche,
 
une maison : pour symboliser la page d'accueil,
 
une enveloppe : pour symboliser un contact e-mail.
 

Et sur Quomodo ?

  • Dans votre panneau Habillage, vous pouvez choisir les images de fonds préconisées par le design sélectionné. Elles doivent être choisies avec soin, car elles seront répétées sur toutes vos pages : fond de site, de bannière, de pied de page, ...
  • Utilisez l'outil Effets pour rendre vos images plus discrètes, permettant de donner plus de visibilité à vos contenus.
  • En fonction de votre design, certaines sections de la page proposent également, d'y intégrer une image en fond, via la palette de gauche. Vous permettant de déposer du contenu par-dessus.

Règle n°7
Rendez votre
site accessible à tous

Un site doit pouvoir être visible et utilisable par tout type de personne sur tout type de matériel.
Il est important, dans un premier temps, de comprendre qui sont vos visiteurs et d'optimiser votre site web, pour qu'il leur soit accessible, quel que soit :
 
Leurs niveaux avec les nouvelles technologies

Que ce soit pour des seniors ou des débutants du web, élaborez une navigation claire et simple accompagnée de liens facilement repérables.
 
Leurs handicaps

Les personnes ayant des difficultés à voir, entendre ou bouger ne sont pas à négliger, car ces handicaps touchent un grand nombre de personnes. Plusieurs solutions sont prévues pour améliorer l'accessibilité, grâce au code html de vos pages. D 'une manière plus générale, privilégiez la lisibilité et les textes alternatifs sur des images, sons ou vidéos. Pour en savoir plus : Introduction à l'accessibilité
.
 
Le matériel utilisé

La taille de nos écrans diffèrent et les sites sont de plus en plus consultés sur mobile ou tablette. il est donc important que votre site web soit adapté sur les différents formats, pour que les internautes puissent le visualiser et l'utiliser peu importe l'appareil qu'il utilise.
 
Le navigateur utilisé

Une page web est interprété différemment, selon le navigateur : Google, Mozilla Firefox, Internet Explorer, Safari, etc... La conception d'une page en html doit être optimisée sur plusieurs navigateurs afin que les internautes n'aient pas de problème d'affichage.
 
Autres

D'autres critères peuvent également être pris en compte en fonction du profil de vos utilisateurs comme la langue parlée ou encore, l'environnement dans lequel il pourrait se trouver. Un visiteur dans un lieu bruyant ne pourra, par exemple, pas écouter de sons ou vidéo.
 

Et sur Quomodo ?

La technologie de Quomodo, en constante évolution, permet d'optimiser l'accessibilité de votre site.
En effet les designs proposés assurent une bonne navigation et lisibilité. Vos pages sont également visibles sur la plupart des navigateurs et s'adaptent gratuitement en version mobile.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Conseils de design web
Conseils de design web, propose des conseils simples de web design afin de créer son site soi-même.
Retrouvez des articles sur les règles et les tendances du webdesign, des exemples de sites pour vos inspirations, des ressources et outils pour vous aider à réaliser le design de votre site.
               
Copyright © 2016 Quomodo Agence Web Paris