Les tendances web design 2017

Les tendances web design 2017

250 250 Charlotte Bouvet

Le web design correspond à la conception des éléments graphiques tels que les couleurs, la typographie, les illustrations, qui définissent un site internet. Son rôle est essentiel puisqu’il joue pour beaucoup sur l’expérience utilisateur. Aujourd’hui une grande partie des internautes se crée une opinion sur une marque uniquement via l’aspect de son site internet. Tout est affaire de mode et de saison, le web design suit lui aussi les tendances ! Quelles sont les tendances web design 2017 ?

Article écrit par Salomé DARRACQ, auteur invité.

Depuis 2013, la grande tendance graphique reste le Flat Design. Aussi appelé style minimaliste, il répond à des exigences de lisibilité et d’aération de contenu, relatives à notre utilisation actuelle du web. Des sites épurés offrant des chartes graphiques élégantes et mettant à l’honneur les textes et les éléments visuels, c’est ce vers quoi toutes les marques tendent. A tel point que depuis trois ans les sites internet ont peu à peu épuisé la tendance, et finissent par tous se ressembler.  L’adoption massive du flat design (établit au départ par Google) fait qu’aujourd’hui l’utilisateur se lasse de ces visuels plats.

Ainsi, de nouvelles modes font leur arrivée. La tendance principale de 2017 est le semi-flat design. Lancée une nouvelle fois par Google (qui l’appelle Material Design), celle-ci consiste à moderniser le flat design, de manière à ne pas renoncer totalement au style minimaliste, en y ajoutant une certaine profondeur qui lui donne vie.

Tendances web design 2017 : Le Material design

Le Material Design est un ensemble de règles graphiques institué par Google et qui s’applique au rendu graphique des logiciels et applications. Caractérisé par son style semi-flat, comprenant un retour d’ombre portée subtile, de profondeur naturelle et de couleurs vives, le succès du material design est légitime. Il ajoute à cela des animations et transitions fluides, pour un résultat final doublement efficace.

Présentant un style moins radical et plus clair que Windows 10, plus accessible qu’iOS, le material design de Google et son look raffiné, (notamment sur Android) devrait perdurer un moment dans les bonnes mœurs du web design.

Tendances web design 2017 : le material design

Le Flat 2.0

Issu d’un mélange entre le flat design et le material design, il a pour but de rendre du volume à nos interfaces raplapla et cela en gardant un aspect épuré. Dégradés, ombres internes et ombres portées sont la solution à ce manque de dimension. Le principe est de superposer les couches afin de multiplier l’animation et la compréhension des interfaces.
Ex : https://www.dropbox.com/guide ; http://www.publicis90.com/#/publicis90

Flat design 2.0Flat design

Le Diffuse shadow

Comme énoncé précédemment, les ombres portés font leur come-back. Elles intègrent les illustrations, photographies, et surtout les boutons « call to action » offrant ainsi de la profondeur de champ aux créations graphiques.

Tendances web desgin 2017 : flat 2.0

Les Couleurs vives

Les sites sont de plus en plus souvent remplis de couleurs électriques pour faire vivre le contenu. 

Ex : http://www.thehipsteralphabet.com/

Flat 2.0 : les couleurs vives

Le fullscreen menu / Hamburger Menu

Depuis qu’une grande partie du trafic internet se fait via des mobiles, le design des sites fait passer le menu au second plan. La navigation est standardisée grâce à un élément placé sur un coté de la page : l’icône « burger » (ou « navicon ») qui masque ou affiche le menu instantanément. Mais il existe beaucoup de recherche et d’innovation concernant la navigation. Cette technique a donc évolué et une nouvelle solution émerge actuellement : le menu plein écran. L’espace « menu » limité à une partie de la page jusqu’à maintenant, s’étend désormais sur tout l’écran.

Ex : http://threadslike.com/ ; http://southpawagency.com/

Flat 2.0 : Hamburger menuFlat 2.0 : Hamburger menu

Transparence et superposition

La transparence apporte une dimension aérienne au visuel et la superposition y apporte de la profondeur. Cette technique amène l’utilisateur vers plus de réalité augmentée.
Ex : http://www.liviskive.dk/

Transparence et superposition

Tendances web desgin 2017 : Transparence et superposition

L’expérience utilisateur est aujourd’hui le point d’étude prioritaire pour les concepteurs de site internet. Ils font évoluer leurs sites de façon à rendre cette expérience toujours plus agréable. Ainsi d’autres éléments font leur apparition et viennent former de nouvelles tendances en web design :

Le split content

Nouvelle tendance visant à diviser la page d’un site en deux parties distinctes. Ce design a petit à petit fait son apparition avec l’utilisation du double scroll. Depuis un ou deux ans, de nombreux sites mettent en place ce type d’effet pour présenter leur contenu. Plus qu’une simple volonté graphique, la subdivision de l’écran permet d’orienter l’utilisateur sur le site de manière originale. Son attention est captée puis guidée avec efficacité par une mise en page dynamique et intuitive jouant sur les contrastes et le minimalisme. Le split content est particulièrement bien adapté à une navigation sur grand écran ou sur tablette.

Ex : http://www.plasticbionic.com/ ; http://www.rickanddrew.com/ ; https://www.namesforchange.org/

Split content

Autre exemple de navigation original en version PornFood : www.anonymoushamburger.com

