Créer un webdesign pour vendre est tout un art ! Pour vous aider dans votre quête d’inspiration, voici 20 sites spécialisés dans la vente en ligne.

Comment augmenter le taux de conversion de votre boutique ? Comment mettre en confiance et ne pas faire fuir vos visiteurs ? Comment créer une identité percutante et bien mettre en avant votre produit ? Tant de questions parmi tant d’autres à résoudre pour créer une boutique à succès (ou une boutique tout court…).

Pour vous inspirer, je vous propose de jeter un œil sur ces boutiques en ligne qui savent allier élégance et efficacité. Il y en a pour tout les goûts, du minimaliste, du vintage, du connu et du nouveau ! Bref de quoi vous permettre de trouver des boutiques de qualité.

Proxgo

Atelier de la Ceinture

Maison de la Cravate

Rip Curl Shop

The Limited

CratendBareel

Shop Shoes Guru

Famous Cookies

Materiel.net

K2 Snowboarding

Anna Scholz

What is Blik

Design By Humans

Ocean Sales

Heartbreaker Fashion

Joli Dragon

Archiduchess

BimbayLolaStore

Kiss me Zombie

Velvet Marmelade

J’espère que cette sélection à fait votre bonheur aujourd’hui, dans tous les cas n’hésitez pas à poster un commentaire si vous voulez rajouter un site a la liste !

Le mois d’avril à présent derrière nous, voici l’occasion de faire une sélection de webdesign frais et visuellement inspirant pour vos créations futures. Les désormais traditionnel webdesigns incontournables du mois vous attendent !

Un mélange de portfolios, de sites de vente en ligne, d’agences de communication bref un bon cocktail de webdesign !

Rich Brown

SLV rent

DnaDarwin

BellTea

DmottCreative

BoxWishDesign

Jean Delbrel

Brizk

Omnia

Rain Creative Lab

Creanto

Blakeallendesign

Mstyle

Waterlife

HardlyCode

Fajnechlopaki

WineShop

Je vous dit à fin mai pour une nouvelle sélection de webdesign sensas’ ! Et à dans trois jours pour un nouveau post.

Des webdesigns de toute beauté, un mois de liens récolté pour le plaisir de vos yeux et pour votre inspiration. Les incontournables du mois de mars 2010 sont là !

Le printemps à fait germer de nombreux design de qualité… Cette petite sélection de 18 sites vous permettra une fois de plus de voir ce qui ce fait en moment et de trouver de l’inspiration pour vos projets à venir ! À noter que la sélection présente quelques sites HTML5/CSS3 (avec de superbes effets), comme par exemple Jeroen Homan, Fesh01, Bounty Bevo ou encore Curious Generation. À découvrir tout de suite :

Jeroen Homan

Crushlovely

Fresh01

Wenear

The Brown Corporation

Curious Generation

Abeall

We are Hughes

Antpaw

Wrk Born

Frish

Awpny

Hiidef

Shout Digital

I am Mago

8 interactive

Minimalist Design

Bounty Dev

J’espère que vous avez aimé cette sélection. N’hésitez pas à partager vos trouvailles du mois de mars !

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 ?

Début mars arrive, le printemps c’est pour tout bientôt, enfin les oiseaux, les fleurs … Hum certes tout ça pour dire qu’elle est arrivée ! Je parle bien sûr de la sélection des webdesigns incontournables de février 2010 !

Ce mois-ci encore, des sites d’agences, des portfolios, un micro-site automobile, de belles créations pour ce mois de février !

Usine2Prod/Sublimage

Flaek

Artcore Illustrations

Checkland

Mikioinose

Ad60

Agenciart

GiangNguyenDesign

Ryanmerrill

t/

Audi A1

Davi-T

CarrotCreative

Sam Frith

DijitalPark

Macheist

Tj-Todo

Alerte Orange

Bohenmiancoding

La technologie Flash permet de créer des sites web riches en interactivité qui laissent rarement indifférents lorsqu’il sont bien réalisés. Mais il faut l’avouer, l’expérience utilisateur sur ce type de sites peut-être considérablement décuplée en utilisant de la 3D.

