1

Les tendances du webdesign 2015

Sans aucun doute, cette année 2015 vient affirmer les grandes tendances de 2014. On y trouve toujours plus de responsive (plus question de faire l’impasse sur les smartphones et les tablettes), des designs sobres qui mettent en avant des visuels impactants, et un réel intérêt pour la typographie.

Ergonomie

L’ergonomie et la structure viennent déterminer l’ensemble de l’organisation et de la navigation d’un site. Elles sont absolument primordiales et malheureusement, parfois un peu mises de coté au profit d’un design fort. Voici une sélection et analyse de tendances 2015 validées par Canal Web  pour les sites vitrines et e-commerce.

Recevez notre étude

Recevez par mail cette étude sur les tendances du Webdesign 2015.

Visiter le site de Canal-lead

Vous souhaitez en savoir d'avantage sur les différentes solutions d'acquisition et gestion de lead que propose Canal-web ?

Visiter Canal-lead

Vitrine

On retrouve actuellement trois grandes tendances pour les sites vitrines.

1Simple et efficace

La première, plutôt statique met en avant les contenus. Sur un ensemble épuré, on retrouve une grille forte qui organise de grandes images, des typographies très suisses et une ou deux couleurs. Totalement  adaptée au responsive, elle occupe tout l’espace de la page pour un rendu parfait sur tous les supports.

Quelques exemples :
www.25ah.se
www.beta.rallyinteractive.com
www.taostudiodesign.com

Waouh effect1

La seconde est plus visuelle, très efficace graphiquement, on y trouve des vidéos en fullscreen, ou de grosses animations en HTML5. Cependant, la navigation n’y est pas toujours évidente comme sur www.fsmillbank.com

Autres exemples :
www.point2meet.ru
www.recyclons-nos-papiers.fr

Deux colonnes

On peut aussi observer une nouvelle forme de site. Le principe étant d’avoir deux colonnes avec du scroll légèrement désynchronisé. Ce système est plutôt intéressant pour les sites en monopage dont les contenus principaux sont de images (graphisme, photographie etc.)

Nos préférés :
www.melaniedaveid.com
www.nicolas-bussiere.fr

 1Sites institutionnels

Ces trois premières tendances sont principalement portées par les agences web ce qui semble un peu réducteur. Les autres sites de contenus, restaient jusqu’à maintenant, relativement figés devant la difficulté de mettre en forme des contenus parfois très sérieux. On observe une réelle évolution de ces principes. Terminé le trois colonnes, les sites sérieux ressemblent de plus en plus à des pages de magazines ultra sophistiqués.

Nos préférés :
www.genelab.nasa.gov
www.lejournal.cnrs.fr
www.quincy-requin-avocats.com
www.brandts.dk

 

Ecommerce1

La structure des sites ecommerce se métamorphose peu à peu. Plus inspirée des sites vitrines, ils mettent en scène les produits dans de grandes images, et incitent au scroll plutot qu’au clic

Quelques exemples :
www.herschelsupply.com
www.leaderbagco.com
www.thisispapershop.com
www.industrystandardny.com
parfois même sans page liste autre que la home www.abbyseymour.com

Les menus sont réduits et amusants www.alfredogonzales.com/ et les photos de produits très soignées : mybeautytea.com www.fruute.com helbak.com  et mises en scène  www.busyb.co.uk

Notre préféré :
www.melanie-f.com

Le design

Maintenant intéressons nous plutôt au design pur, à tous ces petits détails qui rendent un site plus agréable.

2Dégradés

Avec le flat design, la mode était jusqu’à maintenant aux aplats de couleurs. On observe depuis quelques temps un retour discret du dégradé, qui vient ponctuer de manière douce un fond, une typographie ou des formes géométriques.

Quelques exemples :

www.gogoro.com
www.impossible-bureau.com
www.resonate.io

Une couleur3

Beaucoup de sites utilisent une couleur unique, mais la manière de l’utiliser diverge. Certains très sobres blanc et gris mettent en avant leurs photographies et ponctuent l’ensemble de call to action colorés mais discrets (Ghosts Buttons) www.casualdsgn.com

Certains autres utilisent une couleur qui devient très présente sur le site www.store.melanie-f.com voir deux www.wonderfulcolorado.com (une couleur et sa complémentaire pour faire ressortir certains éléments).

Le détail

Certains détails d’animation, de design viennent apporter leur touche finale aux sites. Par exemple la façon dont s’affichent les textes sur le site de Murakami www.harukimurakami.com de manière très élégante et poetique.
ou encore le loading sur www.paprika.com

Gamification1

Parcourir le web devient un jeu. Sur le site www.giantstepsmedias.com on peut interagir avec le logo, la navigation est ludique ce qui donne envie de continuer la visite du site.
Ou dans un autre registre le site de vêtement pour les enfants www.joha.dk avec son menu amusant et sa construction de site très originale.

Par exemple :
www.christmaswithjoy.com
www.headache-off.com
www.barclayscodeplayground.co.uk

1La force de la typographie

Toujours plus bold, toujours plus grande, la typographie se fond aux images, elle utilise tout l’espace de l’écran.

Un exemple :
www.vo2-group.com

On voit même apparaître des lettrines www.brianhoffdesign.com et revenir des caractères à empattement d’ordinaire boudés du web.

Un exemple :
couleecreative.com

En bref

Après l’évolution significative des sites d’agences vers le flat et le responsive, se sont les sites ecommerce et institutionnels qui viennent rejoindre le mouvement. De plus en plus perfectionnés, l’importance est maintenant au détails et à la qualité des animations.

Les tendances du webdesign 2015 5.00/5 (1 vote)

A propos de Delphine Pellequer

Webdesigner & intégrateur à Canal-web. Membre de l'équipe depuis 2012.

1 commentaire

  1. Julien TEDESCHI

    Bonjour,

    Très bon article sur les tendances webdesign. Des exemples qui illustrent très bien les catégories.

    Julien

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>