Les designers de sites e-commerce n’en finissent pas d’être créatifs et d’avancer de nouvelles idées. Rien de tel qu’une sélection pour être au courant des dernières tendance en matière de commerce en ligne.

Le Coq Sportif

Le nouveau site de la marque au Coq, sorti il y a quelques semaines, s’impose dans le paysage du webdesign ecommerce. Avec son interface light, sa navigation intuitive et ses photos de produits vendeuses, il en jette !

Salomon Snowboard

En refondant sa boutique en ligne, Salomon a bien anticipé sur l’hiver qui approche à grands pas. Vous y trouverez tout ce qu’il faut pour fondre la neige sur les plus belles pistes de la planète. Ici, la marque a choisi d’afficher tous ses produits dès la page d’accueil. Un filtre original fixé en haut de l’écran vous permet de faire votre choix et voir les produits qui vous intéressent en 2 clics.

Moment Skis

Continuons dans les sports d’hiver, avec le site Moment Skis. Le design est basé sur des blocs de sliders horizontaux empilés, sur tout la largeur de l’écran. À l’arrivée sur le site, la mise en page générale peux paraître perturbante, donnant l’impression d’un surplus d’informations. En s’y attardant un peu plus, le tout fonctionne très bien et de manière originale.

Men Look

Look épuré et fashion avant tout, la nouvelle version de Men Look enchaine les nouveautés. Le site, spécialisé dans les vêtements homme, n’affiche quant à lui aucun produits sur la page accueil. Il propose de l’information pertinente renvoyant vers les produits. Produits qui sont d’ailleurs très bien présentés en page d’accueil. Le tout est réalisé avec Prestashop.

Sal y Laurel

Amateur de fruits de mers ou non, le site espagnol Sal y Laurel sera ravir vos papilles ou du moins vos yeux de designers. Rien de révolutionnaire non plus, mais un design propre qui fonctionne bien. Basé sur un style illustratif annoncé directement en haut de page mais également soutenu par le pied de page avec de larges pictogrammes. Bonne idée pour contourner des photos de homards ou autres crevettes pas toujours bien présentées.

N’ayez crainte, je n’ai pas oublié votre rendez-vous mensuel des incontournables.Découvrez 28 sites parmi ceux qui ont rempli le paysage webdesign de ce mois d’octobre.

Sélectionnés pour leur maitrise de l’HTML, du CSS, du Javascript et globalement pour leur originalité, savourez cette sélection d’automne qui vous redonnera le sourire.

Monsters Lab

Webshocker

KidsLove Jet Lag

Deville Diner Bar

Wunderkit

Jwilouvres

Tao Community

Citroen DS5

Wixel

Tamron Island

Michel Bernard

MCube

Louis Vuitton

Real Mac Sofware

Luxus

MarcoFumagalli

PointlessCorp

Game Sweplayerd

Nest

Moment Skis

The Combine

Kccreep Fest

Liptonicetea

Optimohats

In2Headphones

Sprint All to Get Togethernow

Les Avignons

Attackemart

Votre avis sur cette sélection d’octobre 2011 ?

Après l’explosion massive des menus horizontaux dans le header des sites web, les webdesigners se tournent petit à petit vers de nouvelles barres verticales pour porter le menu de navigation principal et le logo. Une nouvelle tendance ? Dans tout les cas elles sont de plus en plus présentes…

Les caractéristiques

En général les barres de navigation latérales sont alignées à gauche, contiennent le logo du site et la navigation principale. Le contenu principal, souvent aligné à gauche lui aussi, permet de laisser de l’air à droite. Cet espace permet aux webdesigners d’exploiter un vide pour appuyer le site à l’aide d’un visuel impactant.

C’est aussi une bonne manière de structurer une interface élastique ou liquide. Le menu reste ainsi figé (à gauche ou à droite), étant toujours accessible quelque soit la résolution de l’utilisateur.

Sur le portfolio de Dropndot, ci-dessous, constitue une exemple type. Le logo placé typiquement en haut à gauche (typique dans notre culture occidentale), succédé du menu principal. Petit bémol tout de même, un menu fixe aurai été plus plaisant et plus pratique.

C’est ce que fait le site de Squidface & The Meddler et cela fonctionne très bien. Les deux menus sont fixes, ce qui permet d’accéder à la navigation quelque soit la position de l’utilisateur sur le site.

Autre exemple avec We Are Tennis, site à navigation horizontale, qui possède tout de même une sidebar latérale fixe avec logo.

