Le flat design est une tendance clé du design pour les années à venir, alors regardons-le de plus près et découvrons les 5 principes fondamentaux qui ont formé sa base.

Introduction au design plat

En russe, le flat design se traduit par « flat design », et il est devenu un favori absolu après la présentation Apple d'iOS. Une approche minimaliste de la conception pour la convivialité a occupé le devant de la scène. L'accent est mis sur le confort de l'utilisateur. Il s'agit d'une protestation prononcée contre le "squeeformisme" (visualisation d'objets, comme dans la réalité). Le choix s'est porté sur des solutions plus simplifiées et en même temps esthétiquement simples. Les utilisateurs qui en ont assez des visualisations réalistes ont accueilli avec enthousiasme cette direction, et de plus en plus de projets Web se tournent vers ce format.

Je tiens à préciser que "plat" ne veut pas dire "ennuyeux". Les solutions de design plat peuvent être belles, elles sont plus raffinées, propres, sans redondance de quoi que ce soit, se transformant en un « îlot de calme ». Ils rendent enfin le contenu compréhensible. Il reste à apprendre les principes de base afin de les mettre en pratique.

Principe n°1 : A bas les effets inutiles

Le design "plat" ne cherche pas à transmettre des volumes, la visualisation en deux dimensions est donc la base. Cela signifie que vous ne verrez pas d'ombres, de reflets ou de rehauts avec des textures (à l'exception des ombres longues). Seul le transfert des contours, et rien de plus.

Principe #2 : Plus c'est simple, mieux c'est

Il est recommandé d'utiliser des figures monosyllabiques dans la conception, ainsi que de suivre la clarté des contours, qui est conçue pour souligner la légèreté et l'apesanteur. De plus, de tels éléments concis imitent bien le capteur, générant un désir d'interagir avec l'objet (appel à appuyer, toucher). Cependant, la simplicité des éléments n'égale pas la simplicité de la conception dans son ensemble - cela ne s'applique qu'aux contours. En conséquence, tout ce que l'utilisateur voit est clair pour lui et il peut facilement l'utiliser.

Principe #3 : La typographie et son importance

Le design plat demande un travail extrêmement minutieux avec les polices. Autrement dit, leur caractère doit compléter le schéma de conception, sans le contredire. De plus, dans le flat design, la police est également un élément de navigation clé.

Principe #4 : les accents de couleur

Non seulement le type, mais aussi la couleur est un élément essentiel du design plat. La grande majorité des palettes sont basées sur 2-3 couleurs, bien qu'il y ait bien sûr des exceptions. Habituellement juteux et lumineux, mais des couleurs pures sont choisies. Comme indiqué, il n'y a pas de dégradés ou de transitions inutiles.

Principe numéro 5 : optez pour le minimalisme

Le design plat est un excellent exemple d'une tendance mondiale telle que le minimalisme. Les concepteurs abandonnent les "cloches et sifflets" inutiles, s'éloignant des approches complexes et implicites de la visualisation, qui portent leurs fruits sous la forme d'une activité de l'utilisateur.

Plat ou presque plat ? A la recherche d'un compromis !

En conclusion, je voudrais souligner qu'il existe aujourd'hui une synergie entre design plat et non plat. On parle d'un design "presque plat". Il s'agit de l'application la plus courante du concept décrit, lorsque, avec des éléments simples et concis et un espace bidimensionnel, les concepteurs utilisent 1 à 2 astuces pour la profondeur et la perspective.

De plus, la tendance de 2017 était le design semi-plat - un design semi-plat. Influencé par le Material Design, il est devenu un peu plus spatial. Il y a des ombres légères qui rendent le design semi-plat. Le design plat est toujours d'actualité aujourd'hui, en raison des ombres, il est devenu plus profond et plus complexe, mais le concept principal n'est pas violé.

Relativement récemment, une direction de conception telle que FLAT - design ou flat design est devenue populaire.

Les utilisateurs de Windows 8 et versions ultérieures sont déjà familiarisés avec la conception FLAT, car la première chose qu'ils voient lorsqu'ils démarrent le système est cet écran.

