Dans cet article, je vais vous parler du flat design. Vous en avez probablement déjà entendu parler, puisque l'appartement est devenu ces dernières années l'une des tendances phares du web.

Aujourd'hui, nous allons examiner ce qu'est le design plat, comment il est né et ce dont vous avez besoin pour créer un design épuré, lumineux et réactif.

Vous pouvez trouver de bons exemples de design plat sur http://market.envato.com/. Il existe des tonnes de mises en page, d'icônes et de modèles qui vous permettront de comprendre clairement à quoi ressemble le design moderne. .

1. Qu’est-ce que le design plat ?

Le design plat est un style moderne d’interface utilisateur et de conception graphique, caractérisé par le minimalisme. Le design plat se caractérise par l'utilisation d'un minimum d'éléments et l'absence de divers effets de texture, d'ombre et de lumière, par exemple : couleurs mélangées, dégradés, reflets, etc.

Flat s’oppose au skeuomorphisme( Le skeuomorphisme est un principe de conception lorsqu'un produit prend l'apparence d'un autre, c'est-à-dire lorsque divers éléments d'interface sont copiés à partir d'objets réels - traduction env.) , ainsi qu'un design riche. Cependant, il convient de dire que le design plat n'est pas du tout aussi simple qu'il y paraît à première vue. Il inclut certaines caractéristiques du skeuomorphisme, mais nous en reparlerons un peu plus tard.

En général, le flat aide l'utilisateur à se concentrer sur le contenu, sans être distrait par les visuels. Le design plat met l'accent sur la simplicité des éléments, tout en rendant l'interface plus réactive, agréable et facile à utiliser.

2. Un peu d'histoire

Le flat design, comme vous le savez, existait bien avant de devenir une tendance mondiale sur le web. Le design plat était très populaire dans les années 80 car la technologie de l’époque n’était pas encore suffisamment développée pour prendre en charge des effets, des textures et des ombres complexes. Cependant, même à cette époque, la conception visait le skeuphomorphisme, essayant de rendre les éléments de l'interface aussi réalistes que possible.

Le design plat, sous la forme sous laquelle nous le voyons aujourd'hui, a commencé à gagner en popularité après que Microsoft a commencé à produire des produits dans le style dit métropolitain. Metro est une conception d'interface utilisateur de Microsoft qui frappe par son style et sa simplicité.

En 2010 Microsoft a publié Windows Phone 7, qui utilisait un design plat avec des bords nets et des graphiques simples hérités de l'un de ses produits précédents. Microsoft (Zune). Plus tard, inspiré par ce succès, Microsoft a publié le système d'exploitation Windows 8 basé sur le même style Metro plat.

Après tout, le design plat a atteint son apogée en popularité en 2013, lorsque Apple a lancé iOS 7, doté d'un tout nouveau design avec des éléments d'interface utilisateur entièrement repensés, notamment des icônes et des polices. Apple a créé principes visuels de la conception de l'interface utilisateur et des icônes .

Peu de temps après, Google a également commencé à utiliser le style plat dans ses applications et pages Web, l'appelant Conception matérielle. Google propose même une section entière dédiée à ce style, comprenant une description des objectifs de la conception Web, ses principes et des instructions pour créer divers objets de conception : icônes, mises en page, etc.

Depuis lors, le flat est devenu une tendance clé dans la conception de sites Web, rendant les sites Web, les applications et les éléments d’interface élégants, épurés et stylés.

Ainsi, il existe trois exemples globaux de design plat d'entreprises sans lesquels il est difficile d'imaginer le monde moderne de la technologie :

Conception Metro de Microsoft

Conception Apple iOS 7

La conception matérielle de Google

3. N'oubliez pas d'être propre

Le design plat est apparemment appelé « plat » en raison du manque d'éléments tridimensionnels et d'effets réalistes tels que des dégradés, des textures, des reflets, des demi-teintes, des ombres. N'oubliez pas que le style plat est une manière bidimensionnelle (plate) de représenter des objets.

De plus, dans le flat design, les objets sont représentés de manière très simplifiée et stylisée.

Et parfois même seule la silhouette ou les contours de l'objet sont utilisés, c'est-à-dire juste assez pour rendre l'objet reconnaissable, mais sans le surcharger de détails mineurs.

Le minimalisme est devenu une tendance mondiale de nos jours : la simplicité des formes et l’utilisation d’arêtes vives créent un design épuré et agréable. Les formulaires simples sont plus clairs et faciles à comprendre. Cela permet de conserver un design minimaliste et épuré sans lui donner un aspect chargé et encombré.

4. Amenez-le à la perfection

Sachez que lorsqu'il s'agit de créer des icônes plates et des éléments d'interface utilisateur, vous devez leur donner un aspect net, soigné et parfait au pixel près, c'est-à-dire autant que possible. De plus, cela s’applique aussi bien aux graphiques raster qu’aux graphiques vectoriels.

Adobe Photoshop est clair ici : il fonctionne avec des graphiques raster, basés sur des pixels.

Quant au programme Adobe Illustrator, il utilise des graphiques vectoriels constitués de courbes et de lignes appelées vecteurs, qui sont spécifiées par des formules mathématiques.

Il était une fois Adobe Illustrator n'était pas un programme particulièrement pratique pour créer des graphiques au pixel près. La bonne nouvelle est que les dernières versions d’Illustrator sont devenues un excellent outil pour créer de bons graphiques.

Je dois dire que les graphiques vectoriels impliquent principalement de travailler avec des formes simples et plates, des couleurs pures et des grilles. Adobe Illustrator est très flexible dans ses paramètres et vous permet d'adapter la grille à vos besoins, d'aligner les objets et d'utiliser différents types d'accrochage. Cela facilite la création d’un design parfait, épuré et élégant sur n’importe quel écran. Si vous voulez apprendre à créer des graphiques parfaits, vous devriez lire l'article : Comment créer des illustrations au pixel près à l'aide d'Adobe Illustrator .

5. Couleur

