Mes 3 sites coups de coeur (juin 2014)

Je vous propose régulièrement une sélection de sites web qui m’ont tapé dans l’oeil, la sélection de ce mois est particulièrement croustillante avec des nouvelles versions de sites d’envergure.

Commençons avec la toute dernière version du site de la radio RTL :

rtl

Le portail de la radio nous revient avec une charte graphique dans le plus pur style flat design : de grands à plat de couleur, une construction par empilement de couches horizontales, beaucoup de zones de respiration et de larges visuels. Je constate également un fond de page gris clair pour donner plus de relief aux différents blocs, une tendance déjà aperçue sur d’autres portails comme USAToday, Vox, GamespotMarthaStewart ou FranceInfo. Avec une mise en page aussi carrée, vous vous doutez bien que le site est en responsive design, il s’adapte donc parfaitement aux différentes tailles d’écran (je vous laisse faire le test). J’apprécie tout particulièrement la parfaite lisibilité des articles, grâce à une taille de police de caractères légèrement plus grande que la moyenne, et la mise en scène des commentaires.

Continuons avec le nouveau site de VW, une référence dans l’industrie automobile :

vw

Même approche graphique pour ce site : flat design + responsive design. Outre l’impression d’espace que l’on ressent en parcourant les différentes pages, c’est le très faible niveau de « bruit » sur les pages qui participent grandement au confort de lecture. Je ne peux que saluer l’engagement graphique et ergonomique des responsables du site qui se sont même payé une vidéo pour promouvoir la fonction Find a Match. Là encore, je vous invite à consulter ce site sur votre tablette ou votre smartphone.

Terminons avec la nouvelle version du site de Virgin America :

virginamerica

Là encore, cette nouvelle version respecte les tendances du moment (flat et responsive design), en revanche, il innove grâce à un processus de réservation particulièrement intuitif avec un traitement graphique novateur reposant sur des grandes cases à cocher : Our new site is fly. Ils proposent également un nouveau gabarit pour les e-tickets à imprimer qui devrait rapidement s’imposer comme la nouvelle norme dans la profession : Virgin America Quietly Unveils New Website and Back Pocket-Sized Boarding Pass. À nouveau, je salue la prise de risque de cette compagnie qui s’inscrit résolument en rupture avec cette superbe réalisation.

Je ne sais pas pour vous, mais j’ai comme l’impression que la généralisation des terminaux mobiles fait souffler un vent frais sur les chartes graphiques et mises en page. Et ça n’est que le début…

Mes 3 sites coup de coeur (avril 2014)

Je vous propose régulièrement une sélection de sites dont le design m’a particulièrement plu. Les trois sites que je vous présente cette semaine sont assez semblables dans leur construction et reflètent plutôt bien les tendances du moment : simplicité, clarté et modularité.

Commençons avec TrailerAddict, le célèbre site de référence pour les bandes-annonces :

traileraddict1

Cette nouvelle version propose une charte graphique très sobre avec vert sombre qui n’est pas sans rappeler le nouveau Slashdot. Parfaitement épurée, cette page d’accueil est construite selon une grille de lecture impeccablement découpée en quatre colonnes. Vous apprécierez le choix typographique et le très bon contraste des titres. Tout est mis en oeuvre sur cette page pour faire ressortir les visuels des films, rien à redire, c’est du beau travail.

Poursuivons avec la nouvelle version du site de DC Comics :

dccomics1

Là encore, la sobriété est de rigueur, aussi bien au niveau des couleurs que des typographies. J’apprécie particulièrement les événements qui animent cette page : l’animation du carrousel ainsi que les bulles et pastilles qui apparaissent quand on fait défiler la page vers le bas. L’alternance entre bandeaux à fond blanc et bandeaux avec trames de fond donne un rythme dynamique à la page et incite le visiteur à regarder plus bas. Je vous invite à aller visiter les profils des différents superhéros, très proches de ce que l’on trouve sur Facebook ou Twitter (j’imagine que c’est un clin d’oeil assumé). Amusez-vous également à redimensionner la fenêtre de votre navigateur pour voir comment la mise en page peut s’adapter aux terminaux mobiles.