L'émergence même du design FLAT est due à la diffusion des applications mobiles. Et je pense que cela est dû au fait que les objets de conception FLAT sont créés à l'aide d'objets vectoriels et, par conséquent, ils sont plus faciles à adapter à diverses plates-formes de gadgets.

FLAT - la conception a les caractéristiques suivantes :

Rejet total ou partiel des dégradés, des textures complexes et des ombres dont je suis personnellement très satisfait. Je n'ai rien à redire sur les ombres et j'aime moi-même les utiliser, mais laissez les éternels problèmes d'affichage du dégradé disparaître.

La typographie, la géométrie, viennent au premier plan. Surtout quand il s'agit de conception de sites Web.

Harmonie et. Le design utilise un nombre limité de couleurs. Voici un exemple de la populaire palette de design FLAT.

Utilisation d'icônes informatives créatives.

Comme je l'ai dit, la conception FLAT est devenue très populaire dans les applications mobiles, car sa principale caractéristique est la facilité de mise en page et l'adaptabilité. La conception FLAT est également largement utilisée en infographie, car elle repose sur l'harmonie de la perception de l'information grâce à l'utilisation de techniques constructives de typographie et de coloration.

À une certaine époque, la tendance la plus populaire en matière de conception de sites Web était le Web 2.0. Maintenant, le design FLAT a pris sa place. La mode a tendance à revenir à l'ancien bien oublié pour en faire quelque chose de nouveau. Qui sait quand FLAT ne sera plus à la mode - design, mais pour l'instant, profitez de la simplicité, de l'harmonie et de l'information de la tendance actuelle. Soit dit en passant, le design plat était déjà populaire dans les années 80, mais c'était alors dû à des caractéristiques techniques, à l'incapacité d'afficher des ombres et des dégradés. Et maintenant, la plupart des principales sociétés informatiques sont passées à la conception plate.

Eh bien, nous nous adapterons également à l'évolution du monde. Dans le prochain article, je vais vous montrer comment utiliser des formes simples dans Photoshop pour créer des icônes dans le style de conception FLAT.

Si mes publications vous ont intéressé, alors je vous propose de vous tenir au courant des dernières mises à jour du site.

