Design plat (design plat) - une tendance relativement nouvelle, qui ne cesse pas de dire toute la communauté de design.
Quelqu'un l'aime, quelqu'un ne peut absolument pas s'habituer à lui et même déteste.
Un bon design doit d'abord résoudre la tâche commerciale du client, ce qui signifie qu'il sera atteint la question du secondaire. Si le concepteur a choisi comme un style ou un outil - "Conception plate" - donc ce sera le cas! Mais n'oubliez pas qu'un tel styliste ne convient pas à tous les projets.
Alors, analysons ce que vous devez oublier de ne pas oublier si vous décidez de succomber à une tendance de la mode et de travailler dans la stylistique du "design plat".
Les principes de base du design plat sont:
1. Manque d'effets
2. Articles simples
3. Accent sur la typographie
4. Concentrez-vous sur la couleur
5. Approche minimaliste
6. Conception plate "presque"
Examinons maintenant chacun des principes du design plat plus en détail:
Pas d'effets
En design plat, les effets sont les plus souvent utilisés comme suit: ombre, grasses, gaufrage, gradients ou autres techniques qui ajoutent de la profondeur et du volume. Aucun effet 3D et transmission de matérialité, contrairement à l'adversaire stylistique "Skembramphisme". Chaque élément doit rester clair, son icône, un panneau de navigation ou un cadre, un bouton, etc.
Style plat a une prononcée apparence sans pour autant caractéristiques supplémentaires et des éléments. Il repose sur une sensation claire d'une hiérarchie composite et d'un placement d'éléments. Cette structure Il aide à percevoir la conception et à être intuitif pour chaque utilisateur.
Articles simples
La conception plate utilise souvent des éléments d'interface utilisateur simples, tels que des boutons et des icônes, etc. Designers, lors de la création de ces éléments de l'interface, tenez des chiffres simples (rectangle, cercle, carré, etc.) - cela permet à chaque forme d'être soi-même.
Mais ne confondez pas d'éléments simples avec conception simple, le concept de design plat peut être aussi compliqué que n'importe quel concept de concept stylistiquement différent.
Accent sur la typographie
Étant donné que la conception plate est construite sur des éléments d'une forme simple sans volume, la typographie est un élément extrêmement important dans une composition plate.
Le caractère de la police doit correspondre régime général Et les compositions sont trop complexes, la police peut sembler étrange et préfabriquée sur une conception de modèle trop simplifiée. Il est préférable d'utiliser une police simple sans Serifs, gras ou audacieux. Le texte doit être harmonisé avec une forme simple.
La police doit être un outil auxiliaire, aider les utilisateurs à interagir avec notre interface. Les inscriptions sur les boutons et d'autres éléments ne doivent pas être complexes.
Concentrez-vous sur la couleur
La couleur est un élément de conception important. Palette de design plat, souvent beaucoup plus lumineuse et plus colorée que pour une autre conception de style. Par rapport à une conception conventionnelle qui se concentre sur 2-3 couleurs, une conception plate peut inclure 6 ou même 8 nuances de couleurs.
De l'auteur: Salutations, amis! Aujourd'hui, nous allons parler de ce qu'est la conception plate, ou des sites de design plat. Ce terme a longtemps conquis le cœur des concepteurs Web et maintient en toute confiance la tendance jusqu'à présent. Les plus grandes entreprises (Google, YouTube, Microsoft, Apple Inc., etc.), utilisez-la pour concevoir leurs sites et leurs applications. Êtes-vous toujours pas dans la secte des supporters d'un site de design plat? Ensuite, nous allons à vous!
Que pensez-vous, quelle est la raison de cette popularité folle conception plate? Je vais vous répondre en un mot: cela fonctionne vraiment! Dans cet article, je vous expliquerai quel type de style, je vais vous parler de ses avantages et de ses avantages, je vais vous montrer d'excellents exemples de la conception de sites de sites, qui vous inspirera probablement sur les exploits. Alors allons-y!
Tout a commencé avec skvomorphisme
Pour ceux qui ne savent pas, le skiomorphisme n'est pas un mot crucial, mais un autre style de conception Web. Le design plat est souvent représenté comme un skiorphisme opposé qui, à mon avis, n'est pas totalement correct. Ceci est plutôt simplifié que l'antagonisme.
Jusqu'en 2010, le skiomorphisme était un style dominant dans la conception d'interface. Il a déplacé les articles comme ils ont regardé en réalité, en utilisant activement des textures, des ombres, des réflexions et d'autres attributs de l'image tridimensionnelle. Surtout jugé à cet égard apple Companyqui attiré parfaitement la plupart des logiciels de logiciels avec des objets réels.
Bientôt, les icônes de pseudo-buck ont \u200b\u200bcessé d'attirer la plupart des utilisateurs et des développeurs Web, qui ont déposé le début de la conception du site plat. Le monde est arrivé à la conclusion que tous les éléments décoratifs doivent être supprimés, mais ne laisser que quelque chose, avec lequel il est pratique d'interagir l'utilisateur final.
"Le meilleur design est aussi petit."
En tant que Dieter Rams, un designer industriel bien connu, opposant la conception obsessive, les effets d'animation, etc. En juin 2013, Apple Inc. Introduit le Révolutionary IOS 7, qui a reçu tous les attributs dans le style de la conception de la bande plane. Cependant, l'avion n'a pas immédiatement "gagné" réalisme et volume.
Les utilisateurs n'ont pas pu oublier la magie des emplois et des icônes de Steve ", qui veulent bail." Beaucoup sont même étendus avec les "misérables sept" et ont déménagé à "Android radiant". Huile tirée dans le feu et un grand nombre de bugs présents dans iOS 7, et blanchiment, conception translucide avec parallaxe et animation sous forme de "snot" lors de l'ouverture d'applications.
Ceux qui ont démissionné de la réalité inévitable et sont restés avec le système d'exploitation "Apple", à la fin, se sont rendus compte que la conception Web plate était non seulement intéressante, mais apporte également l'ordre et un style visuel unique à toutes les applications.
Conception des avantages et des inconvénients
Les avantages de l'utilisation de ce style peuvent être attribués:
clarté de la composition et de la concision de fonds visuels. Interface réactive dans le style de "rien", grâce auxquels les utilisateurs sont plus rapides de se rendre compte qu'ils voulaient les transmettre;
concentrez-vous sur une bonne typographie. Contenu en premier lieu, qui est extrêmement important dans l'abondance moderne des informations;
pages Web plus petites et accélération du site au détriment du nombre minimum d'effets visuels. Ceci est particulièrement utile lors de la création versions adaptatives, parce que la forme plus simple, plus il est facile de les afficher sur de petits écrans. appareils mobiles.
Conception et inconvénients Web plat:
limiter le concepteur Web fantastique avec des couleurs simplifiées, une typographie, une iconographie. Par conséquent, le risque de créer un site ennuyeux et inexpressif ci-dessus;
l'absence de trois dimensions et des ombres ne permet pas de comprendre, un élément clicable ou non;
manque de règles fixes spécifiques.
Si vous avez décidé d'utiliser ce style sur votre site, ceci suggère de vous soucier de la commodité des utilisateurs et de suivre le temps. Si vous commencez à créer une carrière de concepteur Web et que vous ne savez pas comment utiliser correctement un design plat afin que votre site soit à la hauteur, mais pas primitif, utilisez les conseils suivants:
Oubliez des "murs de briques" et des arrière-plans vives. Dans Flat Web Design, il est de coutume d'utiliser des images simples, lisses et inappropriées pour l'arrière-plan.
Aucun dégradé, icônes de volume, transitions animées et autres effets spéciaux. Tout cela enlèvera votre site et apportera une agitation - en avez-vous besoin?
Utilisez des icônes plates avec des contours clairs, l'ajout de la commodité et de la fonctionnalité.
Utilisez une palette de couleurs vives et juteuses. Maintenant, dans la tendance du soleil Tonalité: jaune vif, rose et vert. La principale chose, n'en faites pas trop - les couleurs de la page ne doivent pas être plus de 3.
Concentrez-vous sur la typographie. Dans la conception plate, la préférence est donnée aux inscriptions lumineuses et originales qui créent un appel à l'action et fournissent une navigation pratique sur le site. Il est également important de ne pas en faire trop. Oubliez "manuscrit" et d'autres polices. Les lettres majuscules peuvent être utilisées pour mettre en évidence les en-têtes.
N'hésitez pas à utiliser une variété de formes géométriques. Les carrés, les cercles, les lignes et autres chiffres contribueront non seulement à améliorer la structure du site Web, mais également à créer une hiérarchie claire, ainsi que de diviser le contenu. Les utilisateurs apprécieront, croyez-moi.
Saysez le menu de navigation et d'autres éléments du site. Utilisez des rectangles classiques sans ombres et illuminage en tant que boutons.
Ainsi, au fil des ans, les sites Web avec design plat sont devenus la norme adoptée absolument toutes. Regardez sur la plupart des sites modernes - ils sont à plat "au cerveau des os".
Enfin, je donnerai les exemples promis d'un design plat réussi, qui peut servir d'inspiration pour créer vos propres chefs-d'œuvre.
1. Site http://dunked.com.
Site populaire pour la publication de portefeuille, orienté vers des représentants de diverses professions créatives. La conception Web plate minimaliste provoque une sensation d'un service fiable et compréhensible qui ne distrait pas d'effets spéciaux inutiles.
2. Interface Microsoft.
Microsoft est l'une des entreprises que le style plat est si populaire. Vous souvenez-vous peut-être du joueur de Zune - un iPod concurrent, que Microsoft publié au milieu des années 2000? Donc, la conception de ce produit était nettement différente de la plupart des applications de cette époque, en grande partie dus à une grande typographie, à des icônes plates, de formes grandes et lumineuses.
Cette interface appelée métro, a ensuite déménagé à ordinateur personnel (Windows 8), interface Xbox 360 et autres produits logiciels MIRCOSOFT.
3. Site http://www.vox.com.
Bien, inspiré? Avec une esthétique 3D pseudéaliste!
C'est tout. Abonnez-vous, partagez nos articles avec des amis dans réseaux sociaux. Hautes conversions!
Dans cet article, je vous dirai sur le design plat. Vous avez probablement déjà entendu quelque chose à ce sujet, car à plat au cours des dernières années, est devenu l'une des principales tendances du Web.
Aujourd'hui, nous allons comprendre ce qu'un design plat est comme si vous devez créer une conception propre, lumineuse et réactive.
tu peux trouver bons exemples Design plat sur le site http://market.envato.com/. Il y a beaucoup de mises en page, d'icônes et de modèles qui vous donneront une compréhension claire de ce que ressemble de la conception moderne. .
1. Qu'est-ce qu'un tel design plat?
Design plat - style moderne Interface utilisateur, ainsi que la conception graphique, caractérisée par un minimaliste. Pour la conception plate, l'utilisation d'un minimum d'éléments et l'absence de divers effets de la texture, de l'ombre et de la lumière, par exemple: des couleurs mélangées, des gradients, des reflets et ainsi de suite.
Appartement est opposé au skiorphisme( la skvomorphisme est le principe de la conception, lorsqu'un seul produit reçoit l'apparence d'un autre, c'est-à-dire Lorsque différents éléments d'interface sont copiés de vrais objets - env. Transfert.) , ainsi que le design riche. Cependant, il convient de dire que la conception plate n'est pas du tout aussi simple qu'elle semble au premier abord. Cela inclut certaines caractéristiques du skewerphisme, mais nous en parlerons un peu plus tard.
En général, Flat aide à concentrer l'utilisateur sur le contenu, sans distraction pour les effets visuels. La conception plate met l'accent sur la simplicité des éléments, en même temps, rend l'interface plus réactive, agréable et facile à utiliser.
2. une petite histoire
Conception plate, comme vous le savez, il existait longtemps avant le moment où il est devenu la tendance mondiale dans le Web. Le design plat était assez populaire dans les années 1980 en raison du fait que la technique à cette époque n'était pas encore aussi développée pour maintenir des effets, des textures et des ombres complexes. Cependant, même la conception recherchée au paysage, essayant de rendre les éléments d'interface aussi réalistes que possible.
Design plat, dans l'apparence dans laquelle nous le voyons maintenant, commencent à gagner en popularité après que Microsoft ait commencé à produire des produits dans le soi-disant métro-style. Métro - UI-Design de Microsoft, frappant de son style et de son élégant.
En 2010 année Microsoft publié Téléphone Windows 7, qui a utilisé un design plat avec des arêtes vives et un graphique simple hérité de l'un des premiers produitsMicrosoft (Zune). Plus tard, l'inspiration du succès, Microsoft a publié le système d'exploitation Windows 8 basé sur le même style de métro plat.
En fin de compte, design plat ont atteint son sommet de popularité en 2013, lorsque Apple a publié iOS 7 démontrant fondamentalement nouveau design Avec des éléments d'interface utilisateur complètement modifiés, y compris des icônes et des polices. Apple créé principes visuels de la conception de l'UI-et-icoma .
Peu de temps après, Google a également commencé à utiliser le style plat de ses applications et de 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 conception Web, ses principes et directives pour la création de divers objets de conception: icônes, mises en page, etc.
Depuis ce temps, plat est devenu direction clé Dans une conception Web, des sites, des applications et des éléments d'interface avec élégant, propre et élégant.
Ainsi, il existe trois échantillons mondiaux design plat des entreprises, sans qu'il est difficile de soumettre le monde moderne de la technologie:
Conception du métro de Microsoft
Design Apple iOS 7
Conception matérielle de Google
3. Rappelez-vous la propreté
Design plat semble être appelé "plat" en raison du manque d'éléments tridimensionnels et d'effets réalistes, tels que: gradients, textures, éblouissement, demi-teinte, ombre. N'oubliez pas que le style plat est une méthode bidimensionnelle (plate) d'objets d'image.
De plus, dans la conception plate, les articles sont décrits très simplistes et stylisés.
Et parfois, il est même utilisé simplement la silhouette ou les contours d'objets, c'est-à-dire Exactement beaucoup pour rendre l'objet reconnaissable, mais ne le surchargez pas avec des détails insignifiants.
Le minimalisme est devenu une tendance globale: la simplicité des formes et l'utilisation d'arêtes vives crée une conception des yeux propres et agréables. Les formulaires simples sont plus compréhensibles et faciles à percevoir. Il rend la conception minimaliste, propre, ne lui permettant pas d'acheter une vue chargée et du désordre.
4. Assurez-vous de perfectionner
Sachez quand il s'agit de créer des icônes plats et des éléments d'interface utilisateur, vous devez les faire ressembler à des croustillants, soignés et parfaits au pixel, c'est-à-dire Donc, aussi loin que possible. De plus, il s'applique au raster et à des graphiques vectoriels.
Spécifier Adobe Photoshop. Tout est clair ici: ça marche avec graphique rasterqui est basé sur des pixels.
Quant au programme Adobe IllustratorIl utilise un graphisme vectoriel composé de courbes et de lignes, appelées vecteurs, définis par des formules mathématiques.
Une fois que Adobe Illustrator n'était pas particulièrement programme pratique Créer des graphiques parfaits pour pixels. Bonne nouvelle est que dernières versions Illustrateur en acier excellent outil Créer de bons graphiques.
Je dois dire que les graphiques vectoriels impliquent essentiellement que le travail avec des formes simples, des couleurs propres et des grilles illustrator est très flexible dans les paramètres et vous permet d'adapter la grille à vos besoins, d'aligner des objets et d'utiliser différents types Couper. Grâce à cela, le processus de création d'un design parfait, qui sera pur et élégant à n'importe quel affichage, est devenu plus facile. Si vous voulez apprendre à créer des graphiques parfaits, vous devriez vous familiariser avec l'article: Comment créer des œuvres de pixels-parfaites à 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 qui utilisent des conceptions plates dans leurs éléments ne constituent que plusieurs couleurs de base.
La couleur dans la conception plate est caractérisée par la luminosité, la saturation, la juitité.La palette de couleurs de l'appartement n'est pas limitée à plusieurs couleurs spéciales. Il contient de nombreuses nuances et leur choix ne dépend que de ce que vous décrivez, que ce soit des icônes de bonbons ou d'objets dans un style rétro dans une palette rétro sophistiquée.
Supposons que vous soyez des interfaces de concepteur et que vous comprenez bien les palettes de couleurs, vous expérimentez avec le panneau de couleurs dans les programmes Photoshop et Illustror, \u200b\u200bmélangeant des couleurs comme vous le souhaitez. Cependant, ce processus est assez compliqué et nécessite une bonne intuition, une expérience et des compétences. Ici, vous trouverez des outils pouvant vous aider à créer votre propre palette de couleurs.
Certains d'entre eux conviennent à tous les types de design et d'illustrations, et pas seulement pour design plat. Par exemple, Adobe Color CC, plus connu sous le nom de refroidisseur. Aujourd'hui, il y en a accès, via le site Web et directement via Adobe Products. Le refroidisseur est un outil très flexible qui vous permet ou crée votre propre palette de couleurs ou choisissez parmi la palette personnalisée de la bibliothèque.
Un autre générateur de palette de couleurs simples et pratiques - Coolors. Appuyez simplement sur l'écart et le programme générera une palette de couleurs, vous pouvez ajuster les couleurs, il existe également une fonction d'exportation.
Il existe des services plus similaires avec des palettes sur mesure pouvant être utiles. Cependant, il y a un outil créé spécifiquement pour design plat.flatuicolors.com de DesignModo - 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. Essayer!
Et vous pouvez également trouver une plus grande variété de couleurs et une palette dans Guide de conception matériel de Google.
6. Longues ombres
Comme mentionné ci-dessus, il existe une simplicité pour un design plat, beaucoup d'espace libre - c'est pourquoi plat rejette l'utilisation de tout effet. Cependant, il y a un effet caractéristique du design plat. Cet effet est devenu une tendance et une caractéristique de plat.
Nous parlons de longues ombres. Ils ont des caractéristiques typiques qui rendent cet effet reconnaissable, à savoir: tilt à 45 degrés et grande taille (L'ombre peut être plusieurs fois plus longue que l'article lui-même. En conséquence, de longues ombres donnent un effet plat de la profondeur.
Cet effet rend un objet plus tridimensionnel, mais en le laissant en même temps dans le contexte de la conception plate.
7. Travailler avec des polices
La typographie joue un rôle important dans la conception plate. Souvent, le texte devient l'élément principal de la composition.
Dans des polices plates et simples sont généralement utilisées, rendant toute la conception dans son ensemble propre et lisible. Vous pouvez trouver de nombreuses polices libres dans Adobe Typekit si vous utilisez Adobe Products. Vous trouverez également de nombreuses bonnes fontières libres sur la police Squirrel. Mais n'oubliez pas de lire la licence si vous allez utiliser la police à des fins commerciales.
Le plus souvent en design plat, il est de coutume d'utiliser le registre supérieur et des couleurs contrastées, il rend le texte plus lisible.
Utilisez des polices avec prudence, rappelez-vous qu'il doit mettre l'accent sur la conception et le faire correspondre et ne pas regarder un élément distinct. Cela ne signifie pas que vous ne pouvez pas utiliser de polices avec des fonts ou des polices complexes manuscrites. Rappelez-vous simplement le minimaliste et gardez tout au bilan. Cependant, l'appartement utilise toujours des polices sans Serifs, car ils ont l'air plus strictement et doucement.
8. Avantages et inconvénients de la conception plate
Malgré le fait que la conception plate est devenue si populaire grâce à ses nombreux avantages, il a toujours les inconvénients rencontrés par des concepteurs lors de l'utilisation de ce style. Regardons tout et contre.
avantages
Popularité
La conception plate est devenue une tendance, collectionne de plus en plus de commentaires positifs \\ des designers et des concepteurs Web, et il ne semble pas à tout moment qu'il perd sa position. Au contraire, il se propage de plus en plus, gagnant de nouvelles formes et caractéristiques, de plus en plus créatif.
Simplicité
Le design plat est simple, minimaliste et propre. L'appartement sur le Web aide les utilisateurs à se concentrer sur le contenu et non distrait par les effets visuels. Cela fonctionne également pour les interfaces. applications mobiles: Conception propre avec gros boutons Permet d'utiliser des appareils mobiles parfaits.
Luminosité
Couleur - autre Cool Plus en design plat. Les couleurs lumineuses et riches sont attrayantes et propres, et l'absence de gradients rend le design élégant. De plus, de telles couleurs propres le rendent plus positive, présentable et plate crée l'ambiance souhaitée.
désavantages
Flat a beaucoup plus d'avantages, mais aucun design n'est idéal, et nous ne pouvons pas l'idéaliser. Voici quelques défauts de conception des défauts que nous devons mentionner:
Ostutif
Parfois, le manque d'informations importants ou d'effets visuels permet de créer une interface amicale pour l'utilisateur de l'utilisateur, ce qui rend en général la conception de l'inhabituelle. Non à tous les utilisateurs appartement semble confortable car il peut être difficile de trouver des éléments sur la page Web que vous devez cliquer ou cliquer sur l'écran. téléphone mobileParce qu'ils ne sont pas interactifs.
Problèmes d'impression
Comme mentionné précédemment, toutes les polices ne peuvent pas venir en design plat. Parfois, une telle police riche avec des bords tranchants a été vraiment équilibrée et élégante. Cependant, si la police est sélectionnée incorrecte, elle peut détruire la conception entière. Vous devez vraiment vous sentir bien quelles polices conviennent à plat et qu'il n'y a pas d'expérience d'expérience, le choix de la police est très difficile.
Faibles visuels
En raison de restrictions dans l'utilisation d'effets, de couleurs et de polices, le flaret peut sembler trop simple et froid. Son minimaliste peut également devenir son principal inconvénient de l'autre design plat à la fin ressemble à la vôtre de la même manière que la vôtre. Par conséquent, il est très difficile de rendre vos icônes ou vos 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, au fil du temps, la conception plate peut être ennuyeuse.
9. Tendances de la conception plate future
On ne peut pas dire que la conception plate était entièrement formée et arrêtée à sa manière, cela est dû à ses faiblesses mentionnées ci-dessus, l'appartement cherche à développer et à changer, acquérir de nouvelles fonctionnalités et améliorer l'expressivité visuelle.
Si vous regardez attentivement le dernier exemple de design plat, vous pouvez remarquer qu'il est vraiment Progressivement, de ses outils stricts et commence à ajouter des effets minces, tels que: gradients, ombres, éclairage et autres effets visuels.
Ces petites choses donnent la conception plate de quelque profond de profondeur, tout en surcharge avec des détails, comme ils le font dans des design ankleorphes. Ces améliorations mineures rendent plate plus réactive et commode, et apportent également un look frais, faisant également une flotte plus flexible et polyvalente.
Ainsi, la flétion ne perd pas ses traits, mais devient plus intéressante, flexible- Il va vraiment mieux.
conclusions
Ainsi, nous avons discuté de certains faits de l'histoire du design plat et avons parlé de couleurs, de formes et de typographie. Nous avons examiné différents points de vue, arrêtés aux avantages et aux inconvénients de l'appartement et ont appris certains des principaux principaux de la création d'un bon design.
J'espère que vous vous êtes manipulé de nouvelles informations de cet article ou du moins le trouvez intéressant. Vous devez essayer de créer un design plat si vous ne l'avez pas fait avant.
À la fin, que devraient être mentionnés d'autre sur le design plat?
Si vous aimez vraiment l'appartement avec ses arêtes vives, des couleurs juteuses et ses polices croustillantes, sa propreté et sa minimaliste, puis agir!
Ceci est dans la tendance, mais comme tous les autres style graphiques, ne limitez pas la même technique. Si un appartement est une tendance, cela ne signifie pas que dans le travail du projet, vous ne pouvez pas utiliser d'autres styles. Skvomorphisme avec ses petits détails et ses textures peuvent aussi être bonne décision. La chose principale, rappelez-vous que son design est pour chaque projet, il doit exprimer son esprit, son objectif, son essence, tout en restant pratique et fonctionnel. Avant!
La page Web facile et relaxante est prise pour être le plus correct. Le style de design plat du site est opportun dans de nombreux cas. Les interfaces simples fonctionnent souvent mieux et grâce à la tendance générale au minimalisme, la direction plate est toujours pertinente (Microsoft et Apple ont fait son propre avion). En utilisant de belles couleurs plates dans la conception, des entreprises bien connues ne manquent pas l'occasion d'exprimer leur individualité, d'attirer l'attention sur la marque ou d'augmenter la conversion.
Exemples de bonne conception plate
Des sites plats magnifiques et intelligemment fabriqués avec une navigation pratique et interface compréhensible. Leur design réfléchi et dessiné se vend bien et crée une bonne expérience utilisateur.
Lancer.
Version unique gris-blanc-orange de plat. On dirait magnifiquement comme un microface dans l'interface utilisateur expressive avec des boutons fantomatiques et des arrière-plans défilés parallaxes. Effets Skrol, comme un menu collant et se chevauchant sur une page de la page de bébé, rendez-vous visuellement compact sur le site.
eTECC Interactive.
La conception simple du site de l'agence américaine n'a pas l'air ordinaire, car Bien fait bien et avec goût. L'ancienne école de design ne fonctionne plus pire que les innovations, elle peut être soumise de manière rentable à la société et à ses services.
Cabinet d'avocats de Néhora.
Design plat puissant avec des éléments sophistiqués confèrent au site de l'apparence professionnelle du cabinet d'avocats de Californie. Chapeau et football magnifiquement décoré. Couleur blanche et nuances d'or sur un fond turquoise sombre créent un beau contraste doux. L'interface de la page orientée par l'utilisateur nous a permis de rationaliser le contenu.
Testerie.
Le site WordPress de l'Agence allemande dispose d'une conception minimaliste agréable avec des effets HTML5 / CSS3 et. Taches pastel / gris-or, photos de correction des couleurs et marquage modulaire a permis de bien placer un site Web comme collage faits intéressants à propos de la société.
Amazee Labs.
Le site des développeurs de Drupal suisses est un design concis avec des façades de couleurs agréables. Les éléments créatifs de l'appel à l'action sont utilisés, les techniques plates et HTML5 / CSS3 sont appliquées.
Aiguille de l'espace.
"Aiguille spatiale" Symbole de Seattle. Site et page d'accueil avec tirage en arrière. Défilement décoré de manière unique avec effets de clarification et mini diapositives à la fin.
Construire à Amsterdam
L'agence de marque néerlandaise possède un magnifique site plat avec un menu de navigation non standard. Belle et élégamment décorée d'une interface, bien.
La conférence jaune.
Contenu optimiste, jaune vif et le site configure sur un positif.
Joie intermédiaire.
Le site de l'agence de création internationale de Pologne avec un design plat sur CSS3 et de bonne ux. Le site utilise des panneaux latéraux et inférieurs et est pratique pour une utilisation.
Fuse laboratoire créatif.
Un site Web convivial bien structuré de l'American Agency avec un menu côté translucide pratique, un panneau de projet et une mini-introce inégalée sur l'écran principal.
Chobani.
La petite entreprise B2B a un site culinaire agréable et très pratique avec une conception propre à base de HTML5. Soumettez la plage Aide le menu déroulant fixe et le système de navigation secondaire d'origine à quatre niveaux.
Design plat unique et stylistique plat
Les exemples de stylistiques plates uniques sont sélectionnés, les interfaces prouvées sont efficaces, intéressantes et attrayantes. Combinant des graphiques expressives avec un contraste de police agréable, ajoutant un peu d'animation et de microdizers, vous pouvez non seulement rendre le site créatif ou commercial magnifique, mais également montrer votre individualité, exprimer la conception principale des messages.
RJ Investments.
Site de l'agence immobilière britannique avec une conception plate concise élégante dans des tons gris-blancs. Soft expressif ajoute une couleur dorée accentuée. Basé sur WordPress HTML5 / CSS3, JQuery, SVG.
Chaise ttitée.
Site expressivement décoré - La typographie devient visuellement plus intéressante quand avec un minimaliste et un style plat dans la conception retourne des couleurs accrocheuses. Attirer les titres rouges dans le portefeuille se voit attribuer le rôle de "Springboard".
Fhoke
Design propre, plat et unique interface utilisateur Placer. Images au centre de l'attention, incl. Nourriture avec des ordinateurs et des iPhones (les photos prises par une couche séparée semblent réalistes).
Nation
Site de studio mémorable, lumineux et dynamique de Londres. En-tête de contour sur Compact page d'accueil Il ne restera pas inaperçu, ainsi que les boutons spectaculaires de fantômes dans le portefeuille / cas. Utilisé boucle vidéo de fond, Photologuryksogounds avec correction de flou et de couleur, animations élégantes, transitions, page de préchargeur. Un design expressif dans les tons bleus est transmis par le message sur la fiabilité de l'équipe Studio & Energetic.
Mayven dev.
Mayven dev - équipe créative de 30 codeurs / designers UX de San Francisco. Leur site se distingue par l'esthétique retenue de la conception, l'individualité des solutions de couleurs agréables avec des contrastes expressives de la typographie blanche et des graphiques de contour animés sur un fond émeraude.
Agence Hughesleahykarlovic.
La conception propre et nette du site Web de l'American Agency configure immédiatement sur un positif. Décoré de manière unique le menu de navigation: l'effet de navigation avec le chevauchement du filtre de couleur dessine une image d'arrière-plan dans une vidéo fluide.
Satis satellite Communications
Site Web étendu de l'opérateur russe communications par satellite. L'esthétique des affaires est implémentée via un style de design plat avec des illustrations de contour.
Illustrations, effets et créatifs dans des dessins plats
Exemples de conceptions dynamiques, design de flaret créatif et combinaison réussie d'illustration plate avec animation. Flat moderne vous permet de combiner des éléments de conception de jeu avec des sites d'affaires réalistes.
Tectonica studios.
Designer s'applique plat plat Avec des gradients (tendance Web actuelle), un bloc d'illustrations plates lumineuses sur la page principale. Pour une séparation attrayante des sections - espace libre et graphiques animés.
Pixalité
Microsite avec design plat classique utilise des animations de défilement, des illustrations plates et des vidéos.
100 ans de conception
Projet Web créatif de la communauté designer AIGA. Les couleurs plates indiquent des éléments de menu, des partitions ouvertes, des points chauds de navigation et des demi-fenêtres séparées par des illustrations de carrousels.
Drap Agency.
Site spectaculaire et accrocheur coloré d'une agence créative axée sur la technologie. L'innovation des concepteurs et toutes les innovations sont appréciées ici.
Mobkii.
Sans illustrations plates avec des gradients, le site Web de l'Agence mexicaine semblerait ennuyeux et le design est trop ordinaire pour le Web et les candidats.
EcoDom Consorzio.
Le site officiel de la société italienne s'est engagée dans la revitalisation appareils ménagers et disposition. Les conceptions vertes vives, les effets interactifs et dynamiques conviennent au site Web de l'organisation avec une telle activité familiale.
Chose d'émerveillement
Le projet propose de se familiariser avec des choses intéressantes de personnes curieuses, de communautés et d'événements pour élargir les horizons. En commençant par un écran principal décoré de manière abstraite, la conception originale implique ce public.
Homme vert.
Le site sert de guide du festival de Galles. Conception et animation jaune-vert avec graphisme créatif match Comment nom de domaineet les objectifs positifs du projet.
Voir également: Combinaison de couleurs dans la conception Web - Sites verts
Portefeuille Amelia Thompson.
Une page de Chicago. Amelia possède un portefeuille de travail intéressant dans un style plat.
Voir également: 30 sites d'agences élégantes et portefeuille personnalisé des concepteurs
Fait fait
Le site Web du système de gestion de projet avec un traqueur de bugs est magnifiquement décoré dans le style de plat. Les couleurs vives, les graphiques plats / vidéo et l'attrait de bouton contrastant ne peuvent pas être remarqués.
Menthe poivrée.
Le site de création de l'agence numérique polonaise s'applique chiffres géométriques Et des animations inimaginables, des illustrations, des photos, des images.
Arts géex.
Le site du jeune studio Web Moscou est un design ultra-moderne impressionnant et est inclus dans les 40 meilleurs agences numériques. Il se distingue par un menu de navigation élégant, des transitions spectaculaires, une interactivité, une animation et une bonne ux avec des solutions non standard.
Daesk.
Le studio allemand possède une offre de vente spectaculaire sur le menu de navigation HTML5 et non standard. Les couleurs d'acide excessives vendent le produit (suivi de la comptabilité du temps de travail). Effets Harnet avec Parallax Fait défiler une attention fixée sur des boutons avec des appels et des preuves sociales. Après des critiques superbement décorées, page de démarrage Envoie dans des cas / des histoires de clients. Interactif sur un fond de vecteur lance une vente de compensation.
Fcinq.
Site du studio créatif français: une conception plate élégante commence par une belle précharge. Attrayant cette conception fait des photos de correction de couleur et des combinaisons de couleurs uniques.
D.fy.fy.
Site Web flexible de l'agence coréenne avec une vidéo créative à l'arrière-plan. Conception pure moderne sur HTML5 / CSS3. Le menu de navigation en plein écran est un effet impressionnant des transitions sans soudure.
Gens courageux.
Les rediens passés du site de l'agence de création de Florida ont été célébrées dans le sommet créatif. Maintenant, les gens courageux ont un design efficace avec une interface flash claire et compacte.
Néa Media.
Jeux de jouets français et jeux vidéo d'occasion Style de design plat et Web. Créé sur le site WordPress surprend la conception à la mode.
Lltle flyers.
Site australien des thèmes des enfants avec des fleurs plates juteuses. Contraste Les polices hachées ont mis en avant des appels à l'avant et se combinent avec de grands éléments de conception.
Creative IC.
Le site du studio anglais est mis en évidence par de gros titres avec un appel et des centaines d'éléments d'une orange accentuée.
Fatbit.
Le site volumétrique des développeurs Web d'Inde est fabriqué sur WordPress et se distingue par une diversité formative avec des interactions micro et des illustrations animées. Dans l'en-tête et le pied de page, la couleur plate rouge met l'accent sur les appels de la CTA. Sur la page principale, les arrière-plans fixes avec correction de couleur sont supportés en faisant glisser des diapositives dans les carrousels (premier écran, preuve sociale, promotionnelle sur les matrices translucides).
Domaine Menada.
Poursuivre une tradition de qualité de 100 ans, le viticulteur bulgare impressionne aux visiteurs de la précharge d'un tire-bouchon animé. Design plat sombre avec des contrastes doux, un traitement photo créatif et des solutions incisibles vendent l'idée des Elios de la marque.
Frans Hals Museum
Le site du Musée d'art des Pays-Bas a un design inhabituel dans le style d'appartement avec des titres gigantesques de police hachée. Démontez le menu horizontal et vertical non standard Aide les icônes de navigation.
Méticulosité.
Développeurs de site plat de la State Technology Valley de New York. Conception expressive et pure avec géométrie et arrière-plans fixes. Beaux contrastes dans l'en-tête, le footté, les sections avec des boutons CTA.
Atterrissage et vente de designs plats
L'attractivité et la luminosité de la page principale ou intérieure contribue à exprimer une offre unique. La conception de l'atterrissage du site étend les possibilités d'utiliser à plat et augmente les chances d'une autre interaction avec les clients. Le but de la conception de vente et de distribution est de fournir une conversion élevée. Le site LP ou la page d'atterrissage se souvient d'une conception intéressante ou inhabituelle.
Plat - design. (design plat) - Ceci est un style populaire dans la conception de sites et d'interfaces, ainsi que des systèmes d'exploitation, caractéristique distinctive qui est la simplicité, le raffinement et le minimalisme. Design plat ont commencé à acquérir de la popularité en 2010 par opposition au scewerphisme.
Skvomorphisme - Ornement physique ou élément de conception, qui est copié de la forme d'un autre objet, mais constitué d'autres matériaux ou d'autres méthodes. Des exemples incluent des céramiques décorées avec une imitation de serviette pour une similitude avec des pots similaires en métal ou un calendrier informatique qui imite l'apparence des pages du calendrier de bureau (détermination de Wikipédia.).
Promouvoir un style plat dans la conception contribué à la production d'opérations systèmes Windows 8 Depuis Microsoft dans le style de métro, ainsi que iOS 7, dans lequel Apple choisit également un style plat. C'est après cela que la vraie ère du design plat vient. Bientôt, de gros services de recherche et d'applications - Google, YouTube se déplace sur plat-design et de nombreux sites qui utilisent les principes d'un style plat dans leur conception apparaît. DANS dernières années Le design de style plat est le leader des tendances de la conception du site mondial.
Avantages du design plat
- Praticité - L'utilisation de la conception plate vous permet de minimiser le nombre de styles, de scripts et d'animations, ce qui permet au site de se charger plus rapidement.
- Facile à adaptation - La conception plate suffit simplement à s'adapter à divers écrans de résolution.
- Facilité d'utilisation - Grâce au style simplifié, les utilisateurs sont plus faciles à percevoir des informations sur le site.
- beauté - Designs impersonnels externes et simples rendent l'accent sur la conception, qui s'accroche vraiment.
5 principes de la conception de sites Web plats
Le design plat n'est pas ennuyeux du tout, car il peut sembler à première vue. Grâce à sa pureté et à sa raffinement, la solution de conception peut être élégante et belle, sans trop de bruit, ce qui vous permet de vous concentrer sur votre produit ou votre service.
1 - Utilisation d'objets bidimensionnels
La conception plate élimine l'utilisation d'éléments qui donnent une profondeur et un objet volume: ombres, gradients, éblouissements, textures, réflexes, animation. Lorsqu'un objet est affiché, seuls ses contours sont affichés.
2 - Icônes et objets simples
L'utilisation d'icônes plates et de formes de base à simple agrafes avec contours claires et une couleur vous permet de simplifier la conception et de faciliter la tâche. Les éléments de contrôle deviennent intuitivement compréhensibles et stimulent d'interagir.
3 - Polices simples dans le style de design
Une grande attention est payée dans la typographie et les polices de design plat. Il n'est pas utilisé en italique, la police s'intègre harmonieusement dans la conception des sites non seulement dans le contenu, mais également dans la navigation. Même dans le type de police du site, le style de minimalisme est accueilli.
4 - jeu de couleur
La conception plate contient plusieurs couleurs primaires qui excluent l'utilisation de transitions et de gradients en douceur, mais peuvent être brillantes et contrastées les unes des autres.
5 - Minimalisme
La conception plate implique l'utilisation de la visualisation d'éléments, en utilisant toute la largeur de l'écran et à la fois minimiser les informations.
Il y a un tel concept comme design presque plat. C'est l'un des concepts de design plat, qui consiste à utiliser des éléments simples et un espace bidimensionnel. Un exemple de ceci peut être une photo de haute qualité qui est floue dans l'arrière-plan arrière ou des dimensions. Cela vous permet de créer une profondeur et une perspective de l'objet.
Exemples de design plat
Sur Internet, y compris dans le segment biélorusse, vous trouverez de nombreux exemples de sites en développement avec un design plat de sujets différents, y compris des ressources de nouvelles, des portails et même des achats en ligne.
