Blog inspirant depuis 2008
  • Pin It

Ces petits détails qui vous font dire “Wow!” dans un design web

détails design

Chaque jour, nous parcourons plusieurs dizaines, voire des centaines, de sites web différents. Grâce à Twitter et aux fils de nouvelles RSS, nous pouvons accéder à un nombre incroyable de sites en peu de temps. Malheureusement, nous oublions la plupart de ceux-ci puisqu’ils ne laissent pas une impression forte et durable dans notre mémoire.

«Le billet suivant est une traduction d’un article paru sur le site web de Designinformer.com écrit par Jad Limcaco le 30 mars dernier».

Différents facteurs nous permettent de ne pas oublier un site web

  1. Le Contenu
    Il est facile de se souvenir d’un site Internet tel que Smashing Magazine ou Web Designer Depot grâce à la qualité et la diversité de leurs contenus.
  2. Le Design
    Certaines pages web ont un design hautement créatif et unique se démarquant ainsi de la concurrence.
  3. Le Facteur « WOW! »
    Parfois, en regardant un site web et en naviguant à travers ses pages, nous verrons de petits détails ou des effets subtils qui nous feront dire « WOW! » Il peut s’agir d’un effet de transition, d’un changement d’arrière-plan, d’un changement de couleur ou d’une animation unique. C’est ce qu’on appelle, le facteur « Wow ».

Le facteur « Wow »

« Ce sont les petits détails qui sont essentiels. Les petites choses nous permettent d’accomplir de grandes choses. »
– Coach John Wooden

L’effet « wow » est très important pour un site web. Il s’agit d’un facteur qui vous permet de vous détacher de vos concurrents dans votre secteur d’activité. Par ailleurs, ce ne doit pas nécessairement être quelque chose de complexe, ce peut être tout simplement de petites attentions bien appliquées. Leurs utilisations laisseront certainement une bonne impression dans la mémoire de votre auditoire.

Voici une liste de quelques sites, rassemblés par Designinformer.com, utilisant cette technique du « Wow » avec brio.

1- Analog – Coopérative se spécialisant dans la création de sites web

Le facteur « Wow! » : appuyez sur la touche G de votre clavier. Aussi, l’effet roll-over sur les membres de l’équipe est assez particulier.

Effet roll-over web

2- Face – Studio de design multidisciplinaires situé au Mexique.

Le facteur « Wow! » : les roll-over sur les liens pourraient assurément vous surprendre.

Site web - effet roll-over

3- Flourish – Agence de design

Le facteur « Wow! » : lorsque vous cliquez sur l’une des 4 bannières, l’arbre change d’aspect. Également, le slider pour les projets en vedettes est très bien utilisé.

effet-de-navigation

4- HutchHouse – Création d’interfaces web pour le commerce électronique et les réseaux sociaux

Le facteur « Wow! » : dans le coin droit en haut, vous pouvez changer l’environnement du site web.

rotation d'arrière-plan

5- Komodo Media – Studio se spécialisant en illustration et en programmation web

Le facteur « Wow! » : dans la barre de droite, essayez le « foliage-o-meter ». Son utilité est très créative et unique en son genre.

changement d'environnement

6- Riot Industries – Portfolio personnel du designer Phil Renaud

Le facteur « Wow! » : l’effet roll-over sur les thumbnails des projets est un « wow » définitif.

effet roll-over thumbnails

7- Traffik – CMS pour les designers et pour les entreprises

Le facteur « Wow! » : au premier coup d’oeil, l’arrière-plan du site web à l’air parfaitement normal. Essayez de déplacer votre souris un peu partout. Il s’agit d’un petit détail, mais l’effet se démarque quand même de la masse.

effet wow

8- Yaili – Site web de la designer web Inayaili de León

Le facteur « Wow! » : le bas du site web est vraiment unique en son genre. Vous pouvez draguer les sections de gauche à droite.

footer original

9- Eric Johannson – Site web du designer Eric Johannson

