Mes trois sites coup de coeur (juin 2010)

Pour mes coups de coeur du mois de juin, je vous propose un mélange de boutiques en ligne et d’un portfolio.

Commençons avec Petit Zèbre, une boutique de déco-fringues pour les petits et grands :

Petitzebre

Il y a manifestement un effort de réalisé sur cette boutique pour lui donner un zeste d’originalité : Couleurs, typographies et décorations sont là pour vous faire passer un agréable moment. On a vraiment l’impression que tous les produits ont été choisis avec soin, les photos sont de qualité et j’adore les intitulés (« Adorables sandales vertes« , « Ravissant gobelet de princesse« , « Superbe boîte« …). Vous noterez au passage le panier horizontal en haut de page.

Autre style pour la boutique Collégien de chausson-chaussettes (à moins que ça ne soit des chaussette-chaussons) :

Collegien

Beaucoup de blanc pour une mise en page très aérée dans cette boutique à l’ambiance minimaliste. Pas beaucoup de contenu mais des photos de qualité et des produits hauts en couleur.

Terminons avec le site de Jeroen Homan, un web-designeur de Hollande :

jeroenhoman

Oui je sais, vous avez l’impression d’avoir vu cette page des dizaines de fois. Qu’à cela ne tienne, j’aime toujours autant cette construction de page tout en sobriété (choix des couleurs) et en sophistication (choix des typographies). Il va falloir vous y habituer car je vous prépare une nouvelle version pour mon site qui sera au moins aussi minimaliste que celle-ci…

La suite le mois prochain.

17 commentaires sur “Mes trois sites coup de coeur (juin 2010)

  1. 3 sites sympas, surtout Collégien que je n’aurais jamais trouvé s’il n’avait pas été présenté ici.

    Par contre je ne suis pas sûr que le dernier exemple soit sobre/minimaliste. C’est très propre, mais plein de textures, d’ombres, de bordures, de typos géantes « regardez-moi » (en images plutôt qu’en texte !) etc. il doit y avoir un autre adjectif pour ça mais je ne parvient pas à mettre le doigt dessus. Journalesque ? Grid-based ?

  2. Je suis d’accord avec toi sur le style du 3ème site : c’est ce qu’on trouve de plus efficace et plus « durable », j’aimerais vraiment en voir plus souvent, n’hésite pas à continuer à envoyer ce type de liens !
    Je travaille aussi sur une version de mon site http://www.purpledigital.fr plus « graphique » tout en s’inspirant de ce style très épuré.

  3. Pour le design du dernier site, il s’agit effectivement d’une construction en grille. A priori de visu, basé sur le framework grid 960
    http://960.gs

    La particularité de cette grille est de prévoir des espacements qui permettent d’aérer sa page de façon homogène et tenir dans les 960px du navigateur.

    D’être plus facile a gérer pour l’intégrateur web (il n’a qu’a compter le nombre de colonne que prend son bloc, et il aura un design équilibré)

    On voit souvent cette construction sur les sites américains, je pense que c’est dû aussi au fait qu’en anglais on a besoin de moins de mot pour formuler une idée, et ça permet de les faire tenir dans des espaces plus réduit et plus homogènes.

    Le même texte en français demande des hauteurs de bloc plus haut et on a moins la possibilité de faire des textes de même hauteur (mais c’est pas impossible)

    Après à part les quelques fond de pages, tout se joue sur l’utilisation de la typo. En général pas plus de 3, Une pour le gros titre, un pour les petit titres, et le reste une typo standard. Ensuite jouer sur la taille et la couleur pour jouer sur le contraste.

    Désolé d’avoir été technique et long, mais ça donne quelques tips pour ceux qui veulent se lancer.

    ps: mêmes si les titres sont en images, les textes seront lu par un lecteur d’écran (pour l’accessibilité) et ils sont dynamique(pas la peine de recréer une image à chaque fois, c’est automatique)

  4. Très belle sélection une fois de plus, merci !
    Je vous propose d’aller faire un tour sur le site e-Commerce de bijoux éthiques http://www.socapristi.com qui est dans la même ligne graphique.
    Le design est clair et l’ergonomie très bien étudiée.
    De plus il est lancé par un nouvelle e-commerçante donc n’hésitons pas à l’encourager !

  5. @ Jean Laurent
    « On voit souvent cette construction sur les sites américains, je pense que c’est dû aussi au fait qu’en anglais on a besoin de moins de mot pour formuler une idée, et ça permet de les faire tenir dans des espaces plus réduit et plus homogènes. »
    C’est une vanne ?

    « mais bientôt (…) il sera possible de faire sans »
    C’est déjà le cas, Typekit etc.

    @Julien Didier
    La palette de couleur est peu commune mais elle rend bien. Vraiment pas mal.

  6. J’aime beaucoup collégien, un modele de simplicité tant visuellement que fonctionnellement. Niveau techno c’est top aussi, pas de grigris en flash et des chargements très rapide. Au niveau réassurance je trouve cela très efficace également, notamment avec les ptites légendes qui expliquent le produit. Bref, il a bien sa place dans ta sélection

  7. @cobalt, non c’est juste une réflexion que je me suis faite en observant la construction de quelques sites.

    Pour les fonts, en effet c’est pris en charge dans typekit, mais pas toutes les versions des navigateurs ne le prennent en charge, firefox ne le prend en charge que depuis la version 3.5.

    Par prudence, j’utilise toujours des techniques de remplacement dynamique, type sifr(de moins en moins à cause de flash), flir, facelift ou cufon.

  8. L’un de vous aurait il un bon conseil de livre pour entrer dans le monde de la typographie ?
    Histoire du domaine, bonnes pratiques, tendances actuelles…

    C’est un « outil » qui manque cruellement a ma besace

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s