Porn food

Le White Edges

Littéralement « bords blancs », qui servent à donner une toile de fond ainsi que de la profondeur au site. Cette technique fixe le regard de l’utilisateur et met en valeur le jeu de couleur utilisé.

Ex : http://www.camdentownbrewery.com/

White edges

Tiny loading animation

Il arrive parfois que certaines pages d’un site internet prennent un moment pour se charger complètement. Il peut donc être intéressant de placer une animation traduisant le chargement pour faire patienter l’utilisateur.

Ex : https://santatracker.google.com/village.html ; http://www.little-big-room.com/ et http://www.frontlinepg.com/

Loading animation

Le story telling

Il s’agit de séduire l’internaute en lui contant une histoire. Les sites animent désormais leur interface d’une narration interactive pour faire vivre leurs contenus. Le scroll offre à l’utilisateur un défilé d’éléments graphiques illustrant l’évolution du story telling. Le procédé assure une expérience immersive pour l’internaute qui se retrouve inclut dans l’animation.

Ex : https://ride.uber.com/fr_FR ; http://valaire.mu/

Story telling

Story telling

Cela comprend :

Le motion design

Le motion design est une forme d’art visuel consistant à créer des œuvres animées. Le mouvement y est le principal outil graphique et artistique. La navigation sur le web via les smartphones ou tablettes a habitué les utilisateurs aux longs défilements. Ils existent des sites web au contenu interactif capables de narrer un récit complet gardant les utilisateurs engagés vis-à-vis du contenu et les incitant à scroller jusqu’au bas de la page. Dans une ère où la réalité virtuelle est reine, les animations en motion design et le traitement de l’image (2D, cinemagraph, gif art) ont su trouver leur place en offrant une expérience enrichie d’effets graphiques à l’internaute.

Ex : https://thecoolclub.co/ / www.cartoonnetworkstudios.com

Motion design

Motion design

Cinemagraphs

Il s’agit d’une photo comprenant un élément en mouvement sous la forme d’une boucle parfaite. Le but étant de recréer une réalité. Il faut un motion simple et subtil pour intriguer l’utilisateur, attirer son attention et l’hypnotiser par l’inattendu du mouvement sur une image fixe.

Ex : http://www.topito.com/top-cinemagraphs-gif

Découvrez aussi notre article sur le Cinemagraph : https://www.identites-nomades.com/cinemagraph/

Les illustrations à la main

Le plus grand problème avec la tendance actuelle de conception est qu’il est très difficile d’être original en l’utilisant. Presque tout site suivant ce modèle n’arrivera pas à se différencier de ses congénères. C’est un effet secondaire de l’adoption massive.

Dans cette recherche d’originalité, on voit donc apparaitre une augmentation des éléments dessinés à la main, personnalisés et combinés avec des animations soigneusement produites. Cela permet un rendu plus chaleureux, plus humain, et donne une identité à un univers trop plat ou bien trop simple. La parallaxe est de plus en plus utilisée pour animer les illustrations. Elle se définit par l’incidence du changement de position de l’observateur sur le déroulement des illustrations.

Ex : http://www.sbs.com.au/theboat/ ; http://www.hungercrunch.com/

Les illustrations à la main

Illustrations à la main

Coup de cœur qui rassemble plusieurs de ces techniques : http://www.lapierrequitourne.com/nos-biscuits/

Illustrations à la main

La typographie

Élément graphique incontournable, la typographie a sonné son grand retour cette année. Mise à l’honneur sur les pages d’accueil web, elle remplace petit à petit les images en plein écran. Son atout réside dans le fait qu’elle peut souvent se suffire à elle-même permettant ainsi de valoriser le texte par une mise en page élégante. Elle consolide ce besoin de lisibilité admis grâce au Flat design. De plus, elle s’adapte facilement à l’utilisation mobile qui est faite d’internet en proposant des typographies et des interlignages adaptées aux petits écrans pour favoriser la lecture.

Ex : http://bolden.nl/ ; http://www.gt-haptik.com/ ; http://www.monsieurcaillou.com/#!/

Typographie

 

Le petit + : La typographie manuscrite est particulièrement appréciée pour sa chaleur et son authenticité. Elle redonne de la vie au texte et permet de créer le lien entre l’humain et la technologie.

Enfin d’autres tendances web design se dégagent par des formes, des textures, des points de vue.

Le Flatlay

Vous avez déjà du rencontrer cette nouvelle mode sans le savoir par le biais de réseaux comme Instagram. Le Flat Lay est un style photographique qui consiste à prendre un point de vue en plongée pour obtenir un plan éclaté où l’on distingue l’ensemble des pièces, ingrédients ou objets à plat.

Tendances web desgin 2017 : Le Flatlay Tendances web desgin 2017 : Le Flatlay

Le Filaire

Une mise en valeur de la force de la ligne et de la pureté de la forme, le filaire est en cohérence avec les nouveaux codes de transparence et de volume souhaités en web design.

Tendances web desgin 2017 : Le filaire

Les motifs géométriques

Tendances web desgin 2017 : Motifs géométriques Tendances web desgin 2017 : Motifs géométriques Tendances web desgin 2017 : Motifs géométriques

Sources : wikipedia / blogduwebdesign / camillecoquet.com / Pinterest (images)

Laisser une réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.