Dans une enquête d’avril 2012, le Pew Research Center a révélé que 82% des Américains de plus de 18 ans ont accès à Internet à la maison, et dans la catégorie des 18 à 29 ans, les statistiques ont atteint 97%. Avec autant de personnes en ligne ces jours-ci, avoir un site Web est plus important que jamais. Heureusement, il n’est pas trop difficile d’apprendre à créer un site Web. Si vous êtes prêt à créer votre propre site, il est important de connaître – et de suivre – les règles de conception Web de base qui rendent un site plus facile à naviguer et visuellement agréable.
Table des matières
Règles de conception Web importantes
Dans le monde de la conception Web, il existe des règles qui doivent être suivies afin de maximiser l’attrait visuel et de rester en dehors des listes comme WebPagesThatSuck.com. Ces règles peuvent inclure n’importe quoi, des jeux de couleurs et des images aux points de style de conception.
Images du site Web
Les graphiques que vous utilisez sur votre site Web racontent une histoire. Vous aurez besoin d’images uniques ou de stock qui se rattachent au thème de votre site Web. Considérez ces images comme une fenêtre d’affichage pour votre site Web. Un site Web qui a des murs nus semble inachevé aux visiteurs du site. Dans le même temps, un site avec trop d’images peut être lent à charger et frustrant pour les utilisateurs qui sont toujours en ligne. Certaines règles à suivre pour les images incluent:
- Utilisez des images .JPG ou des images .GIF car la plupart des ordinateurs peuvent les afficher.
- Adaptez la résolution aux paramètres graphiques du site Web pour un chargement plus rapide. Vous pouvez le faire avec à peu près n’importe quel éditeur d’image ou via des sites de retouche photo en ligne comme LunaPic ou PicMonkey.
- Utilisez les images avec parcimonie, pour éviter l’encombrement tout en conservant un attrait visuel.
- Évitez de charger des pages avec des images utilisant du flash ou des animations, car elles ont un impact négatif sur la vitesse du site et peuvent être gênantes.
- Utilisez la règle des tiers pour créer un look visuellement attrayant. La règle est composée d’une grille imaginaire qui se trouve au-dessus de n’importe quelle image et la divise également en trois blocs à travers et trois vers le bas. L’œil du spectateur est d’abord attiré vers le haut à gauche et moins vers les trois blocs du milieu. Cette règle peut vous aider à placer les informations les plus importantes là où elles sont le plus susceptibles d’être vues.
- N’encombrez pas la page d’images qui ne sont pas importantes pour votre site Web, comme une photo du nouveau chien de votre meilleur ami. Gardez les images concentrées sur le sujet du site Web.
- N’utilisez pas d’images d’arrière-plan à moins de les superposer dans un tableau CSS et de les avoir uniquement autour de la bordure où il n’y a pas de texte. Les images d’arrière-plan en plein écran peuvent être gênantes.
Schéma de couleur
Les couleurs que vous utilisez sur votre site sont très importantes pour la sensation et le style de votre site. Si vous utilisez des images pour encadrer votre page, vos couleurs doivent compléter ces images plutôt que de les heurter. Les règles à respecter lors du choix des couleurs pour votre site incluent:
- Utilisez une roue chromatique pour vous aider à sélectionner les couleurs. Ce type d’outil vous dira quelles couleurs vont bien ensemble et quelles couleurs ne fonctionneront tout simplement pas.
- Évitez les couleurs trop vives ou trop chargées. Par exemple, le jaune fluorescent n’est jamais une bonne idée, ni les motifs qui détournent l’attention du contenu du site.
- Pour un impact maximal, utilisez du texte sombre sur un arrière-plan de couleur claire, comme le noir sur blanc.
- N’utilisez pas de texte blanc sur noir, sauf très occasionnellement, car il est difficile à lire et peut fatiguer les yeux.
- N’utilisez pas de combinaisons de couleurs qui rendront le texte difficile à lire, comme du texte rouge sur fond noir ou du texte blanc sur fond jaune.
- Évitez d’utiliser des combinaisons rouge / vert et bleu / vert en raison des problèmes que ces combinaisons de couleurs peuvent poser pour les visiteurs du site daltoniens.
Polices
Bien que les polices élaborées puissent sembler belles, elles ne sont pas de bons choix pour la conception de sites Web. Optez plutôt pour une police qui sera facile à lire.
- Tenez-vous en aux polices courantes comme Arial, Times New Roman ou Calibri.
- N’utilisez pas de polices de style script, qui peuvent être difficiles à visualiser pour les lecteurs.
- Évitez les polices inhabituelles. Tous les ordinateurs ne reconnaîtront pas les polices non standard, ce qui pourrait empêcher les visiteurs de voir même le texte comme vous le souhaiteriez.
- N’utilisez pas une petite taille de police. En règle générale, évitez d’utiliser des polices de moins de 9 points Tahoma, bien que des tailles plus grandes puissent être meilleures pour certains sites et certains publics.
Même un site magnifiquement conçu peut désactiver les internautes si la navigation sur le site est difficile. De nombreux concepteurs Web respectent la règle des trois clics, qui stipule que les utilisateurs doivent être en mesure de trouver les informations de leur choix en trois clics maximum. En réalité, cela peut être difficile à atteindre. Cependant, c’est une bonne idée de viser trois clics comme idéal. Cela garantira que votre site sera plus facile à naviguer et à utiliser. Suivez quelques règles simples pour permettre aux internautes de se déplacer plus facilement sur votre site.
- En règle générale, limitez les principaux liens de navigation à cinq ou six. Trop de liens peuvent prêter à confusion. Vous pouvez toujours créer des sous-liens sous chacun des liens principaux, comme un lien principal intitulé «services» et des liens secondaires intitulés «création de portfolio» et «conception graphique personnalisée».
- Mettez les liens de navigation sur chaque page de votre site. Si un visiteur clique sur un article, il devrait être en mesure de retrouver facilement son chemin vers la page d’où elle a commencé.
- Incluez un lien « Accueil » dans votre structure de navigation.
- Placez les fonctionnalités les plus importantes en haut de chaque page afin que les utilisateurs n’aient pas à naviguer pour trouver ce qu’ils sont le plus susceptibles de rechercher.
- Ne désactivez pas le bouton « Retour » du navigateur. C’est très frustrant pour les visiteurs du site.
- Répétez les liens de navigation au bas de chaque page ainsi que dans la barre latérale supérieure ou supérieure. De cette façon, si un visiteur du site fait défiler jusqu’à la fin d’un article ou d’une page plus longue, il peut toujours revenir facilement à la page d’accueil ou à une autre zone principale du site.
- Demandez à vos amis et à votre famille de tester la navigation de votre site pour savoir s’ils pensent que la structure du site est facile à naviguer.
Temps de chargement
Presque toutes les personnes qui ont passé du temps en ligne sont tombées sur un site extrêmement lent à charger. Ceci est frustrant et le visiteur du site quitte généralement et se déplace vers un site qui se charge plus rapidement. Selon les experts en marketing Web de ClickZ, même un délai d’une seconde dans la vitesse de chargement peut entraîner un taux de conversion inférieur de sept pour cent. Ne laissez pas cela se produire avec les visiteurs de votre site. Dans une enquête 2012 auprès des utilisateurs mobiles de Keynote Systems, les utilisateurs de tablettes ont déclaré à Keynote qu’ils s’attendaient à ce qu’un site se charge en quatre secondes ou moins ou qu’ils se déplacent vers un autre site. Pour accélérer les temps de chargement:
- N’ajoutez pas de graphiques lourds, tels que des boutons avec JavaScript ou une animation, qui peuvent prendre du temps à se charger.
- Soyez prudent lorsque vous ajoutez des vidéos ou d’autres fonctionnalités multimédias qui pourraient ralentir les temps de chargement.
- N’ajoutez pas de musique de fond que le visiteur ne peut pas facilement désactiver.
- Évitez du tout d’utiliser de la musique, sauf si cela est vraiment nécessaire, car cela ralentira les temps de chargement des pages.
- Évitez d’utiliser Flash ou Java qui pourrait obliger l’utilisateur à télécharger un logiciel pour accéder pleinement à votre page.
- Compressez les images et utilisez CSS pour accélérer les temps de chargement sur les pages suivantes sur lesquelles le visiteur clique.
Rester simple
En fin de compte, la règle du jour est la modération. Gardez le site simple pour qu’il se charge rapidement, quelle que soit la connexion du visiteur. Gardez également à l’esprit la taille du moniteur et utilisez des programmes HTML avec une option de prévisualisation, afin de pouvoir prévisualiser votre site dans différents navigateurs et à différentes tailles. C’est un outil inestimable qui peut vous aider à concevoir votre site pour que tout le monde puisse en profiter. Les meilleures conceptions de sites Web sont celles qui sont simples, mais capables de s’adapter et de se développer à mesure que votre site Web se développe.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
