Les 5 règles d'or du Web Design

Bonjour à tous et bienvenue dans cet article sur le Web design. Aujourd’hui nous allons découvrir ensemble Les 5 règles d’or du Web Design. Le but de cet article est de vous faciliter la vie tout en vous donnant les moyens de réaliser vos contenus sur le Web en y appliquant les règles du Web design en matière de contenu et de présentation. En 2019, le contenu est roi et ce n’est pas un hasard si le Web regorge aujourd’hui de sites internet plus prolifiques les uns sur les autres.
Mais suffisamment parlé. Passons au sujet qui nous intéresse.

Règle n° 1 - POINT TROP DE POLICES TU N'UTILISERAS

Les 5 règles d'or du Web design. Règle 1 : les polices de caractères
Copie d'écran de l'interface principale de Google Fonts

Un site internet est un container qui comprends plusieurs types d’informations. Du texte, des liens, des images et des vidéos. La première règle d’or du Webdesign concerne les polices de caractères.

Un héritage qui remonte au temps où les machines d’imprimerie crachaient leurs caractères sur des rames de papier bien alignés. De cette époque, il en reste ce que l’on appelle les polices de caractères. Elles ont pour but de faire varier la représentation visuelle des contenus textuels. Elles sont généralement classées par famille, les cursives rappellent les écritures faites a la main, avec des pleins et des déliés, les serif et les sans serif ont des empattements différents suivant les caractères et certaines polices ont un espacement fixe entre les caractères lorsque les autres ont des espacements variables. Je ne peux que vous inciter a parcourir le contenu de Wikipédia a ce sujet: https://fr.m.wikipedia.org/wiki/Police-decriture si vous souhaitez en apprendre plus sur les fonts ( polices de caractères en anglais).

En matière de Web Design, la police de caractères est la brique de base. Elle participe à définir le style de votre site internet.

Un blog journalistique, un site de vente de fleurs, ou tout autre site se doit dans sa charte graphique de définir une ou plusieurs polices de caractères. Ton meilleur ami (mais aussi ton pire ennemi est GOOGLE FONTS).

Il est ton meilleur ami car il regorge de polices de caractères vraiment différentes les unes des autres (952 polices au 21/08/2019). Tu vas avoir l’embarras du choix. Et c’est bien là le problème! Trop de choix tue le choix. Alors il va te falloir faire un tri drastique afin de ne garder qu’une ou deux polices de caractères. Donnes-toi les moyens de les sélectionner. Grasse ou maigre, à empattement, largeur fixe, tous les choix sont permis. L’important est que les polices sélectionnées s’harmonisent bien entre elles. IL faudra le vérifier en tapant des textes en minuscule, en majuscule et surtout avec des accents pour être sûr que la police les gère (et oui les anglo-saxons n’utilisent pas d’accents sur leurs caractères).

En matières de polices de caractères la règle est:

1 – On choisit une police pour les titres.
2 – On choisit une autre police pour les contenus.

Appliquer cela et vous irez dans la bonne direction. Un premier pour devenir un vrai Web Designer est de n’appliquer que ce qui est simple. Retenez ce conseil.

Régle n° 2 - LA COHÉRENCE DES COULEURS TU CHERCHERAS

Les 5 règles d'or du Web design. Règle 2 : les couleurs
Paletton, le compagnon de votre colorimétrie

S’il y a un autre domaine qui va vous donner du fil à retordre, c’est bien la gestion de vos couleurs. C’est totalement subjectif et parmi 16 millions de couleur, trouver les bonnes relève parfois du véritable défi. Heureusement qu’il existe quelques outils pour tenter de rationaliser cela. PALETTON en fait partie et grace à lui vous allez pouvoir vous créer des palettes de couleurs dignes des plus belles productions hollywoodiennes. Laissez-vous guider, notez les références de couleur et encore une fois privilégiez la simplicité.

Pour vous guider dans cette mission, recherchez des couleurs complémentaires, qui mettent en valeur votre contenu sans en diminuer l’intensité. Il n’est pas nécessaire d’avoir une palette de peintre avec 300 nuances, 2 voire 3 couleurs suffisent généralement. En ce sens, PALETTON est vraiment un outil intéressant.

