Design plat est une tendance relativement nouvelle dont toute la communauté du design ne cesse de parler.
Quelqu'un l'aime, quelqu'un ne peut absolument pas s'y habituer et même le déteste.
Une bonne conception doit avant tout résoudre le problème commercial du client, par quels moyens ce sera un problème 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 vous souvenir si vous décidez de succomber aux tendances de la mode et de travailler dans le style du «flat design».
Les principes de base de la conception à plat sont:
1. Manque d'effets
2. éléments simples
3. Accent sur la typographie
4. Accent sur la couleur
5. Approche minimaliste
6. Design "presque" plat
Examinons maintenant de plus près chacun des principes de conception à plat:
Manque d'effets
Dans le design plat, les 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 ne sont le plus souvent pas utilisés. Pas d'effets 3D et de transfert de matérialité, contrairement à l'adversaire stylistique du "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 opportunités supplémentaires et éléments. Il repose sur un sens clair de la hiérarchie compositionnelle et du placement des éléments. Cette structure aide à percevoir le design plus facilement et à être intuitif 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. Les concepteurs s'en tiennent aux formes simples (rectangle, cercle, carré, etc.) lors de la création de ces éléments d'interface - cela permet à chaque forme d'être indépendante.
Mais les éléments simples ne doivent pas être confondus avec conception simpleUn concept de design plat peut être aussi complexe que n'importe quel type de design stylistiquement différent.
Accent sur la typographie
Le design plat étant basé sur des formes simples sans volume, la typographie est un élément extrêmement important dans la composition plate.
Le caractère de la police doit correspondre schéma général et compositions - une police trop complexe peut sembler étrange et prétentieuse sur une conception de modèle trop simplifiée. Les caractères simples sans empattement, gras ou gras sont préférés. Le texte doit être en harmonie avec des formes simples.
La police doit être un outil auxiliaire pour aider les utilisateurs à interagir avec notre interface. Les étiquettes sur les boutons et autres éléments ne doivent pas être fantaisistes.
Accent sur la couleur
La couleur est une partie importante du design. La palette de design plat est souvent beaucoup plus lumineuse et colorée que les autres styles de design. Par rapport à une conception conventionnelle qui se concentre sur 2-3 couleurs, les conceptions plates peuvent inclure 6 ou même 8 nuances de couleurs.
De l'auteur: Je vous salue les amis! Aujourd'hui, nous allons parler de ce qu'est le flat design ou le flat design de sites. Ce terme a longtemps conquis le cœur des concepteurs de sites Web et suit avec confiance la tendance à ce jour. Les grandes entreprises (Google, YouTube, Microsoft, Apple Inc., etc.) l'utilisent pour concevoir leurs sites et applications. Toujours pas dans la secte du design plat? Ensuite, nous allons à vous!
Selon vous, quelle est la raison d'une telle popularité frénétique 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 inconvénients, vous montrer quelques excellents exemples de conception de site Web plat qui vous inspireront sûrement à de grandes actions. Alors allons-y!
Tout a commencé avec le skeuomorphisme
Pour ceux qui ne sont pas au courant, le skeuomorphisme n'est pas un gros mot, mais un autre style de conception Web. Le design plat est souvent présenté comme l'opposé du skeuomorphisme, ce qui, à mon avis, n'est pas tout à fait correct. C'est plutôt une simplification qu'un antagonisme.
Jusqu'en 2010, le skeuomorphisme était le style dominant dans la conception d'interfaces. Il a montré les éléments tels qu'ils se présentaient dans la réalité, en utilisant activement les textures, les ombres, les reflets et d'autres attributs d'une image en trois dimensions. Apple a particulièrement essayé à cet égard, qui copiait soigneusement la plupart des objets logiciels à partir d'objets réels.
Bientôt, les icônes pseudo-convexes ont cessé d'attirer la plupart 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 uniquement ce qui est pratique pour l'utilisateur final.
"Le meilleur design est le moins de design possible."
Dieter Rams, un designer industriel renommé qui s'oppose au design intrusif, aux effets d'animation, etc., a regardé dans l'eau. En juin 2013, Apple Inc. a présenté le révolutionnaire iOS 7, qui a reçu tous les attributs d'une conception Web plate. Cependant, l'avion n'a pas immédiatement «gagné» sur le réalisme et le volume.
Pendant longtemps, les utilisateurs n'ont pas pu oublier la magie de Steve Jobs et les icônes «qui veulent lécher. Beaucoup ont même dit au revoir aux «sept pauvres» et sont passés à «Android radieux». Ajout de carburant au feu et un grand nombre de bugs qui étaient présents dans iOS 7, et un design blanchâtre et translucide avec parallaxe et animation sous forme de «morve» lors de l'ouverture des applications.
Ceux qui se sont résignés à la réalité inévitable et sont restés avec le système d'exploitation "apple", ont finalement réalisé que la conception Web plate semble non seulement intéressante, mais apporte également de l'ordre et un style visuel unique à toutes les applications.
Avantages et inconvénients du design plat
Les avantages de l'utilisation de ce style incluent:
clarté de la composition et laconisme des moyens visuels. Interface responsive dans le style "rien de superflu", pour que les utilisateurs réalisent rapidement ce qu'ils voulaient transmettre;
accent sur une bonne typographie. Le contenu vient en premier, ce qui est extrêmement important dans l'abondance d'informations d'aujourd'hui;
des pages Web plus petites et des performances de site plus rapides grâce à la quantité minimale d'effets visuels. Ceci est particulièrement utile lors de la création versions adaptatives, car plus les formulaires sont simples, plus il est facile de les afficher sur de petits écrans appareils mobiles.
La conception Web plate a ses inconvénients:
limiter l'imagination du concepteur web à des couleurs, typographie, iconographie simplifiées. Par conséquent, le risque de créer un site 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;
absence de règles fixes spécifiques.
Si vous avez pris la décision 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 Web pertinent mais pas primitif, voici quelques conseils:
Oubliez les murs de briques et les arrière-plans lumineux. Il est courant dans la conception de sites Web plats d'utiliser des images d'arrière-plan simples, lisses et subtiles.
Pas de dégradés, d'icônes volumétriques, 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 plus de commodité et de fonctionnalité.
Utilisez une palette de couleurs vibrantes et vibrantes. Les tons du spectre solaire sont désormais à la mode: jaunes clairs, roses et verts. L'essentiel est de ne pas en faire trop - il ne devrait pas y avoir plus de 3 couleurs sur la page.
Concentrez-vous sur la typographie. Le design plat favorise un lettrage original et frappant qui crée un appel à l'action et permet une navigation facile sur le site. Ici aussi, il est important de ne pas en faire trop. Oubliez les polices «manuscrites» et autres polices fantaisie. Vous pouvez utiliser des majuscules pour mettre en évidence les titres.
N'hésitez pas à utiliser une variété de formes géométriques. Des carrés, des cercles, des lignes et d'autres formes aideront non seulement à améliorer la structure de votre site Web, mais également à créer une hiérarchie claire et un contenu distinct. Les utilisateurs l'apprécieront, croyez-moi.
Simplifiez au maximum votre 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, des sites avec design plat sont devenus une norme acceptée par absolument tout le monde. Regardez la plupart des sites Web d'aujourd'hui - ils sont plats jusqu'à l'os.
Enfin, je donnerai les exemples promis de design plat réussi qui peuvent vous servir d'inspiration pour créer vos propres chefs-d'œuvre.
1. Site http://dunked.com.
Une plate-forme populaire pour la publication de portfolios destinés aux représentants de diverses professions créatives. La conception de sites Web plats minimalistes évoque le sentiment d'un service fiable et compréhensible, sans distractions inutiles.
2. Interface Microsoft.
Microsoft est l'une des sociétés qui a rendu le style plat si populaire. Vous vous souvenez du Zune, un iPod rival de Microsoft sorti au milieu des années 2000? Eh bien, la conception de ce produit était radicalement différente de la plupart des applications de l'époque, en grande partie en raison de la grande typographie, des icônes plates, des formes grandes et lumineuses.
Cette interface, appelée Metro, a ensuite migré vers les ordinateurs personnels (OS 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, partagez nos articles avec vos amis dans réseaux sociaux... Des conversions élevées pour vous!
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 utilisateur, ainsi 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.) mais il faut dire que le flat design 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 80 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é à produire 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 le 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 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 instructions pour créer divers objets de conception: icônes, mises en page, etc.
Depuis ce temps, plat est devenu focus clé dans la conception Web en 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 en pixels. autant que possible. De plus, cela s'applique aux graphiques raster et vectoriels.
Le programme Adobe Photoshop tout est clair ici: cela fonctionne avec des graphiques bitmap basés sur des 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 graphiques 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 graphiques vectoriels implique 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 divers 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.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 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 pouvez 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 la 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 ressembler à un élément distinct. Cela ne signifie pas que vous ne pouvez pas utiliser de polices serif ou de polices complexes 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 qu'il perd du 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 applications mobiles: design épuré avec gros boutons rend l'utilisation des appareils mobiles 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 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 l'ensemble du dessin. 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 de la conception 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 est vraiment 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
Ainsi, nous avons 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 vives et ses polices nettes, sa pureté et son minimalisme, alors foncez!
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 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!
Une conception simple et pratique d'une page Web est considérée comme la plus correcte. Un style de conception de site Web plat est utile dans de nombreux cas. Les interfaces simples fonctionnent souvent mieux, et en raison de la tendance générale au minimalisme, la direction Flat est toujours d'actualité (Microsoft et Apple ont rendu leurs systèmes d'exploitation plats). En utilisant de belles couleurs plates dans leurs créations, les entreprises bien connues ne manquent pas d'occasions d'exprimer leur individualité, d'attirer l'attention sur une marque ou d'augmenter les conversions.
Exemples de bon design plat
Sites plats joliment et judicieusement conçus avec une navigation facile et interface claire... Leurs conceptions réfléchies et rendues se vendent bien et créent une bonne expérience utilisateur.
lancement
Une version unique gris-blanc-orange de l'appartement. Les microitérations sont magnifiques dans une interface utilisateur expressive avec des boutons fantômes et un défilement parallaxe d'arrière-plans flous. Les effets de défilement tels que les menus collants et le chevauchement du pied de page avec l'arrière-plan du corps de la page rendent visuellement le site plus compact.
eTecc interactif
Le design simple du site internet de l'agence américaine n'a pas l'air ordinaire. fait de haute qualité et goût. La vieille école du design ne fonctionne pas pire que les innovations, elle peut représenter avec profit l'entreprise et ses services.
Cabinet d'avocats Nehora
Un design épuré et plat avec des éléments sophistiqués donne au site Web du cabinet d'avocats californien un aspect professionnel. Le chapeau et le pied de page sont joliment décorés. Le blanc et les nuances d'or sur un fond turquoise foncé créent un beau contraste doux. L'interface utilisateur des pages a permis d'organiser le contenu.
Towa
Le site wordpress de l'agence allemande a un joli design minimaliste avec des effets HTML5 / CSS3 et. Les nuances pastel / gris-or, la correction des couleurs des photos et la mise en page modulaire ont contribué à créer un beau site sous la forme d'un collage de faits intéressants sur l'entreprise.
Laboratoires Amazee
Le site des développeurs suisses Drupal a un design laconique avec des combinaisons de couleurs agréables. Les éléments CTA sont de style créatif, les techniques Flat et HTML5 / CSS3 sont appliquées.
Aiguille de l'espace
Space Needle est le symbole de Seattle. Le site dispose également d'une page principale avec rendu en arrière-plan. Défilement de style unique avec des effets d'esquive et des mini diapositives à la fin.
Construire à Amsterdam
L'agence de branding néerlandaise a un beau site Web plat avec un menu de navigation personnalisé. Interface agréable et élégante, bonne.
La conférence jaune
Contenu optimiste, jaune vif et le site vous met en place pour un positif.
Joy Intermedia
Site Web pour une agence créative internationale de Pologne avec un design plat en CSS3 et une bonne UX. Le site utilise des panneaux latéraux et inférieurs et est facile à utiliser.
Fuse Lab Creative
Un site d'agence américaine bien structuré et convivial avec une barre latérale semi-transparente pratique, une barre de projet et une mini-intro discrète sur l'écran d'accueil.
Chobani
La petite entreprise b2b a un site culinaire agréable et très convivial avec un design propre basé sur HTML5. Un menu déroulant fixe et un système de navigation secondaire original à quatre niveaux aident à présenter l'assortiment.
Design plat unique et style plat
Des exemples de style plat unique ont été sélectionnés, ce qui prouve que les interfaces plates peuvent être efficaces, intéressantes et attrayantes. En combinant des graphiques expressifs avec un contraste de police agréable, en ajoutant un peu d'animation et de microitération, vous pouvez non seulement rendre un site Web créatif ou professionnel beau, mais aussi montrer votre individualité, exprimer le message principal par conception.
Investissements RJ
Le site d'une agence immobilière britannique au design plat élégant et laconique aux couleurs gris et blanc. L'accent de couleur dorée ajoute une expressivité douce. Basé sur WordPress HTML5 / CSS3, jQuery, SVG.
Chaise inclinée
Site conçu de manière expressive - la typographie devient visuellement intéressante lorsque les couleurs accrocheuses reviennent à la conception avec minimalisme et style plat. Les titres rouges qui attirent l'attention du portfolio servent de tremplin.
FHOKE
Design épuré, plat et unique interface utilisateur site. Images de mise au point, incl. épicerie avec des ordinateurs et des iPhones (les photos affichées dans un calque séparé semblent réalistes).
Nation
Un site de studio mémorable, vibrant et dynamique de Londres. En-tête de contour sur compact page d'accueil ne passera pas inaperçu, ainsi que des boutons fantômes spectaculaires dans le portefeuille / les cas. En boucle vidéo de fond, arrière-plans photo avec correction du flou et des couleurs, animations élégantes, transitions, préchargement de chargement de page. Un design expressif dans des tons bleus transmet un message de fiabilité du studio et d'énergie d'équipe.
Mayven dev
Mayven Dev est une équipe créative de 30 codeurs / designers UX basée à San Francisco. Leur site se distingue par une esthétique de conception sobre, un style individuel, des combinaisons de couleurs agréables avec des contrastes expressifs de typographie blanche et des graphiques de contour animés sur un fond émeraude.
Agence HughesLeahyKarlovic
Le design épuré et soigné du site internet de l'agence américaine vous met immédiatement en place pour un positif. Le menu de navigation est conçu de manière unique: un effet de survol avec un filtre de couleur appliqué transforme l'image d'arrière-plan en une vidéo en boucle.
Communications par satellite Satis
Site Web complet de l'opérateur russe communications par satellite... L'esthétique commerciale est réalisée à travers un style design plat avec des illustrations de contour.
Illustrations, effets et créativité dans des designs plats
Exemples de conceptions dynamiques, de design plat créatif et d'une combinaison réussie d'illustration plate et d'animation. Modern Flat vous permet de combiner des éléments de conception de jeux avec un contenu de site Web professionnel réaliste.
Studios Tectonica
Le concepteur utilise des graphiques plats avec des dégradés (tendance Web actuelle), un bloc d'illustrations plates lumineuses sur la page principale. Pour une division attrayante des sections - espace libre et graphiques animés.
Pixity-land
Le microsite au design plat classique utilise une animation de défilement, des illustrations plates et des vidéos.
100 ans de design
Projet web créatif de la communauté de conception AIGA. Les couleurs plates représentent des éléments de menu, des sections pouvant être ouvertes, des points d'accès de navigation et des fenêtres de carrousel d'illustration coupées en deux.
Agence Drap
Un site Web coloré et accrocheur pour une agence de création axée sur la technologie. Ils apprécient l'innovation de conception et toute innovation dans la présentation de l'information.
Mobkii
Sans illustrations plates avec des dégradés, le site d'une agence mexicaine aurait l'air ennuyeux, et le design est trop ordinaire pour les développeurs Web et d'applications.
Ecodom Consorzio
Le site officiel de la société italienne de revitalisation appareils ménagers et élimination. Le design vert vivant, les effets interactifs et dynamiques s'adaptent au site Web d'une organisation avec ce type d'activité.
Chose de merveille
Le projet vous invite à vous familiariser avec des choses qui intéressent les curieux, la communauté et les événements pour élargir vos horizons. En commençant par un écran d'accueil abstrait, le design original engage ce public.
Homme vert
Le site sert de guide au Festival gallois. Le design et l'animation jaune-vert avec des graphismes plats créatifs correspondent à la fois au nom de domaine et aux objectifs positifs du projet.
Lisez aussi: Combinaison de couleurs dans la conception Web - sites verts
Portefeuille Amelia Thompson
Une page de Chicago. Amelia a un portefeuille intéressant de travaux à plat.
Lisez aussi: 30 sites Web d'agences élégants et portefeuilles de designers personnels
Fait fait
Le site Web du système de gestion de projet avec un traqueur de bogues est magnifiquement conçu dans le style Flat. Les couleurs vives, les graphiques plats / vidéo et le bouton d'appel contrasté sont impossibles à manquer.
Menthe poivrée
Le site Web créatif de l'agence numérique polonaise utilise figures géométriques et des animations, illustrations, photographies, dessins inimaginables.
Arts Geex
Le site d'un jeune studio web moscovite impressionne par son design ultra-moderne high-tech et fait partie du TOP 40 des agences digitales. Il se distingue par un menu de navigation élégant, des transitions efficaces, de l'interactivité, de l'animation et une bonne UX pour les solutions non standard.
DAESK
Le site du studio allemand a un design de vente passionnant en HTML5 et un menu de navigation personnalisé. Les couleurs acides excitantes vendent des produits (suivi de la fréquentation du temps) Les effets de défilement de parallaxe de survol captent l'attention sur les boutons d'appel et la preuve sociale. Après des critiques parfaitement conçues, la page de démarrage renvoie aux cas / histoires de clients. Interactive sur un fond vectoriel lance la vente de graphiques vidéo.
Fcinq
Site Web du studio de création français: un design plat élégant commence par une belle précharge. La correction des couleurs des photos et des combinaisons de couleurs uniques rendent cette conception attrayante.
D.FY
Un site flexible pour une agence coréenne avec des vidéos créatives en arrière-plan. Design moderne et épuré en html5 / css3. L'effet de transition transparente est impressionnant dans le menu de navigation plein écran.
Les gens braves
Les refontes précédentes du site Web de l'agence de création basée en Floride ont été présentées dans le TOP des créations. Brave People a maintenant un design efficace avec une interface plate propre et compacte.
Nea media
Le fabricant français de jouets et de jeux vidéo a utilisé le style FLAT et la conception Web. Le site créé sur Wordpress surprend par son design tendance.
Circulaires Llittle
Ceci est un site pour enfants australien avec des couleurs plates juteuses. Les polices dentelées contrastées mettent en valeur l'attrait et se fondent avec de grands éléments de conception.
Ic créatif
Le site du studio anglais se distingue par de grands titres avec un attrait et des éléments CTA de couleur orange accentuée.
FATbit
Le site Web massif pour les développeurs Web de l'Inde est construit sur wordpress et propose une variété de conceptions avec des micro-interactions et des illustrations animées. Dans l'en-tête et le pied de page, la couleur rouge plate accentue les appels CTA. La page principale a des arrière-plans fixes avec correction des couleurs et prend en charge le glisser-déposer des diapositives dans les carrousels (premier écran, preuve sociale, promos sur plaques translucides).
Domaine Menada
Poursuivant une tradition centenaire de qualité, le vigneron bulgare impressionne les visiteurs avec une précharge d'un tire-bouchon animé. Un design plat sombre avec des contrastes doux, une manipulation créative de photos et des solutions ininterrompues vend l'idée du luxe de la marque.
Musée Frans Hals
Le site du Dutch Art Museum a un design plat inhabituel avec des titres hachés géants. Les icônes de navigation aident à comprendre le menu horizontal et vertical non standard.
Méticulosité
Site plat pour les développeurs de la New York State Technology Valley. Design expressif et épuré avec géométrie et arrière-plans fixes. Beaux contrastes dans l'en-tête, le pied de page, les sections avec des boutons CTA.
Pages de destination et vente de designs dans le style FLAT
L'attractivité et le dynamisme de la page d'accueil ou interne contribuent à exprimer une proposition unique. La conception de l'atterrissage du site élargit les possibilités d'utilisation de Flat et augmente les chances d'interaction avec les clients. L'objectif d'une conception de page de vente et de destination est de fournir des conversions élevées. Un site LP ou une page de destination est retenu pour une conception intéressante ou inhabituelle.
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 céramique décorée avec des rivets d'imitation pour ressembler à des pots similaires en métal, ou un calendrier informatique qui simule l'apparence d'agrafage des pages d'un calendrier de bureau en papier (déterminé à partir de Wikipédia).
La sortie de la salle d'opération a contribué à la vulgarisation du style plat dans la conception systèmes Windows 8 de Microsoft dans le style Metro, ainsi que iOS 7, dans lequel Apple opte également pour un style plat. C'est après cela que commence la véritable ère du flat design. Bientôt, de grands services et applications de recherche - Google, Youtube - sont passés au Flat-design, et de nombreux sites sont apparus qui utilisent les principes du flat style dans leur conception. DANS dernières années flat design est un chef de file des tendances mondiales en matière 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
En flat design, l'utilisation d'éléments qui donnent de la profondeur et du volume à un 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 Web avec un design plat dans divers sujets, y compris des ressources d'actualités, des portails et même des magasins en ligne.
