Mes 3 sites coup de coeur (octobre 2011)

Comme chaque mois, je vous propose une sélection de trois sites qui m’ont tapé dans l’oeil. Ce mois-ci, la sélection est à majorité germanique, mais je ne saurais vous expliquer pourquoi…

Commençons avec Flaek, une marque de chaussure allemande :

flaek

Beaucoup de sobriété sur cette page d’accueil qui privilégie avant tout la mise en avant des produits grâce à une photographie en pleine largeur. Sur cette photo en particulier il y a un petit problème de lisibilité, car le texte ne ressort pas forcément bien sur un fond noir, mais dans les pages intérieures c’est beaucoup mieux. Je vous engage d’ailleurs à cliquer sur les liens à droite de l’écran pour parcourir les différentes pages : la transition se fait avec un scrolling vertical du plus bel effet. Et tant que vous y êtes, faites donc un passage par leur blog.

Restons en Allemagne avec Amonda, une boutique de chapeaux et couvre-chefs en tous genres :

Amonda

Là encore, la sobriété est de mise (euphémisme), mais vous noterez néanmoins des effets stylistiques discrets, mais de très bons goûts comme le relief de la barre de navigation ou son ombre portée. La grille de lecture est d’une parfaite rigueur, chaque élément bien aligné sur celui du dessus (à l’Allemande). La page est blanche, très blanche, mais les fonds de couleur du carrousel et des trois produits mis en valeur apportent juste ce qu’il faut de chaleur. Les produits, photos et logos en bas de page sont en prime très bien détourés. Bref, c’est propre et carré, tout ce que j’aime, jawohl !

Terminons avec Quarterly, un service assez déroutant. Le principe est de vous proposer une liste de personnalités (des gens travaillant dans la mode ou le design), à laquelle vous vous abonnez pour recevoir de leur part un objet tous les trimestres. Oui je sais, le principe est un peu déroutant, mais l’expérience doit être intéressante, à mi-chemin entre Think Geek et une AMAP.

Quarterly

