Sur Webarcana, je vous parle beaucoup de webdesign. Rien d’étonnant à cela : c’est à la fois ma passion et mon métier ! Mais je réalise que je n’ai encore jamais pris le temps de définir avec vous les bases et les grands principes du webdesign.

C’était une erreur (que je vais m’empresser de corriger) et voici pourquoi :

Quand j’ai commencé à m’intéresser à la création de sites web, une seule chose me préoccupait : les aspects techniques. Je devais apprendre à maîtriser les logiciels-clés et les différents langages (HTML, CSS, PHP, Javascript) pour créer un site. Le reste était surtout une question de feeling.

J’adore découvrir de nouveaux sites, adapter ou inventer de nouvelles présentations pour mes créations. J’ai donc commencé à travailler d’instinct, pour moi-même et pour des amis.

Mais quand je me suis formée pour devenir webdesigner, j’ai appris les fondamentaux de ce métier et ça m’a apporté un cadre, grâce auquel j’ai progressé rapidement. J’ai réalisé que pendant des années j’avais ignoré les grands principes du domaine qui me passionnait.

Et cela m’avait beaucoup freinée dans mon apprentissage.

Pour vous éviter le même écueil, je vais partager avec vous 4 principes incontournables pour la pratique du webdesign.

Qu’est-ce que le webdesign exactement ?

Mais avant tout et pour éviter de possibles confusions, j’aimerais définir avec vous ce qu’est le webdesign.

Dans l’esprit de beaucoup de gens, un webdesigner, c’est une personne qui crée des sites web. Bien sûr, il y a une bonne part de vrai dans cette idée. Mais il faut la préciser.

En réalité, le webdesign n’est qu’une partie du process de création d’un site.

Dans une agence web de taille moyenne ou grande, le webdesigner n’est donc qu’un maillon de la chaîne humaine qui produit les sites web. Il va analyser la demande et les besoins du client pour les traduire graphiquement.

Il utilise des outils comme Illustrator et Photoshop afin de réaliser la charte graphique et les maquettes du site. Une fois qu’il a réalisé une maquette pour chaque page importante (accueil, produit, contact, etc.), il passe la main à l’intégrateur.

Ce dernier va s’occuper de transformer la conception visuelle en site web réel. L’intégrateur utilise donc des outils différents.

C’est lui qui va paramétrer le CMS (content management system, par exemple WordPress), produire le code (CSS, HTML, PHP) et mettre en ligne les images du site (logo, boutons de navigation, bannière…) afin que tout corresponde exactement au résultat prévu par le webdesigner.

Certaines commandes impliqueront aussi l’intervention d’un développeur web. Celui-ci va coder des outils avancés et personnalisés (un plugin, par exemple) pour les besoins spécifiques du client.

Autrement dit, le webdesign concerne uniquement la conception graphique du site, tandis que l’intégration et le développement constituent de la partie technique.

Bien sûr, dans de petites structures comme Webarcana (je travaille en freelance), une seule personne va souvent gérer tous ces aspects. Mais il est important de bien distinguer chaque phase si on veut créer un site web pertinent.

Je procède donc d’abord à la conception graphique des maquettes sous Illustrator et Photoshop (partie webdesign) et ensuite seulement je passe sous WordPress (partie intégration).

Et je vais donc vous parler aujourd’hui de la première phase de mon travail.

Quatre principes pour les gouverner tous

Évidemment, je ne pourrai pas traiter ici de tous les aspects du webdesign. Mais quatre éléments me semblent indispensables à connaître pour aborder la création graphique de sites web. Les voici !

1. Systèmes de grille

Depuis l’invention du codex au premier siècle de notre histoire, la grille détermine la manière dont nous lisons. Des milliers de variations, impliquant différents arrangements de lignes et de colonnes, sont apparues au fil du temps.

Pensez à la façon dont le texte et les images sont agencés dans les livres, journaux et magazines. Ces systèmes ont été portés plus ou moins directement sur le web et ils sont efficaces.

Il peut être tentant, quand on a un tempérament créatif, de chercher à éviter le principe de la grille. De nombreuses tentatives ont été faites.

Mais la réalité est là : la plupart de ces sites, parfois très beaux et originaux, ont peu de visites. On vient parfois les voir pour le plaisir des yeux, mais on s’intéresse assez peu à leur contenu.

Et pour cause. Malgré leurs qualités visuelles, ils sont la plupart du temps illisibles.

