Depuis 2013, une nouvelle tendance du design de site Web a été très présente : c’est le flat design avec des sites « one page » (l’ensemble ou la majorité des informations sur une seule page). Cela a été une révolution dans le web design.
ATTENTION : nous avons publié un article plus récent sur ce sujet.
Le Flat Design
Le flat design est caractérisé par un graphisme épuré constitué d’aplats de couleurs vives et tranchés, sans effets de textures, d’ombres ou de volumes. Cela permet une visualisation plus aisée et en particuliers sur les appareils un peu plus limités que sont les appareils mobiles (tablettes, smartphone).
Du fait, de cet aspect minimaliste, les polices de caractères ont un rôle prépondérant.
On peut retrouver des exemples de flat design sur le site de Codeur.com.
Cette tendance qui a été amorcé par Microsoft en 2010 avec l’interface du Windows phone et celle de Windows 8, s’est répandu sur le web avec le framework Twitter Bootstrap (plus spécifiquement avec la version 3). Sont, alors, apparus dans le web design toute une déferlante de site « one page » en flat design : c’est la facilité d’utilisation du framework qui a permis cela. Mais c’est aussi, l’ajout des fonctions de ce framework :
- il est responsive (on dit aussi liquide ou adaptatif) : les pages web affichées s’adaptent à l’appareil sur lequel elles sont affichées : grand écran d’ordinateur, ou petit écran de smartphone et toutes les tailles intermédiaires (tablettes, écran modeste d’ordinateur …). Aujourd’hui un site web ne peut pas se passer d’être responsive. Cela n’empêche pas que l’on puisse désirer également une version mobile de son site pour par exemple proposer une ergonomie et une présentation différente du site pour les internautes en situation de mobilité : priorité à la localisation, au contact téléphonique, aux produits en solde etc
- il est monopage (on dit aussi « one page » pour faire Anglais 😉 ) : cela veut dire qu’on retrouve beaucoup d’information regroupé par sections sur une seule page que l’on va faire défiler verticalement (pour aller « en bas »). Les sections sont comme des sous pages que l’on va pouvoir faire défiler. L’avantage est de pouvoir faire défiler facilement les informations depuis un appareil tactiles (tablette, smartphone …) et donc accéder à toutes ces informations sans avoir à utiliser de menu et ou onglets.
Cela n’empèche pas d’utiliser des menus pour accéder à d’autres informations, et donc d’avoir d’autres pages : on peut donc mixer un site traditionnel avec un site monopage.
Avec un design monopage, est apparu le parallaxe qui permet un effet de défilement différent. Cela permet des effets assez inventifs lors du défilement. 2014 a été l’année du parallaxe … et en 2015 le parallaxe sera toujours autant utilisé. (Même l’armée de terre utilise le parallaxe sur son site – plus maintenant, le site a changé)
Concomitamment, certains caractéristiques se retrouvent dans le design de ces pages web :
- utilisation des Google Fonts : comme l’utilisation des polices est prépondérante, il est important de pouvoir gérer au mieux l’affichage de polices différentes des polices systèmes standards que l’on retrouve partout, c’est le rôle des Google Fonts.
- utilisation d’images : le web a toujours utilisé des images mais encore plus avec le flat design qui est très graphique. On utilisera donc beaucoup d’images de toutes tailles dans ce type d’images aussi bien pour apporter de l’information que pour des effets (parallaxe, animation, etc).
Cette tendance de design répond donc à l’utilisation multi-appareil qui est faite du web aujourd’hui grâce à une visualisation simplifiée qui permet un visionnage facile sur tout type d’appareil.
En 2015 : le Material Design
Cette tendance ne va donc pas disparaître et au contraire, va s’accentuer en 2015 avec un nouveau dérivé : le Material design. Ce nouveau design a été créé par Google pour améliorer le flat design (essentiellement sur mobile), il est pensé pour les interfaces tactiles : fluidité, animations responsive, grilles, effets de profondeur, ombres, effets papier découpé, typographie épurée et lisible (grands caractères).
On peut le voir comme un cousin amélioré du flat design.
Ce qui va également prévaloir en 2015, c’est l’utilisation de la typographie. Comme indiqué précédemment, grâce aux Google Fonts, on peut maintenant donner libre à cours à son imagination avec les polices sur le web (ce qui n’était pas possible auparavant). Comme le Material design (comme le flat design) impose un graphisme épuré, on se « lache » sur la typographie en taille, disposition et variété.
Un autre aspect qui va certainement exploser, c’est tout l’aspect vidéo & animation. Les vidéos sur le web, ce n’est pas nouveau mais avec le HTML5 qui permet une intégration plus facile des vidéos, et une demande toujours plus grande, on va intégrer de la vidéo facilement dans toutes les pages.
De plus, on a déjà vu, avec le parallaxe, que les animations étaient prisées. On va en trouver encore plus avec le Material design : 2015 sera donc l’année des images qui bougent ! !
Bon design de site web en 2015 !