Terminons avec le site d’Electronic Arts :

ea1

Les recettes graphiques de ce site sont les mêmes que pour les deux précédents exemples : sobriété, fort contraste des titres et intitulés de navigation. L’engagement visuel sur cette page est un peu plus prononcé grâce à l’image de fond qui donne le ton. Les pages intérieures sont du même acabit avec une grille de lecture bien marquée et des unités d’information représentées sous forme de blocs (ou de cartes) qui flottent sur une trame de fond. Je ne peux qu’encourager cette construction de page, car elle laisse un minimum de liberté aux designers tout en offrant une parfaite lisibilité pour les visiteurs.

Avec ces trois sites, vous avez maintenant une bonne idée de LA tendance graphique du moment : sobriété, éléments visuels rectangulaires et larges à plat de couleurs unis. Une réappropriation très réussie du flat design.

Mes trois sites coup de coeur (janvier 2014)

Voilà bien longtemps que je ne vous avais pas proposé de sélection de sites. Pour cette nouvelle année, je vous propose trois créations radicalement différentes les unes des autres.

Commençons avec Eagle Adventure Tours, une agence de voyages spécialisée dans les vacances en Harley ou en muscle cars :

 

eagle

La page d’accueil se contente de dérouler une vidéo noir & blanc en fond de page avec des accroches stylisées pour présenter les différents produits. C’est sobre, mais terriblement efficace, car on est littéralement captivé par toutes ces belles images. Le haut de la page est parfaitement contrasté et ils ont même prévu un retour visuel, le petit carré orange sous les items de navigation, pour faciliter le repérage. Les pages intérieures sont du même acabit : simple et efficace.

Continuons avec le nouveau site de Google Venture, à la fois minimaliste et sophistiqué :

 

gv

Vous apprécierez le choix de la typo et des illustrations, ainsi que le menu latéral qui se déplie au survol de la souris. La charte graphique est a priori plutôt minimaliste, mais les formes géométriques cliquables en fond de page et les effets des transitions de la barre de gauche apportent une touche de modernité et de sophistication. Cette charte graphique à plusieurs niveaux de lecture est assurément du très bon travail.

Finissons avec le CV interactif de Robby Leonardi :

 

robby

Le site déroule de gauche à droite façon Mario Bros. Les différents panneaux sont entièrement animés (compétences…) et le tout est parfaitement intégré avec, cerise sur le gâteau, une mise en page fluide. Si l’ont peut douter de l’originalité des choix graphiques, qui restent néanmoins très fidèles à l’original, je suis par contre admiratif du travail d’intégration, car la mise en page n’est jamais prise à défaut.

La suite très prochainement.

Mes 3 sites coup de coeur (novembre 2013)

Comme chaque mois (ou presque), je vous propose une petite sélection de sites qui m’ont tapé dans l’oeil.

Commençons avec un mini-site produit lancé par B&O pour son casque H6 :

H6

Nous commençons à voir de plus en plus de sites mono-page construits sur ce modèle avec une organisation verticale et un séquençage par panneaux, mais celui-ci est particulièrement sobre et chaleureux. L’alternance des couleurs permet de bien délimiter les panneaux entre eux. Un soin particulier a été apporté aux transitions qui permettent d’animer la page et de renforcer le contraste entre l’épuration des panneaux et la richesse des contenus (surtout de larges visuels). Vous noterez au passage la petite télécommande à gauche de l’écran avec les différentes étapes et des pictos différents pour l’achat et le partage.

Le deuxième site est aux antipodes du premier avec le portfolio tout en couleurs du studio ala :

ala

Là encore, nous avons un site mono-page avec un empilement vertical de panneaux, mais à la différence du premier site qui jouait sur la sobriété, celui-ci tente de déstabiliser les internautes avec une profusion de couleurs, textures et mouvements sur la page. Un petit lapin sur la droite de la page vous incite ainsi à scroller vers le bas, mais chaque panneau est animé au survol de la souris ET défile horizontalement au fur et à mesure de la décente de la page. Il en résulte un foutoir visuel monstrueux, mais parfaitement captivant : ça défile, ça bouge, ça clignote, ça fait mal aux yeux, mais on en redemande ! Cerise sur le gâteau : les illustrateurs de ce studio sont particulièrement doués en Pixel Art, ce qui accentue encore plus le contraste entre leurs réalisations modernes et les panneaux informatifs qu’ils entrecroisent.

