15+ magnifiques exemples de sites sombres

En matière de webdesign, on croise un peu toutes les tendances. Certains s’inspirent de la vie de tous les jours pour réaliser leurs chartes graphiques, d’autres préfèrent l’ambiance cartoonesque et certains privilégient les teintes sombres. Tous les goûts sont dans la nature mais afin de vous inspirer pour vos propres créations, voici une sélection d’une quinzaine de sites à dominance sombre. De quoi se reposer un peu les yeux et voir la vie autrement.

1. Siddharth

L’intérêt de ce site résulte d’un savant mélange des genres : le moderne et le traditionnel. Ainsi, si la structure du site correspond plus ou moins aux nouvelles normes définies par le web 2.0 (menu + diaporama + contenu + footer), les images utilisées ne manquent pas de nous rappeler certaines techniques picturales traditionnelles (notamment les rollovers du menu).

Plus important, le contraste entre le fond et le contenu est parfaitement respecté. L’ensemble de couleurs est cohérent, lisible et parfaitement clair.

• Point(s) fort(s) : structure des pages, contraste contenu / fond, techniques utilisées (cf diaporama).
• Point(s) faible(s) : logo peu lisible, trop flouté, textures de faible résolution (cf fond de page).

2. Sumo

Profondément minimaliste, ce site laisse la place à l’essentiel. Le logo, bien dégagé, attire immédiatement l’oeil et il en va de même pour le message de bienvenue (le fameux « hello text »), que l’on retrouve de plus en plus sur les sites modernes. On remarquera aussi la bordure de l’image, qui tranche de manière adéquate avec le fond. Là encore les nuances sont bien respectées, le texte est parfaitement lisible.

En revanche, la structure de la page laisse un peu à désirer. Si le haut est assez clair et bien réalisé, il n’en va pas de même pour le reste des informations présentes. Il faudra ainsi descendre plus bas dans la page pour découvrir les réalisations de cette agence.

• Point(s) fort(s) : présentation du logo et de l’accroche, contraste contenu / fond, bordure des photos.
• Point(s) faible(s) : structure peu cohérente, mauvais emplacement de certaines informations.

3. William Turner

Il n’y a rien de plus adéquat qu’un site aux couleurs sombres pour jouer avec des effets lumineux. Et c’est justement la technique qui a été adoptée par William Turner. Si l’intégralité de la page est conçue sur la même palette de couleurs (grise / bleue), certains éléments sont mis en évidence grâce à ce principe. C’est ainsi le cas du bandeau du haut, séparé du reste de la page par un liseret d’ombre, ou encore des images, mises en évidence par une bordure beaucoup plus claire que la couleur du background.

De la même manière, le menu est simple et efficace. Chaque bouton est correctement séparé (là encore par un liseret d’ombre) et chaque titre de rubrique est accompagné d’une brève description afin de permettre aux visiteurs de mieux comprendre ce dont elles traitent. A noter que j’ai également adopté cette stratégie sur Weedle, comme vous vous en êtes certainement rendu compte.

Structurellement, la page est parfaite. Le haut est bien mis en valeur, soit à l’aide de ces jeux de lumières dont je vous ai déjà parlé, soit à l’aide de pictogrammes (cf la brochure et la « gift list »). Plus bas, on retrouve une fois de plus le diaporama habituel. Point positif, les effets de transition sont originaux et très agréables sur le plan visuel. Il en va d’ailleurs de même pour les nombreuses miniatures de produits ainsi que pour le reste du contenu de la page. Quant au footer, et bien il est lui aussi très bien réalisé. En un clic, il est possible de s’abonner à la newsletter du site ou d’accéder à l’ensemble des mentions légales.

• Point(s) fort(s) : ensemble graphique très soigné, nombreux effets lumineux, diaporama original, très bon contraste entre le contenu et le fond.
• Point(s) faible(s) : rollover du menu trop discret.

4. CSS DSGN

Ce qui dénote ce site du reste de cette sélection, c’est avant tout sa structure très originale. En effet, et c’est un choix plutôt inattendu, la barre latérale occupe autant de place (sinon plus) que le contenu du site. On y retrouve donc le menu du site, ses archives, les sites ayant récolté le plus de voix ainsi que la blogroll. Côté contenu, dans la mesure où ce site se présente comme une galerie, l’accent est évidemment mis sur les réalisations référencées. Les vignettes représentant ces dernières sont grandes, elles attirent immédiatement l’oeil et c’est une bonne chose.

