Mes 3 sites coup de coeur (mars 2010)

Ce mois-ci j’ai encore une belle moisson de jolis sites, je me demande même si je ne vais pas passer à 5 sites coup de coeur…

Commençons avec le très mignon Cubicl, une application de collaboration en ligne pro/perso :

Cubicl

Une palette de couleur très harmonieuse, une approche graphique tout en rondeur, des intitulés accrocheurs et des textes courts et percutants. Rien à redire, cette page véhicule du sérieux et de la maitrise.

Restons dans le minimalisme avec Tapbots, un éditeur d’applications pour iPhone :

Tapbots

L’approche graphique est ici similaire au précédent site avec un style très cartoon mais il y a une volonté afficher d’en dire le moins possible, et ça marche ! Les descriptions des applications sont minimalistes (même pas de captures d’écran) mais cette page d’accueil donne sacrément envie de cliquer. La grille de lecture permet à l’oeil de bien circuler entre les blocs, les contrastes sont excellents et les illustrations rythment bien la page dans sa verticalité (ha mince, je me met à parler comme un sémioticien, c’est grâce docteur ?).

Terminons avec un troisième site en rupture complète, le portfolio de Simon Collison :

SimonCollison

La page d’accueil de ce site est un véritable électrochoc avec une touche graphique rétro dans la plus pure tradition des manuels de taxinomie. Chaque bloc correspond à une rubrique. Je ne peux qu’applaudir l’engagement de ce design et le travail réalisé pour respecter les codes graphiques de la taxonomie (fond de page, typographie, illustrations…). Facile de se démarquer avec un site comme celui-là !

La suite le mois prochain…

Mes 3 sites coup de coeur (février 2010)

Comme chaque mois je vous propose ma petite sélection de sites avec une édition particulièrement hétéroclite.

Commençons avec le site minimaliste de rigueur d’une agence d’Amsterdam : Made By Sofa.

SOFA

La page et son contenu est épurée au maximum, la typographie soignée, les différents éléments parfaitement alignés. Rien à redire, c’est fait dans les règles et moi… j’adore !

Ambiance beaucoup plus colorée avec ce biscuitier de Philadelphie : FamousCookies.

FamousCookies

Très belle harmonie des couleurs, excellent travail d’ambiance sur les typographies, illustrations généreuses, clin d’oeil graphique un brin rétro… Là encore c’est un quai sans faute pour ce site à l’excellente lisibilité. Passez votre souris sur les menus « Cookies » et « Assortments » pour vous donner l’eau à la bouche !

Terminons avec Die Antwoord, un groupe d’électro-rap de Cap Town :

DieAntwoord

Je ne sais pas trop décrire ce qui me fascine dans ce site : Les photos et look dégantés des membres du groupe, la musique et l’accent du chanteur, le système de navigation et le player audio aux couleurs acidulées… Il y a un je-ne-sais-quoi d’inspirationnel dans ce site, mais à ne pas mettre entre toutes les mains ! (via @gromain)

Voilà, le tour du monde est bouclé. La suite le mois prochain.

Mes 3 sites coup de coeur (janvier 2010)

Après le faste des fêtes de fin d’année, je vous propose une sélection de sites culinaires qui m’ont tapés dans l’oeil (et ouvert l’appétit).

Commençons avec Wiltshire Farm Food, un service anglais de livraison de repas à domicile :

WiltshireFarmFood

Même si la mise en page est un peu chargée (pas beaucoup de zones de respiration), l’impression générale est très bonne et l’armonie des couleurs est très agréable. J’apprécie particulièrement les blocs de couleur dans le menu vertical à gauche ainsi que le traitement graphique des boutons (« Search« , « Add« …).

Nous avons ensuite Culinary Culture, une plateforme sociale pour amoureux de la bonne chair (partage de recettes, de bonnes adresses…) :

CulinaryCulture

Nous avons ici une grille de lecture beaucoup plus simple et de larges zones de respiration. Vous noterez le travail réalisé sur les choix typographique, sur la complémentarité des couleurs ainsi que les 3 illustrations. Autre particularité intéressante : le formulaire sans intitulés de champs (cf. Avons-nous encore besoin des intitulés de champs dans les formulaires).