Aujourd’hui, il est plus fréquent que les visites proviennent de navigateurs sur smartphones et tablettes que d’ordinateurs de bureau. La question du « responsive design » – le design adapté pour rendre la navigation agréable sur les écrans de petite taille – est incontournable.

Cela ne remet pas en cause le principe du système de grille. Bien au contraire :

Pour nous faciliter la vie, un grand nombre de systèmes de grille pré-fabriqués ont été créés ; ils sont responsive, compatibles avec la plupart des langages web et généralement gratuits à télécharger.

Parmi les plus populaires, on trouve 34grid, Flexbox ou responsivegridsystem.

Bien entendu, si vous avez un tempérament aventureux ou sentez que votre projet doit faire appel à une solution vraiment unique, vous pouvez créer le vôtre !

Personnellement, je n’utilise pas de système de grille spécifique (Photoshop est doté d’outils basiques pour l’alignement). Mais je garde en tête les fondamentaux. Aligner, structurer, ordonner les éléments sous forme de grille, afin de les rendre plus lisibles et harmonieux.

2. Hiérarchie visuelle

La hiérarchie visuelle est un vaste sujet qui mériterait un article à part entière, mais je vais me contenter ici d’en rappeler les bases.

Appliquer une hiérarchie visuelle dans vos pages web consiste à :

• classer les informations à transmettre par ordre d’importance
• les indiquer clairement au lecteur en adoptant des stratégies de mise en valeur visuelles

Pour commencer, il faudra choisir l’endroit de la page où placer les éléments les plus importants.

Dans la plupart des cultures, la lecture se fait de la gauche vers la droite et du bas vers le haut. Nous savons aussi qu’à l’intérieur de ces paramètres, la lecture d’un document fait appel à des règles beaucoup plus complexes.

C’est tout particulièrement vrai sur internet, où les visiteurs « scannent » les pages, beaucoup plus qu’ils ne les « lisent ».

Les bons sites web prennent en compte ces schémas de lecture avancés en plaçant les éléments importants, tels que le logo, les call to action (boutons d’appel à l’action) et les images-clés le long des axes habituellement parcourus par les yeux des utilisateurs.

Mais l’emplacement ne fait pas tout.

La hiérarchie visuelle emploie des stratégies complémentaires pour mettre en valeur vos éléments-clés :

• Taille de la police de caractère
• Choix de la police elle-même
• Graisse (épaisseur) de la police
• Couleur de l’élément
• Espacement (un élément bien démarqué du contenu se remarque mieux)
• Texte court et percutant, facile à lire d’un coup d’œil
• Élément dynamique (vidéo / GIF)

Bien entendu, tout est dans la mesure !

Les visiteurs connaissent les codes intuitivement et n’apprécient pas les designs hyper agressifs.

Une police grasse, bien ronde, vers le milieu de la page avec une bonne aération fera passer un message fort. Inutile de l’insérer dans un immense bouton clignotant.

3. Choisir les bonnes polices web

Le terme « police pour le web » sonne déjà comme un anachronisme.

Mais aux débuts d’internet, les navigateurs ne proposaient qu’une quantité très limitée de polices – typiquement, celles qui étaient installées sur le logiciel de traitement de texte de l’ordinateur.

Et si vous sortiez des sentiers battus, certains visiteurs voyaient s’afficher à l’écran une série de symboles aléatoires…

Aujourd’hui, il est toujours vrai que certaines polices sont mieux gérées que d’autres par les navigateurs. Mais le nombre de polices web a explosé. Les webdesigners se trouvent même parfois débordés par les choix qui s’offrent à eux !

Les polices web gratuites ont augmenté en proportion. Vous en trouverez facilement en utilisant des services comme Google Fonts.

Pour certains sites pros aux besoins précis, une police payante sera plus indiquée. Mais pour commencer, une police gratuite est souvent suffisante.

Pour vous aider dans vos choix de polices, voici quelques règles à connaître.

Les polices Serif sont réservées aux titres

Dans le web design, les polices Serif (avec empattement) sont plutôt réservées aux titres. En effet, elles sont plus difficiles à lire quand elles ont une petite taille. Le corps de texte (contenu des paragraphes) devrait toujours être Sans Serif.

Limitez le nombre de polices

Pour améliorer la cohérence visuelle et éviter d’envoyer trop de signaux contradictoires à vos visiteurs, je vous conseille de limiter fortement le nombre de polices différentes pour l’ensemble de votre site.

Deux ou trois polices suffiront la plupart du temps. Au-delà, vous risquez de perdre vos visiteurs – et vous avec !