En revanche, malgré tous ces points, le site présente un problème de hauteur, le contenu étant plus dense que les informations contenues dans la barre latérale. S’en suit donc un problème d’équilibre flagrant et le sentiment d’un énorme vide en descendant plus bas dans la page.

• Point(s) fort(s) : structure originale, contenu mis en valeur grâce aux vignettes, rubriques immédiatement accessibles.
• Point(s) faible(s) : problème d’équilibre entre le contenu et la barre latérale, liens peu visibles.

5. Glasshouse Apps

L’une des principales tendances du web 2.0, c’est le minimalisme. A l’époque du web 1.0, il fallait créer des sites complets, c’était donc l’information qui primait. Aujourd’hui, c’est toujours le cas à ceci près qu’il faut en plus viser la simplicité et l’accessibilité. C’est vers cette solution que s’est dirigé le site Glasshouse Apps. En dehors d’un logo futuriste auréolé d’une lumière bleutée du plus bel effet, la page tend vers le vide, en proposant pour tout contenu les deux produits mis en avant par la firme.

Dans l’ensemble, la page d’acceuil du site est assez séduisante. Les deux produits, présentés au centre de la page, attirent immédiatement l’oeil. Bien entendu, les deux iPhone doivent y être pour quelque chose. Seul bémol, les deux liens situés en dessus des images ne dénotent pas assez d’avec le fond de la page. C’est d’autant plus dommage que le contenu textuel est, quant à lui, parfaitement contrasté.

• Points(s) fort(s) : simplicité de la charte, logo très bien réalisé, produits mis en valeur.
• Point(s) faible(s) : liens du menu manquant de contraste.

6. Lucky Star Tatoo

Certains sites vont plus loin et ne se contentent pas de proposer une structure adapté à leur contenu, préférant miser le tout pour le tout en proposant un univers marginal et étonnant. C’est le cas de Lucky Star Tatoo, un site mettant en valeur le travail d’un collectif de tatoueurs. La page d’accueil est ainsi structurée en trois parties horizontales : le logo du site (avec un fond adapté), les dernières actualités et les principales catégories proposées. Le travail effectué est très précis, le fond de la page est magnifique et contraste parfaitement avec le fond des encarts.

Si la page d’accueil du site est magnifique, il est néanmoins nécessaire d’aller faire un tour dans les différentes catégories proposées pour se rendre compte du travail effectué. Ces dernières sont très bien structurées elles aussi. On ne se perd pas, l’oeil est dirigé à travers les informations présentées. Parfois, de légères incohérences sont à déplorer (essentiellement des problèmes d’alignement) mais elles ne nuisent pas à la lisibilité du contenu.

Point très positif, les galeries d’images sont magnifiques.

• Point(s) fort(s) : univers graphique cohérent, bon contraste entre le contenu et le fond, galeries d’images magnifiques.
• Point(s) faible(s) : quelques problèmes d’alignement au sein des rubriques.

7. AppBoy

Là encore, il s’agit d’un de ces services estampillés « web 2.0″ comme on en trouve beaucoup depuis quelques mois. Entièrement dédié aux applications de l’iPhone, il se présente comme une galerie et toute sa structure en témoigne. De ce côté, justement, rien à signaler : les différentes zones de la page sont bien démarquées et ne présentent aucun problème de contraste (en dehors du « learn more » situé en dessous de l’accroche). Même chose pour le menu principal, très bien réalisé. Les trois boutons attirent l’oeil et les menus déroulants apparaissant au passage de la souris sont très doux et très agréables sur le plan visuel.

Même chose pour le contenu de la page, qui vous permet de découvrir certains produits en fonction de différents critères. Les zones sont bien délimitées et les nombreuses images présentes attirent immédiatement l’attention. Seul petit bémol concernant ce point, certaines images sont en faible résolution (c’est le cas de l’image représentant Shazam).

En dehors de ces différents points, on pourra saluer la très bonne intégration de Twitter, ainsi que l’emplacement des différents partenaires. Même chose pour le footer du site, qui vous présente toute l’arborescence du site.