Flash est un moyen pour amener la 3ème dimension directement dans votre navigateur web. Avec l’apparition de l’outil  de rotation 3D sur Adobe Flash dans sa version CS4, le logiciel prend en charge l‘axe Z. Cette nouvelle dimension de travail offre de nouveaux horizons aux designers Flash. Mais c’est les développeurs Flash qui révolutionnent vraiment le concept. De plus en plus de sites utilisent des moteurs 3D sous Flash pour créer un concept unique, innovant et souvent visuellement renversant.

Des classes 3D sous Flash :

Les deux plus connues sont probablement Papervision 3D et Away 3D. Ces deux bibliothèques open-source et gratuites permettent de créer un moteur 3D sous Flash en ce basant sur le langage Actionscript 3. Elles offrent aux développeurs une grande liberté de création pour réaliser des effets vraiment détonants. Les classes Papervision 3D et Away 3D sont à installer comme n’importe qu’elle classe en Actionscript 3. Pour pouvoir les utiliser  mieux vaut posséder une bonne base de connaissances du langage. L’avantage de l’utilisation de  ces classes pour un projet est qu’elles ne nécessite pas d’installer de plug-ins supplémentaire pour afficher les éléments 3D. Les animations fonctionnent nativement sous le plug-in Adobe Flash Player. Pour illustrer tout cela quoi de mieux que du visuel ? Je vous propose de découvrir quelques sites utilisant ces deux moteurs 3D.

Des exemples :

Le site officiel de Papervision :

Bien qu’il ne soit pas tout jeune, le fond marin de Papervision offre un bon aperçu de quoi il est capable…

Portfolio de Jim Burrows :

Une utilisation simple de Papervision mais qui rend tout de même bien ! Un portfolio minimaliste et sympa.

Portfolio de Njoore :

Papervision toujours, avec des effets plus poussés sur ce site.

Occasions Freedent :

Le moteur Away 3D est utilisé sur ce site. Allez-y et secouez la box !

Adidas Campaign Outdoor :

Away 3D, avec un effet de parallaxe.

Il existe de nombreux autres moteurs ou applications pour faire de la 3D sous Flash, comme par exemple Sandy 3D,  ou Alternativa3d (gratuit pour un usage non-commercial).

Et des ressources (en Anglais et Français) :

• Apprendre l’animation 3D sous Flash, avec les conseils d’Adobe Developer Connection .
• Un tutoriel de base en français : travail avec des objets 3D (Video2Brain)
• Un bon tutoriel pour apprendre les notions de base pour travailler avec Papervision chez GotoAndLearn.
• La sélection officielle des meilleurs sites utilisant Papervision.
• Créer un jeu de mémoire avec Away 3D, chez ActiveTuts.

À vous d’y aller maintenant ! J’espère vous avoir donné envie de tester les classes 3D sous Flash pour explorer de nouvelles pistes créatives. Les possibilitées qu’offre le logiciel en matière de 3D ne sont pas récente et vont bien au delà de ces quelques exemples. Avec l’augmentation des applications marketing de la réalité augmentée et de la 3D avec lunettes, les sites web à venir promettent d’être exceptionnels. Il en existe pourtant déjà tant à connaitre absolument. C’est pour cette raison que je réserve mon prochain article à une sélection de sites Flash 3D !

Qui n’a jamais lu un article du style : « Les 40 plus beaux design de blog » ou encore « 20 designs minimalistes »  par exemple ? Les billets de ce type présentant des « roundups« , se retrouvent quasi  quotidiennement sur de nombreux blogs. Comment s’y retrouver dans tout ça et ne garder que le meilleur ?

Le site TopRoundups répertorie les meilleurs roundups sur le webdesign. Idéal pour trouver de l’inspiration, ils sont tous désormais regroupés au même endroit. Le site offre la possibilité de soumettre ses propres articles (ils seront sélectionnés en fonction de leur qualité avant la publication).

Encore un site en anglais me direz-vous, mais on peut très bien imaginer ouvrir le même type de site répertoriant des articles francophones ! Lancez vous !

Voir le site TopRoundUps

Pour illustrer mes propos, je vous propose quelques exemples :

Envato utilise un petit effet 3D ombré pour mettre en valeur différentes entrée de news :

Fuel Your Creativity utilise le même type de petit effet pour mettre en avant le nombre de commentaires par post :

DesignShard avec sont menu mis en relief :

Sur son porfolio Sarah Longnecker met son contenu en avant avec des rubans légèrement texturés qui sont du plus bel effet.

