Présenter les tendances web design n'est pas une chose aisée. Il faut tout d’abord analyser les raisons qui poussent les designers à faire un choix plutôt qu'un autre : par mimétisme, par mode ou pour répondre à une problématique spécifique ?
Aujourd'hui, il est inimaginable de concevoir une charte graphique sans y intégrer les supports dématérialisés. Les arts appliqués comptent une nouvelle discipline : le web design, avec ses codes, ses possibilités et ses limites. Il n'est plus question d'imiter le support papier, mais d'envisager le web design dans sa globalité, avec ses spécificités techniques, ergonomiques, d'accessibilité… et dans le respect des standards.
Le web design est vivant. Il s'imprègne des tendances et des modes qu'il inspire en retour. Il n'est plus rare de voir une affiche ou une publicité avec un style très web ! Les frontières entre design réel et design numérique sont tombées.
Tout comme dans le prêt-à-porter, il est possible de cerner les tendances en web design. Elles sont influencées par les supports, les technologies, les start-ups, les designers, les modes… et par les grands acteurs que sont Apple, Google ou Microsoft qui anticipent de nouveaux usages.
Je développerai les tendances web design 2015 en 10 points. Toutefois, il est nécessaire de prendre un peu de recul. Il ne s'agit pas ici d'un guide exhaustif à appliquer à la lettre. Si j’essaie de garder une approche objective basée sur les faits et les annonces, il reste une part de subjectivité. Libre à chacun de s'y projeter ou d'aller à contre courant.
Le flat design et le style minimal
Le flat design est une tendance de fond qui fut en partie initiée par Microsoft en 2010 avec Windows Phone. Elle a envahi le web depuis deux ans et va se radicaliser en 2015. À l'instar d'iOS 8 encore un peu plus flat que son prédécesseur.
Plus plat, plus graphique, plus géométrique, plus minimal… Plus coloré aussi, ou pas du tout. Avec une petite révolution Google nommée Material design, qui redessine les bases du flat, essentiellement sur mobile : fluidité, animations responsive, grilles, effets de profondeur, ombres, effets papier découpé, typographie épurée et lisible (grands caractères)… iOS suivra-t-il ? Je constate que le flat design est suffisamment riche pour se décliner dans différents styles.
Plus qu'une mode, le flat correspond aux exigences de légèreté, de rapidité, de simplification, de lisibilité, d'accessibilité, de mobilité liées au web d'aujourd'hui.
Le style minimal trouve ses sources au début du siècle dernier, avec le Bauhaus et le courant minimaliste. Il a influencé de nombreux artistes, architectes et designers. Il répond à une soif de modernité, avec pour devise "less is more" (moins c'est plus). Tout ce qui est décoratif ou superflu est réduit à sa plus simple expression, avec des notions conceptuelles et esthétiques basées sur le dépouillement, la neutralité, l'efficacité.
Dans sa forme la plus élémentaire, le design minimaliste reste une valeur sûre pour 2015. Le flat design en est une variante "fun" et colorée, avec aussi des influences pop, signalétiques ou iconiques.
Le skeuomorphisme* a-t-il dit son dernier mot ? Pas certain. Il a initié les utilisateurs aux interfaces mobiles. Si, en 2015, on pourra s'affranchir des icônes datées d'iOS 6, Apple a fait le choix de conserver des références au skeuomorphisme dans iOS 8, avec un vernis flat design.
* Skeuomorphisme : représentation réaliste de la fonction par l'objet qui la réalise dans la vie réelle.
Le Responsive
Design liquide, adaptatif ou responsive, ce n'est plus une tendance. La multiplication des appareils, des formats et des résolutions impose de s'adapter à l'utilisateur. Les notions d'interface utilisateur et d'expérience utilisateur seront au centre de l'approche design.
Les sites non responsive vont se voir progressivement marginalisés. L'utilisateur passant d'un support à l'autre devra retrouver ses repères et son confort.
Toutefois, pour différentes raisons, certains sites préféreront proposer une application dédiée pour mobiles, l'un n'empêchant pas l'autre.
Le Monopage
Si les sites multipages répondent à des besoins concrets pour une entreprise de commerce électronique ou un journal, les sites monopages sont optimisés pour la navigation sur les écrans tactiles. Ils évitent le recours aux onglets et autres sous-menus peu viables sur mobile.
Le monopage est approprié pour différents sites, y compris les boutiques qui comptent des milliers de pages, dont certains articles mis en avant seront présentés sur une seule page qui les met en scène. Amazon ou Apple présentent leurs produits phares sur une seule page.
Le storytelling*, la navigation verticale, horizontale ou en biais, le double scroll, la parallaxe**, les animations, les images, la vidéo… se conjuguent de façon créative. La page web prend des airs de véritable application dédiée. HTML5, CSS3 et effets JavaScript prennent alors tout leur sens.
* Storytelling : communication narrative par l’intermédiaire d’une histoire, pour capter l’attention et créer une connexion émotionnelle.
** Parallaxe : déplacement variable de la position des éléments en fonction du scroll, sur des plans séparés. Il en résulte un effet plus immersif.
L’image d’abord
Une image parle à tous, elle vaut mille mots. Le web les utilise en grand, partout et pour tout. Avec la multiplication des types de supports, cette tendance va encore s’accentuer. Photo, vidéo, illustration, data design, icônes, sont autant d’éléments qui permettent de donner la bonne image, de passer le bon message, de donner la bonne information en un clin d’œil. Particulièrement sur les mobiles peu adaptés à la lecture de longs textes.
Les photos seront plus authentiques en 2015, porteuses des valeurs du site. Les illustrations et les icônes seront incontournables pour une navigation intuitive.
Les photos creuses et clichés des banques d’images discount, vues milles fois, seront à éviter. L’internaute les repère en 1 seconde et cela décrédibilise un site, tout comme une boîte de raviolis dans un grand restaurant.
La typographie
Le web redonne ses lettres de noblesse à la typo ! En grand et sous toutes ses formes. Cependant, les polices de caractère simples seront à privilégier, avec des ruptures marquées dans la taille des caractères. La typo contribue à mettre en scène l’image, elle se conjugue avec les icônes et s’adapte à la mise en page.
Les outils comme Google Fonts permettent de s’affranchir des polices systèmes usées jusqu’à la corde. Les résolutions toujours plus fines des écrans mobiles et des moniteurs, libéreront la créativité. Les polices fantaisies côtoieront les classiques d’avant internet qui s’afficheront sur nos écrans avec la même élégance que sur le papier.
Le Data design
Cloud et data centers se sont développés ces dernières années, les bases de données sont partout. Plébiscitées par les médias et par les grandes entreprises, elles vont entrer dans la sphère personnelle, voir intime : domotique, objets connectés, mais aussi sport et santé seront concernés. Le data devient personnal data.
Mobile + data design = le duo gagnant !
Le data design retranscrit les données sur écran, de façon visuelle et graphique. Sur moniteur, il présentera vos statistiques personnelles et sur mobile, il deviendra votre coach privé. Comme par exemple Health sur iOS 8 qui sera votre compagnon de santé.
La gamification
Le jeu est plus efficace qu’un long discours !
Le serious game utilise les ressorts du jeu pour capter l’attention sur des sujets sérieux. Avec une intention de type pédagogique, informative, communicationnelle, marketing, d'entraînement…
Cette tendance ne concernera pas tous les sites mais va continuer de croître en 2015. Elle répond aux besoins de ceux qui veulent faire passer un message de façon plus efficace par les ressorts émotionnels du storytelling, du jeu et de l’image.
Jeu en ligne ou application dédiée selon la pertinence.
Le Vintage
Le vintage n’est pas vraiment nouveau, mais face à la déferlante flat design, il prend une nouvelle dimension. Le contre-pied d’une certaine uniformisation. Rien de tel que les références au passé pour paraître plus authentique ou pour communiquer des valeurs d’empathie et de bienveillance qui humanisent un site.
Le vintage revisite les codes du passé avec une modernité assumée : monopage, social, aplats, parallaxe, minimal, grandes images, typo, vidéo, animation… le vintage est hype !
Le Social design
Les sites sont de plus en plus connectés avec les réseaux qui les amènent dans la sphère privée et relationnelle, notamment par la “blogosphère” ou l'économie collaborative. Les réseaux sociaux se segmentent et les Facebook, Instagram ou Twitter sont progressivement concurrencés par des réseaux spécialisés, comme Snapchat ou LinkedIn. Ainsi, Twitter a acquis Vine qui sur mobile, propose de courtes vidéos qui tournent en boucle.
Certains blogs et réseaux sociaux ont inspiré le web design, comme Tumblr ou Instagram.
Quel réseau va nous surprendre en 2015 ?
Tout connecté
Le “tout connecté” va chambouler nos habitudes, il nous suivra partout, à la maison, au bureau, dans la rue, dans les magasins… Apple, Google et Samsung ont déjà dégainé leurs armes.
Le design des interfaces devra suivre, même s’il dispose déjà de solutions efficaces comme le flat design et le data design. Les interfaces font devenir encore plus graphiques et synthétiques, elles nous parleront, nous observeront et nous comprendront. La sécurité des données et le respect de la vie privé vont prendre tout leur sens.
La réalité augmentée, la domotique, les objets connectés, le cloud, seront interconnectés pour finir par se fondre dans le paysage et dans nos vies.
L’interaction homme/machine est en passe d’évoluer en profondeur. Si le tactile a ringardisé la souris et le clavier, certaines firmes innovent avec des interfaces hybrides qui mêlent scanner, capteurs 3D, écriture… comme Sprout présenté par HP. La transition ne se fera pas en quelques mois, mais présage de ce qui nous attend au delà de 2015
Pour aller plus loin :