Le même layout est utilisé sur la boutique en ligne Cufflink Suite. La barre latérale permet de « porter » la navigation principale avec classe, mais permet aussi d’offrir une bonne visibilité au logo tout au long de la visite de l’internaute sur le site.

Quelques autres exemples :

Véritable « tendance  » ?

Comme nous avons pu le constater, de nombreux sites se basent sur ce type de mise en page, mais peut-on réellement parler d’une tendance ? Le concept est suffisamment utilisé pour qu’il prenne place dans les tendances du moment. Et vous, quel est votre avis sur la question ?

Avec l’avènement des propriétés CSS3, les généralisation des grandes images de fond, la transparence des images de plus en plus compatible, les sites quittent peu à peu leurs environnements rectilignes et s’offrent de belles rondeurs.

Il y a quelques années en arrière, les techniques utilisables par les webdesigners de l’époque, ne leurs permettait pas de s’éclater facilement en jouant avec les formes et les couleurs. Par exemple, gérer de belles images de fond demande de la ressource réseau, bref un bon débit, chose qui n’était pas forcément très rependu en 1999… On en parle souvent, mais le webdesign s’offre de plus en plus de liberté, en ne connaissant aujourd’hui presque plus de limites (peut-être abusé mais l’idée est là).

Design Circulaire !

Lors de la conception d’un design ou d’un identité graphique, il souvent bon de commencer ou de revenir à des formes de base, comme le carré, le rectangle ou encore le cercle. Intéressons-nous particulièrement à cet élément, qui est bien présent dans de nombreux design actuels. Que ce soit en élément de navigation, monté en fond page, en rappel graphique du logo, bref le cercle et le disque sont partout.

Le site de Philipp Bartz est un bon exemple. Il utilise un élément circulaire pour habiller son logo, son menu, mais aussi son visuel d’accroche principal.

De plus l’ambiance noir / blanc et l’utilisation d’une police scripte donne du style au design minimaliste. Mais c’est une autre histoire…

Sur le site Mix 2011, les éléments circulaires sont mis en scène de manière à rappeler le cercle chromatique : le mélange de deux éléments colorés donne une troisième couleur.

Le background du site est lui même composé de nombreux disques. Les lignes diagonales quant à elles donnent une bonne dynamique au site.

Ci-dessous, c’est surtout la typographie qui est mise en avant par les formes circulaires.

Sur le site Wade, le design est complétement tourné et construit à l’aide de cercles imbriqués et reliés.

Sur son portfolio, Sébastien Morge utilise une navigation circulaire bien sympathique. Avec une belle harmonie de couleurs et un style vintage, les éléments circulaire s’intègrent parfaitement au design du site.

Lucia utilise un univers constitué de bulles en aplat de couleur, ce qui donne un très bon style général au design.

Dernier exemple avec ce portfolio, où Julie Frank utilise un menu circulaire. On retrouve également l’élément graphique à divers endroits clés sur le site, comme pour afficher certaines photos.

Et pour finir

Tendance ou non, les éléments circulaires sont bien présents et surtout utilisés par de nombreux designers. Donnant du style, les disques, cercles permettent de jouer avec les couleurs, la transparence, la profondeur et mettent en place un univers graphique bien spécifique.

C’est une tendance bien en place qui envahi le monde du design depuis quelques mois. Le style « Vintage, retro » est présent partout. Petit tour d’horizon, de cette tendance qui nous offre de superbes sites retro.

Vous n’avez pas pu passer à côté des sites vintages, découvrons ensemble ce qui caractérise ce style en examinant les différents élément graphiques de plusieurs sites d’exemple :

1. Textures :

Les textures omniprésentes sont les fondations du design retro. Utilisées en fond de page, sur les éléments  de navigation, dans les titres etc, elles sont le point commun le plus visible entre les différents sites. Quelques exemple pour y voir plus clair :

Ici sur le site Hey Indy, les textures et la superposition d’éléments donne du corps au design.

Sur le site Amazee Labs, la texture de fond est légère, et paradoxalement donne tout un style au site :

Made My Day utilise le même principe pour mettre en valeur les éléments graphiques constitutifs du site. Le tout nous donne quelque chose d’harmonieux sans aplats de couleur, mais avec un style texturé général.

Sur ce site, l’utilisation de plusieurs texture permet de mettre en lumière certains éléments et donner un côté réel, presque tactile au logo (on a presque envie de le toucher du doigt…)

2. Couleurs :

Les couleurs représentent également beaucoup dans ce style rétro. Dé-saturation, harmonie, et souvent bichromie donne un effet vieilli tout en garde une côté propre et moderne. Les couleurs de vieux papier, voir de carton, sont associés à des teintes primaires qui donne un bon contraste et relève le design

