illu-blo4

Tendances webdesign #1 La structure

Cette année plus que jamais les sites web viennent s’adapter à vos écrans! Plus de perte d’espace, les éléments se libèrent des blocs pour imposer leurs contenus, la différence entre design print et web s’amoindrit pour plus de liberté graphique et ergonomique.

Recevez notre études sur les grandes tendances du web deisgn

Canal Web a sélectionné pour vous les tendances de ce début d’année 2014 autour d’une première thématique : la structure. Parce qu’elle est au cœur des changements ergonomiques et que, pensée en amont, c’est elle qui détermine la navigation et oriente le design.

Monopage, parallaxe et cie.

Page et scrollPlutôt efficace lorsqu’il s’agit d’égayer et de dynamiser des sites de contenus, la tendance cette année est encore au scroll  ! Les contenus prennent de l’espace, respirent, s’organisent pour une nette amélioration de la lecture d’ensemble des pages.

On observe toutefois un léger recul des sites en parallaxe au profit d’un scroll plus simple. Uniquement animée par quelques images, la navigation se concentre plus sur les contenus que sur les effets.

Quelques exemples :
www.socialites.co.nz
www.fall.tnvacation.com
www.alchemy-digital.co.uk

Les nouvelles grilles

Les grilles
On s’affranchit de plus en plus des organisations de pages de type « slider + blocs simples » pour explorer de nouveaux types de grilles. Modulaires, elles viennent souvent s’adapter aux tailles d’écran de manière responsive et permettent de mélanger les médias, que ce soit de l’image, du texte ou de la vidéo. Lorsqu’elles sont bien construites, avec des différences de tailles et de couleurs, elle permettent une bonne visualisation de l’ensemble des contenus et une véritable hiérarchisation.

Nos préférés :
www.freytaganderson.com
www.zegna.com/fr
www.ted.com

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

La fin des blocs

Page facon magazine
L’une des tendances structurelles les plus marquantes du moment est le délaissement des blocs classiques. Les images, les textes et les vidéos sont présentés de manière plus libre, encadrés plutôt par des aplats et des hauteurs d’écrans que par de réels blocs physiques.

Notre sélection :
www.mixd.co.uk/work
www.shop.yielddesign.co
www.paramoredigital.com
www.thegardenedit.com

Fullscreen et masse

Gros boutonsPetit à petit, le fullscreen devient la norme, avec lui les blocs et les textes deviennent de plus en plus gros. Comme par exemple sur le site www.illusion.scene360.com avec ses grandes vignettes de présentation et son énorme bouton « More posts » totalement inratable !

À voir aussi :
www.thedesignfilesopenhouse.com
www.theconference.se

Menus : diversification et expérimentation

Menu de gauche
Les menus quant à eux se diversifient de plus en plus, parmi les tendances on retrouve  :

– Des menus avec beaucoup moins d’entrées, en moyenne 3 ou 4, parfois complétés par un mégamenu comme sur www.hallmark.com ou agrémentés de pictos comme sur www.hellomerci.com/fr
– Des menus centraux qui viennent se coller dans le header une fois que l’on a scrollé un peu comme sur le site www.grovemade.com
– On observe aussi un retour des menus de côté qui se masquent ou s’affichent au scroll (www.karllagerfeld.arte.tv , www.lovecarmenrose.com, www.zara.com )
– Ou encore des formes de menus très originales qui par exemple viennent recouvrir la totalité de l’écran (www.hlkagency.com/Work) , avec une navigation à l’intérieur de la page (www.tripplanner.travelalberta.com, www.sagmeisterwalsh.com ) ou un fond qui varie au hover (www.fendi.com/fr/fr)

Ces nouvelles formes de menus sont très intéressantes, elles permettent une simplification du design, un rendu plus fluide.  Le visiteur commence par s’immerger dans le contenu de la page sur laquelle il arrive pour aller ensuite chercher un complément d’informations via les entrées du menu.

En bref

Plus de fluidité, plus de liberté, moins de perte d’espace. Les changements structurels du web, liés à la diversification des interfaces de navigation (ordinateurs, tablettes, mobiles) viennent bouleverser ses codes et nous permettent d’explorer de nouvelles manières de naviguer et de construire les pages !

Tendances webdesign #1 La structure 5.00/5 (3 votes)

A propos de Delphine Pellequer

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

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>