La formule acceptée pour la conception d'un site Web est un fond blanc, un texte noir ou gris foncé et une coloration de la marque saupoudrée généreusement. La grande majorité des sites Web les plus performants utilisent cette formule à bon escient. Mais est-ce la seule formule qui puisse réussir? Dans cet article, nous allons creuser profondément dans la création d'un design avec un arrière-plan sombre - et pourquoi parfois il est préférable d'utiliser ce concept, car parfois les sites Web avec un arrière-plan sombre peuvent surpasser blanc.
Lancez un thème WordPress, SquareSpace, Webflow, Weebly ou l'un des nombreux autres outils de conception Web et il chargera automatiquement une page avec un fond blanc avec du texte noir. Vous pouvez le changer bien sûr, mais cette combinaison est la norme perçue.
Ça ne doit pas être.
Lorsqu'il est bien fait, un arrière-plan sombre pour un site Web peut fonctionner mieux que vous ne le pensez.
La première préoccupation de toute conception Web est de savoir ce que veut l'utilisateur? Quelles couleurs conviennent au support, à la marque, à l'utilisation prévue, au public cible et qu'est-ce qui fonctionnerait sur les appareils utilisés pour accéder au site?
La plupart des clients supposent que ce sera un fond blanc avec des polices noires ou sombres sans empattement. Cette hypothèse n'est peut-être pas si noire et blanche (jeu de mots).
Pourquoi le blanc?
Il y a deux raisons principales pour lesquelles la combinaison du noir sur blanc est considérée comme la norme.
Mais cela est en fait ancré dans l'histoire: impression et lisibilité.
À l'époque où nous faisions tout sur papier, la couleur blanc cassé du papier signifiait qu'il était plus facile d'utiliser du noir pour l'encre plutôt que de colorer le papier. Vous aviez besoin less teinture et c'était un travail beaucoup plus propre et plus facile. Ces premières brochures imprimées étaient à l'encre noire sur du papier léger et les supports imprimés sont restés ainsi.
L'autre raison est la lisibilité. Pour de nombreux utilisateurs, en particulier ceux sur mobile, le blanc sur sombre ne se lit pas toujours bien. Les personnes ayant une déficience visuelle comme l'astigmatisme ont du mal à discerner un texte blanc sur un fond sombre. Tout ce qui fait que la pupille se dilate comme le fait un écran sombre signifie que la déficience est amplifiée, ce qui rend une page très difficile à lire.
Cependant, un bon design peut surmonter ces lacunes et peut avoir un impact, transmettre des émotions et influencer le visiteur d'une manière qu'un fond blanc ne peut tout simplement pas.
Ce que vous devez savoir sur les arrière-plans sombres
Je dis beaucoup de noir ici et pas de noir.
Le noir est le choix évident pour un fond sombre pour un site Web, mais ce n'est pas votre seule option. Il existe des milliers de variantes d'arrière-plans sombres et le noir n'est que l'une d'entre elles. Le rouge foncé, le vert foncé, le bleu foncé et d'autres peuvent tous fonctionner avec le bon design dans la bonne situation.
Il y a de nombreux aspects à l'utilisation de la couleur dans la conception et je ne vais pas m'étendre sur chacun d'eux ici. Je vais juste me concentrer sur les aspects relatifs aux arrière-plans sombres.
Perception visuelle de l'obscurité
Un sondage très cité mené par ProBlogger en 2009 nous a montré que les internautes ne sont pas aussi favorables aux arrière-plans blancs qu'on pourrait le penser au départ.
Bien qu'il ait maintenant dix ans, le sondage a révélé que seulement 47% des répondants préféraient toujours les arrière-plans clairs. Un autre 36% ont dit que cela dépend du blog, 10% ont dit qu'ils préféraient toujours sombre et 7% ne pouvaient pas décider. La majorité préfère peut-être un fond blanc, mais 43% ont déclaré qu'ils aimaient le noir ou cela devrait dépendre de la conception générale du site.
Un autre sondage quatre ans plus tard chez CSS-Tricks ont constaté que la majorité des répondants préféraient en fait un texte clair sur un fond sombre. Pour être clair, il s'agissait d'un sondage sur l'utilisation d'outils de codage et a demandé quelle configuration les utilisateurs préféraient à leurs éditeurs de code, sombre sur blanc ou blanc sur sombre. Parmi ceux qui ont répondu, 63% d'entre eux préféraient un fond sombre.
L'aspect contraste
Le titre accrocheur 'L'impact des combinaisons de couleurs du texte et de l'arrière-plan des pages Web sur la lisibilité, la rétention, l'esthétique et l'intention comportementale'est une étude intéressante.
Il a examiné comment le contraste entre les couleurs d'arrière-plan et de texte dans une conception Web était le facteur décisif dans sa convivialité et non les couleurs utilisées. Nous ne parlons pas ici d'esthétique, mais simplement de convivialité.
L'étude a révélé que la polarisation influençait davantage la lisibilité que la couleur réelle de l'arrière-plan. Ainsi, le blanc sur noir est tout aussi efficace que le noir sur blanc tant qu'il y avait suffisamment de contraste entre les deux couleurs, la lisibilité, la lisibilité et la facilité d'utilisation sont maintenues.
Le contraste est extrêmement important dans la conception Web.
Certains sites Web modernes essaient d'utiliser des conceptions à faible contraste avec des résultats mitigés. Même Apple l'ont essayé avec quelques pages sur leur propre site Web.
Les pages à faible contraste sont plus difficiles à lire, ne fonctionnent pas pour les malvoyants et nécessitent plus d'efforts de la part du lecteur pour les comprendre. Rien de tout cela ne permet une bonne conception de la page.
Cela va à l'encontre de l'aspect contraste et c'est le lecteur qui en souffre. À mon avis, peu importe si vous utilisez l'obscurité sur la lumière ou la lumière sur l'obscurité tant que le rapport de contraste est aussi large que possible pour améliorer la lisibilité.
L'aspect lisibilité
Les arrière-plans sombres peuvent être le choix de conception parfait dans certaines situations.
Les sites Web contenant beaucoup de texte ne font pas partie de ces situations. Alors que le contraste a une plus grande influence sur la lisibilité d'une page, le choix de la couleur a également une influence. Selon Jacob Nielsen, le texte négatif, celui du texte blanc sur fond sombre, demande un peu plus d'effort à lire et se lit plus lentement que le texte positif qui est noir sur fond blanc.
En dehors de cela, tant que le contraste entre le texte et l'arrière-plan est suffisant, la lisibilité n'est pas affectée.
J'ajouterais un peu à cela. En disant du texte blanc sur des arrière-plans sombres, cela n'affecte pas la lisibilité tant que vous le concevez correctement.
Pour moi, cela signifie:
- Utilisation intelligente de l'espace vide entre les blocs pour éviter les fuites de lumière.
- Des règles de lisibilité appropriées sont suivies en termes de phrases courtes, de paragraphes courts, de mots courts et de copies faciles à digérer.
- Sélection minutieuse des polices pour maximiser la lisibilité sur différentes tailles d'écran.
- Maintenir un contraste maximal lorsque vous travaillez avec des arrière-plans sombres.
- Éviter les dégradés et les ombres avec un fond sombre.
Le choix de la police est important dans toute conception Web, mais encore plus lorsqu'il s'agit d'arrière-plans sombres.
Nous sélectionnons généralement les polices serif car elles ajoutent une touche de classe ou d'élégance à un design et utilisent sans empattement pour la modernité. Lorsque vous traitez du texte clair sur un fond sombre, le choix se limite au sans empattement uniquement.
Les polices Serif peuvent fonctionner mais nécessitent plus de travail de la part du lecteur pour comprendre. Cela est exacerbé lors de l'utilisation d'écrans plus petits ou de mobiles.
L'aspect perception émotionnelle
Nous savons tous que différentes couleurs peuvent évoquer différentes émotions. Nous le savons depuis des années et des études plus récentes l’ont étayé par des preuves. Nous savons que différentes combinaisons de couleurs affectent le cerveau de différentes manières et certains spécialistes du marketing pensent que l'utilisation de la couleur seule peut augmenter la conversion.
La psychologie des couleurs nous dit que lorsque nous voyons les couleurs, notre cerveau signale la libération d'hormones qui peuvent nous faire ressentir des émotions. Différentes couleurs provoquent la libération d'hormones différentes ce qui peut influencer ce que nous ressentons à propos de quelque chose d'une couleur particulière. Cela se combine avec notre perception de ce que signifie une couleur qui peut être utilisée contre nous pour le marketing et la vente.
Nous avons des idées bien ancrées sur ce que signifie une couleur.
Par exemple, noir est souvent associée comme une couleur puissante, érotique, mystérieuse, formelle et élégante. Blanc se sent propre, frais, moderne, jeune, accessible et familier. Rouge est audacieux, puissant, confiant et sensuel.
Chaque couleur invoque des sentiments différents chez le lecteur, c'est pourquoi, en tant que concepteurs Web, nous passons un temps si excessif à essayer de trouver la combinaison parfaite, puis encore plus à essayer de convaincre le client que les couleurs que nous avons choisies fonctionneront.
Avantages des arrière-plans sombres
Les arrière-plans sombres ne conviennent pas à tous les designs ou projets.
Lorsqu'ils conviennent, un fond sombre peut ajouter du caractère, de l'impact, de l'emphase et une certaine réponse émotionnelle à une conception Web. J'ai déjà couvert tout cela, alors examinons d'autres avantages de l'utilisation d'arrière-plans sombres dans la conception.
1. Less fatigue des yeux
Apparemment, il est plus facile de lire plus longtemps lorsqu'un fond sombre est utilisé. Même si nous lisons plus lentement, tant que ce rapport de contraste est suffisamment large et que le design est par ailleurs sain, nous pouvons lire sans fatigue oculaire pendant de plus longues périodes.
Au sujet des yeux, les arrière-plans sombres auront un impact sur le sommeil less trop. L'écran contiendra less lumière bleue/blanche qu'une page Web traditionnelle. On pense maintenant que cette lumière bleue a un impact sur notre rythme circadien et affecte notre sommeil, cause des maladies et a un impact négatif sur notre vie quotidienne.
2. Élégant
Il y a une raison pour laquelle chaque femme a une petite robe noire ou pourquoi les limousines sont noires. Cela ajoute un sens du style et de l'élégance difficile à trouver ailleurs. Tant que la conception générale est de haute qualité, l'utilisation de fonds sombres donne immédiatement ce sentiment qui peut influencer une décision d'achat, créer un lien émotionnel ou inciter le lecteur à prendre ce qu'il voit plus au sérieux.
3. Familiarité
Les sites Web avec des arrière-plans sombres étaient très rares. Ceux que nous avons vus souvent ne suivaient pas du tout les règles d'utilisabilité et ne fonctionnaient pas bien. Avec plus d'interfaces utilisateur de programme utilisant des arrière-plans sombres, les jeux utilisant de plus en plus des arrière-plans sombres dans les menus, la navigation et les cinématiques et le mode nuit dans toutes sortes d'appareils, l'obscurité n'est plus une niche.
On le voit partout. De nombreux produits Adobe, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop et Dreamweaver et de nombreux autres programmes de premier plan.
Maintenant que nous sommes plus habitués à voir du texte clair sur des arrière-plans sombres, cela ne surprend pas et n'a pas d'impact négatif sur nos attentes comme c'était le cas autrefois.
4. Se démarque
Bien que les sites Web avec des arrière-plans sombres deviennent de plus en plus acceptables, ils sont toujours minoritaires. Cela fournit un élément d'impact dès que quelqu'un arrive sur la page. Même avant qu'un mot ne soit lu ou une image numérisée, votre page fait déjà une impression et amène le lecteur à regarder avec un œil neuf la conception.
Tant que cette conception s'appuie sur cette première impression initiale avec une bonne lisibilité, une bonne utilisation de l'espace et des images percutantes, vous êtes gagnant.
5. Fondu en arrière-plan
Les interfaces utilisateur et les arrière-plans sombres fournissent ce premier impact initial, mais peuvent ensuite se fondre tranquillement dans l'arrière-plan pour laisser le contenu briller. Cela est plus vrai dans la conception d'interface utilisateur, mais a également de la pertinence dans la conception Web. Les images et le contenu soigneusement placés avec le bon niveau de contraste ressortiront alors beaucoup plus tandis que l'arrière-plan lui-même disparaîtra de la vue.
Cela peut aider à lire le contenu de la page dans des environnements lumineux comme à l'extérieur ou sous une forte lumière. Dans des environnements plus sombres, un fond blanc ou clair peut fatiguer les yeux et être difficile à lire. Dans des environnements plus clairs, un fond sombre peut être le contraire. Bien que nous ne puissions pas concevoir pour des environnements spécifiques, il n'est jamaisless un avantage d'un fond plus sombre qu'il lit bien au soleil.
Inconvénients de l'utilisation d'arrière-plans sombres
L'utilisation d'un fond sombre dans la conception n'est pas universellement positive. Il y a quelques inconvénients à ce style et ils ne doivent pas être sous-estimés.
1. Un examen attentif
Les arrière-plans sombres ne fonctionneront pas pour tous les clients ou toutes les situations. Ce thème de conception nécessite beaucoup plus de réflexion et de planification que le fond clair traditionnel. Il faudra également plus de tests utilisateur pour s'assurer que l'équilibre est juste avant le lancement. Tous les schémas de marque ne fonctionneront pas avec des arrière-plans sombres. Tous les produits ou sujets ne fonctionneront pas non plus avec.
Certains clients perçoivent encore négativement les arrière-plans sombres comme nous le faisions auparavant. Même si vous êtes convaincu qu'un fond sombre est la voie à suivre, vous aurez peut-être plus de mal à convaincre votre client que si vous suiviez la voie traditionnelle.
2. Planification minutieuse
Tous les choix de conception nécessitent une planification, une couleur, une police et un choix d'image minutieux. L'utilisation d'arrière-plans sombres ajoute encore plus de réflexion à cela. L'espace blanc / sombre devient encore plus important pour empêcher la lumière de s'échapper dans l'obscurité et pour garantir la lisibilité du texte. Les images et les éléments de conception ont besoin d'une réelle séparation pour les garder lisibles et pour empêcher les fuites de lumière ou de couleur dans d'autres zones.
Le processus de développement peut prendre plus de temps avec un fond sombre à cause de cela. Plus de tests utilisateur peuvent être nécessaires et d'autres améliorations de l'expérience mobile peuvent également être prises en compte.
3. Équilibre soigné
L'utilisation d'éléments sombres dans un dessin ajoute du poids à une page. Trop de poids et la page peut sembler encombrante et lourde. C'est encore plus vrai lorsqu'il s'agit d'arrière-plans sombres. Chaque page doit être équilibrée très soigneusement pour éviter qu'elle ne se sente lourde et pour faire ressortir son élégance inhérente plutôt que son inconfort.
C'est une question difficile et nécessitera beaucoup de raffinement et beaucoup d'espace blanc / noir sur la page pour la maintenir équilibrée.
4. Accessibilité
L'accessibilité est l'un des aspects des designs sombres qui ne retient pas beaucoup l'attention. Chaque conception Web doit avoir à l'esprit l'accessibilité dès les premières étapes de la planification. Heureusement, tant que vous respectez les règles générales relatives au contraste élevé entre le texte et l'arrière-plan, la majorité des utilisateurs pourront lire et comprendre votre page.
La Directives d'accessibilité du contenu Web (WCAG) nécessite un contraste de couleur 4.5.1 entre le texte et l'arrière-plan pour le texte normal et 3: 1 pour le texte volumineux. Il suggère du texte blanc pour les arrière-plans noirs mais il y a une certaine marge de manœuvre pour les autres couleurs tant que le rapport de contraste reste aussi large que possible.
J'ai mentionné l'astigmatisme plus tôt car il s'agit d'une déficience qui est affectée négativement par l'utilisation de fonds sombres. L'astigmatisme est une imperfection de la cornée qui provoque une vision floue ou déformée. Sur fond sombre, la pupille doit se dilater pour lire, ce qui accentue le flou.
Bien que ce ne soit qu'une déficience dans un monde à plusieurs environ 33% des Américains ont une forme d'astigmatisme. Si vous étendez cela à un public mondial, près d'un tiers de votre public potentiel peut souffrir d'astigmatisme à un degré ou à un autre. C'est quelque chose que chaque conception doit prendre en compte.
Quand utiliser un fond sombre
Il existe une gamme de situations où les arrière-plans sombres se prêtent bien à la conception Web. Ils incluent:
- Lorsque vous voulez avoir cet impact visuel initial.
- Quand l'obscurité correspond à l'identité de marque du client.
- Lors de la présentation de produits ou de services de luxe ou de haut standing.
- Lorsque le design est moderne ou minimaliste.
- Lorsque vous avez besoin de créer un drame ou un mystère dans un design.
Quand vous ne devriez pas utiliser un fond sombre
De même, il y a des moments avec un fond sombre ne seront pas votre meilleure option et devraient être évités à tout prix. Même si le client insiste pour en utiliser un.
- Lorsque la page est lourde de contenu.
- Lorsque la voix de la marque ne le prend pas en charge.
- Lorsque le public cible est connu pour ne pas bien y répondre.
- Quand il se passe beaucoup de choses avec la page et que l'espace blanc / noir est primordial.
- Lorsque l'intention est B2B ou officielle, telle que gouvernementale.
10 Exemples de thèmes d'arrière-plan sombre
Pour vous montrer ce que je veux dire à propos des arrière-plans sombres qui semblent incroyables lorsqu'ils sont bien faits, j'ai rassemblé dix excellents thèmes qui les utilisent. Chacun est légèrement différent en termes de design, mais tous ont une chose en commun, ils utilisent des arrière-plans sombres pour un effet maximal.
1. Pack de mise en page Divi avec Web Freelancers
Le thème Divi WordPress doit être l'un des plus flexibles. Bien que bon nombre de ses modèles soient sur fond clair, vous pouvez l'inverser en quelques secondes. Ajoutez le pack de mise en page Web Freelancers à Divi et vous pouvez avoir un superbe site Web avec un fond sombre pour toute utilisation.
Tout ce que vous avez à faire est d'installer les deux thèmes, d'activer le thème, d'ouvrir une page et de basculer les arrière-plans en sombre. Ensuite, utilisez l'option «Étendre la couleur d'arrière-plan» dans les sections de la page pour tout aligner.
Obtenez Divi à 10% de réduction jusqu'en avril 2024
2. Astra avec le site de démarrage du photographe
L'utilisation du framework Astra avec l'installation du site de démonstration Photographer fournit un excellent site Web avec un fond noir. Une bonne utilisation de l'espace, des polices contrastées et un design minimaliste font que ce thème se démarque.
Consultez le site de démarrage de la photographie
3. Genesis avec Parallax Pro
Parallax Pro est un thème pour le Genesis framework qui utilise une conception monochrome alternée pour un grand effet. C'est une autre conception simple qui permet au contenu de la page de briller et fournit un excellent exemple de la façon dont les arrière-plans sombres peuvent si bien fonctionner.
Voir la démo Parallax Pro Live
4. Objectif de PixelGrade
Lens From PixelGrade utilise une conception de grille pour nous donner un portfolio ou une vitrine d'images utilisant un thème sombre. Le fond sombre n'est vraiment visible que dans le menu latéral et le thème utilise des couleurs contrastées de manière très intéressante, en ajoutant des couleurs autres que le noir et blanc pour vraiment se démarquer.
NB: Nous avons 20% De Réduction directement à partir de PixelGrade, exclusif à CollectiveRay visiteurs. Cliquez simplement sur le lien ci-dessous, votre réduction sera automatiquement appliquée lors de votre paiement. Cette offre est valable UNIQUEMENT jusqu'à fin avril 2024.
5. Divi avec Pack Dark Électricien
Un autre thème Divi, cette fois la page de destination de l'électricien dans l'obscurité. Il s'agit d'un thème de très haute qualité avec un fond sombre, une typographie nette, une bonne utilisation des images et des couleurs complémentaires pour ajouter de l'intérêt. Celui-ci est un favori personnel et je pense que cela fonctionne incroyablement bien.
Obtenez Divi à 10% de réduction
6. Aldo de ThemeRex
Aldo de ThemeRex est un thème qui rend l'apparence élégante facile. C'est un effortless thème qui fonctionnerait pour de nombreux sujets et équilibrerait beaucoup de contenu de page avec un fond sombre sans surcharger la page. C'est une conception très aboutie qui fonctionne bien sur n'importe quelle taille d'écran.
7. Neve Pro avec des images de parallaxe sombre
Neve Pro avec Dark Parallax Images utilise le thème Neve avec toute sa puissance, sa vitesse et ses fonctionnalités. Combiné à un arrière-plan sombre et à la thématisation complémentaire, ce thème WordPress est l'un des meilleurs du marché. Les pages sont bien équilibrées, elles se chargent rapidement, le contenu guide le lecteur en douceur le long de la page et vous ne manquez de rien.
8. Raconter avec la disposition des joueurs
La mise en page Telling with Gamer est un excellent exemple de la façon d'utiliser d'autres couleurs vives pour enrichir un arrière-plan sombre. Ne vous laissez pas berner par le surnom de joueur, vous pouvez utiliser ce thème pour n'importe quoi et il aurait toujours l'air incroyable. Un menu fort, une excellente mise en page, une netteté et un contraste superbes et une bonne utilisation de l'espace ne sont que quelques-uns des points positifs.
9. Prochaine sortie
Nextout est un thème WordPress très élégant qui utilise un fond sombre plus clair avec des couleurs contrastées et complémentaires. Avec un curseur supérieur attrayant, vous faites défiler vers le bas dans une mise en page en mosaïque qui se prêterait parfaitement aux sites Web orientés image. Avec une navigation fluide et des mises en page bien pensées, c'est certainement l'un des meilleurs thèmes Web ici.
10. Hestia Pro avec des images de parallaxe sombre
Hestia Pro avec Dark Parallax Images est un autre thème très élégant qui équilibre les arrière-plans sombres avec des éléments clairs, des couleurs contrastées et une excellente typographie. Les pages sont riches mais pas excessives et l'équilibre est parfait quel que soit le type d'écran que vous utilisez. Cela pourrait fonctionner sur n'importe quel appareil, pour n'importe quel sujet et est certainement à essayer.
Si vous souhaitez en savoir plus sur Hestia - consultez cet article sur Collectiveray.
Conclusion: utiliser des arrière-plans sombres dans la conception Web
L'une des meilleures choses à propos de l'Internet moderne est la liberté de s'exprimer et d'enfreindre les règles. Si certaines de ces règles ne doivent absolument pas être enfreintes, certaines le peuvent. Comme le design traditionnel noir sur blanc qui nous accompagne depuis le 17th siècle.
Je pense que les arrière-plans sombres peuvent être incroyables lorsqu'ils sont réalisés avec un œil attentif. Ils font cet impact initial et ensuite disparaissent dans l'arrière-plan. Ils fonctionnent bien dans la plupart des conditions d'éclairage et une page bien équilibrée avec une utilisation intelligente de l'espace peut faire en sorte que l'arrière-plan souligne le produit ou l'intention d'une page mieux que les arrière-plans blancs.
Les conceptions sombres ne conviennent pas à tous les projets ou à toutes les intentions et nécessitent beaucoup plus de planification, de raffinement et de tests que les arrière-plans blancs. Cependant, bien fait, je pense que tout ce temps et ces efforts supplémentaires peuvent en valoir la peine!
Veuillez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!
Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.
et beaucoup plus ...