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 approximative.) , 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 occupé 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 de 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 des polices complexes avec empattement ou 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é. 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 : 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 devez 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 : le design plat 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, rendant l'appartement 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 du design plat et avons appris certains des principes fondamentaux pour créer un bon design.
J'espère que vous avez obtenu de nouvelles informations 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!
Récemment, un style spécifique dans la conception de sites Web et d'interfaces utilisateur a acquis une énorme popularité, qui, en raison de la stylisation de ses éléments, est appelé Flat.
Si vous regardez un site Web réalisé selon les règles Flat, vous ne verrez aucune transition de dégradé, aucune ombre, pas le moindre soupçon de volume ou de texture. Les principes de base du style plat sont la simplicité, la concision et le minimalisme. Les principales caractéristiques distinctives sont les éléments sur lesquels vous pouvez vous concentrer : couleurs vives inhabituelles, typographie non standard, primitives graphiques.
Aujourd'hui, de plus en plus de designers utilisent cette tendance dans leur travail, mais le style Flat a gagné en popularité avec la diffusion des systèmes d'exploitation mobiles modernes Windows Phone et iOS 7, car ils suivent cette tendance, bien qu'ils n'y adhèrent pas. complètement.
Notre entreprise a déjà de l'expérience dans la création de sites Web de style Flat, et nous serons heureux de vous aider à créer un site Web plat !
Dans cet article, nous mettrons en évidence les principes de base du flat design que vous devez suivre si vous souhaitez utiliser le flat comme style principal de votre projet.
Ci-dessous, nous analyserons et donnerons des exemples de certains sites qui utilisent le style plat.
1. Supprimez tous les effets
Le principe de base du flat design est la création d’une image bidimensionnelle déjà plate en elle-même. Dans le même temps, vous devez vous débarrasser de tous les éléments qui peuvent ajouter au moins une certaine profondeur à l'image : dégradés, transitions douces, ombres, biseaux, volume, textures, etc. Tous les éléments de l'image ont des bords nets et ne ressortent pas ou n'ont pas de profondeur par rapport aux autres éléments de l'image.
Dans le design plat, vous ne trouverez pas d'éléments qui tentent de paraître réalistes (skeuomorphisme), d'animation 3D, d'icônes réalistes, etc. Cependant, le design lui-même essaie de rester similaire au design traditionnel, mais les étiquettes, les boutons et la navigation sont désormais mis en avant.
À première vue, un site utilisant le design plat peut sembler trop simple, même si en fait ce style se caractérise par une hiérarchie claire d'éléments, un placement pratique de tous les outils d'interaction utilisateur et a donc un taux d'utilisabilité élevé.
2. Utilisez des éléments simples
Pour atteindre leurs objectifs en matière de design plat, les concepteurs utilisent des boutons et des icônes. Ils doivent être aussi intuitifs et cliquables que possible. Comme tous les autres éléments de l’interface, ils doivent être plats et simples, sans effets supplémentaires. Les concepteurs utilisent également souvent des formes géométriques simples : rectangles, cercles et carrés, permettant à chaque forme d'être un objet distinct.
3. Concentrons-nous sur la typographie
Étant donné que, selon le principe précédent, les graphiques du design plat sont simples, la typographie est un élément extrêmement important - la conception des inscriptions. Dans le design plat, la typographie est mise en avant avec les boutons.
Les polices doivent être lisibles et, bien sûr, cohérentes avec le design, car avec un design simple, les polices extrêmement ornées sembleront déplacées. Cependant, vous ne devez pas utiliser de polices ordinaires, il est préférable d'expérimenter et de choisir celle qui attirera l'attention de l'utilisateur.
Vous pourriez envisager de combiner une simple police sans empattement avec une nouvelle police qui sera perçue comme un élément artistique. Les polices devraient permettre au design d’être plus simple et plus clair, tandis que les boutons et autres éléments ne devraient servir qu’à améliorer l’interactivité.
4. Attirons l'attention avec la couleur
La couleur joue presque le rôle principal dans le design plat. Si vous étudiez attentivement les sites créés sur la base de ce concept, la première chose qui attire votre attention est la palette de couleurs vives. Il se compose généralement de plusieurs couleurs pures (sans nuances) contrastées, deux ou trois, bien que ce nombre puisse atteindre jusqu'à huit. De plus, toutes ces couleurs sont généralement utilisées de la même manière.
Les couleurs les plus populaires sont les couleurs primaires et secondaires. C'est-à-dire les couleurs primaires (cyan, magenta, jaune, noir) et celles obtenues à partir de leur mélange. Très souvent également, des couleurs rétro sont utilisées dans la palette de couleurs lors de la création d'un design plat, comme le saumon, le violet, etc.
5. Minimalisme
Le design plat est de nature simple et s’intègre bien dans une approche minimaliste.
Dans la conception globale du site, vous devez éviter trop de cloches et de sifflets. Bien sûr, de simples couleurs et du texte peuvent ne pas suffire. Par conséquent, si vous souhaitez ajouter des effets visuels, vous devez choisir des photos simples. Certains sites de produits de vente au détail utilisent un design plat pour placer leurs produits sur un arrière-plan simple et non distrayant.
Il est à noter que certaines photographies ont une profondeur naturelle, mais en général elle s'inscrit dans le plan global de la conception.
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 approximative.) , 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 occupé 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 de 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 des polices complexes avec empattement ou 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é. 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 : 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 devez 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 : le design plat 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, rendant l'appartement 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 du design plat et avons appris certains des principes fondamentaux pour créer un bon design.
J'espère que vous avez obtenu de nouvelles informations 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!
Nous ne savons pas si vous l'avez remarqué ou non, mais dernièrement (surtout l'année dernière), il y a eu une nette tendance dans la conception de sites Web à travers le monde vers la simplification, le minimalisme robuste et la simplification visuelle de ce avec quoi nous, les utilisateurs, interagissons. jour. En termes simples, le design est devenu « plat » : contrairement aux icônes convexes de l'époque de la croissance rapide des réseaux sociaux et du web 2.0, nous sommes désormais de plus en plus accueillis par de simples icônes de nouveaux services. Tout cela tire son nom : le design plat. Pas un appartement, mais un appartement.
Avec la présentation hier du nouvel OS mobile, iOS 7, Apple a enfin confirmé la popularité croissante de cette tendance, qui fait traditionnellement le bonheur de certains de ses fans, mais rencontre également un mécontentement important parmi les utilisateurs et concepteurs expérimentés. Quel est le problème? A quoi sert ce design plat et le monde en a-t-il vraiment besoin ? Nous avons décidé de nous tourner vers des experts ukrainiens et étrangers.
Nous leur avons demandé de répondre à trois questions principales :
- pourquoi le monde a commencé à s'orienter vers le design plat sur le Web et sur mobile et de quoi il s'agit ;
- qu'est-ce que cela donnera à Apple et iOS 7 ;
- comment cela affectera les concepteurs d'une part et les utilisateurs d'autre part.
Denis Sudilkovsky, Kyiv
Spécialiste du design d'interaction, producteur Prodesign.in.ua
L’« effet pendule » dans la prévision de l’avenir se manifeste dans le fait que s’il existe deux extrêmes sur une question donnée, l’humanité basculera d’un côté à l’autre. Cela est sans doute vrai pour la conception de systèmes interactifs. Le Web plat et primitif sans intérêt s'est autrefois transformé en de volumineux boutons basés sur le Web. Les visualisations d'interface ont atteint leur apogée de réalisme et le pendule vole dans la direction opposée - plat et simple.
Qu’est-ce qu’Apple en retirera ? Il conservera sa place dans la tendance et des centaines de milliers de commentaires selon lesquels leur iOS devient très similaire à Android.
Les concepteurs devront évoluer (et ne plaisantez pas sur le moment où le design plat viendra dans l'ingénierie mécanique et nous donnera des voitures plates :). Lorsqu'il n'y a pas de décoration, tout le travail consiste à créer une ambiance avec du contenu pour un scénario précis avec l'utilisateur. Ce métier aura de plus en plus de points communs avec celui de Réalisateur qu'avec celui d'Artiste. Les utilisateurs, au contraire, reçoivent de nouvelles expériences et de nouvelles impressions. Personnellement, j'étais un adepte de l'iPhone depuis 4 ans, mais ce printemps, j'ai changé mon téléphone pour Android pour la seule raison : j'en avais marre de l'idéalité monotone de l'interface Apple.
Daniel Bruce, Stockholm
Création numérique senior, danielbruce.se
Tout d’abord, je tiens à préciser que je n’aime pas le terme « flat design ». Depuis des siècles, la plupart des graphismes sont « plats ». Je pense également que cela limite votre capacité à faire ressortir un design lorsque le choix est entre un appartement plat et autre chose. Le design peut être bien plus que cela. Joyeux, lumineux, sombre, positif, minimaliste - vous pouvez l'appeler comme vous voulez. Mais aujourd’hui, j’entends rarement quelqu’un considérer le design comme autre chose que plat ou scléromorphe. C'est un peu triste.
Pourquoi le web et le mobile tardent-ils à évoluer vers le flat design ? D'après moi, c'est juste une tendance. Je n’ai jamais vu d’articles sur les avantages du flat design dans les interfaces utilisateur et je n’en suis toujours pas convaincu. Un design simple et clair – oui, mais ce n’est pas la même chose que « plat ». Regardez Google par exemple. Ils ne font pas de designs complètement plats, ils – et je partage ce point – voient toujours le besoin d’une certaine profondeur et variation.
J'ai été très surpris lorsque Microsoft a choisi cette direction il y a quelques années, en présentant le célèbre style Metro. En fait, ils ont utilisé la conception graphique pour de grands panneaux que les gens regardent à certaines distances et n'interagissent jamais avec de petits écrans comportant un nombre important d'éléments. Ils ont l’air jolis, mais ont-ils une bonne convivialité ?
Ce que j'ai vu chez Apple hier soir n'était qu'une mauvaise copie de plusieurs designs intéressants qui sont apparus sur des sites comme Dribbble et Behance au cours de l'année écoulée. Je n'ai rien vu de nouveau - sauf que c'est loin d'être le même "vieil Apple" de Steve Jobs. L’entreprise a montré qu’elle n’était pas à la pointe en matière de conception d’interfaces mobiles. Bien sûr, nous verrons les fans adopter tous ces designs blancs et ces dégradés créatifs au cours des prochains mois, mais je ne pense pas que cet aspect aura autant d'impact que les récents arrêts de Google. Mais d’un autre côté, quoi qu’il en soit, Apple a toujours été un pionnier et une source d’inspiration pour de nombreuses personnes, dont moi.
Quant aux utilisateurs ordinaires, ils aiment les couleurs vives.
Ivan Klimenko, Kyiv
concepteur d'interfaces mobiles, 5tak.com
Dans une large mesure, je suis un peu philosophique quant à cette situation de fascination pour le style plat. Ce n’est pas la première fois que les designers s’intéressent au minimalisme et aux matériaux artificiels. Tout passe.
L'ère Bauhaus des années 20 et 30 a apporté une énorme contribution au design, mais la rigueur tonale et l'artificialité n'ont pas pu résister au désir et au besoin intérieur des gens d'exister entourés de choses plus naturelles.
Puis, dans les années 60, tout le monde a commencé à admirer le plastique.
Les meubles, la vaisselle et même les vêtements sont tous en plastique. Il semblait que c'était un nouvel espoir pour l'humanité, mais encore une fois non - les gens sont très vite revenus aux formes naturelles ou aux copies de matériaux naturels.
Le contraste dur des formes et le graphisme minimaliste ont toujours exprimé l’accumulation de conflits internes à la société. Le design n’est qu’un miroir qui montre notre monde intérieur. Il se passe trop de choses. La vie s’accélère beaucoup et nous n’avons tout simplement pas le temps de réfléchir et de réfléchir à quoi que ce soit. Nous n’avons souvent pas le temps de vivre.
Le minimalisme et tout ce matériel électronique ne sont qu’une étape sur la route vers quelque chose de plus naturel et humain. Plus qu'un simple ordinateur. Je suis même triste qu'Apple, qui a su regarder en profondeur, n'existe plus.
Olesya Grichina, Kyiv
Concepteur d'interface utilisateur chez Componentix, twitter : elendiel
Je pense que les concepteurs ont été grandement influencés par le grand nombre de gadgets avec différentes tailles d'écran et résolutions - pour toute cette diversité, il est plus facile de créer un design sans textures, sans ombres complexes qui prennent correctement en compte l'éclairage, etc. Ils ont commencé à réfléchir davantage à « comment le rendre plus pratique pour l’utilisateur » plutôt qu’à « comment dessiner magnifiquement ». Le contenu est l'essentiel et dans notre travail, il est important de le présenter de la meilleure façon possible.
Il me semble que derrière les changements externes (interface utilisateur plate, icônes), ils n'ont surtout pas remarqué de changements sérieux dans la facilité d'utilisation, et comment ils jurent sur ce sujet. Lorsqu’ils vérifieront que cela fonctionne, il commencera à dire : « Ohhh, comme c’est pratique, et pourquoi ne l’ont-ils pas fait avant ? J'espère que cela influencera les concepteurs de telle manière qu'ils accorderont plus d'attention à la convivialité de l'interface qu'aux textures et aux ombres. Au final, il sera possible d'expliquer aux clients que c'est une tendance :)
Je pense que le design plat n'affectera pas particulièrement les utilisateurs - s'il leur convient de créer et de consommer du contenu, il y aura beaucoup de gens satisfaits. Mais les icônes sur l'écran d'accueil sont toujours acides :)
Pavel Grozyan, Kyiv
Concepteur de produits chez MacPaw, Grozyan
"Pomme! A-ha-ha, arrête ça ! - Les designers crient. - Hourra, c'est devenu plus facile. - les utilisateurs scandent." Je comprends les deux points de vue. Aujourd'hui, après la présentation de la WWDC2013, beaucoup de mes collègues se sont levés et ont dit : "Au diable ce métier ! N'importe qui peut dessiner de telles bêtises maintenant. Et ces icônes pour 30 $ ?!" Et à première vue, ils ont raison. Mais si vous creusez plus profondément, vous vous rendez compte qu'il existe des milliers d'objets qui ont longtemps différé les uns des autres uniquement par le scénario d'utilisation, puis par la forme, puis par la couleur, et seulement ensuite. dans les détails artistiques. Je me souviens de l'époque où tous ces gars sur leurs profils LinkedIn aujourd'hui qui disent UX, UI Designer, copiaient nerveusement l'effet d'ombre blanche des lettres. Comme Apple. Puis des sites Web légers et légers. Comme Apple. Puis des interfaces riches dans les textures et le réalisme. Comme Apple. Tout leur travail était une copie, car il n'y avait pas de concept de développement original, unifié et pratique pour tout le monde. C'est cette tâche que le design plat résout aujourd'hui. Même s'il me semble faux de l'appeler ainsi. C'est bien que Microsoft ne l'ait pas inventé, et qu'il s'est formé plus de dix ans avant l'ère numérique, dans le domaine de l'édition.
Plat - ce n'est pas pour les clics, c'est pour les clics, les tapotements, les tapotements. On ne peut pas l'appeler plat - l'absence de textures « épaisses » et d'ombres sur les boutons le rend plutôt simplifié, et sans agression visuelle. Et vous ne pouvez pas vous passer de dégradés pour les boutons. Je soutiens cette tendance. Si cela ne nuit pas à la qualité de l’expérience utilisateur, il sera plus facile à vivre pour tout le monde. Tout d'abord à l'utilisateur. Deuxièmement, pour le créateur : ce sera plus simple dans la mise en œuvre technique, plus pratique pour cliquer (liens soulignés - bonjour) et multiplateforme - combinant web, mobile et ordinateur de bureau en une seule expérience. Il s’agit sans aucun doute d’une décision audacieuse pour Apple. Et eux seuls peuvent en décider. Leur histoire a des dizaines de confirmations, ils ont donc plus de chances de réussir que l'inverse.
Conception plate- une tendance relativement nouvelle dont toute la communauté du design ne cesse de parler.
Certaines personnes l'aiment, d'autres n'arrivent absolument pas à s'y habituer et même le détestent.
Une bonne conception doit avant tout résoudre le problème commercial du client ; par quels moyens cela sera réalisé est une question secondaire. Si le designer a choisi le « design plat » comme style ou outil, qu'il en soit ainsi ! Mais n’oubliez pas que ce style ne convient pas à tous les projets.
Analysons donc ce dont vous devez retenir si vous décidez de succomber à la tendance de la mode et de travailler dans le style « flat design ».
Les principes de base du design plat sont :
1. Aucun effet
2. éléments simples
3. Concentrez-vous sur la typographie
4. Concentrez-vous sur la couleur
5. Approche minimaliste
6. Un design « presque » plat
Examinons maintenant plus en détail chacun des principes du flat design :
Aucun effet
Le design plat n'utilise souvent pas d'effets tels que les ombres, les biseaux, le gaufrage, les dégradés ou d'autres techniques qui ajoutent de la profondeur et du volume. Pas d’effets 3D ni de transfert de matérialité, contrairement à l’opposant stylistique « Skemorphism ». Chaque élément doit rester clair, qu'il s'agisse d'une icône, d'une barre de navigation ou d'un cadre, d'un bouton, etc.
Le style plat a une apparence prononcée sans fonctionnalités ni éléments supplémentaires. Cela repose sur un sens clair de la hiérarchie de composition et du placement des éléments. Cette structure rend la conception plus facile à percevoir et intuitive pour chaque utilisateur.
Éléments simples
Le design plat utilise souvent des éléments d'interface utilisateur simples tels que des boutons et des icônes, etc. Lors de la création de ces éléments d'interface, les concepteurs s'en tiennent à des formes simples (rectangle, cercle, carré, etc.) - cela permet à chaque forme d'être autonome.
Mais les éléments simples ne doivent pas être confondus avec un design simple ; un concept de design plat peut être aussi complexe que n’importe quel type de concept de design stylistiquement différent.
Focus sur la typographie
Puisque le design plat est basé sur des éléments de forme simple sans volume, la typographie est un élément extrêmement important dans la composition plate.
Le caractère de la police doit correspondre au schéma et à la composition globale - une police trop complexe peut paraître étrange et prétentieuse sur un modèle de conception trop simplifié. Il est préférable d'utiliser une police simple sans empattement, en gras ou en gras. Le texte doit être en harmonie avec des formes simples.
La police doit être un outil auxiliaire, aidant les utilisateurs à interagir avec notre interface. Les étiquettes sur les boutons et autres éléments ne doivent pas être complexes.
L'accent sur la couleur
La couleur est un élément important du design. La palette de design plat est souvent beaucoup plus lumineuse et colorée que les autres styles de design. Par rapport à un design classique axé sur 2 ou 3 couleurs, un design plat peut inclure 6 voire 8 nuances de couleurs.