FredCavazza.net

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 :

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

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

Le portfolio de Simon Collison

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…

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.

La page d'accueil du site MadeBySofa.com

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.

La page d'accueil de FamousCookies.com

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 :

Le site du groupe Die Antwoord

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.

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 :

La page d'accueil de Wiltshire Farm Food

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

La page d'accueil de Culinary Culture

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

La page d'accueil de 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…

…

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é :

La nouvelle page d'accueil de Castorama.fr

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

La fiche produit du nouveau site de Castorama.fr

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

La nouvelle page d'accueil de Staples

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 :

Une page produit du nouveau site de Staples

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

La nouvelle page d'accueil de Zappos

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” :

La page produit du nouveau site de Zappos

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…

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

La page d'accueil du site de Squared Eye

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

Le site de l'agence By The Pond (ou Friendly Duck)

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

Une page intérieure de 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.

Je reprends ma série de sites coup de cœur avec 3 réalisations très différentes.

Tout d’abord Common Good Radio, un projet de web radio pour les enfants :

La page d'accueil du site Common Good Radio

Cette page d’accueil propose à la fois une belle harmonie dans les couleurs et une grille de lecture bien proportionnée. Vous apprécierez également l’illustration et les formes tout en rondeurs, ainsi que le travail réalisé sur la couleur des textes et des fonds de cartouches. Le tout donne une ambiance chaleureuse et peacefull.

Il y a ensuite le site de Studio 7 Designs :

Le site de Studio 7 Designs

Des textes épurés, une typo bien ronde et surtout de larges visuels donne de la hauteur à cette page d’accueil. On retrouve également beaucoup de références à l’univers graphique d’Apple : la typo, la barre de navigation métallisée, le fond d’écran “espace”, les quatre cartouches de bas de page… J’apprécie également le contraste modéré des liens vers les services, le logo et les aurores boréales.

Après cette débauche de couleurs et d’espace, terminons avec le site de Brian Hoff qui est designer (enfin je pense, je ne suis pas trop sûr…) :

Le site de Brian Hoff

Ambiance minimaliste et austérité de rigueur pour cette page carrefour (elle sert à aiguiller les visiteurs sur d’autres destinations). J’aime beaucoup la typo du titre, la navigation à doubles items (”Home” + “is where I work“…), les blocs éditoriaux qui font ressortir les liens (et seconde ainsi la navigation), le bouton “Hire me” décentré par rapport à la grille de lecture pour le faire ressortir sans avoir à utiliser un couleur qui tranche.

Bon par contre je ne sais pas si j’aurais mis un point à la fin du titre “I’m a graphic designer“… il s’agit plus d’un effet de style que d’une règle typographique, non ?

Toujours dans la série “coups de cœur”, je vous propose ce soir une sélection de blogs que j’apprécie particulièrement d’un point de vue esthétique (pour le contenu c’est à vous de juger).

Commençons avec The Pixel Blog et son ambiance surréaliste :

Le blog The Pixel

Vous apprécierez le travail d’illustration réalisé sur le header ainsi que l’effet 3D sur le moulin. Je n’aime pas particulièrement les cadres des photos des rédacteurs mais je trouve très originales les séparations entre les billets ou les blocs de la colonne de droite. Et n’oubliez pas de jeter un œil au footer (donc en bas de page).

Il y a ensuite le blog du néo-zélandais Mark Forrester :

Le blog de Mark Forrester

Ne vous laissez pas leurrer par l’aspect enfantin des dessins, il y a un gros travail de réflexion sur l’harmonie des couleurs, sur le traitement graphique des titres (avec un effet de pliure sur le rebord du cadre), sur les blocs en pointillés de la colonne de droite… Bref, plein de petits détails à apprécier (idem, ne ratez pas le footer).

Terminons avec le blog en N&B de Laurent Demontiers :

Le blog de Laurent Demontiers

Ambiance polar et lunettes noires avec un traitement graphique anguleux mais inimitable (jusqu’au fond de page pixelisé). Détails sympathiques : l’effet de profondeur du header (au survol de la souris) de même que le QR code dans le footer.

À suivre…

Comme chaque mois je vous propose une sélection de sites dont j’apprécie particulièrement le design.

Epic Event, un service d’organisation, de réservation et de paiement pour des évènements :

La page d'accueil d'Epic Event

J’apprécie beaucoup les différents traitements graphiques du fond de page qui ne nuisent pourtant pas à la lisibilité, le contraste et la forme du gros bouton d’action “Learn more…” et les pictos qui rythment les blocs de la seconde partie de page.

Postbox, un outil de productivité fondé sur l’email :