Optez pour la légèreté

Pensez aux appareils mobiles qui peuvent avoir un débit limité selon les endroits. Certaines polices sont beaucoup plus lourdes que d’autres et c’est un critère qu’on oublie souvent de prendre en compte.

Essayez donc de trouver des polices légères, faciles à charger, pour fluidifier la navigation.

4. Images et couleurs

Les principes du choix des images et des couleurs ne sont pas spécifiques au web. En fait, ils s’appliquent de la même façon sur tous les supports (print ou web).

Une chose essentielle à retenir : n’en faites pas trop !

Là aussi, il faut savoir se limiter à quelques couleurs-clés et des images bien choisies aux bons emplacements. Dites peu, mais dites-le bien.

Pour les couleurs :

Palette de couleurs minimaliste

Concentrez-vous sur deux ou trois couleurs principales, qui fonctionnent bien ensemble. Elles devront faire écho au branding de la marque ou du projet. Vous les utiliserez pour mettre en avant les zones importantes, comme évoqué dans la partie « Hiérarchie visuelle ».

Avec un peu de maîtrise, vous pourrez chercher jusqu’à deux couleurs complémentaires (généralement des variantes assez proches des principales) pour apporter un peu de relief aux éléments secondaires.

Pensez au daltonisme

5 % de la population masculine est daltonienne à divers degrés.

C’est un élément rarement pris en considération… Pourtant, si votre cible est mixte et plus encore si elle est à forte tendance masculine, il ne faut pas l’oublier !

Si c’est le cas, voici quelques conseils basiques :

• Augmentez la saturation des couleurs
• Augmentez le contraste entre les couleurs similaires
• Augmentez la luminosité des couleurs claires et diminuez celle des couleurs foncées
• Accordez davantage d’importance aux formes et aux séparateurs dans votre stratégie visuelle

Pour les images :

Limitez le mouvement à l’essentiel

Dynamiser un site, c’est important. Cela lui donne vie et inspire positivement vos visiteurs. Mais réservez le mouvement à un nombre limité d’éléments (là encore, voir la section « Hiérarchie visuelle »).

Une bonne vidéo, si elle est pertinente, aura des effets positifs à condition d’être mise en valeur correctement et bien insérée dans la page.

Mais évitez de céder à la tentation du flashy. Un élément dynamique à la fois, au maximum. Réservez-les pour les endroits-clés de votre site.

Même les gifs sont très discutables, s’ils ne sont pas utilisés avec les plus grandes précautions. Pour conserver votre cohérence et ne pas perturber vos visiteurs, gardez la maîtrise du mouvement.

Choisissez vos images avec soin

N’utilisez pas les images simplement pour remplir l’espace. Les visiteurs s’en rendront compte immédiatement et perdront beaucoup de leur intérêt pour votre page.

Au lieu de cela, choisissez vos images avec soin. Utilisez-les pour communiquer de l’information utile. Dans l’idéal, chaque illustration devrait éclairer vos propos ou les compléter.

Dans tous les cas, évitez toute image sans lien direct et évident avec votre texte.

Pensez aux droits liés aux images

Faites attention aux droits des images que vous employez.

Il est encore trop courant aujourd’hui que des images professionnelles soient reprises sans autorisation et sans crédit. Il existe pourtant de nombreux stocks de photos libres de droits ou requérant uniquement de votre part un lien vers l’auteur et le site.

Pour les images-clés, vous pouvez envisager d’acheter quelques photos sur des stocks payants comme Shutterstock.

Ces dernières sont souvent d’excellente qualité et beaucoup mieux ciblées sur toute une variété de sujets. Cela vaut la peine pour les images importantes de votre site pro, celles qui sont liées à vos pages-clés (il ne vous en coûtera généralement pas plus que quelques dizaines d’euros en tout).

Et n’oubliez pas que vous pouvez être poursuivie si vous ne respectez pas les droits liés aux images, surtout si vous gagnez de l’argent (directement ou indirectement) grâce à votre site.

Limitez la taille des images

Plus encore que les polices, les images et les vidéos sont souvent le gros problème du temps de chargement d’un site. Là encore, pensez aux appareils mobiles, qui représenteront probablement l’essentiel de votre trafic.

Utilisez des images simples et percutantes, car il faudra toujours en limiter la taille et la résolution.

Principes du webdesign :  le mot de la fin

J’espère que ces principes fondamentaux du webdesign vous seront utiles. En respectant ces quelques règles de base, vous serez déjà sur la bonne voie !

 

Sources.