(Visité 2 635 fois, 1 visites aujourd'hui)

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

Aujourd'hui, nous allons comprendre ce qu'est le design plat, comment il se présente 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 de nombreuses mises en page, icônes et modèles pour vous donner une idée claire de ce à quoi ressemble le design moderne. .

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

Le design plat est un style moderne d'interface utilisateur, ainsi que de design 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.

Plat versus 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 comprend certaines caractéristiques du skeuomorphisme, mais nous en reparlerons un peu plus tard.

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

2. Un peu d'histoire

Le flat design, comme vous le savez, existait bien avant le moment où il est devenu une tendance mondiale sur le web. Le flat design était assez populaire dans les années 80 car la technique de l'époque n'était pas encore assez développée pour supporter des effets complexes, des textures et des ombres. Cependant, même alors, la conception s'est efforcée de skephomorphisme, en essayant de rendre les éléments d'interface aussi réalistes que possible.

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

En 2010 année Microsoft a lancé Windows Phone 7, qui utilisait un design plat avec des arêtes vives et des graphismes simples hérités de l'un de ses premiers produits. Microsoft (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 atteint son apogée en 2013 lorsque Apple a publié iOS 7, montrant un tout nouveau design avec des éléments d'interface utilisateur entièrement repensés, y compris des icônes et des polices. Apple a créé principes visuels de l'interface utilisateur et de la conception des icônes .

Peu de temps après, Google a également commencé à utiliser le style plat dans ses applications et ses pages Web, 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 lors, le plat est devenu une tendance clé dans la conception Web, rendant les sites Web, les applications et les éléments d'interface élégants, propres et stylés.

Ainsi, il existe trois exemples mondiaux de flat design 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 3D et d'effets réalistes tels que les dégradés, les textures, les reflets, les tons moyens, les 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 silhouette ou les contours d'un objet sont utilisés, c'est-à-dire juste assez pour rendre l'objet reconnaissable, mais pas pour le surcharger de petits détails.

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 compréhensibles et plus faciles à comprendre. Cela maintient le design minimaliste, propre et l'empêche d'avoir un look occupé et désordonné.

4. Parfait

Sachez que lorsqu'il s'agit de créer des icônes plates et des éléments d'interface utilisateur, vous devez les rendre nets, nets et parfaits au pixel près, c'est-à-dire autant que possible. De plus, cela s'applique aux graphiques raster et vectoriels.

Avec Adobe Photoshop, tout est clair ici : cela fonctionne avec des graphiques raster, qui sont basés sur des pixels.

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

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

Je dois dire que les graphiques vectoriels impliquent principalement de travailler avec des formes simples et plates, des couleurs unies et des grilles.Adobe Illustrator est très flexible et vous permet d'adapter la grille à vos besoins, d'aligner des objets et d'utiliser différents types de magnétisme. Cela facilite la création du design parfait qui a l'air propre et élégant sur n'importe quel écran. Si vous voulez apprendre à créer des graphismes parfaits, vous devriez lire l'article : Comment créer des illustrations parfaites au pixel près avec 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 que le design plat utilise dans ses éléments se composent de quelques couleurs de base.

La couleur dans le design plat se distingue par la luminosité, la saturation, la jutosité.La palette de couleurs plates ne se limite pas à quelques couleurs spéciales, elles contiennent 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 et que vous maîtrisez les palettes de couleurs, et que vous expérimentez avec la barre de couleurs dans Photoshop et Illustrator, en mélangeant les couleurs comme vous le souhaitez. Cependant, ce processus est assez compliqué et nécessite une bonne intuition, de l'expérience et des compétences. Vous trouverez ici quelques outils qui peuvent vous aider à créer votre propre palette de couleurs.

Certains d'entre eux conviennent à toutes sortes de conceptions et d'illustrations, pas seulement à des conceptions plates. 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. Le refroidisseur 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 pratique. Appuyez simplement sur la barre d'espace et le programme générera une palette de couleurs, vous pouvez ajuster les couleurs, il y a aussi une fonction d'exportation.

Il existe plusieurs autres services similaires avec des palettes personnalisées qui peuvent être utiles. Cependant, il existe un outil spécialement conçu pour le flat design : FlatUIColors.com de Designmodo est un service avec un ensemble de couleurs « flat », très pratique à utiliser. Ce site est devenu très populaire auprès des designers à la recherche de bons choix de couleurs pour des designs parfaits. Essayez-le !

Et vous pouvez trouver plus de variété de couleurs et de palettes dans Guide de conception de matériaux 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 le plat rejette l'utilisation de tout effet. Cependant, il existe un effet spécifique au flat design. 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 : une pente de 45 degrés et une grande taille (l'ombre peut être plusieurs fois plus longue que le sujet lui-même. Par conséquent, les ombres longues donnent au plat un effet de profondeur.

Cet effet rend l'objet plus tridimensionnel, mais le laisse en même temps dans le contexte d'un design plat.

7. Travailler avec des polices

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

Flat utilise généralement des styles de police simples qui rendent 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 pouvez également trouver de nombreuses bonnes polices gratuites sur Font Squirrel. Mais n'oubliez pas de lire la licence si vous envisagez d'utiliser la police à des fins commerciales.

Le plus souvent en flat design, il est d'usage d'utiliser des majuscules et des couleurs contrastées, cela rend le texte plus lisible.

Utilisez les polices avec précaution, en vous rappelant qu'elles doivent mettre en valeur et s'adapter au design, et ne pas ressembler à un élément séparé. Cela ne signifie pas que vous ne pouvez pas utiliser de polices serif ou de polices cursives complexes. N'oubliez pas d'être minimaliste et de garder tout en équilibre. Cependant, flat utilise toujours plus souvent des polices sans empattement, car elles ont l'air plus strictes et plus soignées.

8. Avantages et inconvénients de la conception plate

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. Regardons les avantages et les inconvénients.

avantages

Popularité

Le flat design est devenu une tendance, gagnant de plus en plus de retours positifs de la part des designers et des webdesigners, et il ne semble pas du tout perdre du terrain. Au contraire, il se répand de plus en plus, acquérant de nouvelles formes et fonctionnalités, 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 permet une expérience mobile parfaite.

Luminosité

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

Défauts

Flat présente de nombreux autres avantages, mais aucun design n'est parfait et nous ne pouvons pas l'idéaliser. Voici quelques inconvénients du flat design que nous devons mentionner :

Absence de réponse

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 plats ne se sentent pas à l'aise, car il peut être difficile de trouver des éléments sur une page Web sur lesquels vous devez cliquer ou appuyer sur un écran de téléphone mobile car ils ne sont pas interactifs.

Problèmes de typographie

Comme mentionné précédemment, toutes les polices ne peuvent pas convenir au design plat. Parfois, une police aussi riche avec des arêtes vives semble vraiment équilibrée et élégante. Cependant, si la police est mal choisie, cela peut détruire l'ensemble du design. Vous devez avoir une très bonne idée des polices qui conviennent à l'aplat 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, le plat peut sembler trop simple et froid. 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 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. Par conséquent, le design plat peut devenir ennuyeux avec le temps.

9. Tendances futures du design plat

On ne peut pas dire que le design plat est entièrement formé et arrêté à sa manière.C'est peut-être à cause de ses lacunes mentionnées ci-dessus, le plat a tendance à se 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 voir qu'il est vraimentprogressivement de ses outils rigoureux et commence à ajouter des effets subtils tels que des dégradés, des ombres, des éclairages et d'autres effets visuels.

Ces petites touches donnent de la profondeur aux conceptions plates sans être trop détaillées comme le font les conceptions skeuomorphes.Ces améliorations mineures rendent le plat plus réactif et confortable, ainsi qu'un nouveau look, rendant le plat plus flexible et polyvalent.

Ainsi, l'appartement ne perd pas ses caractéristiques, mais devient plus intéressant, flexible- Il va vraiment mieux.

conclusions

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

J'espère que cet article vous a appris quelque chose de nouveau, ou du moins que vous l'avez trouvé intéressant. Vous devriez essayer le flat design si vous ne l'avez pas encore fait.

Après tout, que faut-il encore mentionner à propos du flat design ?

Si vous aimez vraiment le plat avec ses bords nets, ses couleurs juteuses et ses polices nettes, sa propreté et son minimalisme, alors allez-y !

C'est tendance, mais comme pour tout autre style graphique, ne vous limitez pas à une seule technique. Si plat est à la mode, cela ne signifie pas que vous ne pouvez pas utiliser d'autres styles dans votre projet. Le skeuomorphisme avec ses petits détails et ses textures peut aussi être une bonne solution. Surtout, n'oubliez pas que le design est différent pour chaque projet, il doit exprimer son esprit, sa finalité, son essence, tout en restant pratique et fonctionnel. Vers l'avant!

Le design plat est devenu populaire ces dernières années pour les applications et les sites Web. Cela ne veut pas dire que tout le monde aime ce style, mais il ne convient certainement pas à toutes les applications et à tous les sites. S'il existe de nombreux avantages d'un design plat, tels que la simplicité et le minimalisme, il est facile à utiliser. Pour certaines applications, la conception à plat peut être trop simple. C'est-à-dire qu'il vaut la peine d'ajouter des ombres ou des dégradés pour le rendre plus beau.

Beaucoup soutiennent que la conception Web plate est une conception efficace. Ils disent que c'est une façon de rendre le projet aussi convivial que possible. Voici quelques exemples inspirants de projets flat design. Cette compilation de divers portefeuilles est idéale pour comprendre les conceptions plates qui fonctionnent vraiment.

L'ISSland

Création de janvier

Singe minimal

Qu'est-ce que le design plat ?

• Design plat centré sur l'utilisateur
• La conception plate est simple
• Design plat - moins de dégradés
• La conception plate comprend des lignes droites et des coins carrés.
• Utilisez généralement un fort contraste de couleur
• Le design plat n'a pas d'ombres, de biseaux, de textures ou quoi que ce soit qui ressemble à de la 3D
• Le design plat n'existe qu'en 2 dimensions
• Le design plat est une tendance à la simplicité et au minimalisme
• Design plat - ne pas utiliser d'effets supplémentaires
• Il n'y a pas d'extras
• Conception plate - moins de boutons et de "kits de carrosserie"
• Le design plat signifie se concentrer sur les polices
• Les combinaisons de couleurs, les couleurs contrastées et les variations de couleurs intéressantes sont des éléments importants du design plat.
• Le design plat est l'un des nombreux designs. Cela fonctionne pour certains projets et pas pour d'autres.

Ce qui n'est pas du flat design

• Le design plat n'est pas un skeuomorphisme ou un design qui émule la forme et les contours de la "réalité".
• La conception plate n'inclut pas les boutons brillants
• Le design plat n'inclut pas les décorations
• Vous ne trouverez pas d'idées traditionnelles sur la "profondeur" dans le flat design.
• Le flat design ne convient pas à tous les projets

Le flat design est-il juste un design efficace ?

Certains considèrent le design plat en soi comme un design efficace. Autrement dit, cela simplifie l'utilisation des sites et des applications, vous permet de trouver les informations nécessaires sans être distrait. Bien entendu, le flat design n'est pas le seul à faciliter la recherche d'informations. Si tout est bien fait, les utilisateurs n'auront pas de problèmes. Le projet doit être simple et facile pour ceux qui sont capables de l'utiliser. Quelqu'un préfère utiliser un design plat et quelqu'un d'autre un style de design.

Éléments pour le design plat

Vous aimez le design plat ? Voici quelques éléments qui peuvent être utilisés pour un projet "à plat"

Pack d'icônes plates

La conception légère et attrayante d'une page Web est considérée comme la plus correcte. Un style de conception de site Web plat est approprié dans de nombreux cas. Les interfaces simples fonctionnent souvent mieux, et grâce à la tendance générale au minimalisme, la tendance Flat est toujours d'actualité (Microsoft et Apple ont rendu leurs OS plats). En utilisant de belles couleurs plates dans leurs designs, les entreprises bien connues ne manquent pas l'occasion d'exprimer leur personnalité, d'attirer l'attention sur la marque ou d'augmenter les conversions.

Bons exemples de conception à plat

Des sites plats magnifiquement et intelligemment conçus avec une navigation facile et une interface claire. Leur conception réfléchie et rendue se vend bien et crée une bonne expérience utilisateur.

lancement

Une variante unique gris-blanc-orange de l'appartement. La micro-itération est magnifique dans une interface utilisateur expressive avec des boutons fantômes et des arrière-plans flous à défilement parallaxe. Les effets de défilement, tels qu'un menu collant 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

La conception simple du site Web de l'agence américaine n'a pas l'air ordinaire. fait avec qualité et goût. Le design old school fonctionne aussi bien que les innovations, il peut mettre en valeur l'entreprise et ses services.

Cabinet d'avocats Nehora

Un design épuré et plat avec des éléments subtils donne au site Web du cabinet d'avocats californien un aspect professionnel. Chapeau et pied de page magnifiquement conçus. La couleur blanche 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 teintes pastel / gris-or, la correction des couleurs des photos et la mise en page modulaire ont contribué à concevoir magnifiquement le site comme un collage de faits intéressants sur l'entreprise.

Amazee Labs

Le site des développeurs suisses Drupal a un design laconique avec des combinaisons de couleurs agréables. Les éléments d'appel à l'action sont conçus de manière créative, les techniques Flat et HTML5/CSS3 sont utilisées.

aiguille de l'espace

La Space Needle est le symbole de Seattle. Le site a également une page principale avec des arrière-plans de dessin. Le défilement est conçu de manière unique avec des effets d'éclaircissement et des mini-diapositives à la fin.

Construire à Amsterdam

L'agence de marque néerlandaise a un beau site plat avec un menu de navigation personnalisé. Interface agréable et élégamment conçue, bonne.

La conférence jaune

Contenu optimiste, couleur jaune vif et le site vous prépare au positif.

Joie Intermédia

Site Web pour une agence créative internationale de Pologne avec un design CSS3 plat et une bonne UX. Le site utilise une barre latérale et une barre inférieure et est facile à utiliser.

Créatif FuseLab

Un site d'agence américain bien structuré et convivial avec une barre latérale translucide pratique, un panneau de projet et des mini-introductions discrètes sur l'écran principal.

Chobani

Une petite entreprise b2b a un site de cuisine agréable et très convivial avec un design épuré 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 d'un 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 graphismes expressifs avec un joli contraste de police, en ajoutant un peu d'animation et de micro-itérations, vous pouvez non seulement rendre un site créatif ou professionnel magnifique, mais aussi montrer votre personnalité, exprimer le message principal du design.

RJ Investissements

Le site Web d'une agence immobilière britannique avec un design plat élégant et laconique en gris et blanc. L'expressivité douce ajoute un accent de couleur dorée. Basé sur WordPress HTML5/CSS3, jQuery, SVG.

Chaise inclinée

Site Web conçu de manière expressive - la typographie devient visuellement plus intéressante lorsque les couleurs accrocheuses reviennent au design avec un style minimaliste et plat. Les rubriques rouges qui attirent l'attention dans le portefeuille se voient attribuer le rôle de « tremplin ».

FHOKE

Design épuré et plat et interface utilisateur de site Web unique. Images au point, incl. épiceries avec ordinateurs et iPhones (les photos affichées sous forme de calque séparé semblent réalistes).

Nation

Un site accrocheur, lumineux et dynamique pour un studio londonien. L'en-tête de contour sur la page d'accueil compacte ne passera pas inaperçu, pas plus que les boutons fantômes accrocheurs sur le portfolio/les études de cas. Une vidéo d'arrière-plan en boucle, des arrière-plans photo avec flou et correction des couleurs, des animations élégantes, des transitions, un préchargeur de chargement de page sont utilisés. Le design expressif dans les tons bleus transmet le message de la fiabilité du studio et de l'énergie de l'équipe.

Développeur Mayven

Mayven Dev est une équipe créative de 30 codeurs / UX designers basée à San Francisco. Leur site se distingue par une esthétique de conception sobre, une individualité de style, des schémas 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 de l'agence américaine vous place immédiatement sur une note positive. Le menu de navigation est conçu de manière unique : un effet de survol avec une superposition de filtres de couleur transforme l'image d'arrière-plan en une vidéo en boucle.

Communications par satellite Satis

Vaste site Web d'un opérateur russe de communications par satellite. Esthétique d'entreprise réalisée à travers un style de design plat avec des illustrations de contour.

Illustrations, effets et créativité dans les designs plats

Exemples de conceptions dynamiques, de conceptions plates créatives et d'une combinaison réussie d'illustrations plates et d'animations. Modern Flat vous permet de combiner des éléments de conception de jeux avec un contenu de site Web d'entreprise réaliste.

Studios tectoniques

Le concepteur utilise des graphiques plats avec des dégradés (la tendance actuelle du Web), un bloc d'illustrations plates lumineuses sur la page principale. Pour une division attrayante des sections - espace libre et graphiques animés.

pixity land

Un microsite au 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é de design AIGA. Les couleurs plates indiquent les éléments de menu, les sections ouvrantes, les points chauds de navigation et les fenêtres coupées en deux avec des carrousels d'illustration.

Agence Drap

Site spectaculaire, accrocheur et coloré pour une agence créative axée sur la technologie. Ici, ils apprécient l'innovation de conception et toutes les innovations dans la présentation de l'information.

Mobki

Sans illustrations plates avec des dégradés, le site de l'agence mexicaine aurait l'air ennuyeux et le design serait trop ordinaire pour les développeurs Web et d'applications.

Ecodom Consorzio

Site officiel d'une entreprise italienne engagée dans la revitalisation des appareils électroménagers et le recyclage. Un design vert vif, des effets interactifs et dynamiques conviennent au site Web d'une organisation ayant ce type d'activité.

Chose d'émerveillement

Le projet propose de se familiariser avec les choses qui intéressent les curieux, la communauté et les événements pour élargir leurs horizons. Commençant par un écran d'accueil abstrait, la conception originale engage ce public.

homme vert

Le site sert de guide au festival gallois. La conception et l'animation jaune-vert avec des graphismes plats créatifs sont conformes à la fois au nom de domaine et aux objectifs positifs du projet.

Lire aussi : Combinaison de couleurs dans la conception Web - sites verts

Portefeuille Amélia Thompson

Page unique de Chicago. Amelia a un portefeuille de travail de style plat intéressant.

Lire aussi : 30 sites Web d'agence élégants et portefeuilles de designers personnels

Fait fait

Le site Web du système de gestion de projet avec suivi des bogues est magnifiquement conçu dans un style plat. Des couleurs vives, des graphismes/vidéos plats et un bouton d'appel contrasté sont incontournables.

Menthe poivrée

Le site créatif de l'agence numérique polonaise utilise des formes géométriques et des animations inimaginables, des illustrations, des photographies, des dessins.

Geex Arts

Le site internet d'un jeune studio web moscovite impressionne par son design high-tech ultra-moderne et figure dans le TOP 40 des agences digitales. Il se distingue par un menu de navigation élégant, des transitions spectaculaires, de l'interactivité, de l'animation et une bonne UX avec des solutions non standard.

DAESK

Le site Web du studio allemand a un design HTML5 de vente passionnant et un menu de navigation personnalisé. Des couleurs acides excitantes vendent le produit (suivi de présence). Les effets de survol avec défilement parallaxe attirent l'attention sur les boutons d'appel et la preuve sociale. Après les témoignages magnifiquement rédigés, la page de démarrage renvoie aux cas/histoires de clients. Interactif sur 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. Cette conception est rendue attrayante par la correction des couleurs des photographies et des combinaisons de couleurs uniques.

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. Dans le menu de navigation plein écran, l'effet des transitions fluides est impressionnant.

Les gens braves

Les refontes passées du site Web d'une agence de création de Floride ont été notées dans le top créatif. Brave People a maintenant un design efficace avec une interface plate claire et compacte.

Néa Média

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 un design à la mode.

Petits Flyers

Site australien pour enfants avec des couleurs plates juteuses. Les polices sans empattement contrastées mettent en valeur les attraits et s'associent à de grands éléments de conception.

ic créatif

Le site du studio anglais se distingue par de gros titres attrayants et des éléments STA en accent orange.

FATbit

Un site massif de développeurs Web indiens est créé sur wordpress et présente 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 plate rouge accentue les CTA. Sur la page principale, les arrière-plans fixes avec correction des couleurs sont pris en charge, le glissement des diapositives dans les carrousels est pris en charge (premier écran, preuve sociale, promo sur plaques translucides).

Domaine Menada

Poursuivant une tradition de qualité centenaire, le vigneron bulgare impressionne les visiteurs avec une précharge de tire-bouchon animée. Le design plat sombre avec des contrastes doux, une manipulation photo créative et des solutions inusitées vendent l'idée de l'élite de la marque.

Musée Frans Hals

Le site d'un musée d'art néerlandais a une conception inhabituelle dans le style plat avec des titres géants en sans empattement. Les icônes de navigation aident à comprendre le menu horizontal et vertical non standard.

Méticulosité

Site plat pour les développeurs de la Tech Valley de l'État de New York. 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 les boutons CTA.

Pages de destination et conceptions de vente dans le style FLAT

L'attractivité et la brillance de la page principale ou interne permettent d'exprimer une offre unique. La conception du site d'atterrissage élargit les possibilités d'utilisation de Flat et augmente les chances d'interaction ultérieure avec les clients. L'objectif de la conception de vente et d'atterrissage est d'assurer une conversion élevée. On se souvient d'un site LP ou d'une page de destination pour un design intéressant ou inhabituel.