Dernière sélection du mois avec la toute nouvelle version du portail Gamespot :

GameSpot

Pour celles et ceux qui ne connaissent pas, Gamespot est un monument de l’actualité des jeux vidéo, je ne me rappelle pas d’une époque où ce site n’existait pas… Toujours est-il que malgré son ancienneté et sa légitimité, l’éditeur a dû fournir des efforts colossaux pour rationaliser le gigantesque contenu du site et surtout pour dépoussiérer l’image du portail. Ils se sont donc inspirés des standards du genre (Polygon et Quatrz) pour proposer une mise en page moderne et beaucoup plus accessible. Le résultat est très plaisant à regarder et parcourir. La police de caractère choisie et les deux thèmes proposés (foncé et clair) offrent une très bonne lisibilité. Les pages d’article (ex : Beyond: Two Souls Review) sont un vrai régal à lire à l’écran, même sur votre tablette puisque la mise en page est responsive. Le détail qui tue : la mini-jeu d’exploration proposé sur la page d’erreur 404, à tester impérativement !

La suite le mois prochain.

Mes 3 sites coup de coeur (juin 2013)

Voilà plusieurs mois que je n’ai pas publié ma série de sites coup de coeur, tout simplement parce que je n’ai pas eu de coups de coeur. Heureusement ma liste se remplit à nouveau, je vous propose donc une toute nouvelle série de trois sites.

Commençons avec Mobile Gear, une boutique en ligne de produits et fournitures de bureau :

MobileGear

D’habitude, les boutiques de ce type sont extrêmement rébarbatives et ne sont là que pour enregistrer plus rapidement des commandes de produits de nécessité. J’ai donc été très agréablement surpris par cette boutique qui propose un choix restreint (uniquement les meilleurs produits) et surtout des pages de catégorie où les produits sont disposés de façon symétrique et photographié de haut. Le rendu visuel de ces photos est tout simplement génial. Vous noterez de plus que les grands à plat de couleur gris, les formes carrées et les boutons plats s’inscrivent tout à fait dans la mouvance du « flat design » (comme le nouvel iOS 7). Certes, les pages intérieur sont moins spectaculaires, mais je tenais à saluer l’effort réalisé avec ce travail photographique.

Continuons avec Juliana, un fabriquant de VTT pour femmes :

Juliana

Nous sommes là dans une approche radicalement différente avec l’utilisation de superbes photos en plein écran et d’un système de navigation minimaliste. L’esprit du site est conservé jusque dans les pages intérieures et notamment les fiches produit qui sont une merveille d’épuration avec des photos tout autant généreuses. C’est sûr que ça donne carrément envie, même si je ne suis pas dans la cible !

Terminons avec SiteLeaf, une plateforme de gestion de contenu ultra-simple :

SiteLeaf

Ce qui est frappant avec ce site est qu’il est aussi simple que l’outil semble l’être. Et pour cause : ils se sont arrangés pour appliquer les mêmes codes graphiques et ergonomiques que sur la plateforme de gestion de contenu en elle-même. Nous obtenons donc énormément d’espace blanc, des grands à plat de couleur façon flat design (maintenant vous connaissez, non ?) et des textes minimalistes. L’impression de clarté et saisissante et on a immédiatement envie d’en savoir plus sur cette plateforme tant elle a l’air simple d’utilisation. Sur ce créneau ils font la compétition avec Squarespace qui vient de lancer une nouvelle version de site. Je ne sais pas à quoi va ressembler la future nouvelle version de WordPress, qui est censée être grandement simplifiée, mais je me doute qu’il va y avoir des ressemblances…

Mes 3 sites coup de coeur (mars 2013)