Sur ce site, tout est fait pour donner un style vieilli et « délavé » :

Pointy se base sur un fond de couleur « papier vieilli » couplé à des couleurs primaires pour les éléments de navigation :

RobedAward pousse le concept à outrance en affichant que très peu d’élément colorés :

3. Polices :

Comme vous avez pu le voir sur les captures précédentes, les polices utilisées sont bien entendue rétros, imposantes et centrales dans le design. Elles représentent une part essentielle de la structure globale. Souvent bien travaillées, elles donne du corps à la page, avec des effets d’impression et de vieillissement :

Exemple avec le site RainyPixel avec son header qui parle de lui-même, avec son corps de police imposant :

This is Teixido fonctionne sur le même principe. L’effet d’imprimé sur le texte principal donne du relief et une bonne dimension à l’accueil.

4. Illustrations /photos :

Les illustrations entrent bien entendu dans un contexte équivalent au autres éléments : dé-saturation, vieillissement, l’absolue vintage s’exprime par les images :

Teixido combine une police et des illustrations « réelles » pour au final un effet vieilli :

Adpacks utilise clairement un illustration vintage, qui colle au site comme un gant :

À la fois grunge et très vieilli, l’illustration d’accroche de Retin Art résume très bien le style :

You Know Who avec sa grande photo en noir et blanc, sublime le header et annonce immédiatement la couleur et le style global :

Conclusion :

Les sites vintages constituent un des styles majeur du moment. Le côté à la fois classe et rétro donne une certaine qualité générale au design. Celui-ci forme un tout, basé sur des codes bien précis, comme l’utilisation de textures, de polices vintage, (type Gothic, League…), de couleurs bien précises et d’illustration bien dosées. Le style design retro à encore un bel avenir devant lui…, mais jusqu’à quand d’après vous ?

Les menus et autres éléments de navigation se font de plus en plus grands et imposants. C’est une constatation que l’on peux observer sur de très nombreux nouveaux sites. Quelle est l’utilité d’une telle navigation, et pourquoi est elle entrain de gagner du terrain ?

En Webdesign, un des principe fondamental à ne pas oublier est que nous créons des interfaces POUR l’utilisateur. La navigation étant l’élément essentiel à prendre en compte pour se « diriger » dans votre site web. Le fait d’utiliser une navigation de type menu déroulant large, augmente de façon conséquente l’espace cliquable autour d’un lien.

Premier exemple avec le site de Mc Donalds US :

L’onglet du menu comporte un déroulé composé de trois colonne et même d’un visuel d’habillage.

Sur le nouveau site de Intermarché, le menu est un réel bloc à part entière avec des images, des listes, etc :

Le site du constucteur Allemand Audi possède quant à lui un menu large avec un aperçu immédiat du véhicule survolé. À tester car son fonctionnement et son accessibilité est tout de même assez particulière…

Ergonomie et facilité d’utilisation :

L’avantage de tels menus est qu’ils permettent de rendre l‘espace clicable plus conséquent ce qui améliore clairement l’usabilité générale de l’interface. Bien entendu un menu très large cache une partie du contenu de votre site, mais cela ne constitue pas un inconvénient en soit dans une situation de navigation.

En plus de ces avantages ergonomiques, ce type de menus permet aux webdesigners d’utiliser un maximum d’espace pour s’exprimer !

Et vous quel est votre avis sur ce type de navigation ?

Une tendance déjà bien en place depuis quelque temps, le webdesign lisse et poli fait rage sur le web. Petit tour d’horizon de ce style graphique très employé.

Certains parlent de l’évolution des reflets du web 2.0, d’autre diront que les interfaces d’Apple sont les signes précurseurs du style. Quoi qu’il en soit, ce type de webdesign se retrouve dans de très nombreuses créations. Premier exemple, avec le site Metalab.

Ce site présente tout les aspect d’un webdesign « lisse et poli ». Un large titre ombré, qui donne un effet de relief creusé, des dégradés légers bien maitrisés, le tout sans fioritures. Ce site n’est pas nouveau mais à probablement contribuer à ouvrir la voie.Un exemple avec ce site que je pense très inspiré par Metalab :

Dans le même style, le site d’une entreprise qui développe des application I-Phone.

Robocat reste dans la même veine, avec des éléments creusés et du relief. Les reflets très léger donne du volume au design.

À la loupe à présent, le porfolio de Dalton Hurd :