• Point(s) fort(s) : structure cohérente et irréprochable, menu principal très agréable, bonne intégration de Twitter.
• Point(s) faible(s) : mauvais contraste de certains liens, quelques images en faible résolution.

8. Aurélien Réaut

Là encore, le portfolio d’Aurélien Réaut reprend la plupart des concepts initiés par le web 2.0. Le site fait donc la part belle aux effets de lumières, d’ombres et de transparence. Côté structurel, la page d’accueil est parfaitement cohérente. Découpée en quatre zones (le haut, qui contient le logo et le menu, le diaporama, le contenu divisé en trois colonnes et le footer), elle est à la fois très claire et très agréable sur le plan visuel. Au passage, on appréciera les quatre boutons du menu, dont les couleurs rappellent celles du fond de la page.

Côté diaporama, les effets de transition sont tout-à-fait conventionnels mais on peut citer la présence d’un bandeau permanent situé en haut à droite qui donne pas mal de cachet à l’ensemble. Même chose pour les boutons de défilement et leur reflet. Concernant les trois colonnes de contenu, c’est un peu la même chose. Les bordures et l’utilisation de couleurs différentes permettent à l’oeil de bien les dissocier les unes des autres.

• Point(s) fort(s) : structure très pertinente, charte graphique cohérente au niveau des couleurs, diaporama agréable à l’oeil.
• Point(s) faible(s) : léger problème de contraste sur l’accroche, rollover du menu relativement classique, footer peu détaillé.

9. Marie Julien

Ce qui frappe d’entrée de jeu avec la page d’accueil de ce blog, c’est sa structure assez originale. L’ensemble du contenu est ainsi décalé sur la droite, faisant apparaître sur la gauche une marge assez large que viennent séparer du reste de la page deux bandeaux de couleur. Le logo, quant à lui, se situe à cheval sur ces deux zones et interpelle par conséquent l’oeil des visiteurs. Même chose pour les deux énormes boutons situés à droite du logo et qui permettent de se rendre directement sur le site personnel des deux auteurs qui collaborent à ce projet.

Côté menu, on peut dire que ce dernier est assez dense. Décliné sur quatre colonnes et sur deux lignes, introduit par une accroche un peu trop discrète, il permet de naviguer facilement au sein des rubriques présentées. A noter également la présence d’un lien qui doit normalement faire apparaître, ou disparaître, le menu mais qui ne fonctionne pas chez moi (Firefox Mac). De la même manière, on trouve juste à côté de ce lien un autre lien qui, lui, permet de se déplacer directement jusqu’au contenu du site et donc jusqu’aux différents articles publiés par les auteurs.

Si la structure du site est vraiment impressionnante, le contraste laisse toutefois un peu à désirer, du moins en ce qui concerne le menu. Le fond de ce dernier étant hachuré et la police utilisée n’étant pas bien grande, l’oeil a parfois du mal à lire le contenu proposé. A mon sens, il aurait fallu soit opter pour une taille de police un peu plus grande, soit la foncer davantage.

• Point(s) fort(s) : structure original, couleurs, menu complet, bonne cohérence graphique.
• Point(s) faible(s) : contraste laissant parfois à désirer.

10. Petra Quilitz

Premier site en flash de notre sélection, le portfolio de Petra Quilitz s’impose plus comme une expérience visuelle qu’autre chose. Dès l’accueil, on est surpris par la qualité des animations et de la réalisation. Le concepteur du site semble avoir décidé de jouer sur la dualité en opposant des couleurs claires à gauche à des couleurs plus sombres à droite et le rendu ne manque pas de justesse.

Côté navigation, malheureusement, ce n’est pas la même chose. Si la réalisation des pages internes du site est vraiment magnifique, on se surprend à douter, à se perdre et à ne pas savoir que faire. Au bout d’un moment, on se rend compte qu’il suffit de placer le curseur de sa souris en haut pour faire apparaître les boutons de défilement des images ou à droite pour accéder au menu mais j’avoue ne pas avoir été vraiment convaincu par le principe.

C’est d’autant plus dommage que le reste est vraiment très impressionnant. Tout est soigné dans le moindre détail. Les vignettes des images du menu s’agrandissent au survol de la souris, les liens s’illuminent, on peut en un clic adapter l’image de fond à la résolution de son écran et, à part quelques problèmes d’alignement, on a finalement le sentiment de vivre une expérience unique.

