Mes trois sites coup de coeur (juin 2009)

Je continue dans ma série de sites “coup de coeur” avec trois applications en ligne superbement mises en valeur par leur site web.

On commence avec DailyBurn, une application en ligne de fitness tracking :

La grille de lecture est limpide, les visuels attractifs et l’harmonie des couleurs très… harmonieuse. En plus ils ont le bon goût de proposer une visite guidée intégrée à la page d’accueil.

Il y a ensuite Tea Round App, une application pour iPhone qui sert à définir des tours de préparation pour le thé (WTF?) :

Autant je suis très dubitatif quand à l’intérêt réel de cette application, autant je suis immédiatement tombé amoureux de cette ambiance boisée très chaleureuse, des petits coups de crayon, du jeu typographique (en bas de page). Cerise sur le gâteau, la visite guidée en 4 étapes qui utilise un slider façon iPhone (« Step 1« …).

Il y a enfin Ballpark, une application en ligne de facturation :

Rien de révolutionnaire dans le choix des couleurs mais une construction de la page en strates tout à fait convaincante avec une parfaite lisibilité et un fort contraste permettant de bien guider l’attention sur le bouton d’action. Vous apprécierez au passage les titres qui sont un modèle de concision et d’incitation. Et ne ratez surtout pas la superbe page de comparaison des offres ainsi que le magnifique formulaire de création de compte.

La suite le mois prochain…

Mes trois sites coup de coeur (mai 2009)

Je continue dans ma série de sites « coup de coeur » avec, hasard de mes rencontres, trois sites d’agence.

Il y a tout d’abord le minimaliste site de Built by Buffalo :

J’apprécie dans ce site la grille de lecture très marquée, l’uniformité des couleurs et le bandeau de navigation façon Apple (vaguement).

Il y a ensuite le très mignon site de Pixelcraft :

J’adore cette impression d’espace avec ces grandes zones vides qui renforcent l’attention sur les éléments centraux de la page, la couleur de fond, la typographie des titres et surtout les illustrations tout en rondeur.

Et pour finir nous avons le très stylisé site de For A Beautiful Web :

Comment ne pas tomber sous le charme de ce formidable travail typographique avec cette profondeur quasi palpable des titres ? Bon effectivement ça tranche avec le minimalisme des deux précédents sites mais cela me permet de conclure en beauté.

Mes 3 sites coups de coeur (avril 2009)

Je continue ma série de coups de coeur avec deux sites d’une sobriété exemplaire et un dernier site très… inspiré.

Il y a tout d’abord Utilium, une solution pour créer / gérer des espaces collaboratifs en ligne à vocation pédagogique :

La page d’accueil est d’une grande sobriété, lisibilité est parfaite (choix des typos + contraste), le conrat de lecture est limpide (avec un dégradé de bleu en trois temps), les textes sont courts et accrocheurs, le bouton d’action idéalement positionné et ils ont même mis un « filet de sauvetage » en bas de page avec 3 options de navigation alternatives.

Il y a ensuite Creattica, une galerie collaborative de beaux designs :

La mise en page est d’une grande sobriété mais il y a un très intéressant travail au niveau de choix typographiques qui apporte de la sophistication sans trop alourdir la page, il y a surtout de magnifiques effets graphiques au niveau du logo et des boutons qui donne un aspect très « classieux » (façon Adobe).

Il y a enfin College Park Curch, le site d’une église à Indianapolis :

J’adore le logo, l’harmonie des couleurs qui jouent sur un dégradé de vert (symbole de stabilité et de fertilité), la grille de lecture est nette et permet de guider l’oeil le long des colonnes à la découverte du contenu, les boutons d’action sont très incitatifs dans leur formulation (« I’m New« , « Listen« , Dowload« ) sans pour autant faire tâche sur la page, le pied de page est massif mais à la lisibilité optimale. À noter que ce site repose sur Ekklesia 360, un système de gestion de contenu dédié aux paroisses avec une gestion très fine des contenus texte (thèmes récurrents) et audio (les sermons), des modules communautaires (pour les fidèles) et des évènements (pour les RDV religieux). Je vous invite à visiter leur très belle galerie (très reposante).