Pour une approche plus globale de l’utilisation des couleurs et de leurs impact je vous recommande vivement de lire l’article le guide complet du code des couleurs : usages et significations qui vous donnera toutes les clés pour comprendre et  utiliser au mieux les couleurs dans vos mises en page.

Règle n° 3 - DE BELLES IMAGES TU UTILISERAS

Un Site internet sans image c’est un peu comme une soupe sans eau! Pas super comme recette. A moins d’avoir comme but la réalisation d’un site uniquement composé de textes, vous aurez bien souvent le problème du choix des images. En matières de Web Design, l’image est reine (et le contenu est roi). Deux solutions s’offrent à vous. Intégrer des images issues de l’appareil photographique d’un professionnel de l’image. C’est beau, c’est très beau et ça a un prix, ou choisir des images dans une banque d’images. C’est beau, c’est un peu généraliste comme approche, ça ne coûte pas grand chose.

Dernière solution, utiliser des images libres de droit. C’est peut-être la première recherche à faire avant d’envisager d’acheter ou de faire réaliser de belles photos.

Faites un tour sur ce site internet pour découvrir les 50 meilleures banques d’images libres de droit et gratuites.

MON CONSEIL

Cherchez votre bonheur sur PIXABAY. Il existe également le plugin pour WordPress pour accéder en direct à plusieurs millions d'images libres de droit.

Les 5 règles d'or du Web design. Règle 3 : les images
Une belle image vaut mille beaux discours

Règle n° 4 - CLAIR SERA TON OBJECTIF

Les 5 règles d'or du Web design. Règle 4 : votre Objectif
Pensez toujours à l'objectif de votre mise en page

Vos textes préparés, vos images choisies, il ne reste plus qu’à mettre tous ces éléments en scène en utilisant la palette du Web Designer perspicace et professionnel.  Alors, une pincée de texte en majuscule, un soupçon d’espacement puis on remue le tout et on y ajoute une image avant de servir bien chaud. Un cocktail précis. A ce titre tout est possible, même l’impossible à condition que votre Objectif reste clair et visible. La mise en page de votre Site internet doit être au service de votre contenu. En d’autres termes faire beau pour le seul plaisir de la beauté n’a pas de sens ici. Ce serait plutôt faire beau pour être efficace. Vous me remercierez quant viendra le temps du référencement.

Régle n° 5 - DE COLONNES EN SECTIONS TU T'ORGANISERAS

Les 5 règles d'or du Web design. Règle 1 : la grille de contenus
La mise en page: une affaire de grille

C’est évidemment pour simplifier, codifier et structurer les sites internet qu’aujourd’hui les thèmes et les outils se basent sur une grille. C’est simple et efficace. Ne reste plus qu’à disposer votre contenu, les textes, les images sur cette grille et vous tenez votre mise en page.

En mode Responsive, le Site internet va s’adapter au Smartphone et affichera alors une seul colonne là où il en affichera 4 sur l’écran de votre ordinateur. En d’autres termes la grille s’adaptera au média.

MON CONSEIL

Ne multipliez pas les colonnes et pensez au rendu sur Smartphone. Généralement composées de plusieurs colonnes, l'affichage sur Smartphone se limite souvent à une seule colonne et les contenus se retrouvent alors juxtaposés.

POUR CONCLURE

Être Web Designer c’est avant suivre la devise THINK OUTSIDE THE BOX, que nous pourrions traduire par SAVOIR JUSQU’OÙ NE PAS ALLER.

C’est aussi appliquer Les 5 règles d’or du Web Design tout en se conformant aux les règles édictées par le W3C et en essayant d’imprimer sa patte, son style. La touche unique de sa créativité. Alors oui, quand on crée un Web design on fait des compromis. Et justement cet art qui consiste à mêler créativité et contraintes c’est la base du métier. Un métier à la fois complexe et compliqué mais tellement passionnant.

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

bons design à tous !

Cet article a 1 commentaire

Laisser un commentaire

Partager sur facebook
Partager sur twitter
Partager sur linkedin