La page d'accueil de Postbox

Beaucoup de blanc sur cette page très dynamique de par le contraste des couleurs (blanc / bleu / rouge). J’aime bien le fait de réduire au minimum les possibilités d’interaction (Donwload, Buy, 4 items de navigation et un lien en bas de page). Les accroches sont en plus ultra-courtes et très percutantes.

The Social Agency, une agence d’organisation de rencontres professionnelles :

La page d'accueil de The Social Agency

J’adore cet immense header blanc et la non moins gigantesque base line (”We bring people together“). La formation de la promesse est également très bien tournée (”We want to promote your next event“), c’est volontaire sans toutefois être rentre-dedans. Dynamisme et élégance, quel subtil mélange !

Comme le commerce en ligne est à l’honneur cette semaine avec le Salon de E-commerce et la rencontre Blog2Blog, je vous propose une petite sélection de boutiques en ligne qui m’ont tapé dans l’œil.

Commençons avec BambinoDirect, une boutique d’articles pour bébés tout en couleurs pastel :

La page d'accueil de BambinoDirect

La grille de lecture bien marquée et les blocs multicolores procurent beaucoup de dynamisme à cette page d’accueil. Les coins arrondis permettent… d’arrondir les angles de cette grille et de ne pas provoquer de sensation d’enfermement. Quoi que… la page d’accueil est tout de même très dense mais fonctionne bien. Le N° de téléphone et le panier sont très bien intégrés, l’entrée dans la base des produits est facilitée par les cartouches de la colonne de gauche.

Dans le même registre il y a Boots, une enseigne de parapharmacies en Angleterre :

La page d'accueil de Boots

Les recettes sont à peut prêt les mêmes que dans l’exemple précédent : grille de lecture marquée, couleurs pastel, coins arrondis… J’apprécie le header un peu plus structuré, le bandeau de navigation avec un plus fort contraste et la carrousel géant qui occupe les 3/4 de la page. On retrouve de plus quelques éléments graphiques d’incitation qui sont le bienvenus comme les pictos (>).

Je garde le meilleur pour la fin avec Saddleback Leather, une incroyable boutique de sacs de voyage en cuir :

La page d'accueil de Saddleback Leather

La texture “imitation cuir” du fond de page, du logo et des onglets procurent une incroyable sensation tactile : on a envie de toucher le grain du cuir ! Je passe sur la très bonne lisibilité et sur la grille déstructurée car le plus intéressant se trouve à l’intérieur avec le blog du patron, un authentique globetrotteur passé maitre dans l’art du storytelling et qui n’a pas hésité à faire passer à ses sacs des tests “grandeur nature” (écrasé par un éléphant, mordu par un crocodile…). Il est tellement sûr de la qualité de ses produits qu’il se paye même le luxe d’afficher la liste des ses concurrents (WTF?!?).

Vous apprécierez au passage le contenu illustratif du Messenger Bag : un porte document, un ordinateur portable et… deux pipes, dès fois qu’il y en ai une qui se bouche lors de votre déplacement (catastrophe !). J’adore, pas vous ?

Je ne sais pas si c’est la saison mais en ce moment je croise de nombreux sites qui me font craquer, à tel point que je suis obligé de faire des catégories pour pouvoir tous vous les présenter. J’ouvre donc une série “coups de cœur minimalistes” ou “coups de cœur en noir et blanc”.

Commençons avec le site d’Alastaire Allday, un rédacteur pas peu fier de sa cigarette :

Le site d'Alastaire Allday

J’apprécie particulièrement le large visuel de même que le choix de la typographie. Beaucoup d’espaces blanc, un très bon contraste sur le bouton “Next Page” et un bandeau de navigation très sobre qui remonte en pages intérieures. Aucune faute de gout sur ce site, par contre le gilet et la coupe de cheveux sont à revoir !

Continuons avec le site de l’agence Rikcat Industries :

La page d'accueil de Rikcat

Une grille de lecture beaucoup plus formelle pour cette page d’accueil qui présente tout de même des très belles proportions. Comme toujours sur les sites minimalistes il y a un très beau travail sur la typographie. Vous apprécierez au passage des détails très élégants comme le contour des illustrations, les pictos retravaillés en bas de page (carrés et en N&B) ainsi que le rouge au survol des liens et du logo. Assurément un sans faute.

Terminons avec un autre site d’agence, celui de Chama Inc :

Le site de l'agence Chama Inc.

Un site très épuré et très simple (une seule page qui s’étire en hauteur). Une typographie très stylisée pour la baseline et de larges gouttières pour centrer l’attention sur le texte. Quel dommage que la bas de page soit si coloré !