Archives pour la catégorie ‘Coups de coeur’

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 :

La page d'accueil de TrailerAddict
La page d’accueil de TrailerAddict

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 :

La page d'accueil du site de DC Comics
La page d’accueil du site de DC Comics

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 :

La page d'accueil du site d'Electronic Arts
La page d’accueil du site d’Electronic Arts

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

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 :

Le mini de B&O
Le mini de B&O

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 :

La page d'accueil de ala
La page d’accueil de 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 :

La page d'accueil de Gamespot
La page d’accueil de 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 :

La page d'accueil de Mobile Gear
La page d’accueil de Mobile Gear

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 :

La page d'accueil du site de Juliana
La page d’accueil du site de 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 :

La page d'accueil de SiteLeaf
La page d’accueil de 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 :

La page d'accueil de Skinny Ties
La page d’accueil de Skinny Ties

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 :

La page d'accueil de The Little Book Club
La page d’accueil de The Little Book Club

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 :

La page d'accueil de The Great Discontent
La page d’accueil de The Great Discontent

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 :

La page d’accueil de 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 :

La page d’accueil de This Are Things

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 :

La page d’accueil de Circle 21 Candles

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

Mes 3 sites coup de coeur (novembre 2012)

En rédigeant cet article, je me rends compte que j’ai raté le coche le mois dernier… Une fois n’est pas coutume, je vous propose de retrouver ma sélection de sites qui m’ont marqué.

Commençons avec Benefit Cosmetics, une boutique en ligne de produits cosmétiques branchés :

Benefit

Si le header ou la barre de navigation de cette boutique n’apportent aucune originalité, les illustrations, motifs et typographies utilisés véhiculent une image rétro tout à fait rafraichissante (en tout cas, c’est comme ça que je le ressens). J’apprécie particulièrement la page catégorie avec toutes ces illustrations vintages.

Poursuivons avec Farmigo, un service de livraison de produits de la ferme à domicile :

Farmigo

La première chose qui séduit sur cette page d’accueil est l’impression de clarté et d’espace : le nombre très limité de texte à l’écran offre de très larges espaces de respiration qui donne envie de se remplir les poumons. Les chiffres fournis sous le carrousel sont percutants, les illustrations sympathiques, les accroches des vidéos sont très simples à comprendre. Bref, tout est mis en oeuvre pour rassurer et faire passer des messages simples.

Terminons avec Weduary, un service de préparation et de partage de mariage :

Weduary

Oui je sais, il y a beaucoup de rose. Force est de constater qu’ils n’ont pas cherché à s’extraire du cliché chromatique. Si l’on fait néanmoins abstraction de ces à-plats roses, il reste une structure de page tout à fait intéressante avec une construction en strates. Les bénéfices du service sont expliqués en trois étapes et les différentes fonctionnalités sont bien illustrées. Une page d’accueil très visuelle qui donne envie de s’attarder pour découvrir le service en détail. Je regrette par contre qu’ils ne fournissent pas un compte de démonstration.

La suite le mois prochain.

Mes 3 sites coup de coeur pour juillet 2012

C’est bientôt les vacances, alors je vous propose un moment de détente avec ma sélection de trois sites beaux et agréables à regarder (ni plus ni moins).

Commençons avec EverPlaces, un site pour vous inspirer des destinations de vacances, à mi-chemin entre Pinterest et Instagram :

La page d’accueil de EverPlaces

La page Explore de ce site propose une très belle grille de lecture avec beaucoup de raffinement dans le traitement des bordures de photo, des boutons et des champs. J’apprécie particulièrement le fond de page qui fait bien ressortir les blocs et donne du volume à l’ensemble. Bon par contre, je ne cautionne absolument pas les liens en noir non souligné.

Poursuivons avec DIY, un site haut en couleur (euphémisme) qui encourage la créativité chez les plus petits :

La page d’accueil de DIY

J’ai tout de suite été séduit par l’incroyable illustration de fond de page façon “Où est Charlie” que l’on peut déplacer avec la souris. Même si cette illustration hypnotise le regard, la promesse et les boutons d’action en haut à droite contrastent bien avec le fond et sont facilement repérables. De même, le bandeau de bas de page permet d’orienter les internautes ayant raté les boutons plus haut et d’assurer la promotion de l’application mobile. Tant que vous y êtes, ne ratez pas la page Explore, une très belle implémentation de résultats de recherche au format grille.

Terminons avec L’échappée laine, un site en contre-saison de vente de produits de tricotage :

La page d’accueil de L’Échappée laine

