Première sélection webdesign de cette année 2012, pour votre inspiration. Nous allons commencer en beauté avec 22 sites à ne pas manquer.

Les tendances du webdesign 2012 tant annoncées sont-elles bien sur la bonne voie ? Donnez-moi votre avis après avoir regardé de plus prêt cette sélection…

CreateDm

Mezcalbuenviaje

Products And Services

Eric Barse

Zoo Advertising

Decode

All Y Creative

Looks Luxux

Dedon

365 Awesome Designers

I am Pomz

Ascension Latorre

Mc Cafe Canada

Saltsurf

Solo Interactive

Intacto 10 years

Goliathsportwear

Sobe

Appgear

Pokki

One Minute With

Bear CSS

Alors votre avis sur cette sélection ?

Ces quelques perles aperçues sur le web récemment, m’ont donné envie de partager avec vous chers lecteurs. Pour votre inspiration, retrouvez 5 sites e-commerce qui ne passent pas inaperçus…

Produit Intérieur Brut

Le site Produit Intérieur Brut est spécialisé dans la vente de mobilier industriel, de meubles design, d’accessoires de décoration vintage et bien plus encore. L’interface globale est simple, bien pensée et comporte une foultitude de petits détails qui confère une véritable identité au site. La navigation intuitive permet de pénétrer rapidement dans le catalogue, en choisissant directement un classement par prix, par type de produits, par matières…

Indochino

Tout en élégance, le site Indochino propose de créer votre costume sur mesure. Choisissez un produit et personnalisez-le à votre convenance. Le processus de personnalisation est très simple et rapide d’utilisation. Le design, basé sur de larges visuels, met en avant la qualité des produits. Une formule qui a l’air de fonctionner pour cette société basée au Canada, qui se dit n°1 du domaine.

Früute

Essayez de prononcer Früute…enfin bon dans tous les cas, dégustez ! Cette pâtisserie de Los Angeles mise sur la sobriété pour vendre des minis-tartes d’une grande classe. Früute arrive à faire tourner les têtes des plus gourmets avec son interface digne d’une marque de luxe. Le bouton d’achat en ligne est judicieusement placé dans le catalogue de produits. Basé sur un énorme slider, il se parcours tel un succulent diaporama.

Pauleka

La célèbre marque de vêtements propose un site soigné, comportant de nombreux effets Javascript sympathiques pour la navigation. Avec une prise en main intuitive et sans accroche, l’utilisateur se laisse porter par les visuels de produits carrément énormes ! On reprochera simplement une finalisation approximative du design sur la fiche détaillée d’un produit. La boutique est basée sur Magento.

Shop Revolution

Sans faire la révolution, la boutique de vêtements femme, homme et enfant a le mérite d’être très propre. La vision plein écran du slider en page d’accueil donne réellement beaucoup d’importance aux beaux visuels d’accroche. La fiche produit, quant à elle, est présentée sans accro.

Comme vous le faites si bien d’habitude, partagez vos liens :) !

Comme en chaque fin d’année qui se respecte, les prédictions d’avenir vont bon train. Sans affirmer de quoi sera fait 2012, nous pouvons tout de même apercevoir les grandes tendances du webdesign pour cette année à venir.

Surfant sur les tendances ou non, le webdesign est en constante évolution. Les « tendances » suivies par les webdesigners tendent à faire évoluer le web de manière commune. Elles poussent le niveau général de compétences toujours un peu plus loin. D’après le web actuel et les avis de talentueux acteurs du web, nous pouvons voir clairement 8 tendances qui continuerons à évoluer au cours de cette nouvelles année :

Le Responsive Webdesign

Omniprésents sur le web toute cette année 2011, les sites web basés sur une mise en page adaptable à toutes les résolutions continuerons à prendre une place importante dans le paysage webdesign. On peux imaginer que le principe se développe au sein des « gros sites web » comme les sites d’actualités ou les grands portails nationaux, bien entendu avec la publication de nouvelles techniques et outils pour améliorer le workflow global de ce type de site.