L’une des caractéristiques les plus spécifiques du flat design, outre les ombres, est l’utilisation de la couleur. La plupart des couleurs utilisées par le design plat dans ses éléments ne sont constituées que de quelques couleurs de base.

La couleur du design plat est vive, riche et riche.La palette de couleurs plates ne se limite pas à quelques couleurs spéciales. Elle contient de nombreuses nuances et leur choix dépend uniquement de ce que vous représentez, qu'il s'agisse d'icônes de bonbons ou d'objets de style rétro dans une palette rétro sophistiquée.

Disons que vous êtes un concepteur d'interface utilisateur avec une bonne compréhension des palettes de couleurs et que vous expérimentez le panneau de couleurs de Photoshop et Illustartor, en mélangeant les couleurs à votre guise. Cependant, ce processus est assez complexe et nécessite une bonne intuition, expérience et compétences. Vous trouverez ici quelques outils qui peuvent vous aider à créer votre propre palette de couleurs.

Certains d’entre eux conviennent à tous les types de design et d’illustration, pas seulement au design plat. Par exemple, Adobe Color CC, mieux connu sous le nom de Cooler. Aujourd'hui, il est possible d'y accéder, à la fois via le site Web et directement via les produits Adobe. Cooler est un outil très flexible qui vous permet soit de créer votre propre palette de couleurs, soit de choisir parmi une palette personnalisée d'une bibliothèque.

Coolors est un autre générateur de palette de couleurs simple et pratique. Appuyez simplement sur la barre d'espace et le programme générera une palette de couleurs, vous pourrez ajuster les couleurs, il existe également une fonction d'exportation.

Il existe plusieurs autres services similaires avec des palettes personnalisées qui peuvent être utiles. Cependant, il existe un outil créé spécifiquement pour le design plat FlatUIColors.com par Designmodo - un service avec un ensemble de couleurs « plates », très pratique pour le travail. Ce site est devenu très populaire parmi les designers à la recherche de bonnes solutions de couleurs pour un design parfait. Essayez-le !

Et vous pouvez également trouver une plus grande variété de couleurs et de palettes dans Guide de conception matérielle de Google.

6. De longues ombres

Comme mentionné ci-dessus, le design plat se caractérise par la simplicité et beaucoup d'espace libre - c'est pourquoi le design plat rejette l'utilisation de tout effet. Cependant, il existe un effet typique du design plat. Cet effet est devenu une tendance et une caractéristique de l’appartement.