J’apprécie particulièrement les couleurs très douces du thème graphique qui contrastent fortement avec les couleurs chatoyantes de pelotes de laine. J’aime également beaucoup les illustrations crayonnées ainsi que le choix typographique. Tant qu’à être sur ce site, n’hésitez pas à faire un tour du côté des modèles ou du blog pour prendre de l’inspiration pour cet hiver.

La suite le mois prochain, ou plutôt à la rentrée…

Mes 3 sites coup de coeur pour juin 2012

Comme chaque mois, je vous propose une sélection de sites qui m’ont tapé dans l’oeil. Ce mois-ci, nous avons une superbe moisson de site grand public avec des approches graphiques assez similaires.

Commençons avec Paypal qui vient tout juste d’annoncer la nouvelle version de son site US : PayPal.com Gets a Makeover.

La nouvelle page d’accueil de Paypal

Une superbe construction en strates horizontales avec un double dégradé de couleurs pour concentrer l’attention sur le coeur de page. J’apprécie particulièrement le choix minimaliste des intitulés et textes, l’harmonie des couleurs et le côté feutré des illustrations sous la photo. Le détail qui tue : les boutons “Forgot?” dans les champs d’identification.

Continuons avec le site Android Developers qui vient également d’être lancé en marge de leur grande conférence annuelle : Google redesigns its Android Developers site as part of ramp up to I/O.

La page d’accueil du site Android pour développeurs

Là encore, il y a eu un gros travail d’épuration ET d’embellissement (ce qui n’est pas commun chez Google) pour proposer une très belle ambiance zen, mais rigoureuse. Vous apprécierez les intitulés de navigation très concis en haut et en bas de page ainsi que les larges zones de respiration. Le détail qui tue : les animations des différents items du header.

Terminons avec Songza, un service de streaming musical uniquement disponible aux États-Unis : Could Songza Kill Pandora and Even Spotify?.

La page d’accueil de Songza

Nous retrouvons sur cette page d’accueil la même construction en strates horizontales que pour les deux autres sites. Les recettes de cette page d’accueil sont les mêmes : quasiment pas de texte, des intitulés courts et précis, des illustrations sobres pour attirer le regard sans monopoliser l’attention…

La suite le mois prochain.

Mes 3 sites coup de coeur pour Avril 2012

Comme chaque mois, je vous propose une sélection de sites qui m’ont tapé dans l’oeil, et ce mois-ci, il y a du lourd, du TRÈS lourd.

Commençons très fort avec Asana, une solution de gestion de tâches collaborative très bien pensée (De l’intérêt de mettre les tâches au coeur de la collaboration) :

La page d'accueil de Asana

C’est le formidable travail d’épuration qui frappe dès l’affichage de cette page d’accueil : Une promesse forte, des bénéfices parfaitement mis en scène (capture d’écran + argumentaires en dessous) et beaucoup d’espace pour concentrer l’attention. La typo choisie est d’une lisibilité exemplaire, les couleurs sont bien contrastées et les options possibles sont réduites au minimum (Create an Account, Sign Up et Log in). La partie de la page est également un modèle du genre avec une mise en page minimaliste, mais terriblement efficace des explications détaillées. Du grand art !

Poursuivons avec GiftDish, un service de suggestion et de gestion des cadeaux :

La page d'accueil de GiftDish

Là encore, un gros travail d’épuration a été réalisé pour n’afficher que le strict minimum : Titre, promesse, identification et bénéfices (vous apprécierez au passage l’effort de réassurance pour l’utilisation de Facebook Connect). Mais ce qui plait par-dessus tout sur cette page, ce sont les textures : le fond de page, les rubans et autres effets d’embossages. Je regrette par contre l’utilisation du rouge pour les titres des quatre bénéfices (le rouge est une couleur très complexe à manier), de même que le “Have an account?” qui passe inaperçu en haut de page. Ne ratez pas le bas de la page qui propose une explication à la fois détaillée et limpide du service.

Terminons avec le Project Noah, une encyclopédie collaborative de la vie animale :

La page d'accueil du Project Noah

Là encore, je suis séduit par l’impressionnant travail réalisé sur les textures, on a vraiment envie de toucher l’écran pour les sentir sous ses doigts (vivement les tablettes à écran haptiques !). Cette page d’accueil est à la fois colorée et parfaitement bien rythmée avec ce découpage en strates horizontales. Les textes sont courts et percutants, les photos donnent envie et les pictos sont parfait séduire les enfants (une des cibles prioritaires du service). Le carrousel en coeur de page fonctionne plutôt bien, mais le picto sélectionné aurait mérité une mise en surbrillance plus visible. De même, les intitulés de navigation du haut de page sont un peu petits, dommage, car il y a pourtant plein de place.

Ce n’est pas tous les mois que je fais une aussi belle récolte, j’espère que vous apprécierez !