HTML 5 et CSS3

Figurant dans les tendances depuis fin 2009, le couple HTML 5  / CSS 3 va encore faire tourner les têtes en 2012. Avec le développement d’Internet Explorer 10, Microsoft promet une compatibilité exemplaire avec les technologies actuelles. Si tel est le cas, ceci va permettre aux webdesigners d’exploiter réellement les possibilités offertes par CSS3 dans des projets web. HTML5 quant à lui, va continuer à servir de base pour les applications web, mais surtout les sites mobiles.

Les animations Jquery / CSS3 et HTML 5

À mettre en parallèle du paragraphe précédent, grâce à l’évolution de la compatibilité des navigateurs, on peux clairement imaginer que les animations CSS3 et Jquery dépasseront le simple statut d’expériences, mais deviendrons de plus en plus utilisées dans le développement de sites web pour vos clients.

Les menus fixes

Avec l’avènement des effets de parallaxe, du scroll dynamique avec Jquery et des sites basés sur une page, le navigation devient de plus en plus fixe. C’est le contenu qui animé autour d’une navigation fixée. Utile pour de petits sites vitrines ou bien un portfolio. Cette tendance s’inscrit dans une logique d’adaptation aux mobiles et notamment aux tablettes.

Stratégie de design global

Je nommerai cette tendance, la stratégie de design global. Dans la même lignée que le Responsive Webdesign, le développement et la multiplication des supports utilisés pour naviguer sur le web oblige à penser les interfaces différemment. Les plates-formes web comme Facebook ou Twitter redoublent d’ingéniosité  pour garder une cohérence d’utilisation entre le mobile, la TV connectée, les tablettes et les ordinateurs de bureau. Ainsi l’application mobile se rapproche de plus en plus du site web et vis-versa.

Les polices web

Les polices exotiques optimisées pour le web ont connus un élan de popularité en 2011. Grâce à elles, il est facile de créer une interface basées sur des éléments uniques. La facilité d’utilisation des polices, comme celles de Google Web Font qui permet d’inclure une police simplement avec une ligne de Javascript va devenir quasi-incontournable dans les futurs design.

Les illustrations vectorielles

Amateurs de vectoriel ou non, les designs basés sur des grandes illustrations vectorielles et des infographies deviennent de plus en plus courants. Les mascottes personnalisées qui donnent une identité forte au site sont souvent choisies pour lancer une marque ou un nouveau service.

Un élan de simplicité

Les sites web modernes offrent de plus en plus de possibilités, en terme d’actions et d’interactions. Pour ne pas perdre l’utilisateur et le conduire facilement dans l’interface, les sites clairs et faciles d’utilisation remporterons la partie. Indiquer clairement le but du site et ce que l’on attend de l’utilisateur est essentiel.

Pour conclure

La tendance la plus importante à suivre durant cette nouvelle année est bien entendu l’évolution des sites et applications destinées aux mobiles et tablettes. Le Responsive Webdesign est un des éléments qui permettra d’imposer une stratégie globale de design adaptés à différents supports. L’avancée de la sémantique HTML 5 et CSS3 verra grandir des webdesigners talentueux formé directement à partir des technologies actuelles.

Qu’en pense les acteurs du web ? Retrouvez les interviews et prédictions des designers, développeurs et bloggeurs de talent sur Design Modo et Webdesigner Depot. Pour en savoir plus sur l’avenir d’HTML 5, Tech Crunch à creusé le sujet avec 14 prédictions pour 2012.

Et pour vous mes chers lecteurs, meilleurs voeux pour cette nouvelle année 2012 !

Dernière sélection de cette année 2011 riche en sites web de qualité. Pour finir en beauté, Webdesigner Trends a sélectionné pour vous 20 webdesign pour booster votre créativité en 2012.

Google Maps

Macquarie University

Captain Dash

Big red dog

Team Tree House

Enlighten My Mind

The Gradient App

Matilda

Jibevisuals

Aigadc

