Marie Guillaumet

  • Aller à la navigation
  • Aller au contenu
  • Aller à la recherche

Marie Guillaumet

Menu

Menu principal

  • Accueil
  • À propos
  • Portfolio
  • Blog
  • Contact

Blog

Publié le 27 janvier 2015 dans Inspiration

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

The Style Spy
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

Stuck with Pins
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

Good Mens Goods
Good Mens Goods, par Alexey Rybin

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).
Mini fiches produits sur le site fictif Good Mens Goods

Hochburg

Hochburg
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.).

Hochburg

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.

Hochburg

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 ! :)

Article publié le 27 janvier 2015 et mis à jour le 18 avril 2017.
Tags: agences, inspiration, mode, portfolio, web design

Billets similaires

Convaincre les designers des bienfaits de l’accessibilité, oui, mais comment ?

8 commentaires

Making-of : refonte du blog d’Aleks Crément

34 commentaires

La linguistique des métiers du web

21 commentaires

16 commentaires

  • Billet précédent : « L'Art du game design » de Jesse Schell
  • Billet suivant : Renouveler créativement le web

16 commentaires sur « Web design inspiration #6 »

  1. Stella Polaris

    27 janvier 2015

    Merci pour la dose d'inspiration ! Je vais m'empresser de découvrir Stuck With Pins...

    • Marie

      31 janvier 2015

      ♥︎

  2. Moonlight

    27 janvier 2015

    hochburg TROP BON ! Et dis-donc il est vachement bien le blog d'Aleks. Merci pour le lien ! Heureux de savoir qu'il existe plein de bastions de résistance face au design insipide ambiant. :-*

    • Marie

      31 janvier 2015

      Ouais, il y en a, suffit de savoir où chercher ;-)

  3. Aleks Crément

    28 janvier 2015

    Ah Corinne Alexandra! C'est probablement une des filles que j'admire le plus au niveau photo, son style et son niveau sont tout à fait écoeurants!

    J'avais d'ailleurs hésité à l'inclure dans le mood board, puisqu'on a des thématiques assez similaires, et te dire que je voulais la version dark de ce genre d'univers... Je me souviens l'avoir enlevée au final puisque je ne voulais pas que le côté un peu "hipster" de ses designs (que j'aime beaucoup mais qui ne me correspondent pas personnellement) prenne le dessus!

    Je suis contente que Hochburg t'ait fait le même effet que moi! C'est dur de faire dans le grunge sans que ça sombre dans le mauvais goût...

    Bisous!

    • Marie

      31 janvier 2015

      son style et son niveau sont tout à fait écoeurants!

      Ahah ! :'D

      Sinon, ouais Hochburg propose des détails fascinants. Je n'ai jamais vu ce genre de direction artistique sur un portfolio d'agence… C'est cool, ça change :)

  4. AC

    28 janvier 2015

    Whaaa, merci pour l'inspiration :D
    Je suis trop heureuse d'avoir découvert ton blog, il est tout ce que j'aime suivre, niveau graphisme comme contenu ! Génial ;)
    Bixx

    • Marie

      31 janvier 2015

      Merci AC, contente de t'accueillir par ici :)

  5. Anne

    28 janvier 2015

    Jolie sélection.
    L'entête de The Style Spy m'avait aussi tapé dans l'oeil.
    Au niveau du détail qui m'insupporte, c'est la photo du chien dans le trombinoscope. Vu partout et beaucoup "hipsterisant" à mon goût.

    • Marie

      31 janvier 2015

      Au niveau du détail qui m'insupporte, c'est la photo du chien dans le trombinoscope. Vu partout et beaucoup "hipsterisant" à mon goût.

      LOL ! Punaise, j'étais passée à côté ! Horrible. :-D

  6. Anne

    29 janvier 2015

    Super billet!
    Je craque pour "Stuck with pins", tu t'en doute^^ <3
    Des bisous

    • Marie

      31 janvier 2015

      =^.^=

  7. Candice

    29 janvier 2015

    Oulalala Stuck with Pins = *-*
    Merci beaucoup Marie pour ces posts, ils sont très inspirants et aiguise vraiment ma critique - ce qui est comme tu le dis si bien, très important.

    J'ai adoré ta capture de The Style Spy, et quand j'ai ouvert le site ... j'ai été déçue. Je trouve ça un peu plat dans la présentation des articles.

    Le travail sur la typography de Hochburg est incroyable, j'adore leur univers.

    • Marie

      31 janvier 2015

      Merci beaucoup Marie pour ces posts, ils sont très inspirants et aiguise vraiment ma critique - ce qui est comme tu le dis si bien, très important

      Super, ça fait plaisir à lire ! Contente que tu trouves ça intéressant, ça me donne envie de continuer :)

      J'ai adoré ta capture de The Style Spy, et quand j'ai ouvert le site ... j'ai été déçue. Je trouve ça un peu plat dans la présentation des articles.

      Ouais, un peu pareil, je dois dire. Mis à part le haut de page et l'aplat rose fluo, le reste paraît bien fade…

  8. Julien

    3 avril 2015

    Très très bon article Marie et grand merci pour la citation de mon tweet! ;-)

    • Marie

      3 avril 2015

      Je t'en prie ! ^.^

Les commentaires sur ce billet sont désormais fermés, mais vous pouvez toujours m’envoyer un email si vous souhaitez me dire quelque chose !

  • Accueil
  • À propos
  • Portfolio
  • Blog
  • Contact

Restons en contact

  • Flux RSS
  • Twitter
  • LinkedIn
  • Site web fait maison
  • Mentions légales
  • Politique de confidentialité
  • Plan du site
  • WordPress