Mes 3 sites coup de coeur du moment (mars 2009)

Je continue dans ma lancée avec une série de 3 nouveaux sites que j’apprécie particulièrement.

Commençons avec Schwan’s, un site marchand de plats préparés :

Ce qui frappe d’entrée sur cette page c’est ce petit côté retro avec ces couleurs pastel et ces typos légèrement kitchs. Il y a aussi un très bon travail au niveau des cadres (notamment le bas de page) et des titres. L’ensemble est dynamique, pas trop saturé et plutôt incitatif.

Dans un totu autre style il y a aussi Silverback, un solution pour les tests utilisateurs :

Nous sommes là dans un très bon exercice de minimalisme avec une bonne mise en scène des bénéfices et des boutons d’appel à l’action au format XL. Vous apprécierez au passage le côté nounours de ce gorille ainsi que le thème « jungle » qui réchauffe la page. Pour une analyse plus poussée c’est ici : A Strong Homepage Design Dissected.

Il y a enfin Powerset, un moteur de recherche spécialisé pour Wikipedia :

Là encore un bon travail de minimalisme mais un gros effort de réalisé sur la typo et l’orchestration de la promesse, nous sommes loin de l’austérité de Google ! J’apprécie particulièrement l’effet de profondeur donné à la typo du centre de la page, il y a également une tendance hypnotique relayée par ce post-it qui traîne à droite (simple mais efficace).

Et vous, quels sont vos coups de coeur ?

Un sans faute pour le nouveau site d’Electronic Arts ?

Je viens de découvrir la toute nouvelle version du site d’Electronic Arts et je dois avouer avoir été scotché par cette nouvelle réalisation. En fait je me demande même s’ils n’ont pas réussi le sans-faute… Il y a tout d’abord cette superbe page d’accueil avec beaucoup d’images, plein de trucs à cliquer tout en conservant une excellente lisibilité :

Les raisons qui font que j’aime cette page d’accueil :

La grille de lecture est sobre et visuellement très légère ;
Le haut de page est très bien orchestré avec une élégante intégration du logo, de la barre de navigation et du moteur de recherche ;
Il y a beaucoup d’espace entre les blocs (ce qui fait « respirer » la page et ne sature pas l’oeil) ;
Les différents éléments sont bien hiérarchisés avec une emphase sur « Browse Games » et « Featured Spore Creatures » (pour compenser avec les autres éléments aux couleurs plus vives) ;
La page est structurée sur un bloc centré à largeur fixe, mais si vous agrandissez la fenêtre de votre navigateur le fond est « habillé » d’une très belle illustration.

Il y a ensuite un certain nombre de détails que j’adore, à commencer par le menu de navigation surdimensionné avec un très bon cloisonnement de l’information et une mise en avant :

Une sacrée coïncidence car j’ai justement rédigé un billet hier au sujet des menus XL et des plan de site dans le footer (ce que propose également ce site) : Soignez vos extrémités (menu et pied de page).

Le site propose également un très bon carrousel avec une petite barre qui permet d’anticiper le changement de vignette :

Le caroussel avec barre de défilement — Le carrousel avec barre de défilement

Il y a également un autre carrousel avec une présentation en accordéon très original :

Le second caroussel en accordéon — Le second carrousel en accordéon

Et il y a enfin une barre d’outil en bas de l’écran (qui reste à sa place quelle que soit la position dans la page) où l’on retrouve l’accès aux autres sites du groupe, le changement de langue, la création de compte… avec à chaque fois des panneaux flottants de toute beauté :

Le reste du site est plus classique (quoi que toujours aussi efficace). Mention spéciale pour la page de News qui présente un design élégant mais moderne (cf. nuage de tags) ainsi qu’un très bon moteur de filtres à gauche :

Bref, je suis vraiment sous le charme de cette nouvelle version car elle concentre un ensemble de bonnes pratiques dans un tout cohérent et de très bon goût.

Et vous ne savez pas le pire ? L’URL de ce site (EA.com) est l’anagramme d’un autre site que j’adore (AE.com). C’est fou, non ?