• Point(s) fort(s) : réalisation magnifique, animations réalistes, photographies en haute résolution.
• Point(s) faible(s) : navigation complexe, quelques problèmes d’alignement dans le menu.

11. BadaBing Design

Là encore, ce site est très intéressant sur le plan structurel. Comme vous pouvez le voir sur la capture précédente, tout le contenu du site se situe dans une bande verticale située au milieu, un peu à droite. Le fait qu’elle soit décentrée la met immédiatement en valeur. Même chose pour le logo situé à gauche. D’ailleurs, afin de respecter une certaine cohérence et de correspondre le plus possible aux règles d’ergonomie d’aujourd’hui, on peut constater que le menu principal du site a été placé immédiatement à droite du logo, dans sa continuité. Seul bémol, l’alignement des quatre rubriques du site n’est pas parfait, il aurait peut-être été préférable de les placer dans des étiquettes de même taille. De la même manière, on peut remarquer tout en haut de la page un bouton noir. En cliquant dessus, le plan complet du site s’affiche, le tout avec un effet javascript très sympathique.

Concernant le contenu, on peut dire que sa présentation est irréprochable. Pour construire son contenu, le webdesigner a ainsi opté pour un double diaporama : vertical pour les images et horizontal pour le texte. Résultat des courses, l’ensemble est très dynamique. D’autant plus que, pour les plus impatients, le concepteur du site a également pensé à placer deux boutons (les deux flèches grises situées entre le texte et l’image) afin de permettre aux visiteurs de faire défiler le diaporama manuellement.

• Point(s) fort(s) : structure originale, positionnement du menu principal et secondaire, réalisation du diaporama, fond de la page.
• Point(s) faible(s) : problème d’alignement au niveau du menu principal, footer peu détaillé.

12. Red Panda Creative

Ce site est un peu un paradoxe à lui tout seul. Doté d’un ensemble graphique agréable, sa structure manque néanmoins de cohérence à cause d’un alignement beaucoup trop approximatif. Concernant les bons points à signaler, on peut citer la découpe horizontale du site mettant en valeur la partie du haut (celle qui contient justement le logo, le menu et l’accroche) ou encore le soin qui a été apporté au fond de la page.

En revanche, c’est au niveau de la partie basse de la page que les choses se corsent. Les éléments contenus dans l’encart gris foncé sont décalés par rapport aux éléments contenus dans la partie plus clair. Ce problème d’alignement crée un déséquilibre très préjudiciable dans la page. Le plus regrettable étant que ce point concerne toutes les pages du site.

• Point(s) fort(s) : structure originale, fond de la page.
• Point(s) faible(s) : problème d’alignement entre les deux parties principales de la page.

13. Victoria Mach

Les portfolio ont aussi beaucoup changé depuis l’avènement du web 2.0. Plus légers, plus minimalistes, ils s’articulent à la fois autour de l’expérience, de la formation et des réalisations de leur propriétaire, mais aussi et surtout autour de leur activité numérique. Plus que de présenter un domaine d’expertise ou des connaissances, il s’agit de présenter une personne. Et c’est évidemment le cas du portfolio de Victoria Mach, qui va droit à l’essentiel et qui centralise toutes les informations sur une seule et même page.

On commence donc avec une accroche (encore un « hello text ») qui met en évidence les principaux mots-clés définissant la personne qui se cache derrière le site (c’est un peu l’effet Google). On continue ensuite avec un diaporama traditionnel, doté d’un effet de transition basé sur l’opacité des éléments affichés. La réalisation est agréable, on appréciera la bordure bleue très fine qui n’est pas sans rappeler le fond des mots-clés mis en évidence dans l’accroche.

Plus bas, on passe à une brève description de la personne ainsi qu’à la galerie des réalisations. Organisées en deux colonnes, ces dernières sont magnifiquement mises en valeur. En ce qui me concerne, j’ai beaucoup apprécié l’effet de rollover sur les images de la galerie (là encore basé sur l’opacité de l’image). Il est à la fois léger et agréable. En revanche, les choses se corsent un peu après, avec le formulaire de contact qui n’est, à mon sens du moins, pas adapté au reste de la charte. Certes, on remarquera le même bordure bleue que celle du diaporama sur les champs du formulaire, mais ce dernier reste dans l’ensemble beaucoup trop sombre. Tout comme le footer. Le plus dommage, c’est que ce dernier contient des informations intéressantes et qu’il aurait vraiment gagné à être mis plus en valeur.