Deux Huit Huit

Five Thirty Brew

Nike Chosen Series

Gray Den Poper

Parklafun

10 years in type

Moabeer

Smalls Studio

Inze

Nike Vision

À l’année prochaine !

Voilà qui conclu cette année riche en créativité ! En tout, plus de 290 sites ont figurés dans les sélections des incontournables ! Retrouvez toutes les sélections webdesign de cette année 2011 :

• Janvier / février
• Mars
• Avril
• Mai
• Juin
• Juillet
• Aôut
• Septembre
• Octobre
• Novembre

Dites-moi, quel est votre site web de l’année 2011 ?

Ce mois de novembre à été riche en créations webdesign de qualité. Pour votre inspiration plongez au cœur de ces 26 sites tendances, mixant HTML5 / CSS3 et Javascript.

Nokia

35 ans Premiere

Chocolatier Bouillet

President

Art4web

Cheval Blanc Courchevel

Uchitomi

War Child

Kantt

Saint Antoine

BigBite Creative

Protest

My Nothern lights

Lamoulade

360 Langstrasse

Ownedition

James Silverman

Kikk

HarryFord

HarryFord

Revolver Studio

Fifa12 Scarf

Remember The War

Asiance

Nerisson

We run Mexico

Quel est votre avis sur cette sélection de novembre ?

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 ?

Accroche visuelle à l’arrivée sur le site, tunnel de commande optimisé, ergonomie… rien de tel que la preuve par l’exemple. Découvrez 5 sites e-commerce propres et clairs pour votre inspiration.

Style & Conscience

Un concept original pour Style & Conscience qui vous permet d’acheter en direct chez un fabricant tout en bénéficiant de l’expérience et de la qualité de producteurs locaux. « Tous les produits proposés sont donc exclusifs et ne seront jamais en solde ailleurs. », ce qui représente la valeur ajoutée du site. Pour parler design, la mise en page en deux colonnes donne un côté très sobre et propre à l’ensemble. Les pages « À propos », « Contact » présentées sous la forme d’un accordéon latéral permettent d’accéder à l’info en un coup d’œil.

Makr

Le site Makr propose une manière originale de présenter ses produits. Tout est en effet regroupé sur la page d’accueil. Une large grille de produits, sans titre ni prix, laissant place simplement aux photos. Un clic sur une image et la fiche produit se déploie pour laisser apparaître les détails. Au final, un site tout en finesse, mettant réellement bien en avant les produits.

Tinkering Monkey

Vendre des produits personnalisable en ligne peut-être un véritable défi. Construire une interface réussie, claire et ergonomique est une des conditions sinequanone pour amener les internautes à finaliser une commande. Tinkering Monkey mise sur la simplicité et les indications implicites pour vous guider dans le concept.

Minga Berlin

Contenu dans un univers visuel très minimaliste, le site de Minga Berlin reprend de la couleur grâce à ses photos de produits. En effet, les chaussettes présentées par catégories, se déploient en accordéon vertical sur différentes lignes. De cette manière le visiteur peux toujours avoir un oeil sur les produits, même en étant sur une fichier détaillée.

Chrome Bag Store

L’exemple même d’un design que je qualifierai de propre et clair. Sur le site Chrome Bag Store, l’information est bien structurée autour de la navigation principale. Les grands aplats de couleurs se marient très bien avec les visuels d’accroche et les photos de produits. Une réussite.

Emboîtant le pas aux énormes sliders, aux effets de parallaxe, aux sites plein écran, la navigation au clavier connaît un renouveau plutôt intéressant. Nouvelle tendance du webdesign ou gadget passage ?

Utiliser le clavier  pour naviguer permet de proposer à vos utilisateur une approche nouvelle. Laisser la souris de côté, change inexorablement le comportement de l’internaute face à une interface classique. Nous avons connu un période « clavier » dans les gros sites Flash à une certaine époque, mais l’expérience se renouvelle depuis quelques temps d’une façon originale.

Javascript, slides et effets

