10 tendances du Webdesign en 2015

10 tendances webdesign 2015

Présentation de 10 tendances du webdesign pour l’année 2015 :  la réalisation de sites internet évolue encore et toujours avec les mœurs et surtout les avancées technologiques. Voici un petit décryptage de quelques méthodes de construction de sites qui nous paraissent pertinentes pour cette année. 

 

De larges et beaux fonds d’écran en image ou en vidéo

Les belles images et vidéos de fond d’écran plaisent énormément. C’est une bonne méthode pour rendre votre site remarquable. Cela lui confère une esthétique élégante et simple. On est immergé dans l’univers visuel que l’on nous présente. Lorsqu’elles sont bien réalisées, les vidéos séduisent les internautes et génèrent un engagement réel. Vous captivez les visiteurs en offrant une vidéo originale qui vous permettra de vous distinguer de vos concurrents. Bien évidemment cette tendance marche si l’on choisi judicieusement des photos pros (voir plus bas les photos professionnelles) et une vidéo de qualité qui expriment concrètement une idée, des informations ou des valeurs. Il faut être raccord avec votre communication.

 

My provence festival

My provence festival

Des pages longues en contenu

Afin de respecter les nouveaux réflexes des utilisateurs, de nombreux web designer optent pour la création de pages qui s’étendent sur la longueur. En effet, la plupart des nouveaux modèles de sites publiés aujourd’hui ont tendance à être construits sur la longueur. C’est également le cas des réseaux sociaux que nous utilisons quotidiennement : facebook, twitter, pinterest… Comme les appareils mobiles deviennent plus populaires, il est de plus en plus courant pour les sites d’opter pour le défilement au lieu de renvoyer sur un lien pour afficher le contenu supplémentaire, en particulier sur les pages d’accueil.

Il est plus facile pour les internautes de simplement faire défiler une page pour afficher les informations que de cliquer sans cesse pour accéder à l’information sur une autre page.

Les sites « one page » (en une page) à long défilement en parallaxe ont eu la côte pendant un certain temps. Mais ce n’est plus seulement la page d’accueil qui bénéficie aujourd’hui des ces changements. Les pages de produits elles aussi sont pourvues de contenus amenant le défilement de la page. Par exemple, la page d’Apple pour son iPhone 6 est une longue page à faire défiler qui comporte toutes les caractéristiques et fonctionnalités du produit. Ce type de site ajoute souvent quelques animations pour rendre l’expérience visuellement plus attractive. (Notez que les sites d’apple sont souvent pris pour référence en terme de webdesign)

 

Site d'apple pour l'iphone 6

Site d’apple pour l’iphone 6

Le Storytelling et l’interaction

Quoi de mieux que de raconter une histoire plutôt que de noyer l’internaute dans une masse d’informations qui va le faire fuir. L’avantage du storytelling, c’est bien l’immersion dans un univers particulier. Vous vous démarquez et vous captivez l’attention. L’usage d’animations ou de système de navigation en défilement comme la parallaxe permet de diriger et accompagner le cours de l’histoire. Si tout est fait avec goût et ingéniosité cela apportera une expérience originale à l’internaute.

 

exemple de storytelling www.dangersoffracking.com

exemple de storytelling www.dangersoffracking.com

Less is more

Le principe du « Less is more » (moins c’est plus) est de retirer tous les éléments non essentiels du design pour se focaliser uniquement sur l’essentiel. On propose à l’internaute un design épuré de toutes fioritures. Le site donne une impression de simplicité dans sa conception qui engage à la navigation. De plus, cette tendance apporte un esthétisme sobre et raffiné qui confère une image de qualité voire de haut de gamme. Cette tendance va perdurer en 2015.

 

www.basics09.de/en/

www.basics09.de/en/

Des photos professionnelles

Les photos ont toujours eu une place importante dans la conception. Dans la plupart des nouveaux sites Web, les photos sont prises dans des banques d’images. Ces images manquent de naturel et il n’est pas rare de retrouver la même photo d’un site à un autre. Certaines de ces photos ont été réalisées par des amateurs ce qui se ressent en les visionnant.