• Point(s) fort(s) : la structure simple et épurée, l’accroche, le diaporama, l’effet de rollover sur les images.
• Point(s) faible(s) : le formulaire de contact, le footer du site.

14. Fontplore

Structurellement, ce site est irréprochable. Le logo est bien mis en valeur dans la partie haute et le contenu de la page est parfaitement bien organisée. Chaque paragraphe est accompagné d’une très belle photographie et cette dernière se trouve tantôt à gauche, tantôt à droite, cette alternance guidant ainsi l’oeil des visiteurs. Même chose pour le contraste des titres et des paragraphes qui confère une grande lisibilité à l’ensemble. En somme, il s’agit là d’un site carré, agréable et professionnel, mais qui souffre finalement de ses qualités.

Car en effet, si le contenu est très bien mis en valeur, il est aussi trop massif : trop d’informations tue l’information. Bien que correctement aérés, les paragraphes sont un peu trop présent sur la page, au détriment des photographies qui auraient sans doute gagné à être mises un peu plus en valeur.

• Point(s) fort(s) : structure cohérente et rigoureuse, qualité des photographies, très bon contraste.
• Point(s) faible(s) : contenu trop massif, finalement peu attractif.

15. Yazsoft

Ce qui frappe de prime abord avec ce site, c’est la qualité de la réalisation et le respect des concepts élémentaires d’ergonomie. En haut, on retrouve ainsi le logo de la marque ainsi que le menu permettant de naviguer au sein des différentes pages du site. On remarque d’ailleurs que la rubrique dédiée à la boutique en ligne est mise en valeur par rapport aux autres. En dessous, on retrouve le nom de leur produit, accompagné d’un bref descriptif, le tout avec une image qui interpelle l’attention. Là encore, afin de simplifier les choses, les concepteurs du service ont rajouté trois boutons à cet endroit : un pour obtenir une démonstration, un autre pour télécharger l’application et enfin un dernier pour l’acheter.

Plus bas, on retrouve trois encarts très soignés mettant en relief certaines informations : un message d’accueil et deux offres spéciales afin de capter l’attention des futurs clients. Vient enfin le bas de page (ou footer) avec les mentions légales d’usage.

Dans l’ensemble, ce site est une très bonne réalisation. Ses concepteurs ont parfaitement pris en compte les exigences d’un site commercial. Sans surcharger les visiteurs avec des informations dont ils n’ont pas forcément besoin (cf site précédent), il leur facilite grandement le choix. En quelques clics, ils ont accès à l’essentiel et n’ont plus ensuite qu’à se laisser séduire par le produit présenté.

• Point(s) fort(s) : réalisation générale, structure du site, navigation simplifiée, encarts soignés.
• Point(s) faible(s) : le footer.

16. Classy Llama Studios

Classy Llama Studios est la preuve qu’on peut faire simple et beau à la fois. Doté d’une structure très conventionnelles (logo / menu / contenu / footer), il offre une interface élégante et dépouillée, tout en mettant l’accent sur le contenu diffusé. Très stylisé, le logo s’accorde à merveille avec le reste. Il en va de même pour le menu par onglets qui vient couper la page en deux. Plus bas, le diaporama ne nous réserve aucune surprise : simple et fonctionnel, il ne propose pas d’options particulières, tout comme le contenu réparti sur quatre colonnes.

On peut également citer la présence d’un bandeau noir placé en bas de la page et contenant un lien permettant aux visiteurs d’accéder au formulaire de contact. Son positionnement est absolu, il reste visible quelle que soit votre position dans la page. C’est une bonne idée, mais qui aurait gagné à être un peu plus développée.

• Point(s) fort(s) : esthétisme agréable, très bon contraste au niveau des couleurs, menu vivant.
• Point(s) faible(s) : le contenu réparti sur quatre colonnes, diaporama un peu simpliste.

Note : Les différentes critiques formulées durant cette sélection sont personnelles et subjective et il est par conséquent possible que vous ne pensiez pas comme moi. Si tel est le cas, n’hésitez pas à vous manifester dans les commentaires de ce billet.