Comme chaque mois, je vous propose une sélection de sites qui m’ont particulièrement marqué. Je comptais vous faire une sélection de sites ultra-minimalistes, comme ceux de Google Glass ou Calm, mais je n’aurais pas eu grand-chose à raconter. Je vous propose donc une sélection plus traditionnelle, mais néanmoins toujours aussi plaisante à regarder.

Commençons avec Skinny Ties, une boutique de cravates :

SkinnyTies

La première chose que l’on a envie de « toucher » sur cette page sont les cravates qui pendent sous le header, ça tombe bien, elles s’animent au survol de la souris. Non seulement ces invit visuelles sont ludiques, elles permettent de réchauffer la page (plutôt austère) et d’expliquer visuellement à quoi correspondent les catégories. Vous apprécierez également l’originalité de la typo et les intitulés très brefs. Bon par contre, je ne cautionne pas le positionnement du moteur de recherche, j’aurais inversé l’ordre et placé le panier à droite, mais ça doit être mon côté psychorigide…

Continuons avec The Little Book Club, un service de vente de livres pour enfants :

LittleBookClub

Comme toujours, j’apprécie énormément ces larges zones de respiration qui donnent une impression de plénitude à la page. L’arrondi du bouton et de la typo, de même que le petit smiley sur la barre de séparation complète le côté kawaii. Il y a très peu d’éléments sur cette page, mais un soin particulier a été apporté aux détails comme la bordure du logo ou l’encadrement des photos. Je regrette par contre le manque de contraste des items de navigation en haut de page.

Terminons avec The Great Discontent, un webzine d’interviews de personnalités créatives :

TGD

J’ai toujours eu une obsession pour le contenu, il est donc tout à fait logique que je vous présente ce webzine qui a faît disparaitre son interface au profit des interviews. Vous noterez ainsi qu’à part le discret logo et les deux intitulés de navigation en haut à droite, la page n’est composée que du texte et des photos. Tout est mis en oeuvre pour vous donner envie de lire à l’écran : de larges photos, une grille de lecture bien marquée pour isoler les blocs éditoriaux et une typo agréable à l’oeil. Rien à redire, je suis admiratif devant les choix radicaux faits par les éditeurs.

La suite le mois prochain.

Mes 3 sites coup de coeur (janvier 2013)

Décidément je ne suis pas très régulier dans mes publications pour cette rubrique, car j’ai encore sauté un mois en fin d’année dernière. Ce n’est pas grave, car je vais ai déniché trois superbes sites pour cette sélection de la nouvelle année.

Commençons avec Tripbirds, un moteur de recherche d’hôtels à la sauce sociale :

Tripbirds

Dès que l’on arrive sur cette page, c’est le souci du détail qui saute aux yeux : le fond de page, les typographies, la bordure supérieure… participent à donner une ambiance très chaleureuse à ce site, par opposition aux moteurs de recherche traditionnels comme le glacial Google Hotel Finder. J’apprécie également les deux tons utilisés pour scinder en deux la page, ainsi que les intitulés placés dans les champs de recherche eux-mêmes. L’argumentation et les illustrations de la seconde moitié de page sont parfaitement claires et explicites. Élégant et sophistiqué, j’adore !

Poursuivons avec These Are Things, une boutique en ligne de cartes et d’illustrations :

TheseAreTheThings

J’espère que vous apprécierez à sa juste valeur le très bon travail d’illustration et d’iconographie réalisé sur cette page haute en couleurs qui se découvre en faisant défiler vers le bas. Les icônes sont très mignonnes et homogènes, l’effet de parallax scrolling est parfaitement exécuté et donne envie de faire des A/R tant les tableaux sont rigolos. L’intérieur du site est dans la même ligné, mais beaucoup moins chargé, notamment la boutique, que je vous conseille de visiter.

Terminons avec Circle 21 Candles, un fabricant de bougies :

CircleCandles

Que dire de ce site si ce n’est que c’est une merveille de minimalisme et d’élégance : les couleurs douces, les typos très fines, les larges espaces blancs… tout est mis en oeuvre pour véhiculer du calme et de la sérénité. Assurément un modèle du genre.

La suite le mois prochain (j’espère !).