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 :
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) :
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 :
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.
Ma rubrique préférée …
J’aime beaucoup les chaussons, une présentation sobre et très efficace d’une liste de produits à priori similaire.
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 ?
@ Cobalt > Effectivement ce troisième exemple donne une impression de minimalisme car il gère très bien la hiérarchisation des éléments visuels mais il y a au final bcp de choses sur la page.
J’adore le style du 3ème site.
Un vrai journal papier comme design, très beau en restant dans le blanc et noir.
Étant maman j’aime beaucoup le premier, mais il manque vraiment un tri par prix et par type.
Merci beaucoup pour tout vos commentaires sur collégien… venez visiter collégien…
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é.
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)
rectification les 2 titres du haut sont des images, mais bientôt avec l’arrivée de html5 et css3, il sera possible de faire sans.
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 !
@ 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.
Les deux premiers sont sympas, le dernier je le trouve pas facile a lire ( couleurs / ergonomie ), mais ca n engage que moi
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
@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.
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
J’adore l’interface du petit zebre. J’aime bien vos sites coup de coeur.
Les deux premiers sont parfait, le dernier je le trouve pas facile a suivre