Nous parlons maintenant de longues ombres. Ils présentent quelques caractéristiques typiques qui rendent cet effet reconnaissable, à savoir : une inclinaison de 45 degrés et une grande taille (l'ombre peut être plusieurs fois plus longue que le sujet lui-même. De ce fait, les ombres longues donnent à l'aplat un effet de profondeur.

Cet effet rend l'objet plus tridimensionnel, tout en le gardant dans le contexte du design plat.

7. Travailler avec des polices

La typographie joue un rôle important dans le design plat. Souvent, le texte devient l'élément principal de la composition.

Les conceptions plates utilisent généralement des styles de police simples, ce qui rend l’ensemble de la conception propre et lisible. Vous pouvez trouver de nombreuses polices gratuites dans Adobe Typekit si vous utilisez des produits Adobe. Vous trouverez également de nombreuses bonnes polices gratuites sur Font Squirrel. Mais n'oubliez pas de lire la licence si vous comptez utiliser la police à des fins commerciales.

Le plus souvent, dans le design plat, il est d'usage d'utiliser des majuscules et des couleurs contrastées, ce qui rend le texte plus lisible.

Utilisez les polices avec parcimonie, en vous rappelant qu'elles doivent compléter et compléter le design plutôt que d'apparaître comme un élément distinct. Cela ne signifie pas que vous ne pouvez pas utiliser de polices serif ou de polices complexes manuscrites. N'oubliez pas d'être minimal et de garder tout en équilibre. Cependant, les polices plates utilisent encore souvent des polices sans empattement, car elles semblent plus strictes et soignées.

8. Avantages et inconvénients du design plat

Même si le design plat est devenu si populaire en raison de ses nombreux avantages, les concepteurs sont toujours confrontés à certains inconvénients lorsqu'ils utilisent ce style. Examinons les avantages et les inconvénients.

Avantages

Popularité

Le design plat est devenu une tendance, gagnant de plus en plus de critiques positives de la part des designers et des concepteurs de sites Web, et il ne semble pas du tout perdre sa position. Au contraire, il se répand de plus en plus, acquérant de nouvelles formes et caractéristiques, devenant de plus en plus créatif.

Simplicité

Le design plat est simple, minimaliste et épuré. Le contenu Web plat aide les utilisateurs à se concentrer sur le contenu plutôt que d'être distraits par les visuels. Cela fonctionne également pour les interfaces d’applications mobiles : un design épuré avec de gros boutons rend l’expérience mobile parfaite.

Luminosité

La couleur est un autre avantage intéressant du design plat. Les couleurs vives et riches semblent attrayantes et épurées, et l’absence de dégradés rend le design élégant. De plus, ces couleurs pures le rendent plus positif et présentable ; le design plat crée la bonne ambiance.

Défauts

L’appartement présente bien d’autres avantages, mais aucun design n’est parfait et nous ne pouvons pas l’idéaliser. Voici quelques inconvénients du flat design qu’il faut mentionner :

Insensibilité

Parfois, le manque de détails importants ou d’effets visuels rend difficile le processus de création d’une interface conviviale, ce qui rend généralement l’ensemble de la conception insensible. Tous les utilisateurs ne sont pas à l'aise avec Flat car il peut être difficile de trouver des éléments sur une page Web sur lesquels il faut cliquer ou appuyer sur l'écran d'un téléphone mobile car ils ne sont pas interactifs.

Problèmes de typographie

Comme mentionné précédemment, toutes les polices ne conviennent pas au design plat. Parfois, une police aussi riche et aux bords nets semble vraiment équilibrée et élégante. Cependant, si la police est mal choisie, cela peut gâcher l’ensemble de la conception. Vous devriez avoir une très bonne idée des polices qui conviennent au flat et de celles qui ne le sont pas. Le manque d'expérience rend le choix d'une police très difficile.

Visuels faibles

En raison des limitations dans l’utilisation des effets, des couleurs et des polices, les designs plats peuvent paraître trop simples et froids. Son minimalisme peut également être son principal inconvénient : d’autres designs plats finissent par ressembler exactement au vôtre. Il est donc très difficile de donner à vos icônes ou pages Web un aspect différent du design de quelqu'un d'autre, car vous utilisez les mêmes formes simplifiées, les mêmes palettes de couleurs limitées et les mêmes polices similaires. En conséquence, le design plat peut devenir ennuyeux avec le temps.

9. Futures tendances du design plat

On ne peut pas dire que le design plat s'est complètement formé et s'est arrêté dans son élan. Cela est peut-être dû à ses défauts mentionnés ci-dessus ; il s'efforce de se développer et de changer, d'acquérir de nouvelles fonctionnalités et d'améliorer l'expressivité visuelle.

Si vous regardez attentivement le dernier exemple de design plat, vous remarquerez peut-être qu'ils'éloigne progressivement de ses outils stricts et commence à ajouter des effets subtils tels que : dégradés, ombres, éclairage et autres effets visuels.

Ces petites touches donnent au design plat une certaine profondeur sans être trop détaillé comme les designs skeuomorphes. Ces améliorations subtiles rendent l'appartement plus réactif et confortable, et apportent également un nouveau look, le rendant plus flexible et polyvalent.

Ainsi, l'appartement ne perd pas ses fonctionnalités, mais devient plus intéressant et flexible.- il va vraiment mieux.

Conclusions

Ainsi, nous avons discuté de quelques faits de l’histoire du design plat, et parlé des couleurs, des formes et de la typographie. Nous avons examiné différents points de vue, nous sommes concentrés sur les avantages et les inconvénients de l'appartement et avons appris certains des principes fondamentaux pour créer un bon design.

J'espère que vous avez appris quelque chose de nouveau grâce à cet article, ou du moins que vous l'avez trouvé intéressant. Vous vous devez d'essayer de créer un design plat si vous ne l'avez jamais fait auparavant.

Après tout, que dire d’autre à propos du design plat ?

Si vous aimez vraiment le flat avec ses bords nets, ses couleurs riches et ses polices nettes, sa propreté et son minimalisme, alors foncez !

C'est tendance, mais comme pour tout style graphique, ne vous limitez pas à une seule technique. Ce n’est pas parce que l’appartement est à la mode que vous ne pouvez pas utiliser d’autres styles dans votre projet. Le skeuomorphisme, avec ses petits détails et textures, peut également être une bonne solution. L'essentiel est de rappeler que le design est différent pour chaque projet, il doit exprimer son esprit, son but, son essence, tout en restant pratique et fonctionnel. Avant!

Le design plat est devenu populaire récemment pour les applications et les sites Web. Cela ne veut pas dire que tout le monde aime ce style, mais il ne convient certainement pas à toutes les applications et à tous les sites. Si le design plat présente de nombreux avantages, tels que la simplicité et le minimalisme, il facilite son utilisation. Pour certaines applications, la conception plate peut s'avérer trop simple. Autrement dit, cela vaut la peine d’ajouter des ombres ou des dégradés pour le rendre meilleur.

Beaucoup affirment que la conception Web plate est une conception efficace. Ils disent que c'est une manière de rendre le projet aussi convivial que possible. Voici quelques exemples inspirants de projets de design plat. Cette sélection parmi divers portefeuilles est idéale pour comprendre les conceptions plates qui fonctionnent réellement.

L'ISSLand

Création de janvier

Singe minimal

Qu’est-ce que le design plat ?

• Le design plat se concentre sur l'utilisateur
• Le design plat est simple
• Design plat - moins de dégradés
• Le design plat comprend des lignes droites et des coins carrés
• Utilisez généralement un fort contraste de couleurs
• Le design plat n'a pas d'ombres, de biseaux, de textures ou tout ce qui ressemble à de la 3D
• Le design plat n'existe qu'en 2 dimensions
• Design plat - une tendance vers la simplicité et le minimalisme
• Design plat - n'utilisez pas d'effets supplémentaires
• Il n'y a pas d'extras
• Design plat - moins de boutons et de cloches et de sifflets
• Le design plat signifie se concentrer sur les polices
• Les combinaisons de couleurs, les couleurs contrastées et les variations de couleurs intéressantes sont des éléments importants du design plat.
• Le design plat est l’un des nombreux modèles. Cela convient à certains projets, mais pas à d’autres.

Qu'est-ce qui n'est pas un design plat ?

• Le design plat n’est pas un skeuomorphisme ou un design qui imite la forme et les contours de la « réalité ».
• Le design plat n'inclut pas les boutons brillants
• Le design plat n'inclut pas les décorations
• Dans le design plat, vous ne trouverez pas les idées traditionnelles de « profondeur »
• Le design plat ne convient pas à tous les projets

Le flat design est-il simplement un design efficace ?

Certaines personnes considèrent le design plat comme un design efficace en soi. Autrement dit, cela simplifie l'utilisation des sites et des applications, vous permettant de trouver les informations nécessaires sans distraction. Bien entendu, le design plat n’est pas le seul à faciliter la recherche d’informations. Si tout est bien fait, les utilisateurs n'auront aucun problème. Le projet doit être simple et facile pour ceux qui sont capables de l'utiliser. Certaines personnes préfèrent utiliser un design plat, tandis que d’autres préfèrent un style de design différent.

Éléments pour un design plat

Vous aimez le design plat ? Voici quelques éléments pouvant être utilisés pour un design "flat"

Pack d'icônes plates

De l'auteur : Salutations, amis ! Aujourd'hui, nous allons parler de ce qu'est le design plat, ou conception de sites Web plats. Ce terme a depuis longtemps conquis le cœur des concepteurs de sites Web et est toujours d’actualité aujourd’hui. Les plus grandes entreprises (Google, YouTube, Microsoft, Apple Inc., etc.) l'utilisent pour concevoir leurs sites Web et applications. Vous n'êtes toujours pas dans la secte des partisans de la conception de sites Web plats ? Alors nous venons vers vous !

Selon vous, quelle est la raison d’une telle popularité du design plat ? Je vais vous répondre en quelques mots : ça marche vraiment ! Dans cet article, je vais vous expliquer ce qu'est ce style, vous parler de ses avantages et de ses inconvénients et vous montrer d'excellents exemples de conception de sites Web plats qui vous inspireront sûrement à faire de grandes choses. Alors, c'est parti !

Tout a commencé avec le skeuomorphisme

Pour ceux qui ne le savent pas, le skeuomorphisme n’est pas un gros mot, mais un autre style de conception Web. Le flat design est souvent présenté comme l’opposé du skeuomorphisme, ce qui, à mon avis, n’est pas tout à fait exact. Il s’agit plutôt d’une simplification que d’un antagonisme.

Jusqu’en 2010, le skeuomorphisme était le style dominant dans la conception d’interfaces. Il a affiché les éléments tels qu'ils apparaissaient dans la réalité, en utilisant activement les textures, les ombres, les reflets et d'autres attributs d'une image tridimensionnelle. Apple a fait des efforts particuliers à cet égard, copiant soigneusement la plupart des objets logiciels à partir d'objets réels.

Bientôt, les icônes pseudo-convexes ont cessé d'attirer la majorité des utilisateurs et des développeurs Web, ce qui a marqué le début de l'ère de la conception de sites Web plats. Le monde est arrivé à la conclusion que tous les éléments décoratifs doivent être supprimés et que seul ce avec lequel l'utilisateur final peut interagir doit rester.

"Le meilleur design est le moins de design possible"

Comment Dieter Rams a regardé l'eau - un célèbre designer industriel qui s'oppose au design intrusif, aux effets d'animation, etc. En juin 2013, Apple Inc. a introduit le révolutionnaire iOS 7, qui a reçu tous les attributs d'un style de conception Web plat. Cependant, l’avion n’a pas immédiatement « vaincu » le réalisme et le volume.

Pendant longtemps, les utilisateurs n’ont pas pu oublier la magie de Steve Jobs et les icônes « qu’on a envie de lécher ». Beaucoup ont même dit au revoir aux « pauvres Sept » et sont passés à « Android radieux ». Le grand nombre de bugs présents dans iOS 7 et le design blanchâtre et translucide avec parallaxe et animation « morve » lors de l’ouverture des applications ont ajouté de l’huile sur le feu.

Ceux qui se sont résignés à l'inévitable réalité et sont restés avec le système d'exploitation Apple ont finalement réalisé que la conception Web plate non seulement semble intéressante, mais apporte également de l'ordre et un style visuel unifié à toutes les applications.

Avantages et inconvénients du design plat

Les avantages de l’utilisation de ce style incluent :

clarté de la composition et concision des aides visuelles. Interface responsive dans le style « rien de superflu », grâce à laquelle les utilisateurs réalisent rapidement ce qu'ils voulaient leur transmettre ;

l'accent est mis sur une bonne typographie. Le contenu vient en premier, ce qui est extrêmement important dans l'abondance d'informations d'aujourd'hui ;

taille réduite des pages Web et performances du site plus rapides grâce à un nombre minimum d'effets visuels. Ceci est particulièrement utile lors de la création de versions adaptatives, car plus les formulaires sont simples, plus ils sont faciles à afficher sur les petits écrans des appareils mobiles.

La conception Web plate a également ses inconvénients :

limiter l’imagination du concepteur de sites Web à des couleurs, une typographie et une iconographie simplifiées. Par conséquent, le risque de créer un site Web ennuyeux et inexpressif est plus élevé ;

le manque de tridimensionnalité et d'ombres rend parfois difficile de comprendre si un élément est cliquable ou non ;

manque de règles fixes spécifiques.

Si vous avez décidé d'utiliser ce style sur votre site, félicitations, cela montre que vous vous souciez de l'expérience utilisateur et que vous restez dans l'air du temps. Si vous débutez en tant que concepteur de sites Web et que vous ne savez pas comment utiliser correctement le design plat pour rendre votre site pertinent sans être simpliste, essayez ces conseils :

Oubliez les « murs de briques » et les arrière-plans clairs. La conception Web plate a tendance à utiliser des images simples, fluides et douces pour l’arrière-plan.

Pas de dégradés, d'icônes 3D, de transitions animées ou d'autres effets spéciaux. Tout cela alourdira votre site et ajoutera du bruit : en avez-vous besoin ?

Utilisez des icônes plates avec des contours clairs pour ajouter de la commodité et des fonctionnalités.

Utilisez une palette de couleurs vives et riches. Désormais, la tendance est aux tons du spectre solaire : jaunes clairs, roses et verts. L'essentiel est de ne pas en faire trop - il ne doit pas y avoir plus de 3 couleurs sur la page.

Concentrez-vous sur la typographie. En design plat, la préférence est donnée aux inscriptions lumineuses et originales qui créent un appel à l'action et facilitent la navigation sur le site. Ici aussi, il est important de ne pas en faire trop. Oubliez les polices « manuscrites » et autres polices sophistiquées. Les majuscules peuvent être utilisées pour mettre en évidence les titres.

N'hésitez pas à utiliser une variété de formes géométriques. Les carrés, cercles, lignes et autres formes amélioreront non seulement la structure d'un site Web, mais créeront également une hiérarchie claire et diviseront le contenu. Les utilisateurs l'apprécieront, croyez-moi.

Simplifiez autant que possible le menu de navigation et les autres éléments du site. Pour les boutons, utilisez des rectangles réguliers sans ombres ni surlignages.

Ainsi, au fil des années, les sites Web au design plat sont devenus le standard accepté par absolument tout le monde. Regardez la plupart des sites Web modernes – ils sont fondamentalement plats.

Enfin, je donnerai les exemples promis de flat design réussi, qui pourront vous servir d’inspiration pour créer vos propres chefs-d’œuvre.

1. Site Web http://dunked.com.

Une plateforme populaire de publication de portfolios, destinée aux représentants de diverses professions créatives. La conception Web plate et minimaliste évoque le sentiment d'un service fiable et compréhensible qui ne distrait pas par des effets spéciaux inutiles.

2. Interface Microsoft.

Microsoft est l’une des entreprises qui ont rendu le style plat si populaire. Vous vous souvenez peut-être du lecteur Zune, concurrent de l'iPod, lancé par Microsoft au milieu des années 2000 ? Ainsi, la conception de ce produit était très différente de la plupart des applications de l'époque, en grande partie à cause de la grande typographie, des icônes plates et des formes grandes et lumineuses.

Cette interface, appelée Metro, a ensuite migré vers les ordinateurs personnels (système d'exploitation Windows 8), l'interface Xbox 360 et d'autres produits logiciels Mircosoft.

3. Site Web http://www.vox.com.

Eh bien, êtes-vous inspiré ? A bas l’esthétique 3D pseudo-réaliste !

C'est tout. Abonnez-vous et partagez nos articles avec vos amis sur les réseaux sociaux. Des conversions élevées à vous !

Qu’est-ce que le design plat ? Cette direction de conception est l’une des plus discutées sur Internet. En bref, le flat design est un style extrêmement simplifié dont les racines remontent au minimalisme. Mais il ne s’agit pas exactement de minimalisme, puisque ce style peut prendre de nombreuses formes différentes en fonction des exigences de conception. Pour mieux comprendre ce qu’est le flat design, il est préférable de revenir en arrière et de définir ce qu’il n’est définitivement pas.

Ce n'est pas 3D. Les graphiques 3D eux-mêmes vous permettent d'obtenir des images très réalistes, mais en même temps en deux dimensions. Contrairement à la 3D, le design plat n'accorde pas beaucoup d'attention aux détails qui créent de la profondeur et de la dimension, tels que les ombres, les reflets et les textures.

Ce n'est pas du skeuomorphisme. Le design plat est apparu comme une alternative aux éléments de conception pseudo-volumétriques qui imitent des objets ou des processus réels. Le skeuomorphisme implique l'utilisation active de divers effets : ombres, reflets, réflexes et textures réalistes. Il y a et il ne peut y avoir rien de tout cela dans le design plat.

Les gens ont commencé à parler de design plat en 2012-2013, lorsque ce style est apparu pour la première fois. La tendance était très visible et a fait beaucoup de bruit, puisque Microsoft a été l'un des premiers à développer cette direction. La sortie de Windows 8 avec une nouvelle interface a changé à jamais le design et a largement prédéterminé le vecteur de développement du web, du moins sa composante visuelle.

Apple n'est pas resté à l'écart non plus, qui a également abandonné les éléments pseudo-volumétriques dans la conception des interfaces de ses appareils. Microsoft et Apple ont créé une nouvelle réalité dans laquelle les sites au design obsolète n'avaient plus leur place. Dans le même temps, Apple n'a pas agi aussi radicalement que son éternel concurrent, et s'est progressivement débarrassé des éléments de skeuomorphisme.

Le design plat en lui-même n’est ni bon ni mauvais, ce sont les concepteurs Web qui le rendent pratique ou peu pratique. Mais soyons honnêtes, dans ses formes extrêmes, le flat design n’a pas l’air très esthétique. La zone de meilleure perception dans ce cas se situe probablement quelque part entre les éléments plats et pseudo-volumétriques.

Il est fort possible que la tendance à la simplification extrême qui a dominé ces dernières années soit remplacée par autre chose. Il existe certaines conditions préalables pour cela - par exemple, la direction Material Design, créée par les designers de Google.

COMPATIBLE AVEC LA CONCEPTION ADAPTATIVE

L'abandon par Microsoft et Apple du skeuomorphisme dans la conception des interfaces a eu de lourdes conséquences. Le nouveau style a été presque immédiatement adopté comme nouvelle approche de l’UX. Depuis, le flat design est devenu une tendance dominante qui continue d’être d’actualité. Aujourd'hui, les éléments plats sont omniprésents, nous les voyons sur les sites Web, dans les applications et sur les écrans de divers appareils.

Les principes du design plat s'appliquent à un large éventail de catégories de conception, mais ses grilles strictes et ses graphiques simplifiés s'affichent mieux sur les appareils dotés d'écrans de petite taille.

La tendance au minimalisme a grandement simplifié le travail des concepteurs : il leur est devenu plus facile de concevoir des interfaces qui s'affichent correctement sur tout type d'appareil. Dans le cas des éléments pseudo-volumétriques, tout n'était pas le cas - parfois l'interface, qui avait l'air étonnante sur l'écran du bureau, se transformait en quelque chose d'incompréhensible sur un appareil mobile.

L’un des principaux avantages du design plat est son évolutivité. Les éléments plats ont fière allure quelle que soit leur taille et, contrairement à une conception au pixel près, ils sont beaucoup plus faciles à utiliser.

PLATEFORME FLEXIBLE

Le design plat, dans sa recherche de simplicité, se caractérise par une bonne flexibilité : tous les éléments sont généralement créés à partir de formes géométriques homogènes, ce qui simplifie la création d'un agencement équilibré, où chaque module ou bloc a sa place. Tous les éléments sont facilement reconnaissables et, surtout, pendant le fonctionnement, ils peuvent être rapidement échangés sans violer les paramètres d'origine.

Les grilles ont également une structure flexible qui peut être fournie dans diverses configurations. Cela permet aux concepteurs de créer les approches les plus optimales qui présentent au mieux le contenu disponible. L'absence de restrictions et la nécessité d'ajuster la grille si de nouveaux éléments sont modifiés ou ajoutés accélèrent considérablement le flux de travail.

TYPOGRAPHIE LISIBLE

Le design plat a considérablement changé la façon dont les designers envisagent la typographie. Le nouveau style nécessitait une approche différente dans le choix des polices et la qualité de la mise en page. De ce fait, l’absence d’ombres et d’effets divers rendait les textes plus faciles à lire.

Le design plat se caractérise par l'utilisation intensive de polices sans empattement. Cependant, ce n'est pas de l'akisoma et les empattements peuvent également avoir fière allure en combinaison avec des éléments plats. Les polices Serif seront tout à fait appropriées comme titre, et elles pourront également être utilisées dans le corps du texte si la typographie ne viole pas l'unité de composition.

INCONVÉNIENTS

Il peut sembler que le design plat ne présente aucun inconvénient, mais ce n'est pas le cas. Dans leur quête pour mettre en valeur les lignes et les formes épurées, certains designers tombent dans le piège de se concentrer sur l’esthétique tout en négligeant la convivialité. Un design simple et beau, dans lequel il n'y a rien de superflu, n'est pas toujours pratique, et de telles erreurs sont particulièrement prononcées lors de l'utilisation d'appareils mobiles.

En flat design, il est souvent difficile de déterminer quel élément est interactif et lequel ne l’est pas. Tout est pareil, il n'y a pas de différences évidentes, tous les éléments se trouvent dans le même plan. Dans un souci de simplicité, les concepteurs peuvent par inadvertance cacher ou déguiser des fonctionnalités ou des actions importantes, et l'utilisateur, ne voyant pas les invites habituelles, peut perdre son orientation sur le site.

Prenons ce site comme exemple. Quels éléments sont interactifs. Tous? Ou juste quelques-uns ? Pas clair. Cela ne peut être découvert que par hasard, mais ce sont des mouvements inutiles et indésirables.

PERTE D'INDIVIDUALITÉ

Pour tout projet de marque, d’entreprise ou de design, l’unicité est de la plus haute importance. Qu’il s’agisse d’un site internet, d’une application, d’un livret, d’une affiche ou d’une carte de visite, le design doit être original et bien reconnaissable.

L’un des inconvénients du flat design est son style visuel. L’utilisation de formes géométriques simples peut souvent donner lieu à deux designs complètement différents qui semblent très similaires. Les concepteurs qui utilisent des éléments plats sont limités dans leurs options car ils ne disposent pas d'un large choix d'options acceptables. Récemment, sur Internet, vous pouvez voir de nombreux sites de clonage qui ne sont pas réellement des clones. C'est juste une coïncidence. De plus, la coïncidence est désagréable, car le site perd son individualité indispensable, se perdant dans le contexte d'autres ressources au design similaire.

Parfois, ça devient drôle. En regardant ces images, vous pourriez penser que nous examinons différentes sections de la même application. Mais non, les designers Marco La Mantia et Simone Lippolis ont travaillé indépendamment l'un de l'autre. Des formes géométriques de base et une police blanche sans empattement sont utilisées comme principaux éléments de conception - une décision plus que logique. Mais le résultat est désastreux : la même palette de couleurs a complètement privé le design de son caractère unique. Et de tels cas sont nombreux.

À LA CHAQUE MODE

Le design plat restera longtemps l’une des tendances les plus en vogue, simplement parce qu’il convient parfaitement aux écrans des appareils mobiles. Mais de nombreux designers choisissent l'appartement non seulement parce que cela leur permet de résoudre rapidement la plupart des problèmes, mais aussi parce qu'ils souhaitent créer quelque chose de moderne et de mode.

Cependant, en quête de mode, vous pouvez commettre une grave erreur : si vous suivez sans réfléchir toutes les tendances, il est tout à fait possible d'oublier l'utilité du design. Un appartement peut être très beau, élégant et même gracieux, mais le choix du designer doit néanmoins être déterminé par la fonctionnalité et non par le désir de beauté. Parfois, le désir de « glisser » quelque chose de mode dans un design ne fait que lui nuire, par exemple les longues ombres, l'une des caractéristiques les plus reconnaissables du design plat.

Nous avons devant nous les œuvres des designers Alexander Lototsky et Erik Malmskeld. Ce sont des exemples typiques d’utilisation de longues ombres dans la conception. Cela ne surprendra personne, mais à une époque, et les deux œuvres ont été créées en 2013, alors que le design plat commençait tout juste à être à la mode, le nouveau style visuel était très intéressant et attrayant. En conséquence, tant d’icônes similaires sont apparues qu’aujourd’hui, l’utilisation d’ombres est une solution formelle et sans intérêt. C’était autrefois à la mode, mais ce n’est plus le cas. Les ombres sont comme des ombres. Ils n’ont aucun sens, ils ne remplissent aucune fonction utile.

MAUVAIS CHOIX DE POLICE

Chaque designer rêve de créer quelque chose de beau et en même temps fonctionnel. Mais en quête d’esthétique, vous pouvez faire de mauvais choix qui affectent la convivialité. Un exemple est l’engouement pour les polices fines et légères. Ce type de typographie semble épuré et léger, mais il est également difficile à lire.

Parfois, le choix d'une police fine est justifié - par exemple, pour une utilisation dans les titres. Mais lorsque le texte principal est tapé dans la même police, il est souvent impossible de le lire. De telles erreurs sont particulièrement visibles sur les appareils mobiles – la petite taille de l’écran réduit considérablement la lisibilité du contenu.

PLAT 2.0

Au cours des dernières années, les concepteurs ont expérimenté les éléments plats et ont apporté de nombreuses nouveautés au design plat. Le style est entièrement formé et, comme tout autre style établi, il a ses avantages et ses inconvénients.

À l’aube de son apparition, l’appartement se distinguait par une stricte simplicité visuelle ; il n’y avait aucune trace d’ombres ou de structures. Même les dégradés n’étaient pas très appréciés, même s’ils ne contredisaient en rien les principes du flat design.

Mais progressivement, les concepteurs ont commencé à s'éloigner des solutions trop simples, essayant de trouver une sorte de compromis entre l'appartement et le skeuomorphisme. Le résultat est un nouveau style que certains designers appellent Flat 2.0. Des ombres, des dégradés et même des structures claires, presque invisibles, ont progressivement commencé à apparaître dans les éléments de conception. Le design plat manque clairement de profondeur et les concepteurs ont commencé à utiliser des approches hybrides. Par exemple, disposez visuellement des éléments à différents niveaux, expérimentez les nuances et les ombres. Un autre exemple fréquemment utilisé d’approche hybride est l’utilisation non seulement d’icônes et d’illustrations vectorielles plates, mais également de photographies.

Google a beaucoup fait pour promouvoir le Flat 2.0. Les Material Design Guideline tentent de créer un nouveau langage visuel combinant des éléments de conception plats et tridimensionnels. Les recommandations de Google sont très détaillées et faciles à suivre. Dans le même temps, Google n'insiste pas sur le strict respect de toutes les règles énoncées dans la directive - les concepteurs peuvent expérimenter en créant leurs propres projets originaux, qui peuvent combiner une variété d'éléments.

CONCLUSION

Aujourd’hui, le Flat 2.0 en est à ses balbutiements, mais la direction dans laquelle ce style va se développer est déjà assez claire. Aucun changement significatif n'est attendu - les pionniers Google, Apple et Microsoft ne vont pas abandonner d'un seul coup. S'il y a des changements, ils seront insignifiants - de nouvelles approches apparaîtront, quelqu'un proposera un "truc" intéressant, les tentatives continueront pour tirer le meilleur parti du skeuomorphisme. Mais dans un sens global, il n'est pas nécessaire d'attendre quelque chose de vraiment nouveau - le design plat est une tendance à long terme et seul le style qui convient le mieux aux nouvelles technologies qui n'existent pas encore peut le déplacer de ses positions conquises.

Qui développe des applications mobiles et des sites Web, a écrit une chronique pour nous et a tout mis à sa place en matière de design plat et matériel.

Dans l’ensemble, la différence entre le Flat design et le Material Design est subtile. Pour une personne qui n’a pas de connaissances approfondies en graphisme, ils peuvent en effet sembler très similaires. Dans cet article, je vais essayer de « faire la lumière » sur certaines des différences entre eux. Vous recevrez des connaissances supplémentaires si nécessaires pour ne pas blesser accidentellement la nature délicate du créateur.

Un peu d'histoire

Avant de commencer à parler des différences entre les deux tendances de design les plus populaires, découvrons d'où elles viennent. Il existe une opinion selon laquelle la conception matérielle est créée sur la base d'une conception plate. Alors, d’où vient le design plat ?

Skeuomorphisme

Lorsqu'il s'agit d'interface utilisateur et de conception Web, le concept de skeuomorphisme fait référence à une approche dont l'idée principale est l'imitation. Sans entrer dans trop de détails, rappelons-nous simplement les interfaces Apple pré-iOS 7 avec leurs « textures, éclairages et effets explosifs réalistes ».

La tentative de faire ressembler les objets numériques à leurs homologues du monde réel était motivée par la nécessité de faciliter l'interaction de l'utilisateur avec l'appareil. En fait, c’est la raison pour laquelle toutes les interfaces aux textures réalistes dominent le monde numérique depuis de nombreuses années. La conception skeuomorphique fait un excellent travail en aidant les utilisateurs à passer en toute transparence du monde réel au monde numérique.

Cependant, avec l’essor de la technologie mobile, il devient progressivement nécessaire de se concentrer principalement sur la commodité et la facilité d’utilisation. D'accord, dans ce domaine, la nécessité de créer des solutions mobiles accessibles depuis différents appareils augmente considérablement. Et à ce moment précis, la simplicité devient la nouvelle norme en matière de design.

Remarque : Ne pensez en aucun cas que le skeuomorphisme ait complètement disparu. Il est largement utilisé dans les jeux où il est nécessaire de créer un monde réaliste et d'aider les joueurs à ressentir leur personnage afin de s'immerger profondément dans le processus de jeu.

Conception plate

Ce style est totalement dépourvu de tout objet tridimensionnel. En gros, le design plat manque d'éléments stylistiques tels que les ombres portées, les textures, les dégradés, mais prête attention au jeu des polices, des couleurs et des icônes. Mais pourquoi tout cela était-il nécessaire ? La réponse est simple.

Premièrement, la conception plate réduit considérablement le temps de chargement des pages. L'absence de détails skeuomorphiques « lourds » (pensez : calques, polices serif, dégradés) rend les éléments de conception plats « plus légers », ce qui accélère considérablement les temps de chargement. De plus, les éléments plats sont tout aussi attrayants sur les écrans haute et basse résolution.

Deuxièmement, des images simples peuvent transmettre votre idée aux utilisateurs plus rapidement que des illustrations détaillées : elles sont sommaires et donc assez faciles à comprendre.

Et bien sûr, des icônes plates avec une police relativement simple peuvent attirer l'attention des utilisateurs sur un contenu vraiment important.

Aujourd’hui, le design plat bénéficie d’une reconnaissance bien méritée, mais il présente encore des problèmes. L'exemple le plus évident de tels problèmes est la sortie de Windows 8 par Microsoft. Ce système d'exploitation est considéré comme un pionnier du design plat et prend en charge le concept de design Metro. Ce qui a posé problème, c’est que l’entreprise a jugé nécessaire d’accorder plus d’attention à la typographie qu’aux graphiques eux-mêmes.

Les résultats d'un test d'utilisabilité de Windows 8 mené par NN Group ont montré que les utilisateurs avaient des difficultés à distinguer les objets cliquables des objets non cliquables. Les utilisateurs se sont plaints du fait que les objets qui semblaient statiques étaient en réalité cliquables. En conséquence, la mission principale de l’entreprise – aider les utilisateurs à interpréter correctement le système – a échoué.

Apple est une autre entreprise souvent associée au design plat. Ils se sont éloignés des éléments de conception skeuomorphiques du système d'exploitation mobile iOS 7, sorti en 2013. Cette fois, la transition a été un peu mieux accueillie, principalement du fait que l'entreprise n'a pas essayé de mettre à jour complètement le concept de l'interface utilisateur, mais a simplement ajouté quelques modifications vers un design plat. Cela a permis aux utilisateurs d'utiliser le produit en s'appuyant sur leur expérience antérieure avec les systèmes d'exploitation et les sites Web.

Conception matérielle

Soyons clairs dès maintenant : le design matériel est plus un produit de marque qu'une tendance de design spontanée qui a été largement acceptée. C’est ce qui le distingue principalement de son design plat.

En qualifiant un matériau de design de « marque », j'entends qu'il contient tout un ensemble de recommandations et de principes clairement définis que tout designer qui se respecte suit. La raison pour laquelle Google a introduit son Material Design est assez évidente : il était nécessaire d'unifier le design afin que les applications aient la même apparence sur tous les appareils Android.

Bien que très fonctionnel, le design plat est encore considéré comme difficile à comprendre. La vérité est que les objets plats sur l’écran peuvent dérouter les utilisateurs (surtout ceux qui ne sont pas habitués à utiliser les interfaces mobiles et Web). Par conséquent, la conception matérielle tente de ramener les éléments du skeuomorphisme, mais sous une forme grandement simplifiée. Les images semblent plates, surtout en ce qui concerne les couleurs, mais restent multidimensionnelles grâce à la présence de l'axe Z.

En d'autres termes, la conception matérielle peut être qualifiée de version améliorée du design plat avec des éléments de skeuomorphisme - animation, ombres et calques. De cette façon, vous pouvez rendre le produit plus intuitif en termes de navigation et éviter une complexité inutile dans le style général.

Avantages et inconvénients du design plat

Laissons derrière nous l'histoire de l'évolution des styles et passons à quelque chose de plus significatif : nous énumérerons les forces et les faiblesses du flat design.

• Minimalisme et style
• Intuition. Il vous sera plus facile de transmettre votre idée aux utilisateurs.
• Gain de temps et de ressources. Les pages se chargent beaucoup plus rapidement avec moins de consommation de bande passante.
• Concentrez-vous sur le contenu. L'interface est exempte de détails inutiles qui peuvent détourner l'attention d'informations vraiment précieuses.
• S'adapte également à différents appareils, qu'il s'agisse d'un navigateur PC ou d'un smartphone.
• Accélère le processus de développement de conception de sites Web ou d’applications en éliminant les touches de conception inutiles.

• Dans certains cas, cela semble trop simple. Il convient de considérer qu’à un certain moment, un design peut passer du simple au plus expressif.
• Cela peut limiter le choix des produits en matière de formes et de couleurs.
• Manque d'intuitivité. Les utilisateurs ayant une expérience numérique limitée peuvent ne pas comprendre le but de certains éléments de l'interface. Bien que dans certains cas, cela puisse arriver à un utilisateur expérimenté. Par conséquent, nous pouvons dire que le design plat n’est pas adapté aux solutions Web et mobiles complexes.
• Ubiquité. Parfois, il peut être extrêmement difficile de se démarquer de la foule en utilisant un design plat.

Avantages et inconvénients de la conception matérielle

Qu’en est-il de l’opposant au flat design ?

• Style minimaliste.
• Assez intuitif à un niveau intuitif. La conception matérielle sera tout aussi facile à percevoir pour les utilisateurs expérimentés que pour les débutants.
• Skeuomorphisme modéré. Tout semble plus réaliste grâce à l'utilisation de l'axe Z (un concept unique de Google).
• Il existe un ensemble de manuels constamment mis à jour. Par conséquent, tout concepteur peut toujours s'adresser à eux si des difficultés surviennent au cours du processus de travail.
• L'animation pour les solutions Web est encouragée. Inutile de vous rappeler à quel point les gens aiment le mouvement. De plus, l'animation permet de rendre l'interface plus claire et intuitive.

• A un propriétaire (société Google). Par conséquent, toutes les questions et suggestions d’amélioration doivent être adressées au propriétaire.
• En raison de l’axe Z, le processus de conception peut prendre plus de temps.
• Les éléments animés nécessitent plus de ressources.
• Le respect strict des directives peut limiter l’originalité d’une conception.

Résumons-le

En fait, l’une des approches de conception envisagées ne doit pas être considérée comme ayant un net avantage sur l’autre, car les styles plats et matériels vont de pair. Ils sont tous deux incroyablement populaires et tous deux sont dépourvus de réalisme excessif. Le design matériel est le successeur du design plat, tandis que le design plat lui-même était une réaction à des solutions trop lourdes et trop réalistes. Le design matériel a ajouté quelque chose dont le design plat a toujours essayé de s'éloigner : un peu de skeuomorphisme. Même si une chose différera toujours entre ces approches : le Material Design est un produit exclusif de Google, et le Flat Design est le résultat de la fusion de plusieurs pratiques de conception qui visent avant tout la simplicité globale.

En vérité, le design plat a beaucoup évolué ces dernières années, passant d'un style complètement « plat » à un style « semi-plat ». Il permet désormais d'utiliser des calques et des ombres subtiles pour permettre aux objets d'apparaître plus profonds qu'ils ne l'étaient auparavant. Ainsi, vous et moi sommes d’heureux contemporains du flat design 2.0.

Enfin, rien ne vous empêche d’essayer de combiner ces deux approches pour créer un produit véritablement fonctionnel et convivial. Alors, inspirez-vous des gourous du design plat et matériel et mettez-vous au travail !

Si vous trouvez une faute de frappe, mettez-la en surbrillance et appuyez sur Ctrl + Entrée ! Pour nous contacter, vous pouvez utiliser .