27 Février 2020   |   par Aurore Le Potier   |   Design

Top 4 des tendances UI 2020 !

Parce que les modes sont cycliques, que les tendances sont éphémères… Quelles seront les grandes tendances à explorer en 2020 ? Focus sur quelques pratiques qui devraient voir le jour, ou qui selon nous devront être exploitées cette année !

1 - L’Atomic Design et le Design System

Chez Studio Floax, nous avons mis en place un design system et l’atomic design fait partie de nos méthodes de travail. Un design system, c’est quoi ? C’est une sorte de plateforme qui regroupe tous les éléments qui permettront aux équipes de concevoir, réaliser et développer un produit. En réalité, le design system est un peu une mine d’informations et qui parait désormais indispensable. Ainsi, UI/UX designers, développeurs et concepteurs-rédacteurs peuvent facilement collaborer ensemble !

Découvrez notre article sur la collaboration entre designers, dev et marketeurs ! Cliquez ici !

5 principes caractérisent le design system.

  • Il est vivant - le design system n’est pas figé. Il évolue en permanence, avec les nouveaux outils, les mises à jour opérées, etc.
  • Il est agnostique , dans le sens où le développeur ne va pas le concevoir pour une seule technologie, mais au contraire plusieurs langages.
  • Il est modulaire – il est fait en composants plus ou moins complexes et adaptables.
  • Il est universel - il s’adapte à toutes les langues et à tous les alphabets.
  • Il est inclusif - il respecte toutes les normes d’accessibilité (couleurs contrastées pour les personnes daltoniennes, utilisation des polices arial…)

On y trouve donc les composants UI, les langages de développement, la charte colorimétrique… des choses donc concrètes mais aussi des éléments plus « corporate », comme les valeurs de la marque, du produit, etc.

L’Atomic Design , lui se retrouve dans le design system. Cette méthodologie est pensée en composants. Brad Frost explique qu’on ne conçoit plus des pages mais des éléments d’interfaces qui vont devoir trouver leur place dans des environnements. Prenons cette métaphore : la matière dans l’univers peut être décomposée en un ensemble fini d'éléments atomiques. En l'occurrence, nos interfaces peuvent être décomposées en un ensemble fini d'éléments similaires. C’est ce qu’on appelle l’atomic design. Cette conception atomique permettant de créer des interfaces hiérarchiques et structurées se compose de 5 grandes étapes ou catégories : les atomes (couleurs, typo), les molécules , les organismes , les modèles (templates), les pages .

atomes

Découvrez ou redécouvrez le " Human Talk "de Loic Vandershooten sur l'Atomic Design !"

2 - La fin du Flat Design

Le Flat Design, (design plat en français), un design graphique, la plupart du temps caractérisé par des formes simples, sans textures, ni effets de volumes, et par des aplats de couleurs vives pourrait bien retourner au placard… Pour autant, le minimalisme, lui, reste toujours très actuel. Minimalisme ne veut pas dire flat design ! Oui, le minimalisme est un patron de conception aéré, épuré… mais les ombrages et textures sont bel et bien possibles. Flat Design OUT, Minimalisme IN !

“Minimalistic Music Player” by Antoni Botev

3 - La micro-interaction et les animations en force

Cette année, la micro-interaction et les animations seront très tendances. Par exemple, les boutons animés, aimés ou détestés, sont des éléments d’interaction populaires. Pour les utilisateurs, ils sont facilement perçus comme des éléments avec lesquels ils peuvent avoir une action : ouvrir une page web, activer une fonctionnalité, etc.

La micro-interaction, c’est la façon dont on va interagir avec l’utilisateur. Quand l’utilisateur va cliquer sur un bouton, cliquer sur une flèche par exemple, une action va se produire. Ces micro-interactions, à peine perceptibles vont nécessiter une action de l’utilisateur. En retour, ce dernier obtient un feedback. La flèche sur laquelle il aura cliqué déclenche un mouvement : on a une micro-interaction !