L’évolution des librairies Javascript comme Jquery permet très bien de gérer toutes sortes d’actions au clavier. Voyons ensemble quelques exemples :

Le site Reverso Büro de Loïc Dupasquier utilise une navigation basée sur le clavier. Les pictogrammes en bas de l’écran et l’absence totale de scroll permet de très vite comprendre le fonctionnement du site. De plus la « mini-map » cliquable en dit plus sur la disposition des pages du site. Justement, il ne s’agit pas à proprement parler de pages, mais plutôt d’une grille géante, sous forme de grands visuels présentant le travail du studio.

Même si avec tout cela vous avez des difficultés, pas de soucis, un menu « classique » à la souris est prévu.

Sur Scozzese.com le principe est assez similaire. De grands visuels qui en mettent plein les yeux avec des animations tout en douceur.

Contrairement au site précédent, le tout reste navigable avec la souris. Le clavier passe un peu en second plan, mais les internautes les plus joueurs remarqueront assez vite la subtilité.

Sur le site MadeByGrave, la navigation concentrée sur la gauche sous forme de flèches indique de manière implicite qu’il est possible d’utiliser son clavier.

Un menu supplémentaire est également prévu pour les habitués du mulot, avec un défilement de miniatures.

Dernier exemple quelque peu différent, le portfolio du designer Tom Pain est réellement très bien travaillé et optimisé pour la navigation au clavier. La barre d’espace permet par exemple d’agrandir les images dans le portfolio. Des indications bien pensées au survol apportent un énorme plus pour l’expérience utilisateur.

Une histoire de visuels ?

Les sites utilisant la totalité de l’écran ont désormais bien fait leur nid sur le web. Le fait d’ajouter une navigation au clavier donne un esprit plus interactif qu’une navigation classique. Bien entendu ce type de mise en page est pour la plupart du temps réservé aux grands visuels qui se suffisent à eux-même et englobent toute l’interface du site. N’étant pas forcément une tendance généralisée en webdesign et réservé à un usage spécifique, je pense que la navigation au clavier va tout de même s’affirmer d’avantage dans les prochains mois. Impliquer l’utilisateur d’une manière différente suscite l’attention et augmente le temps de visite sur le site. Utiliser le clavier rappelle également le jeu, ou encore les outils basiques du traitement de texte. Les systèmes de grilles, avec les effets de défilement rapide sont directement inspirée des effets visibles sur nos smartphones.

Attention tout de même à bien informer l’utilisateur à l’arrivée sur le site, comme le fait bien Tom Pain par exemple. Sinon vous risquez de perdre l’internaute et de passer pour un site gadget… Autre inconvénient à prendre en compte, l’utilisation d’énorme visuels demandent parfois un temps de chargement plutôt long. Mais le jeu en vaut la chandelle ;)

Ressources :

La question que vous vous posez sûrement est : comment faire de même ? Pour vous aider, vous pouvez baser votre site sur le plug-in Jquery Ascensor. Rapide à mettre en place il peut-être une bonne base de travail pour un site original.

WebdesignTuts+ propose un tutoriel très complet pour créer un portfolio avec de la naviagation au clavier.

Vous pouvez également vous baser sur des plug-in comme Jcarousel en ajoutant l’écoute des évènement Jquery au clavier. Le plug-in Jquery Keyboard Navigation peut également vous être utile. Lancez-vous !

28 sites au design remarque ou à la technique original vous attendent pour votre inspiration. Comme d’habitude n’hésitez pas à compléter la liste avec vos trouvailles !

Aztrolab

Toriseye

42Angels

42Angels

WorkDiary

Jux

Clearassembly

2Create

CookieSound

Likness

Artua

The Lost Thing

Striking

Column Five Media

Fork CMS

Bell Creative Studio

Azhestkox

Decerteau Avocats

Ruinart

Beetle

Dotmick

Versace Collection

Citelum

Lakehouse

Behind The Masc

Kantt

Vision of Beauties

Evyemelie