Ce type de design ce retrouve sur de nombreux sites comme :

AnimHut

Blog de Ryan McMaster

Curious Romain

Jason Reynolds

Un autre type d’effet, cette fois qui tend plus vers la perspective. Comme ici le bas de page du site Almalatina :

Suivant la prise de vue, les photos font clairement ressortir les éléments. Le design ci-dessous est basé sur la photo. Peut être pour inviter directement le client à venir dans le restaurant, alors qu’il ce trouve au bureau ? En tout cas c’est plutôt réussi.

Sur le site de l’agence Arôme, la perspective est utilisée de façon différente, en vidéo cette fois-ci.

Pro Styling de Schwartzkopf présente ses produits tout autour de l’interface vidéo du site.

Sur WebdesignerTrends, je présente souvent des articles sur les tendances actuelles du webdesign. Cependant même si il existe des codes et des règles à respecter pour avoir un design consensuel, ne faut il pas sortir totalement du moule pour ce démarquer ?

Réussir à être différent dans le monde d’aujourd’hui est un principe fondamental pour mettre en avant son site web. En outrepassant certaines règles communes, en ne présentant pas un site avec un header classique, un menu horizontal clairement identifié, un fond texturé…Mais en introduisant une navigation inhabituelle, une mise en page totalement désordonnée nous pouvons laisser un impact non négligeable sur le visiteur.

Attention par contre à ne pas aller trop loin jusqu’à  rendre le principe incompréhensible voir totalement abstrait. Ceci produirait l’effet inverse, votre visiteur n’hésitera pas à cliquer sur la petite croix rouge en haut de l’écran pour sortir de ce guêpier..

Pour illustrer mes propos,  j’ai sélectionné quelques sites web avec un design élaboré,  artistique, voir souvent même atypique.

BigKid

Le design de Big Kid s’organise en colonnes mais laisse les éléments occupe l’espace entier de l’écran. Les blocs de texte ne sont pas alignés, leur taille varie pour donné un effet désordonné.

Webbliworld

Le design composé d‘illustrations est vraiment unique et très bien réussi. Ceci n’est qu’une page d’accueil, le site totalité du site est réservé aux membres inscrits. La barre de connexion est donc importante. Elle est située en haut de l’écran pour se détacher du contenu et directement focaliser l’attention.

Feedmecoolshit

Avec un mise en page à cinq colonnes l’interface est quelque peu inhabituelle, voir perturbante. FDCS joue le jeu, quitte à bousculer les habitudes des internautes.

Smetana

La navigation sur le site du photographe Andreas Smetana s’effectue principalement à la souris et au clavier dans une interface full Flash. L’innovation fonctionne ici, vu le nombre d’Awards que totalise le site…

Thibaud

Ce portfolio est composé d’une interface full Flash avec des éléments déplaçables. Cette navigation unique offre au site un style simple et efficace et sans égal.

Meomi

Aussi dans un style très illustratif, Meomi habille une mise en page en colonnes avec un décor végétal bien réussi.

Basmatitree

Dans un style un peu grunge et très noir et blanc le contenu est écrit en bloc dans une seul colonne à gauche. À première vue le texte paraît flotter sans structure, mais le blog est tout de même agréable à lire.

Et vous ?

Entre suivre les tendances ou être totalement à côté, reste à trouver le juste milieu entre innovation et facilité d’utilisation.  À vous de me dire ce que vous en pensez. La différence est elle toujours favorable ? Ne faut il pas rester dans un modèle type pour être crédible ? Donnez moi votre avis !

Le menu d’un site web est un partie à ne pas négliger dans un webdesign. C’est grâce à lui que l’utilisateur interagit avec l‘interface et navigue à travers le contenu.

Le dernier article de Smashing Magazine écrit par Jacob Gube offre une sélection des derniers menus et des dernières tendances en design de navigation. En 3D, dans un style « bulle de BD« , avec des morceaux de papier bien vintage, des icônes, bref ils se déclinent sous toutes les formes et couleurs :

Mysterytin

Pampaneo

Metalabdesign

Gugafit

Andreashinkel

Utah

HTO

Design Spartan (encore lui et oui !)

Pour voir la sélection complète, je vous revois vers cet article pour vous faire un aperçu et trouver de l’inspiration pour vos prochains designs !