Terminons avec Delibar, un client Mac pour Delicious (donc rien à voir avec la cuisine, si ce n’est le nom) :

Delibar

Là encore nous avons un gros travail d’harmonie des couleurs et de minimalisme sur cette page. Notez que les grands espaces vides de chaque côtés de l’illustration servent en fait à accueillir une démo de l’application (à activer en cliquant sur le lien « Try me« ).

La suite le mois prochain…

Nouvelles versions pour Zappos, Staples et Castorama

En ce moment je suis en train de benchmarker des boutiques en ligne pour un de mes clients, et j’ai comme l’impression que c’est Noël avant l’heure puisque nous avons droit à plusieurs nouvelles versions de sites de référence.

Il y a tout d’abord un ancêtre du commerce en ligne français (Castorama.fr) qui propose une nouvelle version tout en sobriété :

Castorama_accueil

J’apprécie l’orchestration de la navigation avec des espaces de séparation entre les onglets pour dissocier les parcours d’entrée. Pour la page produit la lisibilité est toujours de rigueur, par contre je ne comprends pas bien pourquoi le bouton d’ajout au panier est sous la limite de visibilité (ils auraient pu faire des tests avec le nouveau Browser Size de Google) :

Castorama_produit

Autre poids lourd du commerce en ligne, Staples qui propose également une lisibilité exemplaire :

Staples_home-1

Vous apprécierez la mise en valeur du panier (et de la recherche) ainsi que la possibilité de déplier les carrousels (« Expand to see all« ).

Pour la page produit c’est tout aussi efficace :

Staples_product-1

Certains produits sont richement décrits, les onglets sous la photo aident ainsi à s’y retrouver. Notez également les liens insérés dans le bloc de réassurance ainsi que les questions / réponses.

Intéressons-nous maintenant à la nouvelle version de Zappos, autre légende du e-commerce. Un gros effort a été fait pour condenser le bloc de recherche de même que la navigation qui intègre maintenant un index. Cette densité sur le haut de page est par contre compensée par beaucoup de zones de respiration sur la partie centrale de la page avec beaucoup de blanc et des rayons qui encadrent les recommandations. Bon par contre ils ont centrés le panier en haut de page (WTF ?) :

Zappos_home-1

Au niveau de la page produit, la mise en pages est légèrement fouillis à mon gout, mais ils ont eu la bonne idée de coller le tableau des tailles avec le menu de sélection des tailles. Vous noterez également deux fonctions de social shopping très intéressantes : les URLs courtes (http://zapp.me) et les widgets « Blog about this item » :

Zappos_Product

Le site n’est pas encore tout à fait déployé et certaines pages sont encore sur l’ancien modèle mais cette nouvelle version est tout de même une belle réussite. Espérons que cela donne des idées aux équipes d’Amazon.

En tout cas je suis plus que satisfait de constater que la lisibilité et la sobriété s’imposent dans ces trois nouvelles versions. Assurément des modèles à suivre…

Mes 3 sites coup de coeur du moment (décembre 2009)

Comme chaque mois je vous propose une petite sélection de sites beaux, biens conçus, originaux…

Commençons avec Squared Eye, l’agence web à la baleine (une référence à Twitter ?) :

SquaredEye

Dans cette page j’apprécie le fond de page atypique (trame, couleur…), les titres ultra-simples, le choix des polices de caractère, le carrousel qui permet de faire défiler les visuels. L’ambiance est tout à fait agréable et pourtant il y a un certain nombre de « règles » d’ergonomie ouvertement violées (couleurs de liens…).

Continuons avec une autre agence (By The Pond ou alors c’est Friendly Duck) :

ByThePond

La recette est à peu près la même : Un fond de page atypique, une bestiole, un travail sur les typos, beaucoup de sobriété. Là encore certaines « règles » ergonomiques ne sont pas respectées mais cette page est forte agréable à contempler.

Finissons avec WikiHow, un wiki de toute beauté (et particulièrement les pages intérieures comme ici How to Dress Like a Skater) :

WikiHow

J’adore la sobriété de cette page, le large bandeau de navigation incluant la recherche, l’orchestration du cœur de page avec le titre, les onglets, les larges boutons « Edit » et le petit retour du bandeau « Steps« . Rien à redire, le travail réalisé sur cette page est remarquable.