Plat - design (design plat) est un style populaire dans la conception de sites Web et d'interfaces, ainsi que de systèmes d'exploitation, qui se caractérise par la simplicité, la sophistication et le minimalisme. Le design plat a commencé à gagner en popularité en 2010, à l'opposé du skeuomorphisme.
Skeuomorphisme - un ornement physique ou un élément de design copié à partir de la forme d'un autre objet, mais fabriqué à partir d'autres matériaux ou par d'autres méthodes. Les exemples incluent la poterie décorée de rivets d'imitation pour ressembler à des pots similaires en métal, ou un calendrier informatique qui simule apparence agrafage des pages d'un calendrier de bureau papier (définition Wikipédia).
La vulgarisation du style plat dans la conception a été facilitée par la sortie du système d'exploitation Windows 8 de Microsoft dans le style Metro, ainsi que d'iOS 7, dans lequel pomme choisit également un style plat. C'est après cela que commence la véritable ère du flat design. Bientôt, grand services de recherche et applications - Google, Youtube, il existe de nombreux sites qui utilisent les principes du style plat dans leur conception. À dernières années flat design est un leader dans les tendances mondiales de conception de sites Web.
Avantages du design plat
- Praticité - l'utilisation du design plat vous permet de minimiser le nombre de styles, de scripts et d'animations, ce qui permet au site de se charger plus rapidement.
- Facile à adapter - Le design plat est assez facile pour s'adapter à différentes résolutions d'écran.
- La commodité d'utilisation - grâce au style simplifié, il est plus facile pour les utilisateurs de percevoir les informations sur le site.
- beauté - l'impartialité externe et les conceptions simples vous permettent de vous concentrer sur les conceptions qui attirent vraiment.
5 principes de conception de site Web plat
Le design plat n'est pas du tout ennuyeux, comme cela peut paraître à première vue. En raison de leur pureté et de leur sophistication, les solutions de conception peuvent être élégantes et belles, sans bruit inutile, ce qui vous permet de vous concentrer sur votre produit ou service.
1 - Utilisation d'objets 2D
À design plat l'utilisation d'éléments qui ajoutent de la profondeur et du volume à l'objet est exclue: ombres, dégradés, reflets, textures, réflexes, animation. Lors de la représentation d'un objet, seuls ses contours sont affichés.
2 - Icônes et objets simples
L'utilisation d'icônes plates et de formes monosyllabiques avec des contours clairs et une seule couleur permet de garder le design aussi simple et léger que possible. Les commandes deviennent intuitives pour l'utilisateur et stimulent l'interaction.
3 - Polices simples pour concevoir le style
Une grande attention est accordée à la typographie et aux polices en design plat. L'italique n'est pas utilisé ici, la police s'intègre harmonieusement dans la conception du site, non seulement dans le contenu, mais aussi dans la navigation. Même dans les types de polices pour le site, un style minimaliste est encouragé.
4 - Jeu de couleurs
Le design plat contient plusieurs couleurs primaires, qui excluent l'utilisation de transitions et de dégradés lisses, mais peuvent être brillantes et contrastées les unes par rapport aux autres.
5 - Minimalisme
La conception à plat implique l'utilisation de la visualisation des éléments, en utilisant toute la largeur de l'écran et en minimisant en même temps les informations.
Il existe un design presque plat. C'est l'un des concepts de design plat qui utilise des éléments simples et un espace bidimensionnel. Un exemple de ceci serait une photo de haute qualité qui est floue en arrière-plan ou assombrie. Cela vous permet de créer de la profondeur et de la perspective sur le sujet.
Exemples de design plat
Sur Internet, y compris dans le segment biélorusse, vous pouvez trouver de nombreux exemples de développement de sites au design plat dans différents sujets, y compris des ressources d'actualités, des portails et même des magasins en ligne.
Récemment, une direction de conception telle que FLAT - design ou design plat - est devenue populaire.
Les utilisateurs de Windows 8 et versions ultérieures connaissent déjà la conception FLAT, car la première chose qu'ils rencontrent au démarrage du système est cet écran.
L'apparence même de FLAT - le design est dû à la propagation applications mobiles... Et je pense que cela est dû au fait que les objets de conception FLAT sont créés à l'aide d'objets vectoriels et qu'ils sont donc plus faciles à adapter à diverses plates-formes de gadgets.
FLAT - la conception présente les caractéristiques suivantes:
Rejet total ou partiel des dégradés, des textures complexes et des ombres , ce dont je suis personnellement très heureux. Je n'ai rien à redire sur les ombres et j'aime les utiliser moi-même, mais laissez les problèmes séculaires d'affichage du dégradé disparaître.
La typographie, la géométrie est au premier plan. Surtout en matière de conception Web.
Harmony et. La conception utilise un nombre limité de couleurs. Voici un exemple de la palette de design FLAT populaire.
Utilisation d'icônes informatives créatives.
Comme je l'ai dit, la conception FLAT est devenue très populaire dans les applications mobiles, car sa principale caractéristique est la facilité de mise en page et l'adaptabilité. Le design FLAT est également largement utilisé en infographie, car il est basé sur la perception harmonieuse de l'information grâce à l'utilisation de techniques constructives de typographie et de coloristique.
À une certaine époque, la tendance la plus populaire dans la conception de sites Web était le Web 2.0. Le design FLAT a maintenant pris sa place. La mode a tendance à revenir à l'ancien bien oublié pour en faire du nouveau. Qui sait quand FLAT - le design se démodera, mais pour l'instant profitez de la simplicité, de l'harmonie et du contenu informatif de la tendance actuelle. À propos, le design plat était déjà populaire dans les années 80, mais c'était dû à caractéristiques techniques, incapacité d'afficher les ombres et les dégradés. Et maintenant, la plupart des grandes entreprises informatiques sont passées à la conception plate.
Eh bien, nous nous adapterons à l'évolution du monde. Dans le prochain article, je vais vous montrer comment créer des icônes de style FLAT à l'aide de formes simples dans Photoshop.
Si vous êtes intéressé par mes publications, alors je suggère de vous tenir au courant dernières mises à jour sur le site du site.
(Visité 2333 fois, 1 visites aujourd'hui)
Dans cet article, je vais vous présenter le design plat. Vous avez probablement déjà entendu quelque chose à ce sujet, car l'appartement est devenu l'une des principales tendances du Web au cours des dernières années.
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é, dynamique et réactif.
tu peux trouver bons exemples design plat sur http://market.envato.com/. Il existe des tonnes de mises en page, d'icônes et de modèles pour vous donner une solide compréhension de ce à quoi ressemble le design moderne. .
1. Qu'est-ce que le design plat?
Design plat - style moderne interface utilisateurainsi que la conception graphique, caractérisée par le minimalisme. Le design plat se caractérise par l'utilisation d'un minimum d'éléments et l'absence d'effets divers 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 a l'apparence d'un autre, c'est-à-dire lorsque divers éléments d'interface sont copiés à partir d'objets réels - traduction approximative.) Cependant, il vaut la peine 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, flat aide à garder l'utilisateur concentré 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 plus facile à utiliser.
2. Un peu d'histoire
Le design plat est connu pour avoir existé bien avant qu'il ne devienne une tendance mondiale sur le Web. Le design plat était très populaire dans les années 1980 en raison du fait que la technique n'était pas encore suffisamment développée pour supporter des effets, des textures et des ombres complexes. Cependant, même dans ce cas, la conception s'efforçait de créer un squelette, essayant de rendre les éléments d'interface aussi réalistes que possible.
Le design plat, dans la forme dans laquelle nous le voyons maintenant, a commencé à gagner en popularité après que Microsoft a commencé à publier des produits dans le style dit métro. Metro est une conception d'interface utilisateur de Microsoft qui surprend par son style et sa simplicité.
En 2010 Microsoft a publié Téléphone Windows 7, qui utilisait un design plat avec des bords nets et des graphiques simples hérités d'un premier produitMicrosoft (Zune). Plus tard, inspiré par son succès, Microsoft a publié système opérateur Windows 8, basé sur le même style Metro plat.
Après tout, le design plat a culminé en 2013 lorsque Apple a publié iOS 7 présentant fondamentalement nouveau design avec des éléments d'interface utilisateur entièrement repensés, y compris des icônes et des polices. Apple a créé principes visuels de l'interface utilisateur et de la conception d'icônes .
Peu de temps après, Google a également commencé à utiliser le style plat dans ses applications et ses pages Web, en l'appelant Conception matérielle ... Google a même une section entière dédiée à ce style, y compris une description des objectifs de la conception Web, ses principes et des directives 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 Web, rendant les sites Web, les applications et les éléments d'interface élégants, propres et élégants.
Ainsi, il existe trois exemples mondiaux 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
Conception matérielle de Google
3. N'oubliez pas la propreté
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 design plat, les objets sont représentés de manière très simplifiée et stylisée.
Et parfois même une simple silhouette ou les contours d'un objet sont utilisés, c'est-à-dire juste assez pour rendre l'objet reconnaissable, mais pas le surcharger avec des détails mineurs.
Le minimalisme est devenu une tendance mondiale ces jours-ci: la simplicité des formes et l'utilisation d'arêtes vives créent un design épuré et agréable. Les formulaires simples sont plus faciles à comprendre et à comprendre. Cela garde le design minimaliste, propre, sans lui donner un aspect occupé et désordonné.
4. Perfection
Sachez que lorsqu'il s'agit de créer des icônes plates et des éléments d'interface utilisateur, vous devez les rendre nets, nets et parfaits au pixel près. autant que possible. De plus, cela s'applique aux graphiques raster et vectoriels.
Le programme Adobe Photoshop tout est clair ici: ça marche avec graphiques rasterqui est basé sur les pixels.
Concernant le programme Adobe Illustrator, puis il utilise des graphiques vectoriels, constitués de courbes et de lignes appelées vecteurs, qui sont définies par des formules mathématiques.
Il était une fois, Adobe Illustrator n'était pas beaucoup programme pratique pour créer des graphismes au pixel près. La bonne nouvelle est que dernières versions Illustrateur d'acier super 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 les paramètres et vous permet d'adapter la grille à vos besoins, d'aligner des objets et d'utiliser différents types claquer. Cela facilite la création du design parfait qui semble propre 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 design plat, en plus des ombres, est l'utilisation de la couleur. La plupart des couleurs utilisées par le design plat dans leurs éléments ne sont constituées que de quelques couleurs de base.
La couleur dans un design plat se distingue par sa luminosité, sa saturation et sa richesse.Le jeu de couleurs plat ne se limite pas à quelques couleurs spéciales; il 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 rétro dans une palette rétro sophistiquée.
Disons que vous êtes un concepteur d'interface et que vous maîtrisez les palettes de couleurs, vous expérimentez une barre de couleurs dans programmes Photoshop et Illustartor, mélangeant les couleurs à votre guise. Cependant, ce processus est assez compliqué et nécessite beaucoup d'intuition, d'expérience et de compétences. Voici quelques outils qui peuvent vous aider à créer votre propre palette de couleurs.
Certains d'entre eux conviennent à toutes sortes de design et d'illustration, pas seulement à un design plat. Par exemple, Adobe Color CC, mieux connu sous le nom de Cooler. Aujourd'hui, il est disponible à la fois sur le site Web et directement via les produits Adobe. Le Cooler est un outil très flexible qui vous permet de créer votre propre palette de couleurs ou de choisir parmi des palettes personnalisées de la bibliothèque.
Coolors est un autre générateur de palette de couleurs simple et facile à utiliser. Appuyez simplement sur la barre d'espace et le programme générera une palette de couleurs, vous pourrez corriger les couleurs, il y a aussi une fonction d'exportation.
Il existe quelques autres services similaires avec des palettes personnalisées qui pourraient vous être utiles. Cependant, il existe un outil spécialement créé pour la conception à plat: FlatUIColors.com de Designmodo - un service avec un ensemble de couleurs «plates», très pratique à utiliser. Ce site est devenu très populaire auprès des concepteurs à la recherche de bonnes combinaisons de couleurs pour des designs parfaits. 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. Longues ombres
Comme mentionné ci-dessus, le design plat se caractérise par sa simplicité, beaucoup d'espace libre - c'est pourquoi flat 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 ont certaines caractéristiques typiques qui rendent cet effet reconnaissable, à savoir l'inclinaison de 45 degrés et grande taille (L'ombre peut être plusieurs fois plus longue que le sujet lui-même. Par conséquent, de longues ombres donnent à l'appartement un effet de profondeur.
Cet effet donne à l'objet un aspect plus tridimensionnel, tout en le conservant dans un contexte de conception plate.
7. Utilisation des polices
La typographie joue un grand rôle dans le design plat. Souvent, le texte devient l'élément principal de la composition.
Flat utilise généralement des polices de caractères simples qui rendent la conception entière dans son ensemble propre et lisible. Vous pouvez trouver de nombreuses polices gratuites dans Adobe Typekit si vous utilisez des produits Adobe. Font Squirrel a également de nombreuses bonnes polices gratuites. Mais n'oubliez pas de lire la licence si vous comptez utiliser la police dans le commerce.
Le plus souvent dans un 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 précaution, rappelez-vous qu'elles doivent mettre en valeur et correspondre au motif, et non apparaître comme un élément distinct. Cela ne signifie pas que vous ne pouvez pas utiliser de polices complexes avec empattement ou manuscrites. Gardez-le au minimum et gardez tout en équilibre. Cependant, flat utilise encore plus souvent des polices sans empattement, car elles semblent plus strictes et soignées.
8. Avantages et inconvénients du design plat
Malgré le fait que le design plat soit devenu si populaire en raison de ses nombreux avantages, il présente toujours des inconvénients auxquels les concepteurs sont confrontés lorsqu'ils utilisent ce style. Jetons un coup d'œil aux avantages et aux inconvénients.
avantages
Popularité
Le design plat est devenu une tendance, recueillant de plus en plus de retours positifs / de la part des designers et des concepteurs Web, et il ne semble pas perdre de terrain. Au contraire, il se propage de plus en plus, acquiert de nouvelles formes et fonctionnalités, devient de plus en plus créatif.
Simplicité
Le design plat est simple, minimaliste et propre. Flat on the Web 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: conception épurée avec gros boutons fait usage appareils mobiles parfait.
Luminosité
La couleur est un autre avantage intéressant dans le design plat. Les couleurs vives et saturées semblent attrayantes et propres, et l'absence de dégradés rend le design élégant. De plus, ces couleurs pures rendent le design plus positif, présentable et plat crée la bonne ambiance.
désavantages
L'appartement a bien d'autres avantages, mais aucun design n'est parfait et nous ne pouvons l'idéaliser. Voici quelques-uns des inconvénients du design plat que nous devons mentionner:
Absence de réponse
Parfois, l'absence de détails ou d'éléments visuels importants 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 trouvent pas un appartement confortable, car il peut être difficile de trouver des éléments sur une page Web sur lesquels vous devez cliquer ou appuyer sur l'écran. téléphone portablecar ils ne sont pas interactifs.
Problèmes d'impression
Comme mentionné précédemment, toutes les polices ne peuvent pas s'adapter à un design plat. Parfois, une police de caractères aussi riche et aux arêtes vives semble vraiment équilibrée et élégante. Cependant, si la police n'est pas choisie correctement, elle peut détruire la conception entière. Vous devez vraiment avoir une bonne idée des polices qui conviennent pour les polices plates 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, flat peut paraître trop simple et trop froid. Son minimalisme peut également être son principal inconvénient - d'autres modèles plats finissent par avoir exactement le même aspect que le vôtre. Par conséquent, il est très difficile de rendre vos icônes ou pages Web différentes du design de quelqu'un d'autre car vous utilisez les mêmes formes simplifiées, des palettes de couleurs limitées et des polices similaires. En conséquence, le design plat peut devenir ennuyeux avec le temps.
9. Futures tendances du design plat
Cela ne veut pas dire que le flat design s'est complètement formé et s'est arrêté à sa manière, c'est peut-être à cause de ses défauts, mentionnés ci-dessus, que le flat a tendance à se développer et à changer, à acquérir de nouvelles fonctionnalités et à améliorer l'expressivité visuelle.
Si vous regardez de près le dernier exemple de design plat, vous remarquerez peut-être qu'il progressivement de ses outils rigoureux et commence à ajouter des effets subtils tels que des dégradés, des ombres, des éclairages et autres effets visuels.
Ces petites choses donnent au design plat une certaine profondeur sans surcharger les détails comme le font les conceptions skeuomorphes. Ces améliorations mineures rendent le plat plus réactif et utilisable, ainsi que lui apporter un nouveau look, le rendant plus flexible et polyvalent.
Ainsi, l'appartement ne perd pas ses caractéristiques, mais il devient plus intéressant et flexible.- ça va vraiment mieux.
conclusions
Nous avons donc discuté de certains 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, insisté sur les avantages et les inconvénients de l'appartement et appris quelques-uns des principes fondamentaux de la création d'un bon design.
J'espère que vous avez appris de nouvelles informations de cet article, ou du moins que vous l'avez trouvé intéressant. Vous devez essayer de créer un design plat si vous ne l'avez pas déjà fait.
Après tout, que faut-il mentionner d'autre sur le design plat?
Si vous aimez vraiment le plat avec ses bords nets, ses couleurs juteuses et ses polices nettes, sa pureté et son minimalisme, alors allez-y!
C'est tendance, mais comme pour tout style graphique, ne vous limitez pas à une seule technique. Si flat est tendance, cela ne signifie pas que vous ne pouvez pas utiliser d'autres styles dans votre projet. Le skeuomorphisme, avec ses petits détails et textures, peut également devenir bonne décision... Surtout, rappelez-vous que le design est différent pour chaque projet, il doit exprimer son esprit, son but, son essence, tout en restant pratique et fonctionnel. Vers l'avant!
Dans cet article, je vais vous présenter le design plat. Vous avez probablement déjà entendu quelque chose à ce sujet, car l'appartement est devenu l'une des principales tendances du Web au cours des dernières années.
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é, dynamique 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 pour vous donner une solide compréhension de ce à 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 d'effets divers 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 a l'apparence d'un autre, c'est-à-dire lorsque divers éléments d'interface sont copiés à partir d'objets réels - traduction approximative.) Cependant, il vaut la peine 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, flat aide à garder l'utilisateur concentré 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 plus facile à utiliser.
2. Un peu d'histoire
Le design plat est connu pour avoir existé bien avant qu'il ne devienne une tendance mondiale sur le Web. Le design plat était très populaire dans les années 1980 en raison du fait que la technique n'était pas encore suffisamment développée pour supporter des effets, des textures et des ombres complexes. Cependant, même dans ce cas, la conception s'efforçait de créer un squelette, essayant de rendre les éléments d'interface aussi réalistes que possible.
Le design plat, dans la forme dans laquelle nous le voyons maintenant, a commencé à gagner en popularité après que Microsoft a commencé à publier des produits dans le style dit métro. Metro est une conception d'interface utilisateur de Microsoft qui surprend 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 d'un premier produit.Microsoft (Zune). Plus tard, inspiré par son succès, Microsoft a publié un système Windows 8 basé sur le même style de métro plat.
Après tout, le design plat a culminé en 2013 lorsque Apple a publié iOS 7, avec un tout nouveau design avec des éléments d'interface utilisateur entièrement repensés, y compris des icônes et des polices. Apple a créé principes visuels de l'interface utilisateur et de la conception d'icônes .
Peu de temps après, Google a également commencé à utiliser le style plat dans ses applications et ses pages Web, en l'appelant Conception matérielle ... Google a même une section entière dédiée à ce style, y compris une description des objectifs de la conception Web, ses principes et des directives 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 Web, rendant les sites Web, les applications et les éléments d'interface élégants, propres et élégants.
Ainsi, il existe trois exemples mondiaux 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
Conception matérielle de Google
3. N'oubliez pas la propreté
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 design plat, les objets sont représentés de manière très simplifiée et stylisée.
Et parfois même une simple silhouette ou les contours d'un objet sont utilisés, c'est-à-dire juste assez pour rendre l'objet reconnaissable, mais pas le surcharger avec des détails mineurs.
Le minimalisme est devenu une tendance mondiale ces jours-ci: la simplicité des formes et l'utilisation d'arêtes vives créent un design épuré et agréable. Les formulaires simples sont plus faciles à comprendre et à comprendre. Cela garde le design minimaliste, propre, sans lui donner un aspect occupé et désordonné.
4. Perfection
Sachez que lorsqu'il s'agit de créer des icônes plates et des éléments d'interface utilisateur, vous devez les rendre nets, nets et parfaits au pixel près. autant que possible. De plus, cela s'applique aux graphiques raster et vectoriels.
Tout est clair avec Adobe Photoshop: il fonctionne avec des graphiques bitmap 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 donné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 unies et des grilles. Adobe Illustrator est très flexible dans les paramètres et vous permet d'adapter la grille à vos besoins, d'aligner des objets et d'utiliser différents types d'accrochage. Cela facilite la création d'un design parfait qui a l'air propre 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 design plat, en plus des ombres, est l'utilisation de la couleur. La plupart des couleurs utilisées par le design plat dans leurs éléments ne sont constituées que de quelques couleurs de base.
La couleur dans un design plat se distingue par sa luminosité, sa saturation et sa richesse.Le jeu de couleurs plat ne se limite pas à quelques couleurs spéciales; il 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 rétro dans une palette rétro sophistiquée.
Disons que vous êtes un concepteur d'interface avec une bonne compréhension des palettes de couleurs et que vous expérimentez la barre de couleurs dans Photoshop et Illustartor, en mélangeant les couleurs à votre guise. Cependant, ce processus est assez compliqué et nécessite beaucoup d'intuition, d'expérience et de compétences. Voici quelques outils qui peuvent vous aider à créer votre propre palette de couleurs.
Certains d'entre eux conviennent à toutes sortes de design et d'illustration, pas seulement à un design plat. Par exemple, Adobe Color CC, mieux connu sous le nom de Cooler. Aujourd'hui, il est disponible à la fois sur le site Web et directement via les produits Adobe. Le Cooler est un outil très flexible qui vous permet de créer votre propre palette de couleurs ou de choisir parmi des palettes personnalisées de la bibliothèque.
Coolors est un autre générateur de palette de couleurs simple et facile à utiliser. Appuyez simplement sur la barre d'espace et le programme générera une palette de couleurs, vous pourrez corriger les couleurs, il y a aussi une fonction d'exportation.
Il existe quelques autres services similaires avec des palettes personnalisées qui pourraient vous être utiles. Cependant, il existe un outil spécialement créé pour la conception à plat: FlatUIColors.com de Designmodo - un service avec un ensemble de couleurs «plates», très pratique à utiliser. Ce site est devenu très populaire auprès des concepteurs à la recherche de bonnes combinaisons de couleurs pour des designs parfaits. 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. Longues ombres
Comme mentionné ci-dessus, le design plat se caractérise par sa simplicité, beaucoup d'espace libre - c'est pourquoi flat 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 ont des 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. Par conséquent, de longues ombres donnent un certain effet de profondeur au plat.
Cet effet donne à l'objet un aspect plus tridimensionnel, tout en le conservant dans un contexte de conception plate.
7. Utilisation des polices
La typographie joue un grand rôle dans le design plat. Souvent, le texte devient l'élément principal de la composition.
Flat utilise généralement des polices de caractères simples qui rendent la conception entière dans son ensemble propre et lisible. Vous pouvez trouver de nombreuses polices gratuites dans Adobe Typekit si vous utilisez des produits Adobe. Font Squirrel a également de nombreuses bonnes polices gratuites. Mais n'oubliez pas de lire la licence si vous comptez utiliser la police dans le commerce.
Le plus souvent dans un 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 précaution, rappelez-vous qu'elles doivent mettre en valeur et correspondre au motif, et non apparaître comme un élément distinct. Cela ne signifie pas que vous ne pouvez pas utiliser de polices complexes avec empattement ou manuscrites. Gardez-le au minimum et gardez tout en équilibre. Cependant, flat utilise encore plus souvent des polices sans empattement, car elles semblent plus strictes et soignées.
8. Avantages et inconvénients du design plat
Malgré le fait que le design plat soit devenu si populaire en raison de ses nombreux avantages, il présente toujours des inconvénients auxquels les concepteurs sont confrontés lorsqu'ils utilisent ce style. Jetons un coup d'œil aux avantages et aux inconvénients.
avantages
Popularité
Le design plat est devenu une tendance, recueillant de plus en plus de retours positifs / de la part des designers et des concepteurs Web, et il ne semble pas perdre de terrain. Au contraire, il se propage de plus en plus, acquiert de nouvelles formes et fonctionnalités, devient de plus en plus créatif.
Simplicité
Le design plat est simple, minimaliste et propre. Flat on the Web 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: la conception épurée avec de gros boutons rend l'expérience mobile parfaite.
Luminosité
La couleur est un autre avantage intéressant dans le design plat. Les couleurs vives et saturées semblent attrayantes et propres, et l'absence de dégradés rend le design élégant. De plus, ces couleurs pures rendent le design plus positif, présentable et plat crée la bonne ambiance.
désavantages
L'appartement a bien d'autres avantages, mais aucun design n'est parfait et nous ne pouvons l'idéaliser. Voici quelques-uns des inconvénients du design plat que nous devons mentionner:
Absence de réponse
Parfois, l'absence de détails ou d'éléments visuels importants 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 trouvent pas l'appartement confortable, car il peut être difficile de trouver des éléments sur une page Web sur lesquels vous devez cliquer ou appuyer sur l'écran de votre téléphone portable car ils ne sont pas interactifs.
Problèmes d'impression
Comme mentionné précédemment, toutes les polices ne peuvent pas s'adapter à un design plat. Parfois, une police de caractères aussi riche et aux arêtes vives semble vraiment équilibrée et élégante. Cependant, si la police n'est pas choisie correctement, elle peut détruire la conception entière. Vous devez vraiment avoir une bonne idée des polices qui conviennent pour les polices plates 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, flat peut paraître trop simple et trop froid. Son minimalisme peut également être son principal inconvénient - d'autres modèles plats finissent par avoir exactement le même aspect que le vôtre. Par conséquent, il est très difficile de rendre vos icônes ou pages Web différentes du design de quelqu'un d'autre car vous utilisez les mêmes formes simplifiées, des palettes de couleurs limitées et des polices similaires. En conséquence, le design plat peut devenir ennuyeux avec le temps.
9. Futures tendances du design plat
Cela ne veut pas dire que le flat design s'est complètement formé et s'est arrêté à sa manière, c'est peut-être à cause de ses défauts, mentionnés ci-dessus, que le flat a tendance à se développer et à changer, à acquérir de nouvelles fonctionnalités et à améliorer l'expressivité visuelle.
Si vous regardez de près le dernier exemple de design plat, vous remarquerez peut-être qu'il progressivement de ses outils rigoureux et commence à ajouter des effets subtils tels que des dégradés, des ombres, des éclairages et autres effets visuels.
Ces petites choses donnent au design plat une certaine profondeur sans surcharger les détails comme le font les conceptions skeuomorphes. Ces améliorations mineures rendent le plat plus réactif et utilisable, ainsi que lui apporter un nouveau look, le rendant plus flexible et polyvalent.
Ainsi, l'appartement ne perd pas ses caractéristiques, mais il devient plus intéressant et flexible.- ça va vraiment mieux.
conclusions
Nous avons donc discuté de certains 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, insisté sur les avantages et les inconvénients de l'appartement et appris quelques-uns des principes fondamentaux de la création d'un bon design.
J'espère que vous avez appris de nouvelles informations de cet article, ou du moins que vous l'avez trouvé intéressant. Vous devez essayer de créer un design plat si vous ne l'avez pas déjà fait.
Après tout, que faut-il mentionner d'autre sur le design plat?
Si vous aimez vraiment le plat avec ses bords nets, ses couleurs juteuses et ses polices nettes, sa pureté et son minimalisme, alors allez-y!
C'est tendance, mais comme pour tout autre style graphique, ne vous limitez pas à une seule technique. Si flat est dans la tendance, cela ne signifie pas 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. Surtout, rappelez-vous que le design est différent pour chaque projet, il doit exprimer son esprit, son but, son essence, tout en restant pratique et fonctionnel. Vers l'avant!
Le design plat est direction clé en design pour les années à venir, nous vous invitons donc à mieux le connaître et à apprendre les 5 principes fondamentaux qui en ont formé la base.
Présentation du design plat
En russe, le design plat se traduit par «design plat», et il est devenu un favori absolu après présentations Apple OS IOS. Une approche minimaliste de la conception pour la convivialité était au premier plan. Le pari est fait sur le confort de l'utilisateur. Il s'agit d'une protestation prononcée contre le «squerforming» (visualisation d'objets, comme dans la réalité). Le choix s'est porté sur des solutions esthétiques plus simplifiées et en même temps simples. Les utilisateurs qui en ont assez des visualisations réalistes ont accueilli cette direction avec enthousiasme, et de plus en plus de projets Web passent à ce format.
Je voudrais noter que «plat» ne veut pas dire «ennuyeux». Solutions design plat ils peuvent être beaux, ils sont plus raffinés, purs, sans redondance de quoi que ce soit, se transformant en «îlot de tranquillité». Ils rendent enfin le contenu compréhensible. Il reste à apprendre les principes de base pour les appliquer dans la pratique.
Principe n ° 1: à bas les effets inutilesLe design «plat» ne cherche pas à véhiculer des volumes, il est donc basé sur une visualisation bidimensionnelle. Cela signifie que vous ne verrez pas d'ombres, de réflexes ou de reflets avec des textures (à l'exception des ombres longues). Seul le transfert des contours, et rien de plus.
Il est recommandé d'utiliser des figures monosyllabiques dans la conception, ainsi que de suivre la clarté des contours, qui est conçue pour souligner la légèreté et l'apesanteur. De plus, de tels éléments laconiques imitent bien le capteur, générant une envie d'interagir avec l'objet (un appel à appuyer, toucher). Cependant, la simplicité des éléments n'est pas égale à la simplicité de la conception dans son ensemble - elle ne s'applique qu'au contour. En conséquence, tout ce que l'utilisateur voit est clair pour lui et il peut facilement l'utiliser.
Le design plat encourage une extrême prudence lors de l'utilisation des polices. Autrement dit, leur caractère est obligé de compléter le schéma de conception, sans le contredire. De plus, dans le design plat, la police est également un élément clé de la navigation.
Non seulement le type, mais aussi la couleur sont une partie essentielle du design plat. La grande majorité des palettes sont basées sur 2-3 couleurs, bien que, bien sûr, il y ait des exceptions. Habituellement juteux et lumineux, mais des couleurs pures sont choisies. Comme indiqué, il n'y a pas de dégradés ou de transitions inutiles.
Le design plat est un exemple frappant d'une tendance mondiale telle que le minimalisme. Les concepteurs abandonnent les «cloches et sifflets» inutiles, s'éloignent des approches complexes et implicites de la visualisation, qui donnent des résultats sous la forme d'une activité de l'utilisateur.
Plat ou presque plat? Nous recherchons un compromis!
En conclusion, je voudrais noter qu'aujourd'hui il existe une synergie entre la conception plate et non plane. Il est sur la conception "presque plate". C'est l'application la plus courante du concept décrit, lorsque, avec des éléments simples et concis et un espace bidimensionnel, les concepteurs utilisent 1 à 2 techniques pour la profondeur et la perspective.
La tendance de 2017 était également le Semi Flat Design - un design semi-plat. Influencé par le Material Design, il est devenu un peu plus spatial. Des ombres claires apparaissent qui rendent le dessin semi-plat. Le design plat est toujours d'actualité, en raison des ombres, il est devenu plus profond et plus complexe, mais le concept de base n'est pas violé.
