Cela fait très, très longtemps que je n'avais plus réuni quelques interfaces web autour d'un thème.
J'utilise beaucoup Pinterest, et je collectionne un paquet d'interfaces inspirantes dans mon tableau Web design.
Un mot à propos du pastel
En ce moment, j'ai une lubie : le web design pastel.
Comme souvent chez moi, tout a commencé grâce à un livre. Le genre de livre qui crie : « Je suis fait pour toi ! Achète-moi ! ».
Ensuite, j'ai été ensevelie sous une vague de tons pastels : sur Pinterest, dans les magazines, les affiches, dans d'autres livres, sur des pochettes de disques, etc.
Y a-t-il réellement une tendance au pastel, ou bien est-ce simplement mon regard qui le débusque plus vite que son ombre ?
Toujours est-il que ces tons veloutés, doux et clairs, m'inspirent énormément. Car – est-il besoin de le préciser ? – je réfléchis depuis quelques mois à la refonte de mon site et de mon blog.
« Encore ! », soupirerez-vous en sirotant votre tasse de thé. C'est que la pierre brute n'est jamais suffisamment taillée, et c'est que mon petit monde est en pleine mutation. Je sais que d'ici un an j'aurai beaucoup changé.
Je prépare juste le terrain – un terrain mœlleux et réconfortant, pour amortir ce grand bond en avant que je m'apprête à faire.
RDV Design
Un design fascinant créé par les designers québécois Catherine Marois et Oliver Chank.
RoAndCo
Un portfolio d'agence qui aime mélanger le neuf avec le vieux ; le charme désuet du vieux rose et d'une police serif, toujours noire. Grille + contrastes = ♥
Mr Marcel School
Très belle charte web créée par le studio graphique Tata&Friends. Je suis dingue de cette alternance de couleurs, parfaitement orchestrée grâce à une grille implacable. Ça plaît à mon côté Arlequin.
Nasty Gal
Intéressante, cette façon de pimenter le pastel avec des photos très pêchues. On fait du ecommerce, là : d'où le besoin de réveiller les utilisatrices.
Craftsmen
Refonte du site de l'agence française Craftsmen par le célèbre Mike Kus, qui a pris au pied de la lettre le mot « digital ».
Swooned
Un design pastel tout en dégradé réalisé par le studio One Plus One Design.
Attention tout de même à la lisibilité. Blanc sur pêche, blanc sur vert d'eau, ça ne suffit pas.
Quand vous designez pour le web, testez régulièrement vos contrastes. Deux outils pour cela :
- Luminosity Colour Contrast Ratio Analyser (je l'utilise tout le temps) ;
- Colour Contrast Analyser, pour Mac et PC.
Si vous en utilisez d'autres, partagez-les dans les commentaires ! :)
HI(NY)
Le portfolio du duo new-yorkais HI(NY) (Hitomi Watanabe et Iku Oyamada) m'a séduite au premier coup d'œil : la charte est super jolie – délicate et poudrée, avec un petit twist très moderne.
Et puis, ce fond uni, ces éléments posés dessus sans blocs ni conteneurs, ça repose. D'où le pétillement visuel pour rythmer un peu tout ça.
Robert Siegel Studio
Un autre exemple d'utilisation de couleurs pastels sur un site ecommerce. (Mais cette version n'est plus en ligne.)
Direction artistique signée par le studio américain Magic + Logic.
Le Salón
Les couleurs pastels siéent bien au monde de la mode, dont elles flattent les silhouettes.
Alors que les couleurs pastels sont souvent utilisées dans des designs minimalistes, où la typo joue un rôle prédominant, ici l'ajout d'éléments végétaux séchés insufflent un je ne sais quoi de matérialité dans l'œuvre.
Design créé par Inbal Lapidot.
Place – Architectural Scotland
Ok, je triche un peu car il ne s'agit pas de web design, mais d'app design. N'empêche qu'il s'agit quand même d'une bien belle interface, assez surprenante finalement : l'Écosse est souvent rattachée aux couleurs de ses paysages et de ses costumes traditionnels – du rouge cramoisi et du vert canard en veux-tu en voilà.
Le designer anglais Ian Westwater a pris le contre-pied de ce marronnier visuel, en dotant l'application de dégradés pastels rose et bleu, et en s'aidant de motifs géométriques simples, façon de mieux se rattacher à l'objet de l'application (l'architecture) et moins au lieu concerné (l'Écosse).
Northside 2014
Quand le pastel se réveille, il tire sur le fluo : les designers danois Morten Lybech et Sandra Gutkin ont compensé l'apparence simplicité du layout par des couleurs inhabituelles.
Un propos graphique qui se fait remarquer, bien adapté à un festival de musiques hipster indépendantes.
Deux blogs pastels
Il y a deux blogs que j'aime bien, pour qui le pastel est un art de vivre. Il s'agit de Ahoy Miss et de Scathingly Brilliant.
Quand j'ouvre mon Feedly, je suis toujours hyper impressionnée par l'excellente cohérence graphique de chacun de leurs billets. Une telle maîtrise du style force le respect.
J'aime ce parti pris visuel fort. Derrière ces couleurs édulcorées se cache un parfait branding.
Du bon usage du pastel
En matière de design, les couleurs ne s'utilisent pas par hasard. Le pastel n'y fait pas exception.
Le pastel est doux, apaisant, réconfortant. Il caresse dans le sens du poil. À l'instar d'un dessert au glaçage fruité ou d'une poignée de bonbons, le pastel constitue la petite note sucrée qui fait du bien.
Le pastel est aussi vecteur de nostalgie : il rappelle les couleurs délavées des vieilles photos, ce t-shirt dont les couleurs se sont évanouies au soleil, la layette et les souvenirs d'enfance, mais aussi certains vêtements féminins. Peut-être cela explique-t-il pourquoi le pastel est souvent utilisé dans l'univers de la mode.
Le pastel apporte avec lui une notion de versatilité subtile. Les couleurs pastels n'ont pas le droit de cité en politique, où le discours est fort, engagé. Le pastel manquerait-il de poigne ?
Sur le web, le pastel est utilisé principalement sur des portfolios, des lookbooks ou bien des petits sites aux contenus textuels limités.
Il est aussi utilisé dans des applications très visuelles, mais plus rarement pour le e-commerce. On le croise également très peu du côté des institutions devant invoquer la confiance : banques, compagnies d'assurance…
Peut-être le pastel est-il trop délicat pour cela. C'est une couleur subtile qui a toujours le sourire, même si certains jours il ne s'agit que d'un petit sourire triste. De là à dire que le pastel est superficiel…
Le pastel s'utilise avec tact : soit il se suffit à lui-même (dans ce cas on travaillera en ton sur ton, pour ne pas le perturber – l'ombré et le dégradé ouvrent dans ce cas de nouvelles possibilités), soit on l'utilise comme faire-valoir pour faire ressortir des éléments d'un design. Le contraste avec des couleurs sombres ou très pigmentées est alors de mise : noir bien sûr, beaucoup de noir, mais aussi du bleu outremer, du carmin, du terre de Sienne ou un violet profond.
Le pastel neutralise un design pour en faire ressortir les contenus. On trouve beaucoup d'interfaces épurées, où les photos et la macro-typographie parlent pour elles-mêmes.
J'aime le contraste entre un rose pastel et un typographie massive. Alors qu'on a l'habitude de voir des sites au design minimaliste sur fond blanc, une simple couleur pastel nous sauve de l'ennui et ajoute beaucoup d'affect.
J'aime l'univers des couleurs pastels. Je crois que je m'y sentirai bien.
Edit : plus de ecommerce pastel
Stefie me signale trois autres sites ecommerce tout de pastel vêtus : Anthropologie, Ruche et ModCloth.
Sur ces sites, les photos ne sont pas forcément aussi travaillées que sur les sites dont j'ai parlé précédemment : il ne serait pas possible de traiter chaque photo séparément, surtout si elles proviennent de fournisseurs différents.
Toutefois, ce n'est pas vraiment gênant puisque le fond de chaque interface reste blanc. Le pastel est cantonné à l'entête et au pied de page. Une autre façon d'utiliser le pastel avec toute la subtilité qu'il mérite !
Edit : une sélection variée d'interfaces web pastels à voir !
2 juin 2014
Le pastel est effectivement doux à regarder (sauf la variante fluo qui tranche nettement avec le reste). En revanche, à mon sens une des difficultés restantes par rapport à ce genre de charte, c'est le choix photo.
La plupart des photos présentées sur les maquettes restent elles mêmes dans des tons adaptés afin de garder une certaine cohérence visuelle, chose que le client aura parfois du mal à faire sauf si ces couleurs font réellement parties de son "ADN". La on peut rentrer dans le débat de l'éducation du client ce qui pourrait être intéressant :)
Concernant les outils, personnellement, j'utilise :
- http://leaverou.github.io/contrast-ratio/ pour tester rapidement un ratio,
- http://contrast-finder.tanaguru.com/ pour avoir des propositions de couleurs alternatives accessibles pendant la réalisation d'une maquette.
PS : au passage, petite faute sur (je l'utiliste tout le temps) ;)
2 juin 2014
Salut !
Oui tu as parfaitement pour le choix photo, c'est bien vu. C'est vrai que là j'ai délibérément choisi des interfaces réussies, harmonieuses, qui font rêver. Il pourrait être intéressant de montrer « Ce qu'il ne faut pas faire », en illustrant les mauvaises pratiques avec une interface web pastel mais avec des photos pas du tout adaptées.
Le truc c'est que tant que je ne tombe pas dessus, je ne sais pas où trouver de tel contre-exemple.
Ceci dit, c'est vrai, il faudrait que le designer tienne compte, au moment de la création de la charte d'un site, du type de photos dont dispose le client.
Le problème, c'est qu'en général on n'a pas cette info, notamment au stade d'avant-vente : on doit proposer une maquette qui donne envie au prospect de travailler avec nous.
Si la maquette initiale lui a tapé dans l'œil, et qu'on découvre que ses photos ne sont pas adaptées, c'est un peu tard. On peut toujours changer les couleurs utilisées, quitte à les saturer un peu plus, pour qu'elles épousent mieux la photothèque concernée ; mais si le client a eu un coup de cœur pour la maquette initiale proposée en AVV, le problème reste entier.
Tout à fait ! D'ailleurs c'est pour ça que les tons pastels sont souvent utilisés dans la mode, pour des clients qui ont des budgets photos conséquents, ainsi que des directeurs de créa au taquet, mais bien peu sur les sites ecommerce grand public, qui présentent en effet des produits dont on ne contrôle pas du tout la chromie.
(Et sinon, bien vu pour la coquille, c'est corrigé ! Merci !)
19 juin 2014
Chose surprenante, le bleu, dit pastel (#56739a), du moins tel que présenté dans ce nuancier, pour moi, ne correspond pas à une couleur pastel. Je reste perplexe.