Les Dos et les choses à ne pas faire du design Web sombre
Les designs web sombres sont très populaires et peuvent avoir un aspect élégant et créatif.
Ils sont également parfaits pour de nombreux types de travail client, mais ils ne conviennent pas à tous les sites Web et ne doivent être utilisés que lorsque cela est approprié.
Malgré l’impact visuel saisissant de ces conceptions sombres, de nombreux concepteurs ne savent pas comment les retirer efficacement sans désactiver le visiteur.
Avec un design sombre, la lisibilité est moindre , l'attrait moins important pour la plupart des lecteurs et moins d'opportunités pour les éléments de conception conventionnels.
Dans cet article, nous discuterons de quelques astuces pour que votre prochain design de site web sombre plaise à un public plus large , tout en vous permettant, en tant que concepteur, d'exprimer votre créativité.
UNE sondage récent suggère que l'auditoire généraliste préfère les designs légers par 47%. La principale raison est la lisibilité . La plupart des gens n'aiment pas regarder des textes clairs sur un arrière-plan sombre sur des sites Web, car cela les rend difficiles à regarder.
En revanche, 10% des personnes interrogées ont déclaré qu’elles préféraient toujours les arrière-plans sombres pour les sites Web, tandis que 36% ont déclaré que le meilleur choix dépendrait du type de site Web.
Alors quelle est la bonne réponse? En fin de compte, tout le monde a sa propre opinion, et c'est tout.
Mais avec un pourcentage si élevé d'utilisateurs disant que les conceptions de sites Web sombres sont tolérables et parfois même préférées, nous, en tant que concepteurs de sites Web, devons apprendre à créer des conceptions sombres efficaces pour nous et nos clients.
Cela signifie convaincre tous les vrais croyants des arrière-plans clairs que le design sombre peut être plus lisible et convivial.
Utilisez plus d'espace blanc
Ou devrait-il être appelé "espace noir"? L'utilisation efficace des espaces blancs est importante pour tout type de conception, mais elle est essentielle pour les sites Web ayant un arrière-plan sombre.
Les designs sombres ont tendance à se sentir "lourds" , et les encombrer peut renforcer ce sentiment. Jetez un coup d'œil à certaines conceptions de sites web noirs populaires ci-dessous et notez leur utilisation généreuse des espaces blancs.
Domaine noir est vu sur Internet dans des vitrines de conception Web sombre. C'est en effet un beau design et digne de toute l'attention. Une grande partie des espaces blancs est utilisée tout au long de la conception, et ce qui rend ce design particulier, c’est la manière dont l’espace blanc délimite si efficacement certains éléments.
Le logo a beaucoup d'espace blanc autour de lui et c'est la première chose que nous voyons comme visiteurs. Nous voyons le contenu principal et la bouteille à droite ensuite. Comme vous le voyez, les espaces blancs sont parfaitement utilisés pour mettre en évidence le texte sur la bouteille et le titre du contenu principal.
Le contenu présenté dans TIC Toc et l'image d'accompagnement dans cette conception sont encadrés avec le plus d'espace blanc. Au fur et à mesure que nous avançons vers le bas, nous voyons moins d’espaces blancs, ce qui fait que nous prêtons attention au contenu affiché.
Le point ici est que l'espace blanc guide progressivement l'utilisateur jusqu'à la fin de la page .
Le fond sombre ajoute de la profondeur à la conception. Étant donné que le site Web dépend énormément de l’espace blanc, il serait moins intéressant sans l’effet créatif du fond sombre.
le Mark Dearman site Web a libéral et uniformément distribué des espaces blancs tout au long de sa mise en page.
L'espace blanc qui encadre chaque objet du portefeuille offre une grande marge de manœuvre pour le contenu qu'il contient, et c'est un bon point de repos avant de passer à la pièce suivante.
Un grand nombre d’espaces blancs est essentiel aux conceptions sombres car il aide non seulement à désencombrer la mise en page, mais aussi à cadrer des éléments importants et à ajouter de l’élégance à l’ensemble.
Espace blanc textuel
Parce que la lisibilité est la préoccupation numéro un de ceux qui n'aiment pas les arrière-plans sombres, les concepteurs doivent porter une attention particulière au texte lui-même.
Tout comme dans la conception globale, une façon d'améliorer la lisibilité sur les sites Web sombres consiste à augmenter les espaces blancs en ajustant la taille des paragraphes, le crénage et la direction .
L'exemple ci-dessous montre la différence entre l'espacement entre et autour des caractères en comparant les dispositions sombres et claires.
Un autre moyen d'améliorer la lisibilité des conceptions Web sombres consiste à augmenter la taille de la police . Comme la plupart des autres règles de cet article, des tailles de police plus grandes signifient plus d'espace blanc. Plus les lettres sont grandes, plus l'espace blanc apparaîtra autour de chaque lettre.
Par exemple, la lettre "a" ci-dessous obtient plus d'espace blanc à mesure qu'elle s'agrandit, à la fois autour de celle-ci et dans l'espace à l'intérieur de l'enceinte et sous le surplomb.
Notez que la lecture de petits textes est beaucoup plus facile sur un fond clair que sur un fond sombre. Lorsque vous définissez la typographie pour un nouveau site Web, assurez-vous de regarder du texte factice pour vous assurer qu'il est lisible . Sinon, voyez si l'augmentation de la taille du texte vous aide.
Contraste du texte
Beaucoup de gens seraient d’accord pour dire que les sites Web les plus mal conçus provoquent une fatigue oculaire. Trop ou trop peu de contraste est généralement le coupable. Comment trouve-t-on l'équilibre parfait?
Si vous êtes dans une pièce noire, regarder directement dans la lumière n’est pas agréable. Mais regarder une lumière moins brillante dans une pièce moins sombre est parfait. Le même principe s'applique à la conception de sites Web.
Trouver le contraste parfait signifie équilibrer l'obscurité de l'arrière-plan avec la légèreté du texte .
Vous trouverez ci-dessous un guide (très) approximatif montrant le contraste entre le texte et l’arrière-plan. On remarque que lorsque le fond devient plus clair, le texte fait de même.
Trouver un contraste agréable pour le texte est beaucoup plus difficile avec un fond noir pur.
Pour trouver l'équilibre parfait, expérimentez avec différentes nuances. Le meilleur résultat est généralement un arrière-plan qui n'est pas du noir pur et du texte qui n'est pas du blanc pur.
Traiter avec les polices
Les fontes jouent un grand rôle dans la conception et devraient certainement être prises en considération avec des dispositions sombres. L'image ci-dessous montre une police de 14 points sur un fond sombre dans les polices serif et sans sérif.
La police sans empattement est évidemment plus lisible . Mais de nombreux designers choisissent encore des polices avec empattement pour leur élégance.
L'astuce consiste cependant à ne placer que du texte plus gros dans les polices avec empattement, de sorte que l'espace extra-blanc envahit chaque caractère et rend le texte très lisible.
La capture d'écran ci-dessous est celle d'un site Web abordé plus haut dans cet article. Il comporte des polices serif et sans-serif, mais les utilise de manière intelligente.
Les textes plus grands, tels que les titres, la navigation et les en-têtes, sont dans une police avec empattement pour une élégance accrue. Pour un meilleur contraste et une meilleure lisibilité, le corps du texte est dans une police sans empattement propre.
Utiliser des schémas de couleurs minimales
Pour donner à leurs designs sombres un aspect épuré, les concepteurs doivent toujours opter pour des combinaisons de couleurs minimales .
Parmi les quelques exemples ci-dessous, nous pouvons voir que les combinaisons de couleurs occupées gênent vraiment les arrière-plans sombres, car le contraste est trop net.
S'en tenir à une ou deux couleurs . Pour ajouter plus de couleur, essayez un fond de couleur sombre.
Certes, de nombreuses conceptions Web sombres ont des schémas de couleurs plus passionnants. Donc, cette règle est souvent cassée, mais seulement avec les bonnes techniques.
En général, cependant, la couleur est souvent ce qui rend un site Web trop occupé . Comme les sites Web plus sombres ont déjà de la profondeur, utilisez la couleur avec prudence.
Offrez un changement de style
Bien que nous ayons de nombreuses bonnes pratiques à notre disposition pour rendre les conceptions de sites Web sombres plus attrayantes, aucun effort ne pourra satisfaire tous les utilisateurs.
Veillez à inclure un sélecteur de style , de sorte que les utilisateurs aient la possibilité de visualiser du texte sombre sur un fond clair.
Deux feuilles de style sont nécessaires pour cela, une pour la disposition sombre par défaut et une pour la disposition de lumière alternative.
SitePoint a un excellent tutoriel à ce sujet: Construire un commutateur de style simple en CSS . Au lieu d'utiliser les versions "orange", "bleu" et "blanc" du didacticiel, utilisez simplement des feuilles de style "claires" et "sombres".
Quand la conception Web sombre fonctionne le mieux
Comme indiqué, une grande partie des internautes pensent qu’une conception Web sombre pourrait fonctionner pour certains types de sites Web. Mais l'étude est vague sur ce que sont exactement ces types.
En règle générale, l'obscurité est idéale pour les designs créatifs ou élégants . Pour les sites Web modernes et élégants, les arrière-plans sombres ajoutent de l'élégance. Pour les styles grungy ou dessinés à la main, les arrière-plans sombres améliorent la créativité de la mise en page.
Élégant design sombre
L'obscurité peut être profonde, autoritaire et forte, et semble souvent élégante lorsqu'elle est utilisée de manière appropriée. Voici quelques exemples et quelques techniques pour faire ressortir l'élégance dans un design sombre.
Le site web pour Larissa Meek a un motif simple de style vintage en arrière-plan, créant un ton élégant. D'autres caractéristiques plus originales ajoutent une touche personnelle au design.
Cette technique peut être utilisée pour de nombreux types de sites Web. Les motifs et textures vintage ou classiques peuvent créer un look à la fois élégant et adapté à l'âge .
La plupart d'entre nous associons des modèles vintage à un niveau élevé, ce qui facilite la création d'un site Web de grande qualité.
Noyau de profondeur a un design très propre, avec un fond sombre qui ajoute du style et de la classe. Un sens de l'autorité est également évident dans la conception. Cette élégance peut également rendre le travail de portefeuille d'un designer plus précieux.
Notez que cette conception n'a pas de texture ou d'images autres que les pièces du portefeuille et le logo. Sinon, la conception aurait été trop occupée; tel quel, le contenu est bien assemblé.
Un bon processus à suivre consiste à ajouter d'abord le contenu essentiel, puis à apporter les éléments de conception nécessaires . Le concepteur peut alors faire une pause et réfléchir au fur et à mesure que chaque nouvel élément est ajouté, en veillant à ce que la mise en page ne soit pas suralimentée.
Tout comme les œuvres d'art peuvent sembler plus précieuses dans un design élégant, les produits le peuvent aussi. Un design sombre et élégant, comme Tapbots et tant d'autres, aide à mettre en valeur le produit vendu.
La conception reflète l'appareil lui - même , avec ses dégradés et ses effets d'éclairage; Certains modèles imitent même la texture de leurs produits de haute technologie.
Creative Dark Design
Au-delà de l'apparence élégante, les conceptions de sites Web sombres peuvent également susciter plus de réactions émotionnelles que les conceptions légères standard, ce qui les rend idéales pour les projets créatifs. Examinons quelques exemples des types de conceptions créatives possibles.
le site ci-dessous a très peu de contenu mais a une disposition unique et des couleurs sombres pour la profondeur. Les arrière-plans sombres sont parfaits pour les sites Web avec très peu de contenu .
Et parce qu'ils nécessitent plus d'espace blanc, le concepteur dispose de plus d'espace pour travailler.
Le design web grunge se présente sous de nombreuses formes, et parce que le grunge est «sombre et sale», les arrière-plans sombres sont l’une de ces formes.
Dessins de grunge sombre comme Trozo semble briser toutes les règles: textures occupées, mise en page bondée et une large gamme de couleurs. Et pourtant, ce site fonctionne toujours. Comment est-ce possible?
Avec autant d'éléments difficiles à utiliser, le design grunge peut être difficile pour les débutants. Ce qui fait que ce travail est son organisation .
L'arrière-plan comporte des blocs clairement présentés qui guident l'œil de l'utilisateur et permettent de diviser le contenu en sections faciles à gérer.
Deuxièmement, il a une tonne d'espace blanc . L'arrière-plan peut être texturé, mais le motif répété est vu par l'utilisateur comme un espace blanc, ce qui aide à alléger le dessin.
Cet espace blanc est le plus visible à gauche du logo, sous la navigation et le long du côté droit.
Même entre la "pièce 01" et la "pièce 02", il y a plus d'espace que ce que l'on trouverait habituellement sur un site Web comme celui-ci.
L'espace blanc fait disparaître les choses, même s'il ne ressemble pas à un espace blanc car il a une texture . Le texte minimal et quelques sections (trois seulement) contribuent également à cette apparence de simplicité.
La conception de Drew Wilson brise définitivement la règle de l'utilisation de la couleur minimale. Cela fonctionne quand même, car l'en-tête aux couleurs vives est l'une des rares caractéristiques de ce design épuré, donc rien ne le surpasse.
Et le fond sombre rend l’en-tête encore plus lumineux et extraordinaire.
Les arrière-plans sombres sont souvent utilisés pour faire ressortir davantage les effets lumineux et les couleurs vives .
Ces conceptions sont une exception merveilleusement créative à la règle de la couleur minimale. Mais la règle doit être brisée avec prudence: évitez de distraire les dégradés, les textures et les couleurs plus bas sur la page.
Emballer
Les arrière-plans sombres donnent une impression d'élégance et de créativité aux conceptions Web, ce qui les rend parfaits pour certains portefeuilles, mais ils ne conviennent pas à tous les sites.
Pour les plus grands sites Web, en particulier ceux destinés aux personnes ayant un handicap visuel ou autre, les conceptions sombres sont un non-non, même avec un sélecteur de style.
Espérons que lorsque vous aurez besoin de concevoir un site Web sur fond sombre, ces conseils et stratégies vous aideront.
Écrit exclusivement pour WDD par Kayla Knight .
Il existe beaucoup plus de techniques et de stratégies pour améliorer les conceptions de sites Web sombres. Veuillez partager celles que vous avez citées dans la section Commentaires ci-dessous.