En utilisant des photographies personnalisées prises par un véritable professionnel, on amène la conception à une étape supérieure. On ne se contente pas seulement d’acheter des photos, on fait l’effort d’utiliser des photos personnalisées. Ces photos sont uniques et vous crédibilisent car elles collent à la réalité. Elles transmettent votre message, vos valeurs, vos idées, … Elles vous rendent unique et ainsi vous démarquent car personne d’autre n’aura les mêmes photos que vous.

 

Des photos pros :www.risotteriamelottinyc.com

Des photos pros :www.risotteriamelottinyc.com

Menus type applications mobiles

Les sites en responsive webdesign sont devenus courants. Jusqu’à présent, la plupart de ces conceptions étaient optimisées pour un bon affichage sur les ordinateurs de bureau et un affichage juste correct sur mobiles et tablettes. Avec la prise en compte de chaque expérience, nous commençons à utiliser des éléments de conception venant des appareils mobiles pour les mettre en œuvre sur les sites.

Par exemple, on utilise le menu mobile sur l’ensemble des versions d’un site, et pas seulement sur les appareils avec de petites tailles d’écrans.

Certains sites ont opté pour un menu vertical soit sur le côté gauche ou droit de la page (au lieu du menu horizontal traditionnel au haut de la page) qui agit plus comme un menu déroulant / glissant. Ainsi la navigation reste homogène quelque soit le support.

 

Menu glissant type application mobile

Menu type glissant

Menus principaux cachés

icone du menu burger

icône du menu burger

C’est une tendance qui est récupérée de la navigation sur mobile. Ces menus cachés n’apparaissent que lorsque le visiteur clique sur l’icône appropriée. Cet icône symbolise le menu de navigation. On l’appelle « l’icône de menu burger » et il deviendra très certainement une convention pour les internautes d’ici peu de temps. L’avantage de ce type de menu c’est qu’il laisse de l’espace, s’efface même pour que l’on focalise sur le contenu de la page. Ce type de menu à l’avantage de s’adapter facilement à tous les supports : mobile, tablette et pc…

 

De très grandes typographies

En 2014, la typographie a été mise en valeur dans de nombreux designs de site, et cela ne va pas changer de sitôt. Pour 2015, on verra de grands titres de rubriques et une typographie encore plus grande !

C’est un moyen de renforcer la hiérarchie visuelle de la page en s’assurant que les visiteurs lisent plus. On attire l’attention sur un texte grâce à sa taille. Coté design, cela met aussi en valeur l’esthétique des belles polices de caractère de plus en plus nombreuses en version web.

Site avec de grandes typos

Site avec de grandes typos

Performance et vitesse

Certaines tendances du design des sites ont été motivées par la nécessité de rendre ceux-ci plus rapides et moins gourmands en bande passante. La plupart des tendances évoquées dans cet article sont probablement mises en place dans le but nécessaire de réduire la taille du site et de trouver des moyens efficaces pour charger rapidement le site pour ceux qui utilisent les appareils mobiles ou tablettes. Les sites en responsive webdesign ont permis de mettre en lumière ces préoccupations. Les réseaux téléphoniques ne permettent pas toujours d’avoir un bon débit. Les développeurs doivent prendre ces paramètres en compte afin d’offrir un affichage rapide et correct pour tous types d’usages en tous types de circonstances (wifi, 3G, 4G,…).

Remplir un seul écran

Enfin, nous avons les sites utilisant une approche où le design s’adapte pour remplir complètement l’écran. C’est une méthode responsive de conception, en ce sens puisqu’elle s’adapte à la taille de l’écran. Mais la différence avec les méthodes de conception en responsive webdesign réside dans la volonté de garder le contenu plein écran en évitant l’usage de barres de défilement. Évidemment ce type de design implique un contenu réduit à l’essentiel pour être le plus concis possible et ainsi gagner de l’espace. De plus la hiérarchie des contenus doit être clairement établie. Cela apporte de la clarté et de la simplicité au site. Sa structure changera peu, voire pas du tout entre un écran pc et une tablette.

 

le site rempli l'ecran

le site rempli l’écran

 

sources : http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/
http://thenextweb.com/dd/2015/01/02/10-web-design-trends-can-expect-see-2015/2/

Écrit par

Directeur artistique de l'agence web Résonance communication à Carcassonne, ingénieur maître métiers de l’information et de la communication en audiovisuel.

Laisser un commentaire

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