Cette page d’accueil impressionne avant tout par la très bonne combinaison de couleurs (beige, marron clair et bleu), de même que le logo positionné au centre. Le service n’est pas évident à comprendre, mais le large bandeau apporte des explications claires et visuelles (vous pouvez le refermer en cliquant sur « Oh, I got it« . Les mini-portraits affichés directement sous les explications sont également porteurs d’une image sobre et sophistiquée, comme en témoignent la photo et le choix typographique. Vous apprécierez également la construction en trois colonnes que l’on devine avec l’alignement du lien « Contributors« , du second séparateur et de l’extrait du blog. Le fond de page à motif participe également à réchauffer le tout et donne un côté artisanal (ça ne vous rappele rien ?).

La suite le mois prochain.

Mes trois sites coups de coeur (septembre 2011)

Comme tous les mois, je vous propose une sélection de sites qui m’ont tapé dans l’oeil. Je ne serais pas vous expliquer pourquoi, mais la sélection de ce moi-ci a été draconienne tellement il y avait de candidats.

Commençons avec Square, le fameux service de paiement par smartphone :

Square

Un bel exemple de site minimaliste puisqu’il n’a qu’une seule page, ou plutôt un seul gabarit avec des contenus adaptés en fonction des cibles. La mise en page est très simple, mais terriblement efficace : une illustration à droite, la promesse, le formulaire et les éléments de réassurance à gauche. La hiérarchisation de l’information au sein du cadre est particulièrement soignée avec des titres et accroches qui ressortent bien, une densité de l’information facilitant la lecture et la concentration de l’attention. Bref, c’est tout bon.

Poursuivons avec Teechan+lax, une agence web US :

TeehanLax

Le découpage en 3 blocs permet de bien cloisonner les unités d’information (navigation, promesse et publications) et le choix des couleurs facilite le repérage et la lisibilité. J’apprécie particulièrement la vidéo floutée et sont effet hypnotisant qui permet d’attirer le regard sur la promesse. Même si la vidéo est en fait une boucle d’à peine 10 secondes, j’ai vraiment cru qu’ils avaient branché une webcam dans les bureaux !

Terminons avec Pancake, un service en ligne de gestion commerciale et facturation :

Pancake

Là encore, le découpage en trois zones permet de dissocier la navigation, la promesse et explications, et le détail des fonctionnalités. Vous noterez au passage l’association judicieuse du visuel et des typos pour attirer l’attention sur la promesse au centre de l’écran (les espaces vides autour participent également) de même que la mise en scène du bouton d’action et du prix. Rien de très révolutionnaire dans cette page, mais une belle exécution et une grande cohérence dans les traitements graphiques.

Comme j’avais beaucoup de « candidats », je vous donne également les autres URLs que j’avais mises de côté et que je laisse à votre libre appréciation : Seamless, Fork CMS, 89Bytes et Skinnyo.

La suite le mois prochain…

Mes 3 sites coups de coeur (juin 2011)

Pour ma sélection mensuelle de beaux sites web, je vous propose cette fois trois candidats très différents les uns des autres.

Commençons avec Launchlist Pro, une application en ligne :

LaunchlistPro-550x564

La densité d’information de cette page d’accueil est plutôt élevée, mais la lisibilité reste bonne grâce à un bon contraste. L’illustration centrale donne un très bon résumé du service et les choix de couleur (contrastant fortement avec le reste de la page) permettent d’attirer l’attention de façon efficace, de même que pour l’essai gratuit en bas de page. J’apprécie également l’effet métallisé des pictos et du fond de page. Au final : une page avec une forte personnalité qui compense quelques problèmes (caractères trop petits, titres en majuscules…).

Poursuivons avec Saville’s Dovecotes, un fabriquant de colombiers et abris à oiseaux (oui monsieur, c’est un métier !) :

SavillesDovecotes

Que dire si ce n’est que j’adore ces sites minimalistes exploitant une gamme de couleurs très neutre. Les illustrations centrales sont de très bonne qualité (un fond transparent sous le texte aurait amélioré la lisibilité), les photos des produits parfaitement mis en valeur grâce à la bordure façon Polaroid. L’espace blanc du haut de page permet de bien faire ressortir la marque ainsi que le panier. Le reste du site est dans la même veine avec ce côté épuré et très sérieux. Ça me donnerait presque envie d’en acheter un (mais l’idée de voir des pigeons s’y installer parasite ma prise d décision…).

Terminons avec The Casette, une boutique française de chaussures estivales :

TheCassette

Une boutique en ligne très originale avec cette vidéo pixelisée en fond de page qui donne du style sans ponctionner trop de bande passante.  Les quatre cartouches de produits ressortent parfaitement bien, même si les boutons d’action sont un peu trop timides (d’ailleurs ça ne devrait pas être des boutons, mais des liens). Les éléments de réassurance sont très bien mis en scène grâce à la police de caractère. Au final il se dégage une très bonne énergie et beaucoup de convivialité de ce site, une réussite !

La suite le mois prochain…

Mes 3 sites coup de coeur (Mars 2011)

Nouvelle sélection mensuelle de sites coup de coeur avec de la typo, du noir et de la couleur.

Commençons avec Simple As Milk, une agence web anglaise :

SimpleAsMilk

Un très beau travail typographique ainsi qu’une belle grille de lecture bien marquée. J’adore le soin apporté au fond de page ainsi qu’aux coutures que l’on devine sur le bord de chaque élément graphique. J’apprécie également l’harmonie des couleurs et les transitions au survol de la souris sur les 4 ronds en bas de page. Une très belle réalisation qui me fait dire qu’avec la montée en puissance de CSS3, le prochain chantier graphique concernera le choix et la mise en scène des typographies.

Poursuivons avec le très sombre mini-site du livre Hardboiled Web Design :

Hardboiled

Oui je sais : c’est « juste » un site en noir et blanc, mais je peux vous assurer que c’est un travail bien plus complexe qu’il n’y parait. Le noir est en effet une couleur très puissante, mais extrêmement complexe à mettre en scène. La mise en page de ce site est justement parfaitement équilibrée, les zones de respiration délimitent bien les éléments de la page et le choix des couleurs mettent bien en valeur les accroches. Une réalisation risquée, mais parfaitement exécutée, ça donne envie d’acheter le livre !

Terminons sur une note plus joyeuse avec le site de Rico Verdeo, un restaurant colombien :

RicoVerdeo

Rien de très spectaculaire sur cette page d’accueil (pas de 3D en temps réel comme sur Hello Racer) mais un très beau fond de page et un travail minutieux de micro-décorations sur les bordures, flèches, et puces. Le tout est cohérent et harmonieux, un site sans prétention que l’on peut consommer sans modération.

La suite le mois prochain…

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

Voici une nouvelle sélection de sites qui ont retenu mon attention ce moi-ci.

Commençons avec Pentagram, une agence de design US :

Pentagram

Une approche minimaliste très engagée pour cette page d’accueil qui met en valeur le travail de l’agence. La grille de lecture est parfaitement proportionnée et le choix des couleurs restreint au strict minimum (noire et rouge). La large barre de défilement horizontale (en haut d’écran) posée sur son « rail » donne une indication claire sur le fonctionnement de la page.

Poursuivons avec Heartbreaker Fashion, une boutique vintage :

HeartbreakerFashion

J’adore les proportions de cette page d’accueil avec un header qui respire bien, une très large zone centrale et une sélection de produits en dessous de la limite de visibilité. J’apprécie également la position centrale du logo ainsi que du moteur de recherche. Je ne ferais pas de commentaires sur le choix des couleurs (très rose), mais vous noterez le très bon travail réalisé sur les textures et embellissements divers.

Terminons avec RentJuice, une marketplace de propriétaires :

RentJuice

Oui je sais, vous avez l’impression d’avoir déjà vu ce type de page des dizaines de fois, mais ce n’est pas grave, car j’apprécie toujours autant la promesse et sa baseline, les zones de respiration, les trois niveaux bien contrastés, la position idéale du formulaire et l’arrondi des onglets. Vous noterez également des petits détails sympas comme le double carrousel de la section « What we do » et le ruban torsadé de la capture d’écran.

La suite le mois prochain.