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.

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.

Plutô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

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

La fin des blocs

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

Petit à 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

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 !

Tags: Design, UX.