Les deux blocs clairs contrastent bien sur le fond sombre. Le très léger dégradé contribue à donné du relief, ainsi que les ombres sur les boutons.

Sur le site de Campaign Monitor certains éléments sont mis en avant par cette technique, comme la navigation sur la capture ci-dessous.

L’utilisation massive des CSS 3 permet petit à petit de remplacer les images pour créer des bordures arrondies, ou des ombres par exemple. Pour conclure, on peut clairement voir que cette « tendance » est déjà bien en place et a en croire le développement des CSS 3, les designs lisses et polis ont encore des beaux jours à vivre.

D’un autre coté, l’utilisation trop massive de cette technique fondra petit à petit ces webdesigns dans la masse,qui perdrons leur originalité. À vous webdesigner de demain, d’innover et de créer le style phare des prochains mois !

Pour aller plus loin :

5 technique de webdesign lisse et poli chez Line25

Bien plus qu’une simple tendance, la page « ouverture prochaine » se fait de plus en plus belle et soignée. Elle est même quasi-obligatoire pour créer un buzz avant même l’ouverture d’un site. Pourquoi les webdesigners apportent-ils un tel soin à cette page temporaire ? Quelques réponses et conseils pour créer une page « coming soon » efficace.

Avant même la mise en ligne d’un site web, faire une belle page d’ouverture, permet d’avertir vos futurs visiteurs. Il est alors immédiatement possible de communiquer l’adresse de votre futur site. Les internautes ne se retrouveront pas devant une page dans un style trop vu et revu et très 90′s comme celle ci :

La page coming soon ne doit pas être une option. Elle permet de faire connaître votre futur site et surtout doit donner envie, faire saliver et susciter la curiosité des internautes. Pour vraiment marquer le coup, il est important d’avoir une identité forte dès le début. Pour y arriver, on peut dans un premier temps mettre en avant son logo et donner immédiatement une idée de ce que va être le design. Une phrase de présentation du site peut être également bienvenue. Attention à faire court et précis pour donner envie à vos futurs visiteurs !

Le futur site de Weode annonce directement la couleur, en plaçant son logo de manière imposante et centrale.

Un deuxième point qui peut contribuer à créer le buzz avant l’ouverture du site, est de placer des liens vers différents réseaux sociaux. Bien sûr pour avoir un impact convenable ceux-ci doivent être régulièrement animés.

En troisième point, en plus des réseaux sociaux, un formulaire d’inscription à une newsletter permettra à vos futurs visiteurs d’être informés de l’ouverture du site. C’est une manière fiable pour permettre aux internautes de suivre l’avancement de votre projet. Quelques exemples :

Une autre stratégie est de faire durer le suspense, en mettant en place un compte à rebours par exemple. Mais attention de ce cas, à bien tenir les délais !

Un autre exemple avec le site Simply Order, qui dévoile petit à petit son design derrière un rideau :

Conclusion :

Une page « Site à venir » réussie est une page avec des couleurs qui en jettent, axée sur la charte graphique du futur site, avec un design fun ou d’où moins qui attire l’attention. En plus de cela, amener un aspect communautaire avec des liens vers des réseaux sociaux, une newsletter permet de tenir en haleine vos futurs visiteurs. Tout cela bien sûr en gardant une part de mystère pour faire durer le suspense ! Quelques raisons qui permettent de comprendre le soin apporté à ces pages temporaires.

Source : YouTheDesigner – 45 exemples de coming soon pages.

Je ne sais pas si on peut à proprement parler de tendance, mais les sites web au design minimaliste poussent comme des champignons en ce moment. Pour faire le point, je vous propose un petit tour d’horizon de la tendance minimaliste.

Commençons tout d’abord par donner une définition de ce que représente le minimalisme : « le minimalisme (ou art minimal) est un courant de l’art contemporain, né dans un groupe de plasticiens au début des années 1960 aux États-Unis, basé sur le principe de l‘économie maximale des moyens. » (via Wikipédia)

Certes cette explication est un peu trop générale pour être appliquée au webdesign mais l’idée est là. « L’économie maximale de moyens » me fait immédiatement soulever cette question : à quoi bon en faire des tonnes quand un design minimal suffit ? Il est n’ai pas nécessaire de surcharger l’espace d’éléments visuels inutiles, voir gênants pour l’utilisateur. Il est important de se concentrer sur le message à faire passer, le produit à vendre, la cible visée etc. En se focalisant sur ce point, le design s’épure de lui-même petit à petit tout au long de sa conception. En utilisant des mises en pages basées sur des grilles, par exemple, il devient très facile d’avoir une ligne directrice pour la création. N’ayez pas peur des espaces blancs en webdesign ! Au contraire, ils peuvent avoir plus d’utilité que l’on ne le pense…