Le facteur « Wow! » : l’effet « WOW! » de ce site web est probablement le plus surprenant de toute la liste. Je vous laisse le découvrir par vous-même:)

effet surprenant


Lequel de ces sites web vous a fait dire « Wow! »? Il y a une quantité phénoménale de sites sur le web qui possèdent ces petites attentions qui vous surprendront et qui feront en sorte que vous vous rappellerez des sites en question. Si vous avez de petits trésors dans le genre à partager avec nous, n’hésitez pas à les mentionner dans la section commentaires ci-dessous!

18 commentaires

  • Gildas Renault | 2010/04/23

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Article très pertinent, merci.
    Malheureusement les deadline serrés et les minis budgets, puis l'avis du client. nous mène souvent vers du classique sans surprise. Je vais partager cette article avec joie pour convaincre de nouveaux clients !

    Gildas

  • jflauze | 2010/04/23

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Un autre site dont le facteur Wow est à souligner (et qui dure depuis des années!)

    http://www.homestarrunner.com/

  • marevueweb | 2010/04/23

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    C'est vrai, beaucoup trop de clients ne s'apperçoivent malheureusement pas du potentiel qu'un site sortant de l'ordinaire apporte à une compagnie. Merci pour ton commentaire Gildas!

  • marevueweb | 2010/04/23

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Ouf… un Flash qui doit certainement dater des années 90. C'est vrai que ces temps-ci, ça sort de l'ordinaire 😛

  • lazyheart | 2010/04/23

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Article vraiment très intéressant, l'effet « wow » n'est pas à négliger. Le JS présent sur les sites en questions apporte vraiment un petit plus, une interaction qui interpelle le visiteur.

    J'aime ce genre d'article comme les précédents d'ailleurs.

    Au passage, super blog que je met dans mon flux RSS et mes bookmarks 😉

  • Louis-Philippe Dea | 2010/04/23

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Merci pour tes commentaires Jeremy, une tape dans le dos est toujours la bienvenue!

  • exootia | 2010/04/24

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    j'ai doré le rollover sur Riot Industries !

  • Tiz | 2010/04/27

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Merci pour cette sélection !

  • Marie | 2010/04/27

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Mais pourquoi mettre les liens vers ces sites qui font WoW en nofollow?? C'est vraiment un non-sens 🙁

  • Marie | 2010/04/27

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Mais pourquoi mettre les liens vers ces sites qui font WoW en nofollow?? C'est vraiment un non-sens 🙁

  • Marie | 2010/04/27

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Mais pourquoi mettre les liens vers ces sites qui font WoW en nofollow?? C'est vraiment un non-sens 🙁

  • Louis-Philippe Dea | 2010/04/27

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Simplement une erreur d'interprétation de ma part par rapport à la fonction de cette balise. Lu sur le sujet et désormais rectifié! Merci pour le signalement.

  • Marie | 2010/04/28

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    AH merci pour les sites Wow! Ils méritent d'être connus! Et super compilation qui m'a fait découvrir des effets réellement novateurs!

  • Louis-Philippe Dea | 2010/04/28

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Je suis content que tu aies aimé le billet. Pour ma part, lorsque j’en ai fait la traduction, ça m’a permis d’apprendre qu'avec de simples détails, il est possible d'amener son site web à un niveau supérieur d'interactivité pour les visiteurs.

  • rathieu | 2010/05/03

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Voici mon site perso toujours en cours mais avec un ptit effet JS qui pourrais plaire à vous de me dire
    mathdesign.fr

  • Larent Marcoux | 2010/05/28

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Excellente ressource! Ces sites m'inspirent pour créer une interface. J'aime 7- Traffik – CMS pour les designers et pour les entreprises.

  • Studio 76 | 2010/05/30

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Je connaissais déjà le site de Eric Johannson, et j'avoue que ça fait vraiment plaisir de le voir dans cette sélection 🙂

    Wow !

  • laptop battery | 2010/08/26

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    ouah!!!y a des trucs trop beau!!

Laisser un commentaire