Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

Web design : comment utiliser un arrière-plan noir ?

Nous l’avons vu dans un article précédent : en webdesign, ce qui est le plus important, pour choisir un arrière-plan, c’est la...

Publié par Melanie De Coster

Nous l’avons vu dans un article précédent : en webdesign, ce qui est le plus important, pour choisir un arrière-plan, c’est la lisibilité.

Comment, dans ce cas, utiliser un arrière-plan sombre, plébiscité par toute une tranche d’internaute ? Peut-être en s’appuyant sur les conseils de cet article.

Jouez sur les contrastes

Le contraste est ce qui va permettre d’améliorer la lisibilité. C’est pour cette raison qu’un texte noir sur fond clair est aussi lisible.

Sur un arrière-plan noir vous aurez intérêt à utiliser les couleurs suivantes, qui trancheront plus que les autres :

  • Le blanc
  • Le rouge
  • L’orange
  • Le jaune
  • Le vert
  • Le violet
Webdesign noir rouge

Source : And Co

Si vous creusez un peu la question, vous n’allez d’ailleurs pas tarder à vous rendre compte qu’il y a plus de couleurs qui ressortent bien sur un fond sombre que sur un fond clair. Vous aurez donc une palette plus complète à votre disposition !

Mais vous pouvez encore améliorer ces effets…

Comment améliorer les contrastes ?

Le noir a tendance à avaler le texte qu’il contient. Vous aurez donc tout intérêt à utiliser des polices de caractère plus épaisses (eh oui, le noir fait même mincir la typographie !)

Pour le confort des yeux, il est aussi conseillé d’obscurcir un peu vos textes : oubliez le blanc éclatant et ajoutez-lui 5 % de gris. Il sera toujours vu comme du blanc, mais il fera moins mal aux yeux. De même, sombre ne veut pas uniquement dire noir !

Pensez également à prévoir suffisamment d’espace entre les différents éléments : le noir absorbe la luminosité de chacun d’entre eux, et cet espace supplémentaire leur permettra de mieux ressortir.

Webdesign noir et jaune

Source : Digital Bro

Quels sont les éléments qui ressortent mieux sur fond sombre ?

Ce n’est pas pour rien que les portfolios, y compris papier, sont souvent présentés sur un fond noir. Les teintes sombres font ressortir ce qui est posé sur elles.

Et c’est ainsi qu’en webdesign, vous aurez tout intérêt à privilégier le même principe pour mettre en avant vos images, photos et designs divers. Même un graphique prend une tout autre apparence dans ces circonstances.

Datavisualisation fond noir

Source : Who Cares

Attention
Si vous avez besoin de fournir de longues pages de texte, vous auriez intérêt à opter pour un fond clair (ou à prévoir un cadre de texte blanc sur votre arrière-plan, le cas échéant).

 

Un arrière-plan sombre, profondément sombre, créera une atmosphère de luxe, de sérieux, d’élégance même à votre site web. Il attirera le regard, amènera l’internaute à se concentrer, à accorder plus d’intérêt à votre contenu.

Ce type de fond permet aussi d’améliorer la perception de la hiérarchie visuelle. À condition, comme toujours dès que l’on parle d’interface web, de l’avoir testée sur tous les supports et types d’écrans, d’avoir réfléchi aux circonstances habituelles dans lesquelles elle sera utilisée… et à ne pas trop charger la page.

Si vous avez suivi tous ces conseils, alors seulement, vous pourrez penser à passer du côté obscur.

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Créer et configurer ses scènes Twitch

Scène de démarrage, de pause, de fin de stream, de discussion, ou encore scène de jeu… Avant de débuter votre stream, vous devez nécessairement créer et configurer toutes...

Publié le par Solenne Ricard
Graphisme

Comment créer un menu burger sur Figma ?

Un menu burger peut être complexe à développer, c’est pourquoi réaliser sa maquette sur Figma en amont est pertinent. Pour élaborer votre menu burger, vous pouvez faire appel à un...

Publié le par Laura