Web design inspiration #6

Cela fait bien longtemps que je n'avais pas partagé quelques interfaces web avec vous ! Le dernier billet du genre, consacré au web design pastel, remonte à mai 2014, tempus fugit, yada yada.

Je suis abonnée à pas mal d'annuaires CSS et autres blogs spécialisés dans le web design, mais je suis souvent déçue par les sélections qui y sont faites : on finit toujours par retrouver le même genre de trucs. Il est rare que des interfaces sortent vraiment de l'ordinaire au point de me donner envie de visiter le site.

Mais, parfois, il suffit d'un joli détail, d'une couleur époustouflante, d'une typo jamais vue, d'une simple idée qui se révèle brillante, pour que le site sorte de l'ordinaire et que je l'épingle.

Alors que j'entends tous les jours fuser autour de moi les « C'est joli ! » et autres « C'est moche ! », l'idée de mes sélections web design est de vous inviter à aborder chaque design avec un œil avisé – un œil certes avide de beauté et d'originalité, mais néanmoins critique !

Edith : je suis tombée sur ce tweet de Julien Ducerf, et je ne pourrais être plus d'accord !

Dans le webdesign il peut y avoir quelques tendances, mais le design répond d'abord à des besoins utilisateurs spécifiques et relatifs.

Juste histoire de préciser : la sélection que je vous propose ici est totalement subjective et personnelle, elle ne répond à aucune « tendance » particulière !

The Style Spy

Mon petit plaisir coupable, c'est le rose fluo. Je sais, je sais : rien à voir avec le mauve ténébreux et la mélancolie que j'affectionne, et pourtant, c'est une couleur qui m'attire comme un aimant. (C'était d'ailleurs la complémentaire d'un précédent thème de mon blog.)

The Style Spy est un blog dédié à la mode – mais voilà, seul son design m'intéresse ! En l'occurrence, j'adore le grand titre script, l'overlay rose néon qui recouvre l'interface quand on ouvre une popin, ainsi que les petites animations ici et là. Cela donne beaucoup de pep's et de fraîcheur dans un univers désespérément obsédé par le blanc et le gris.

Par contre, niveau inté, on peut regretter que la texture de fond, quadrillée, provoque un clignotement visuel quand on a fait défiler toute la page. C'est très vilain et ça distrait beaucoup. :roll:

Stuck with Pins

Alors qu'un blog est le meilleur prétexte qui soit pour créer quelque chose de très personnel sur le web, je suis souvent surprise de voir les blogueurs adopter des giga tonnes de templates tous plus ou moins similaires.

Aussi, quand je suis tombée sur Stuck with Pins, de battre mon cœur s'est arrêté quelques secondes. La jeune designer Corinne Alexandra a réussi à créer quelque chose d'original, de curieux mais sans tomber dans l'overdose de photomanipulation à gogo, chère aux amateurs (et je sais de quoi je parle pour l'avoir longtemps pratiqué).

J'aime les tons neutres et naturels, pas d'exubérance mais un souci du détail chromatique qui place ce design légèrement avant les autres. Par exemple, la photo de la blogueuse assortie à son interface, c'est un détail que j'aime bien ! Ce n'est pas du tout évident à obtenir.

À noter aussi : les choix iconographiques à l'intérieur des billets, notamment les belles photos, mais aussi les « natures mortes » d'objets (comme sur la capture ci-dessous). Tout cela renforce l'ADN du blog et le rend mémorable.

Good Mens Goods

Pour cette interface-là, je trahis mes idéaux : en effet, je ne suis pas fan des projets fictifs, qu'il s'agisse de refontes non sollicitées ou bien de projets montés de toute pièce qui ne verront jamais le jour. C'est de la triche !

Le web n'est pas une grande image, c'est avant tout du code. C'est pour cela qu'un bon design web ne peut être qu'un design qui épouse les spécificités techniques du média.

Mais il faut quand même reconnaître à ce Good Mens Good un sacré style. Je vous conseille d'aller voir l'ensemble sur Behance, ça vaut le coup d'œil.

Maintenant que nous avons rêvé cinq minutes, revenons sur la terre ferme, et observons ensemble tous les éléments qui relèvent au mieux de l'optimisme, au pire du fantasme :

• L'effort de contribution nécessaire me semble complètement irréaliste, notamment sur la page d'accueil : chaque image qui compose l'interface a fait l'objet d'une retouche plus ou moins avancée, avec un travail typographique soigné, totalement incompatible avec le rythme de renouvellement requis par la page d'accueil d'un véritable site ecommerce.
• Les titres de produits sont tous courts, comme par magie ! Ça, c'est une erreur que j'observe systématiquement sur les PSD qu'il m'est donné d'intégrer. Les designers ne pensent pas assez à l'élasticité de leurs modules, au fait que des titres produits peuvent effectivement être très longs, notamment en langues étrangères. Les titres de deux ou trois mots, ça n'existe pas, en tout cas pas s'ils remontent automatiquement d'un PIM quelconque.
• Enfin, je me marre quand je vois la bordure jaune des mini fiches produits, devant laquelle passerait la tête du mannequin de la photo. Alors là, comment dire… À moins que toutes les photos de tous les produits soient parfaitement détourées et effectivement contribuées en PNG transparent (ce qui, de toute façon, alourdirait beaucoup le poids de chaque page), ce genre de délire est né du doux rêve de graphiste qui ne connaît pas très bien le web. Dans la vraie vie, on aurait une bordure autour de la photo, qu'il faut imaginer comme un bloc carré ou rectangulaire. Ceci est l'exemple typique du petit détail sympa sur lequel le client a un coup de cœur, mais qui est irréalisable dans la pratique, ce qui est toujours source de déception et de frustration pour tout le monde (intégrateurs compris).

Hochburg

Le dernier site dont je voulais vous parler aujourd'hui, c'est le portfolio de l'agence allemande Hochburg, que j'ai découvert grâce à Aleks.

Par bien des aspects, ce design me rappelle celui du célèbre site Subtraction, de Khoi Vin.

Hochburg a tout misé sur un site « single page » (tout sur la même page), ce qui peut sembler légèrement too much étant donné la masse de blocs, de photos et de visuels qu'il contient.

Mais l'enchaînement des sections noires et blanches se fait assez bien, on sent que la scénographie a été travaillée et que rien n'est laissé au hasard.

Mention spéciale pour le travail de design sur la typographie et les graphismes un peu grunge, qui sortent de l'ordinaire. Ce n'est pas commun de trouver ce genre d'esthétique très forte en gueule sur un site d'agence.

Les illustrations jouent un rôle prédominant sur le site, et ancrent le travail de Hochburg dans une recherche plastique plus globale : le média web n'est qu'un tremplin vers quelque chose de plus organique (rappel du tracé d'un pinceau, des débordements d'une encre mal maîtrisée, collages, etc.).

D'ailleurs, un slider entier est consacré aux illustrations ! Cela semble un peu gadget, et pourtant on se surprend à faire défiler les images pour en prendre plein les yeux.

Au milieu de ce tableau idyllique, le seul faux pas graphique concerne le trombinoscope. Les photos sont en total décalage avec l'ambiance du site : couleurs pastels (qu'on ne trouve nulle part ailleurs sur l'interface) et éclairage très « hollywoodien », alors que des portraits constrastés en noir et blanc, auraient peut-être été plus logiques. (Je pense aux photos qui se trouvent dans la section « Follow us » en bas de page, qui sont bien dans le ton, elles.)

Mais, va, je leur pardonne ! :-P

J'espère que cette sélection vous a donné des idées ! Bon courage pour votre semaine ! :)