Certes mais alors comment créer un design élégant, ergonomique et surtout reconnaissable au premier coup d’œil ?

La recherche d’originalité  est un élément incontournable pour se démarquer de ses concurrents. Paradoxalement trop de singularité peut nous amener à créer un design trop perturbant, trop chargé et inévitablement plus du tout ergonomique. Il faut trouver le juste milieu, pour avoir une identité de numérique forte sans en faire des tonnes. Prenons par exemple le site web du studio de webdesign anglais, Envento :

Il possède une interface minimaliste, avec du bleu et quelques nuances de gris. Le tout forme un beau mélange, pour au final avoir un site clair et propre où l’information peut-être trouvée facilement. De même pour le portfolio du freelance australien, David Jonsson :

L’immense « Welcome » sur la page d’accueil donne vraiment du caractère à son site. Il est original et minimal à la fois, preuve que les deux ne sont pas incompatibles ! L’utilisation massive de belles icônes et d’un header personnalisé sur chaques pages rajoute encore une bonne dose de personnalisation.

Comment ne pas tomber dans le coté TROP minimal ?

Attention, en supprimant trop d’éléments que l’on pense superflus, il est rapidement possible de se retrouver avec un design trop minimal. Celui-ci donnera l’impression de ne pas avoir été travaillé suffisamment. Au final une interface trop pauvre et sans saveur n’a aucun intérêt…En ce moment de nombreuses organisations se dirigent vers un design minimaliste pour la nouvelle version de leur site web. Je parlais récemment sur le blog du redesign de l’agence Saizen Media. L’ancienne version du site était tout simplement exceptionnelle, avec de nombreuses illustrations, qui offraient un véritable choc visuel. Le redesign dans un style minimaliste est vraiment classe lui aussi mais perd un peu de son originalité en devenant « plus quelconque ».

Pour conclure :

Réussir à créer un site original n’est pas simple et demande beaucoup de travail de  recherche et d’investigation. Il convient de trouver le juste milieu entre superflu, minimalisme et simplicité pour créer LE design qui conviendra à votre client. Un design minimaliste n’est pas forcément adapté à tout projet, mais parfois indispensable pour d’autres. Un site communautaire comme Facebook par exemple n’a pas vraiment d’autre choix que d’offrir un site minimaliste, tant il possède de fonctions. Avec un design « compliqué », l’ergonomie serai grandement revue à la baisse et l’utilisateur perdrai vite ses petits…Pour se rapprocher du design idéal, le tout est une histoire de dosage.

Des ressources :

Si vous en voulez encore plus sur cette « tendance »  je vous invite à cliquer sur les liens ci-dessous :

• Pour votre inspiration : 80 beaux sites au design minimal
• Je vous invite également à lire le très bon article de Gilles Vauvarin, sur la simplicité dans le design.
• Minimalsites, une galerie de site au design minimaliste.

Et vous quel est votre avis sur la question ? Trop de simplicité peut elle nuire à l’image du site ? Ou au contraire es-ce que rester minimal est la solution pour avoir un site propre et clair ?

Avec le développement des librairies Javascript,  les « diaporamas » (ou SlideShow) se multiplient sur les sites web. Ils constituent un moyen idéal pour présenter de l’information à vos visiteurs.

Agréables à consulter, faciles à comprendre et à mettre en œuvre, la popularité  des sliders s’explique facilement. Voici une liste de sites web utilisant ce principe, se basant sur Flash ou sur Javascript.

UEM Metz

En Flash, avec de bonnes transitions floues, l’effet est vraiment réussi.

Tutorial 9

Le site de tutoriels utilise son « Featured Content Slider » pour mettre en avant ses derniers articles.

SanctuaryCov

Le même slider que sur Tutorial 9.

Are You Frank

Le slider est bien intégré, de manière discrète, dans le site. Mais en même temps l’effet est bien là !

Nealite

Cette tendance s’accorde parfaitement à un autre, celle des mises en pages horizontales. Bonne utilisation sur le site de l’agence Nealite.

Ricoverdeo

Ici le slider constitue à lui seul tout le contenu central du site.

Article inspiré par : Instant Shift. Retrouvez 66 exemples de sliders sur cet article.

Ressources :

Mettez vous aussi en place un diaporama de ce type sur votre site :

- Les 15 meilleurs exemples chez Vision Widget

- 13 scripts Jquery chez WDL

- 1 nouveau tutoriel Jquery chez Build Internet