Tendances de conception: Design plat 2.0
Le design plat a pris d'assaut le monde du design au cours des dernières années, mais aucun mouvement de conception ne reste pur à 100% à ses racines et à ses idéaux. C'est exactement ce qui se passe avec le design plat: il a progressivement vu des changements subtils mais significatifs à son itération originale.
Ces changements ont été suffisants pour que les observateurs et les experts appellent la nouvelle itération Flat Design 2.0. 2.0 est très intéressant car il permet de trouver le juste équilibre entre juste assez de changements pour modifier l'expérience utilisateur et rester fidèle à ses principes d'origine.
L’évolution de Flat en 2.0 était cependant inévitable: les concepteurs devenant plus à l’aise avec Flat, ils pouvaient voir que, malgré sa popularité, certaines questions n'étaient pas correctement traitées . Et maintenant, nous avons 2.0 pour remédier à certaines de ces lacunes.
Origines du design plat
Regardez le design plat comme une sorte de rébellion contre le style de design alors populaire de le skeuomorphisme . Il s'appuie sur des effets 3D pour copier les propriétés réelles des objets 3D afin d'utiliser la familiarité pour aider l'utilisateur. Par exemple, lors des premières itérations du Kindle Fire d'Amazon, il y avait une bibliothèque 3D en arrière-plan pour renforcer la fonction de la tablette pour la lecture.
Lorsque Apple, un grand partisan du design skeuomorphique, a décidé, en 2012, d'abandonner le skeuomorphisme, il a annoncé son plein essor, demeuré très populaire ces dernières années. Son accent sur le minimalisme a également contribué à le propulser vers son omniprésence actuelle.
Flat se caractérise par son absence de:
- éléments en relief qui signifient aux utilisateurs qu'ils peuvent être cliqués;
- éléments creux ou enfoncés qui indiquent aux utilisateurs qu'ils peuvent être remplis (pensez aux champs de recherche et à d'autres champs de saisie).
Transition vers 2.0
En dépit du succès sans faille, certains concepteurs ont commencé à remarquer des failles légitimes qui n’étaient pas traitées dans la communauté du design. Alors que le flat a beaucoup gagné en raison de son minimalisme bienvenu, il s’est un peu trop déplacé dans la direction austère. Les caractéristiques de certains effets 3D se sont avérées excessives et ont eu un impact négatif sur l'expérience utilisateur.
Ainsi, il était inévitable qu'un autre changement se produise. C'est là que nous sommes aujourd'hui à l'aube du design plat 2.0.
Problèmes d'utilisabilité de Flat Design
Tous les problèmes de facilité d'utilisation peuvent être résumés dans la déclaration suivante: Flat traite généralement les besoins d'un utilisateur en matière d'esthétique de la hanche.
En d'autres termes, les concepteurs qui conçoivent une interface comme étant «plate» mettront davantage l'accent sur la minimisation, la non-3D et le dynamisme / gras au lieu de donner la priorité à l'expérience utilisateur. C'est généralement là que commencent toutes les mauvaises choses dans le monde du design, et c'est la raison pour laquelle flat a évolué vers 2.0.
Voici les problèmes d’utilisation courants avec flat:
- absence de signifiants importants (dégradés, ombres, soulignements, etc.);
- absence de modèles familiers (bleu, texte souligné pour les liens, etc.);
- absence d'indications contextuelles (placement CTA, copie utilisable, etc.).
L’exemple le plus notoire dans la mémoire récente de tous les problèmes de facilité d’utilisation était sans doute la version de Windows 8 de Microsoft, avec son interface appelée Metro. Ce design était la quintessence du plat car tout était plat à l'extrême.
le l'expérience utilisateur était si mauvaise car un design complètement plat signifie que les utilisateurs ne reçoivent pas les indices nécessaires pour leur dire ce qui peut être cliqué et ce qui ne peut pas être sur une interface. En conséquence, les utilisateurs sont naturellement obligés de consacrer plus de temps à l’expérimentation par expérimentation ou, pire encore, à effectuer des actions par erreur qu’ils ne souhaitaient pas!
Comme vous pouvez le voir, l'écran de Windows 8 est si plat qu'il est impossible pour les utilisateurs de dire quoi cliquer et quoi ne pas cliquer. Même si les utilisateurs sont déjà familiarisés avec la navigation de base sur le site, cela ne signifie pas pour autant qu’il soit préférable de supprimer tous les signifiants (indices indiquant aux utilisateurs qu’ils peuvent interagir avec les éléments de la page), éléments de la page).
Grands exemples de Flat Design 2.0
La version 2.0 est un changement ou une amélioration subtile par rapport à la version plate, ce qui peut nécessiter une concentration accrue pour repérer la vraie version 2.0 dans les sites Web et les interfaces. C'est pourquoi nous allons vous présenter quelques exemples importants de la version 2.0 qui sont déjà pleinement opérationnels.
Le guide Dropbox
Guide de Dropbox Au premier abord, le problème peut sembler plat, mais si vous regardez de plus près, vous verrez des suggestions en 3D qui indiquent clairement aux utilisateurs que certains éléments sont soulevés par rapport à d’autres. Ceci est principalement évident dans les images de la tête du garçon (du côté gauche) et des tournevis (du côté droit). Les deux images ont des bordures noires fortes, bien que subtiles, qui communiquent la profondeur et l'impression qu'elles sont placées au-dessus de l'arrière-plan au lieu de s'y fondre.
Tolia Ice Cream
Le site de Tolia est plein d’effets subtils et relevés qui donnent l’impression distincte de la 3D alors que la conception globale reste plate et minimale. L'impression soulevée est présente dans le titre, le sous-titre et la description (c.-à-d. La copie de la page). Il est également présent dans le bouton d'appel à l'action et la copie CTA à l'intérieur du bouton. Vous pouvez remercier l'utilisation subtile d'ombres fines tout autour des bords de ces éléments pour donner cette impression en relief.
Google Santa Tracker
Sans surprise, Google est dans le train 2.0, et son Santa Tracker La page montre comment on peut intégrer 2.0 de manière amusante et utile. Les subtilités de la version 2.0 abondent sur toutes les pages, depuis les dégradés et les ombres des différents bâtiments et les bulles (lorsque les utilisateurs survolent un bâtiment) jusqu’à l’impression 3D du titre en haut de la page.
Publicis Groupe
Publicis Groupe La page du 90ème anniversaire possède une influence 2.0 d'une manière assez évidente. Si vous regardez sur le côté gauche de la page, vous verrez la combinaison d'ombres et de dégradés descendre et rayonner vers l'extérieur du cercle pâle et de la section bleue située en dessous. Le minimalisme brutal indique également que son esthétique de conception est encore fortement ancrée dans le pur plat.
Jumeirah
Ce site pour un hôtel de luxe aux Emirats Arabes Unis, la majorité est dominée par une vidéo géante en arrière-plan, mais ne vous laissez pas distraire par la subtilité de sa contribution 2.0. Le titre "Jumeirah Inside" présente des ombres très subtiles qui donnent l'impression de la 3D tout en conservant l'apparence globale et plate.
Une évolution par la demande
Dans le monde du design, les choses changent généralement car il y a une demande pour cela. Quelqu'un remarquera que quelque chose manque et trouve un moyen d'améliorer les choses, ou quelqu'un d'autre prendra un concept et l'amènera à un autre niveau qui s'appuie logiquement sur un certain concept.
En ce qui concerne la version 2.0, il s'agit certainement d'une combinaison des deux, car les lacunes en termes de facilité d'utilisation sont corrigées en étendant le concept original de manière à respecter les principes de minimalisme définis par les règles.