Ces micro-interactions, encore peu utilisées par manque de temps sont tendances et permettent des interfaces modernes et dynamiques. Aujourd’hui, les développeurs disposent de plus d’outils et il est plus facile pour eux d’intégrer ce genre de micro-interactions. Un dialogue entre le designer et le développeur est ainsi opéré.

Exemple de micro-interaction by Jakub Antalik

4 - L'humain au centre des visuels

Unsplash, Shutterstock… Longtemps, les banques d’images gratuites ont été connues et reconnues pour habiller les sites internets, applications. Aujourd’hui, elles sont très utilisées et on retrouve aisément des photos similaires sur de nombreuses plateformes web. Et c’est bien là le problème ! Et si on humanisait un peu plus cela avec des photos plus concrètes, plus réelles ? Le renouveau des photographes et reportages photos pourrait bien prendre place sur la scène UI. L’utilisateur rentre ainsi en empathie et peut plus facilement se projeter.

Et vous, êtes vous prêt(e)s à adopter ces pratiques ?

Aurore Le Potier

Récemment diplômée d'un Master Communication à Audencia Sciences Com, je suis désormais en charge de la stratégie de communication et de contenus de Studio Floax. Je m'intéresse aux sujets liés à l'innovation, la RSE ou encore la culture d'entreprise.

Nos autres articles
Les méthodes agiles, pour une gestion plus souple et collaborative

De nos jours, le mot le plus à la mode lorsque l’on parle de structuration des entreprises est l’agilité. Mais en quoi cela consiste ? Quelles sont les méthodologies à mettre en place dans une entreprise ou toute autre organisation et comment cela s’organise ?

En temps de confinement, et si je faisais le point sur mon activité ?

Confiné(e)s chez nous, pour certains en télétravail, pour d’autres en chômage partiel, le virus du COVID-19 nous met des bâtons dans les roues. Et si on en profitait pour prendre du recul sur notre métier, nos méthodes, nous outils de travail?

Comment rendre plus responsables nos méthodes de conception web ?

Après avoir étudié les tendances d'UI design, nous nous sommes penchés sur les possibles futurs de conception technique.

Design, Developpement et communication, des pilliers complémentaires : guide des usages à maitriser

Comment faire parler le design et le développement, et la communication ? Comment favoriser la transversalité en entreprise ? Nous vous donnons quelques usages et bonnes pratiques pour matriser les codes de la collaboration, voire de la co-création.

Il est temps de se convaincre.

En 5 ans, Studio Floax a bien évolué, lentement, sûrement, progressivement. Nous avons fait le chemin vers l’entrepreneuriat petit-à-petit. Et s'il était temps de se convaincre de notre potentiel ?

Bousculer la gestion de projets en milieux peu propices.

Design Thinking, Agile, Lean... Ces dernières années, la transformation digitale est devenue un des leviers majeurs de modernisation pour les grandes entreprises historiques. Ainsi, l’approche Agile est actuellement en vogue dans [...]

Studio Floax s'implante à la Réunion

Aujourd'hui, nous sommes très fiers de vous annoncer notre toute nouvelle implantation sur l'île de la Réunion, fraîchement labellisée communauté French Tech ! Et comme vous pouvez vous en douter, ce n'est pas un hasard si nous comptons développer [...]

L'importance de trouver le bon nom

Tout bon marin vous le dira, changer le nom d’un navire est de mauvaise augure. En deux ans, notre projet a changé pas moins de 3 fois de nom : Floaxit, LACI, Floaxy. Que ce soit pour des raisons juridiques, techniques ou de communication [...]

Abonnez-vous à notre newsletter

Chaque année, nous vous envoyons un rapide tour d'horizon de nos projets et notre avis sur les tendances qui émergent.

* Nous respectons votre vie privée et vos données personnelles. Regardez nos Mentions légales pour en savoir plus.