Wir haben bereits viel über Flat Design gesprochen. Habe viel gezeigt verschiedene Beispiele verwenden diese Methode. Wie wäre es mit der Entwicklung einer eigenen Version? Einer der wichtigsten Teile dieser Methode, wenn nicht sogar der wichtigste, ist die Farbpalette.

Flaches Design - Vorbereitung

Flat Design ist eine Methode, die keine zusätzlichen oder einfachsten Effekte verwendet und auch keine dreidimensionalen Elemente enthält. Effekte wie Schatten, Abschrägungen, Prägungen und Farbverläufe kommen im Flat Design nicht zum Einsatz.

Manche nennen den Look von Flat Design einfach, obwohl das nicht immer der Fall ist. Aussehen selbst ist einfach, übersichtlich und benutzerfreundlich und wird daher auch für mobile Benutzeroberflächen immer beliebter modische Option Design für Webdesign.

Definieren der Farbpalette

Flaches Design funktioniert mit hellen, kräftigen Farben und wenn es um ... geht Farbpalette, Dann bevorzugen Designer meistens die Verwendung einer großen Farbvielfalt.

Eine weitere Sache, die Flat Design in Bezug auf die Farbe unterscheidet. Designer verwenden Farbpalette Nur einen Farbton und zwei, drei, vier oder mehr Farben hinzufügen. Bei den meisten dieser Optionen handelt es sich um helle, vollständig gesättigte Farbtöne, die Gegensätze wie Grau und Schwarz darstellen.

Wenn es um Farb-Flat-Design geht, werden viele traditionelle Regeln für Farbkombinationen und -übereinstimmungen ignoriert und Paletten verwendet, die den gesamten Regenbogen umfassen. eine große Anzahl Blumen.

Alles, was wir im flachen Farbdesign sehen, ist eine Kombination aus Farbton und Sättigung. Designer können eine ganze Reihe von Farbtönen verwenden, die sich in der eingestellten Farbtiefe ergänzen, unabhängig davon, ob diese Farbe die Primärfarbe ist oder das Ergebnis einer sekundären Farbkombination ist oder ob diese Farbe möglicherweise aus einem völlig anderen Teil stammt Farbpalette und enthält Farben in Schwarz- oder Weißtönen.

Wenn es darum geht Farbpalette Flache Designs sind oft übersättigt mit leuchtenden Farben, retro oder eintönig. Das bedeutet nicht, dass sie die einzigen sind Optionen, aber da sich der Trend heute gerade erst entwickelt, sind diese Optionen jetzt am beliebtesten.

Helle Farben

Hell Farbpalette Flat Design zeichnet sich oft dadurch aus, dass es unterschiedliche Gefühle hervorruft. Helle Farben Sie wirken im Vergleich zu herkömmlichen besonders gut, auch auf dunklem Hintergrund, erzeugen Kontrast und ziehen die Aufmerksamkeit des Benutzers auf sich.

Wo also anfangen?

FlatUIColors.com hat eine tolle Startliste mit einigen der beliebtesten Farbtöne im Flat Design. Von leuchtenden Blau- und Grüntönen bis hin zu Gelb- und Orangetönen. Die Website ist ein großartiger Ort, um mit der Verwendung von Flat Design in Ihrem Projekt zu beginnen, da Sie kostenlose Farben auswählen und herunterladen können verschiedene Kombinationen Blumen. (Ich persönlich mag graue und ruhige Töne.)

Wenn Sie Ihre eigenen leuchtenden Farben in einem flachen Design kombinieren möchten, wählen Sie Schlichtheit und Farben, die dasselbe haben Farbton und Sättigung.

Anschauliche Beispiele: Probieren Sie diese Farbkombinationen zusammen oder einzeln in Gruppen aus, um eine flachere Farbpalette zu erstellen. Jede dieser Farben wird für eine maximale Wirkung vor einem weißen oder schwarzen Hintergrund platziert.

Beliebte Farben: blau, grün und lila

Retro-Farben

Retrofarben sind auch bei der Arbeit mit flachen Designs eine beliebte Wahl.

Diese weniger gesättigten Farbtöne basieren auf hellen Farbtönen Farbpalette, aber mit der Zugabe von Weiß, um sie gedämpfter zu machen. Eine Retro-Farbpalette enthält oft viel Orange und Gelb, manchmal auch Rot oder Blau.

Bei der Arbeit mit flachen Designs kommt es häufiger vor, dass Primär- und Sekundärfarben in Retro-Paletten verwendet werden, da der Farbton weicher ist.

Retro-Beispiele: Retro-Farben wirken am besten, wenn sie aufgetragen werden Vordergrund als dominierende Farben. Kombinieren Sie sie mit Bildern oder gedämpften Farben, um optimale Ergebnisse zu erzielen.

Beliebte Farben: Orange, Pfirsich oder Dunkelblau.

Monotone Farben

Monotone Farben gepaart mit flachen Designs erfreuen sich rasanter Beliebtheit. Diese Farbpaletten Verlassen Sie sich auf einzelne Farben, Schwarz und Weiß, um eine lebendige und dennoch klare Farbpalette zu schaffen.

Die meisten monotonen Farbschemata verwenden zwei oder drei Farben als Grundfarbe. Die beliebteste Farbwahl scheint Blau zu sein, aber viele Designer wählen Farben basierend auf Schwarz (z. B. Grau) für ein monotones Schema oder Farben wie Rot für Knöpfe.

Eine andere Möglichkeit besteht darin, einen Effekt durch monotone kleine Farbvariationen zu erzielen. Wenn Sie mit Blau beginnen, Grüntöne hinzufügen und ein blaugrünes Schema erstellen.

Besonders beliebt sind monotone Farben mobile Anwendungen und mobiles Design.

Monotone Beispiele: Genau wie bei anderen Farbpaletten müssen auch monotone Schemata einen Kontrast verwenden. Mischen Sie von der Grundfarbe abweichende Farbtöne. Beginnen Sie mit gesättigten (100 %) und Farbtönen von 50 %, 20 % und 8 %.

Abschluss

Das Einzige, was Flat Design wirklich zum Erfolg bringt, ist, dass der Trend neu und interessant ist.

Schaffung Farbpalette, das zum Ton Ihres Projekts passt, Benutzern zeigt, wie Sie Ihre Website nutzen können, optisch interessant ist und Spaß macht. Achten Sie bei der Farbgestaltung nicht nur auf einige traditionelle Regeln, sondern auch auf Ihren eigenen Geschmack flache Blüten s Paletten.

Ein Trend wie Flat Design liegt im Trend ständige Weiterentwicklung– Es entstehen neue Standorte, an denen flache Elemente aktiv genutzt werden. Flaches Design wurde in letzter Zeit mit leuchtenden Farben in Verbindung gebracht, aber in letzter Zeit Sie können feststellen, dass viele Designer begonnen haben, mehr zu bevorzugen ruhige Farbtöne Verwenden Sie eine aufgehellte oder gedämpfte Farbpalette. Durch das Experimentieren mit einer Kombination verschiedener Farbtöne können Sie das Design modischer und moderner gestalten und sich von anderen Websites mit einer ähnlichen Anordnung der Hauptelemente abheben.

Die Verwendung einer gedämpften Farbpalette kann auch hilfreich sein, wenn helle Farben mit dem Gesamtthema der Website kollidieren. In manchen Fällen können zu auffällige Farbtöne Benutzer irritieren, was nicht gut für die Website ist. Im Gegenteil, ein ruhiges Farbschema passt sehr gut zur Ästhetik des Flat Designs, da es Ihnen ermöglicht, eine visuelle Hierarchie zu schaffen und die wichtigsten Elemente hervorzuheben.

Helle Farben ziehen die Aufmerksamkeit auf sich, sie fallen ins Auge, müssen aber bei der Gestaltung sorgfältig eingesetzt werden, sonst besteht die Gefahr, dass der Benutzer verwirrt wird und seine Aufmerksamkeit von einem Element zum anderen springt. Indem Sie einige der Originalfarben aufhellen, können Sie einige Teile des Designs in den Hintergrund drängen, während die Hauptfarben erhalten bleiben Farbschema Website.

HELLE SCHATTEN

Um einen neuen Farbton zu erzeugen, können Sie der Originalfarbe Weiß hinzufügen. Der aufgehellte Farbton wird als heller wahrgenommen; solche Farben werden manchmal als Pastell bezeichnet. Die Sättigung der Farbtöne kann von fast weiß bis zu einem nur geringfügig helleren Farbton variieren Originalfarbe. Websites mit einem Design, das eine hellere Palette verwendet, werden als leichter und „weicher“ wahrgenommen und ermöglichen sehr oft die vollständige Verwirklichung der Absicht des Designers. Schließlich ist es nicht immer notwendig, leuchtende Farben zu verwenden – es gibt sie riesige Menge diejenigen, bei denen eine aufgehellte Palette mehr als angemessen ist. Helle Farbtöne passen gut zu Fotos, da sie die Aufmerksamkeit des Benutzers nicht vom Betrachten des Hauptinhalts ablenken.

Wenn Sie sich die Website des Fast-Food-Restaurants Jack Horner ansehen, werden Sie feststellen, dass der dezente hellgelbe Farbton einen starken Kontrast zu den schwarzen Designelementen bildet. Auf diese Weise versucht der Designer, den Benutzern den wichtigsten „Trick“ des Restaurants zu vermitteln, den die Besucher bieten traditionelle Gerichte, gekocht nach alte Rezepte. Der leichte Retro-Anklang passt gut zum Öko-Thema, das das Unternehmen fördert.

Helle Farbtöne sind auch auf der Website www.caketeacher.com erhältlich, wo Sie viele finden können nützliche Tipps zum Backen von Kuchen zu Hause. Die Farbtöne sind hier etwas heller als auf der Website von Jack Horner, hindern den Benutzer jedoch nicht daran, sich auf die in der Mitte befindlichen Fotos zu konzentrieren. Kontrast gedämpfter Töne mit helle Elemente Hilft dem Benutzer, sich auf die Hauptinhalte zu konzentrieren – Rezepte, Tipps und Tricks. Darüber hinaus trägt das subtile Farbschema dazu bei, einen Teil der negativen Wahrnehmung zu beseitigen, die von einem Besucher ausgehen kann, der irgendwann feststellt, dass er sich für ein Abonnement von 18,90 $ pro Monat anmelden muss, um auf alle Inhalte der Website zugreifen zu können.

DUNKLE SCHATTEN

Dunkle Farbtöne erhält man durch die Zugabe von Schwarz zur Grundfarbe. Die Farbgebung wird strenger und schwerer. Schmutzige, dunkle Farbtöne eignen sich gut, wenn Sie auf der Website die entsprechende Atmosphäre schaffen möchten. Eine gedämpfte Farbpalette sieht auf kommerziellen Websites wie der Website von Ann Taylor gut aus.

Dunkle Farbtöne verleihen dem Design Stabilität, ohne die Aufmerksamkeit abzulenken. Auf der Website können Sie Kleidung und verschiedene Accessoires kaufen, damit sich eine Frau den ganzen Tag über wohl fühlt. Die Dinge von Ann Taylor sind lässige Kleidung, bequem und gemütlich, was durch die Farbgebung unterstrichen wird. Aber wenn das Unternehmen eine prätentiöse Glamourmarke wäre, wäre es kaum möglich, auf die Verwendung von hellen, auffälligen Tönen zu verzichten.

Das Design der Frida Café-Website verwendet ein Farbschema, das häufig von der mexikanischen Künstlerin Frida Kahlo verwendet wurde. Dabei handelt es sich um gedämpfte Gelb-, Ocker- und Grüntöne. Der Designer stand vor der Aufgabe, die Grundidee der Cafébesitzer zum Ausdruck zu bringen – eine Rückkehr zur einfachen und erschwinglichen Küche. Im Café Frida können Besucher frisch gebrühten Kaffee mit einem sehr reichen Geschmack probieren, der durch die sanften Farbtöne im Design unterstrichen wird.

ABSCHLUSS

Ob bei der Gestaltung sanfte Farbtöne zum Einsatz kommen oder nicht, hängt von der jeweiligen Situation ab. In manchen Fällen werden sie mehr als angemessen sein, in anderen nicht. Die Tatsache, dass sanfte Farbpaletten heutzutage in Mode sind, bedeutet nicht, dass Sie bei der Gestaltung eines Flat-Style-Designs nicht auf solche Farbtöne verzichten können. Es gibt immer Raum zum Experimentieren und wenn helle Farben besser funktionieren, dann verwenden Sie sie. Wenn Sie jedoch eine bestimmte Atmosphäre auf der Website schaffen möchten, können Sie auf Halbtöne nicht verzichten. Dezente Farben passen gut zu den unterschiedlichsten Inhalten, sodass Sie Akzente gezielter setzen und die Aufmerksamkeit des Benutzers auf das Wesentliche lenken können.

Flat Design ist einer der Trends im Webdesign, der überraschend lange aktuell bleibt. In den letzten Jahren wurde dieses Design aktiv bei der Entwicklung von Schnittstellen für Desktop-, Web- und mobile Anwendungen eingesetzt. Flaches Design wird auch aktiv bei der Erstellung gedruckter Grafikmaterialien eingesetzt. Zu wissen mehr Fakten In diesem Online-Tutorial erfahren Sie mehr über Flat Design. Heute geht es in unserem Gespräch nicht um Flat Design als Ganzes, sondern um seinen spezifischen Teil – Flat Colors.

Flat Design hat seinen Namen nicht ohne Grund: Sein Konzept schließt die Verwendung von dreidimensionalen Elementen, tiefen Schatten und hellen Farbverläufen aus (auf Englisch bedeutet „flat“ „flach“). Schaltflächen, Symbole und andere grafische Elemente wirken vereinfacht und klar, aber dennoch attraktiv.

Ein flaches Website-Design zu entwickeln ist nicht so einfach. Die größten Schwierigkeiten ergeben sich bei interaktiven Elementen, da das Design den Unterschied zwischen statischen und dynamischen Inhalten hervorheben muss. Die einzige Möglichkeit, Benutzern mitzuteilen, welche Elemente interaktiv sind, besteht darin, subtile Schatten und Ränder zu verwenden. Um ein „ausgewogenes“ flaches Layout zu erstellen, müssen Sie daher jedes Element bis ins kleinste Detail durchdenken, und das ist keine leichte Aufgabe.

Auswahl flacher Farben für das Farbschema

Die Bedeutung von Farben im Webdesign kann nicht hoch genug eingeschätzt werden. Beispielsweise kann ein erfolgreicher Artikel mehr Leser anlocken. Man muss gleich sagen, dass Flat Design in allen Farbfragen einzigartig ist. Die leuchtenden Farben des flachen Designs ziehen sofort die Aufmerksamkeit der Nutzer auf sich. Im Gegensatz zu herkömmlichen Farbschemata, die aus zwei oder drei Farbtönen bestehen, werden Flat-Layout-Designs in vier oder mehr Farben erstellt. Sehr oft handelt es sich dabei um satte Farbtöne kombiniert mit Grau oder Schwarz.

Herkömmliche Regeln für Farbkombinationen lassen sich kaum auf das Flat Design übertragen. Beim Flat Design kommt es nicht auf die Kombination der Farben selbst an, sondern auf deren Ton und Sättigung. Trotz der Tatsache, dass Sie bei der Gestaltung eines Layouts durchaus mehrere verwenden können verschiedene Farben, sie müssen in der Tiefe kombiniert werden. Flache Farben selbst können entweder primär oder sekundär sein. Es könnte sogar sein kontrastierende Kombination weiß und schwarz.

Von der Theorie zur Praxis möchte ich Ihnen etwas über eine Reihe flacher Farben aus W3.CSS erzählen. Diese Sammlung enthält verschiedene Farbschemata zum Erstellen von Websites. Hier finden Sie Farben für Materialdesign, flache Farben, Windows Metro und Windows Phone 8-Farben. Diese Auswahl wird von HTML- und CSS-Codebeispielen begleitet, damit Sie die ausgewählte Kombination schnell anwenden können.

Wenn Sie ein absoluter Anfänger sind und nicht wissen, wo Sie anfangen sollen, besuchen Sie Flat UI Colors. Auf dieser Seite können Sie die gewünschte Farbe kopieren und sie dann im Grafikeditor finden, indem Sie den entsprechenden Wert eingeben. Wie Sie sehen, dominieren bei der Auswahl leuchtende Farbtöne – von Grün und Blau bis hin zu Gelb und Orange.

Allerdings gibt es auch beim flachen Design Einschränkungen bei der Farbauswahl. Es ist beispielsweise unwahrscheinlich, dass Sie eine Kombination aus Rot, Gelb und Gelb sehen werden blaue Blumen in einem Layout. Designer bevorzugen kräftigere und gemischtere Farbtöne.

Möchten Sie ein flaches Website-Design entwickeln? Achten Sie auf die MotoCMS 3.0-Vorlagen, die unter Berücksichtigung der Prinzipien des Flat Designs erstellt wurden. Wir haben die Vorlagen mit verschiedenen Beispielen flacher Farbschemata verglichen, um zu zeigen, wie sie sich auf die Eigenschaften auswirken Benutzeroberfläche.

Helle Farben. Helle Blau-, Grün- und Grüntöne violette Farbtöne heben sich perfekt von einem weißen oder schwarzen Hintergrund ab. Diese Farben werden häufig im flachen Website-Design verwendet.

MotoCMS 3.0-Vorlage für die Website von Druckdiensten

MotoCMS 3.0-Vorlage für die Website von Druckdiensten - tolle Lösung für ein Projekt im Zusammenhang mit Drucken und Drucken. Das Thema der Vorlage kann jedoch problemlos geändert werden. Das Template-Design wurde unter Berücksichtigung der Prinzipien des Flat Designs entwickelt. Benutzern werden 8 Optionen für Schieberegler und Galerien sowie 20 Widgets und Module angeboten. All dies wird Ihnen helfen, ein beliebtes und originelles Online-Projekt zu erstellen.

Retro-Farben. Oft sind es Pastellorange und Gelbtöne kombiniert mit leuchtendem Rot und Blau. Am häufigsten sind es die primären flachen Farben Retro-Stil kombiniert mit sekundären - dadurch lässt sich leichter ein Mischeffekt erzielen.

Ein Beitrag mit einigen Tipps und Prinzipien zur Auswahl toller Paletten für Infografiken.

„Wenn du es findest gute Paletten Heutzutage ist es einfach, aber die richtige Farbkombination für die Datenvisualisierung zu finden, ist immer noch schwierig“, schreibt Zheng. Bei der Suche nach Farben für Infografiken identifiziert sie drei Hauptherausforderungen.

Flache UI-Farbpalette
Flache UI-Farbpalette in Protaponia
Flache UI-Farbpalette in Schwarz und Weiß

Erstens sind nicht alle Paletten für die Visualisierung konzipiert. Beispielsweise werden Farben aus Richtlinien für das Interface-Design (z. B. Material Design von Google) möglicherweise von farbenblinden Menschen nicht gut wahrgenommen und weichen einfach geringfügig voneinander ab.

Paletten mit vier Farben von der Color Hunt-Website

Zweitens verfügen viele vorhandene Paletten nicht über genügend Farben. Als Beispiel nennt sie die Website Color Hunt, auf der man sie finden kann gelungene Kombinationen vier Farben. Für Infografiken benötigen Sie jedoch normalerweise 6 bis 12 Farben.

Farbverlaufspaletten von der Color Hunt-Website, deren Farben auf Infografiken schwer zu unterscheiden sind
Der Unterschied zwischen einer Farbverlaufspalette mit vier und zwölf Farben

Drittens variieren die Farben einiger Paletten leicht in der Helligkeit, so dass es schwierig sein wird, sie voneinander zu unterscheiden, insbesondere wenn sie nebeneinander liegen.

Gutes wählen Farbkombination Für Infografiken empfiehlt Zheng die Verwendung von drei Regeln.

Von links nach rechts: die blaue Palette von Material Design, ebenfalls in Protaponium, ebenfalls in Schwarz und Weiß
Das Verhältnis von Helligkeit und Farbe für farbenblinde Menschen und Menschen mit normalem Sehvermögen

Zunächst müssen Sie prüfen, ob die Farben aus der Palette einen ausreichend starken Helligkeitsunterschied aufweisen. „Der Helligkeitsunterschied wird universell sein“, schreibt der Designer. Ein großer Helligkeitsunterschied trägt außerdem dazu bei, die Palette an farbenblinde Menschen anzupassen. Sie können sehen, wie es von Menschen mit Protaponie (verringerte Empfindlichkeit für Rot), Deuteranopie (verminderte Empfindlichkeit für Grün oder andere Farben) wahrgenommen wird und auch, ob es in Schwarzweiß übersetzt wird.

Zweitens ist es besser, natürliche Kombinationen für die Palette zu verwenden. Als Beispiel nennt Zheng den Übergang von Hellgelb zu Dunkelviolett und von Hellviolett zu Dunkelgelb. „Rein rechnerisch sollten sie ungefähr gleich aussehen“, schreibt sie und weist darauf hin, dass die erste Kombination natürlicher aussieht als die zweite. Der Designer führt dies darauf zurück, dass Menschen es gewohnt sind, in der Natur, beispielsweise bei Sonnenuntergang, Kombinationen aus der ersten Palette zu sehen.

Netz zum Arbeiten mit Farbverläufen

Drittens ist es beim Erstellen einer Palette besser, einen Farbverlauf zu verwenden, um den Farbunterschied besser zu spüren. Zur Vereinfachung empfiehlt Zheng, in Photoshop ein Blumenraster zu erstellen, wie im Screenshot oben. Farbverläufe seien bei der Auswahl von zwei oder zwölf Farben wirkungsvoll, sagt sie.

Erfolgreiche Paletten für Infografiken
Erfolgreiche Paletten für Infografiken

Der Designer empfahl auch 12 nützliche Ressourcen zum Arbeiten mit Farben und Paletten. Sie können ihre Liste sehen

In diesem Artikel werde ich Ihnen etwas über flaches Design erzählen. Davon haben Sie wahrscheinlich schon etwas gehört, denn Flat hat sich in den letzten Jahren zu einem der führenden Trends im Internet entwickelt.

Heute schauen wir uns an, was Flat Design ist, wie es entstanden ist und was Sie brauchen, um ein klares, helles und ansprechendes Design zu erstellen.

Sie können finden gute Beispiele flaches Design auf der Website http://market.envato.com/. Es gibt unzählige Layouts, Symbole und Vorlagen, die Ihnen eine klare Vorstellung davon vermitteln, wie modernes Design aussieht .

1. Was ist Flat Design?

Flaches Design - moderner Stil Benutzeroberfläche, sowie Grafikdesign, geprägt von Minimalismus. Flaches Design zeichnet sich durch die Verwendung eines Minimums an Elementen und das Fehlen verschiedener Textur-, Schatten- und Lichteffekte aus, zum Beispiel: gemischte Farben, Farbverläufe, Glanzlichter usw.

Flat ist ein Gegner des Skeuomorphismus( Skeuomorphismus ist ein Designprinzip, bei dem einem Produkt das Aussehen eines anderen gegeben wird, d. h. Wann verschiedene Elemente Schnittstelle werden von realen Objekten kopiert - ca. Übersetzung.) , sowie reichhaltiges Design Es ist jedoch erwähnenswert, dass flaches Design gar nicht so einfach ist, wie es auf den ersten Blick scheint. Es enthält einige Merkmale des Skeuomorphismus, aber wir werden etwas später darüber sprechen.

Im Allgemeinen hilft Flat dem Benutzer, sich auf den Inhalt zu konzentrieren, ohne durch visuelle Elemente abgelenkt zu werden. Das flache Design betont die Einfachheit der Elemente und macht die Benutzeroberfläche gleichzeitig reaktionsschneller, angenehmer und benutzerfreundlicher.

2. Eine kleine Geschichte

Wie Sie wissen, gab es flaches Design schon lange bevor es zu einem globalen Trend im Internet wurde. Flaches Design erfreute sich in den 80er Jahren großer Beliebtheit, da die Technologie damals noch nicht weit genug entwickelt war, um dies zu unterstützen komplexe Effekte, Texturen und Schatten. Allerdings strebte das Design schon damals nach Skeuphomorphismus und versuchte, die Elemente der Benutzeroberfläche so realistisch wie möglich zu gestalten.

Flaches Design in der Form, wie wir es heute sehen, gewann an Popularität, nachdem Microsoft begann, Produkte im sogenannten Metro-Stil zu produzieren. Metro ist ein UI-Design von Microsoft, das durch seinen Stil und seine Einfachheit besticht.

Im Jahr 2010 Microsoft veröffentlicht Windows Phone 7, das ein flaches Design mit scharfen Kanten und einfachen Grafiken verwendete, das von einem der früheren Produkte übernommen wurde Microsoft (Zune). Später, inspiriert vom Erfolg, veröffentlichte Microsoft Betriebssystem Windows 8, basierend auf dem gleichen flachen Metro-Stil.

Schließlich erreichte das flache Design 2013 mit der Veröffentlichung von Apple seinen Höhepunkt der Popularität iOS 7 wird grundlegend demonstriert neues Design mit komplett neu gestalteten Elementen der Benutzeroberfläche, einschließlich Symbolen und Schriftarten. Apple hat erstellt visuelle Prinzipien des UI- und Icon-Designs .

Bald darauf begann Google auch, den flachen Stil in seinen Anwendungen und Webseiten zu verwenden und nannte ihn „ Materialdesign. Google hat diesem Stil sogar einen eigenen Abschnitt gewidmet, einschließlich einer Beschreibung der Ziele des Webdesigns, seiner Prinzipien und Richtlinien für die Erstellung verschiedene Objekte Design: Icons, Layouts und so weiter.

Von da an wurde die Wohnung Schlüsselrichtung Im Webdesign gestalten wir Websites, Anwendungen und Schnittstellenelemente elegant, sauber und stilvoll.

Somit gibt es weltweit drei Beispiele für Flat Design von Unternehmen, die kaum mehr wegzudenken sind moderne Welt Technologien:

Das Metro-Design von Microsoft

Apple iOS 7-Design

Googles Materialdesign

3. Denken Sie daran, sauber zu sein

Flaches Design wird aufgrund des Fehlens dreidimensionaler Elemente offenbar als „flach“ bezeichnet realistische Effekte wie zum Beispiel: Farbverläufe, Texturen, Glanzlichter, Halbtöne, Schatten. Denken Sie daran, dass der flache Stil eine zweidimensionale (flache) Art der Darstellung von Objekten ist.

Darüber hinaus werden Objekte im Flat Design stark vereinfacht und stilisiert dargestellt.

Und manchmal werden sogar nur die Silhouette oder Konturen des Objekts verwendet, d. h. gerade genug, um das Objekt erkennbar zu machen, es aber nicht mit kleinen Details zu überladen.

Minimalismus ist heutzutage ein globaler Trend: Schlichte Formen und die Verwendung scharfer Kanten sorgen für ein klares und ansprechendes Design. Einfache Formen verständlicher und leichter zu verstehen. Dadurch bleibt das Design minimalistisch und klar, ohne dass es geschäftig und überladen wirkt.

4. Bringen Sie es zur Perfektion

Beachten Sie, dass Sie bei der Erstellung flacher Symbole und UI-Elemente dafür sorgen müssen, dass sie klar, ordentlich und pixelgenau aussehen, d. h. so viel wie möglich. Darüber hinaus gilt dies sowohl für Raster- als auch für Vektorgrafiken.

Mit dem Programm Adobe Photoshop Hier ist alles klar: Es funktioniert mit Rastergrafiken, die auf Pixeln basieren.

Hinsichtlich Adobe-Programme Illustrator verwendet Vektorgrafiken, die aus Kurven und Linien bestehen, die als Vektoren bezeichnet werden und durch mathematische Formeln definiert sind.

Früher war Adobe Illustrator kein besonders praktisches Programm zum Erstellen pixelgenauer Grafiken. Die gute Nachricht ist das neueste Versionen Illustrator ist zu einem großartigen Werkzeug zum Erstellen guter Grafiken geworden.

Ich muss sagen, dass bei Vektorgrafiken meist mit einfachen, flachen Formen, reinen Farben und Rastern gearbeitet wird. Adobe Illustrator ist sehr flexibel in den Einstellungen und ermöglicht es Ihnen, das Raster an Ihre Bedürfnisse anzupassen, Objekte auszurichten und zu verwenden verschiedene Arten schnappen. Dies erleichtert die Erstellung des perfekten Designs, das auf jedem Display sauber und stilvoll aussieht. Wenn Sie lernen möchten, wie Sie perfekte Grafiken erstellen, dann sollten Sie den Artikel lesen: So erstellen Sie pixelgenaue Grafiken mit Adobe Illustrator .

5. Farbe

Eines der spezifischsten Merkmale des Flat Designs ist neben den Schatten die Verwendung von Farbe. Die meisten Farben, die das Flat Design in seinen Elementen verwendet, bestehen aus nur wenigen Grundfarben.

Die Farbe im flachen Design ist hell, satt und satt.Das flache Farbschema ist nicht auf ein paar Sonderfarben beschränkt, es enthält viele Farbtöne, und ihre Wahl hängt nur davon ab, was Sie darstellen, seien es Ikonen von Süßigkeiten oder Objekte im Retro-Stil in einer raffinierten Retro-Palette.

Nehmen wir an, Sie sind UI-Designer und haben ein gutes Verständnis für die Farbpaletten, mit denen Sie experimentieren Farbtafel in Photoshop und Illustrator, Farben nach Belieben mischen. Allerdings ist dieser Prozess recht komplex und erfordert viel Fingerspitzengefühl, Erfahrung und Fähigkeiten. Hier finden Sie einige Tools, die Ihnen bei der Erstellung Ihrer eigenen Farbpalette helfen können.

Einige von ihnen eignen sich für alle Arten von Design und Illustration, nicht nur für flaches Design. Zum Beispiel Adobe Color CC, besser bekannt als Cooler. Heute gibt es Zugriff darauf, sowohl über die Website als auch direkt über Adobe-Produkte. Kühler - sehr flexibles Werkzeug, mit dem Sie entweder Ihre eigene Farbpalette erstellen oder aus benutzerdefinierten Paletten aus der Bibliothek auswählen können.

Ein weiterer einfacher und praktischer Farbpalettengenerator ist Coolors. Drücken Sie einfach die Leertaste und das Programm generiert eine Farbpalette, Sie können die Farben anpassen, es gibt auch eine Exportfunktion.

Es gibt mehrere andere ähnliche Dienste mit benutzerdefinierten Paletten, die nützlich sein können. Es gibt jedoch ein Tool, das speziell für flaches Design entwickelt wurde – ein Dienst mit einer Reihe „flacher“ Farben, der für die Arbeit sehr praktisch ist. Diese Seite ist bei Designern, die etwas Gutes suchen, sehr beliebt geworden Farblösungen für perfektes Design. Probieren Sie es aus!

Außerdem finden Sie hier eine größere Auswahl an Farben und Paletten Der Materialdesign-Leitfaden von Google.

6. Lange Schatten

Wie oben erwähnt, zeichnet sich Flat Design durch Einfachheit aus, viele Freiraum- deshalb lehnt flat den Einsatz jeglicher Effekte ab. Es gibt jedoch einen Effekt, der typisch für Flat Design ist. Dieser Effekt ist zum Trend geworden und charakteristisches Merkmal flach.

Wir reden jetzt von langen Schatten. Sie weisen einige typische Merkmale auf, die diesen Effekt erkennbar machen, nämlich: eine 45-Grad-Neigung und große Größe(Der Schatten kann um ein Vielfaches länger sein als das Motiv selbst. Dadurch verleihen lange Schatten der Fläche einen gewissen Tiefeneffekt.

Dieser Effekt macht das Objekt dreidimensionaler, hält es aber gleichzeitig im Kontext des Flat Designs.

7. Arbeiten mit Schriftarten

Typografie spielt im Flat Design eine große Rolle. Oft wird der Text zum Hauptelement der Komposition.

Flache Designs verwenden in der Regel einfache Schriftarten, wodurch das gesamte Design insgesamt sauber und lesbar bleibt. Wenn Sie Adobe-Produkte verwenden, finden Sie in Adobe Typekit viele kostenlose Schriftarten. Auf Font Squirrel finden Sie auch viele gute kostenlose Schriftarten. Vergessen Sie jedoch nicht, die Lizenz zu lesen, wenn Sie die Schriftart für kommerzielle Zwecke nutzen möchten.

Im Flat Design ist es meist üblich, Großbuchstaben und kontrastierende Farben zu verwenden, um den Text besser lesbar zu machen.

Verwenden Sie Schriftarten sparsam und denken Sie daran, dass sie das Design ergänzen und ergänzen sollten, anstatt als separates Element zu erscheinen. Dies bedeutet nicht, dass Sie keine Serifen- oder handgeschriebenen komplexen Schriftarten verwenden können. Denken Sie daran, minimal zu sein und alles im Gleichgewicht zu halten. Allerdings werden bei Flat immer noch häufig serifenlose Schriftarten verwendet, da diese strenger und ordentlicher wirken.

8. Vor- und Nachteile von Flat Design

Obwohl Flat Design aufgrund seiner vielen Vorteile so beliebt geworden ist, gibt es für Designer bei der Verwendung dieses Stils immer noch einige Nachteile. Schauen wir uns die Vor- und Nachteile an.

Vorteile

Popularität

Flaches Design ist zu einem Trend geworden, der immer mehr positive Bewertungen von Designern und Webdesignern erhält, und es scheint überhaupt nicht an Bedeutung zu verlieren. Im Gegenteil, es verbreitet sich immer mehr, nimmt neue Formen und Merkmale an und wird immer kreativer.

Einfachheit

Das flache Design ist einfach, minimalistisch und klar. Flache Webinhalte helfen Benutzern, sich auf den Inhalt zu konzentrieren, anstatt sich durch visuelle Elemente ablenken zu lassen. Dies funktioniert auch für mobile App-Schnittstellen: klares Design mit großen Knöpfen macht Gebrauch mobile Geräte perfekt.

Helligkeit

Farbe ist ein weiteres cooles Plus im Flat Design. Helle und satte Farben wirken attraktiv und sauber, und das Fehlen von Farbverläufen macht das Design stilvoll. Darüber hinaus wirken solche reinen Farben positiver und repräsentativer; flaches Design sorgt für die richtige Stimmung.

Mängel

Flach hat viele weitere Vorteile, aber kein Design ist perfekt und wir können es nicht idealisieren. Hier sind einige Nachteile des flachen Designs, die wir erwähnen müssen:

Reaktionslosigkeit

Manchmal Abwesenheit wichtige Details oder visuelle Effekte erschweren die Erstellung einer benutzerfreundlichen Oberfläche und führen im Allgemeinen dazu, dass das gesamte Design nicht mehr reagiert. Nicht alle Benutzer fühlen sich mit Flat wohl, da es schwierig sein kann, Elemente auf einer Webseite zu finden, auf die Sie klicken oder auf dem Bildschirm tippen müssen Mobiltelefon weil sie nicht interaktiv sind.

Probleme mit der Typografie

Wie bereits erwähnt, eignet sich nicht jede Schriftart für das Flat Design. Manchmal sieht eine so satte Schriftart mit scharfen Kanten wirklich ausgewogen und stilvoll aus. Eine falsche Wahl der Schriftart kann jedoch das gesamte Design ruinieren. Sie sollten ein wirklich gutes Gespür dafür haben, welche Schriftarten für Flat geeignet sind und welche nicht. Mangelnde Erfahrung macht die Auswahl einer Schriftart sehr schwierig.

Schwache Optik

Aufgrund von Einschränkungen bei der Verwendung von Effekten, Farben und Schriftarten können flache Designs zu einfach und kalt wirken. Sein Minimalismus kann auch sein größter Nachteil sein – andere flache Designs sehen am Ende genauso aus wie Ihres. Daher ist es sehr schwierig, Ihre Symbole oder Webseiten anders aussehen zu lassen als das Design einer anderen Person, da Sie dieselben vereinfachten Formen, begrenzten Farbpaletten und ähnliche Schriftarten verwenden. Dadurch kann flaches Design mit der Zeit langweilig werden.

9. Zukünftige Flat-Design-Trends

Man kann nicht sagen, dass sich das Flat Design vollständig entwickelt hat und dann stehengeblieben ist. Vielleicht liegt es an den oben genannten Mängeln, dass das Flat Design nach Entwicklung und Veränderung strebt, indem es neue Funktionen erhält und die visuelle Ausdruckskraft steigert.

Wenn Sie sich das letzte Beispiel für flaches Design genau ansehen, werden Sie vielleicht bemerken, dass es wirklich so istentfernt sich allmählich von seinen strengen Werkzeugen und beginnt, subtile Effekte wie Farbverläufe, Schatten, Beleuchtung und andere visuelle Effekte hinzuzufügen.

Diese kleinen Details verleihen dem Flat-Design etwas Tiefe, ohne übermäßig detailliert zu sein wie skeuomorphe Designs. Diese subtilen Verbesserungen machen das Flat reaktionsfähiger und komfortabler und verleihen ihm außerdem ein frisches Aussehen, wodurch das Flat flexibler und vielseitiger wird.

Dadurch verliert Flat seine Eigenschaften nicht, wird aber interessanter und flexibler- Es geht ihm wirklich besser.

Schlussfolgerungen

Daher haben wir einige Fakten aus der Geschichte des Flat Designs besprochen und über Farben, Formen und Typografie gesprochen. Wir haben uns verschiedene Standpunkte angesehen, uns auf die Vor- und Nachteile von Flat Design konzentriert und einige der wichtigsten Prinzipien für die Erstellung eines guten Designs kennengelernt.

Ich hoffe, Sie haben es selbst gelernt neue Informationen Ich habe diesen Artikel gelesen oder fand ihn zumindest interessant. Sie sind es sich selbst schuldig, zu versuchen, ein flaches Design zu erstellen, wenn Sie es noch nicht getan haben.

Denn was gibt es sonst noch über Flat Design zu sagen?

Wenn Sie Flat mit seinen scharfen Kanten, satten Farben und klaren Schriftarten, seiner Sauberkeit und seinem Minimalismus wirklich mögen, dann entscheiden Sie sich dafür!

Es liegt im Trend, aber wie bei jedem Grafikstil sollten Sie sich nicht auf nur eine Technik beschränken. Nur weil flach im Trend liegt, heißt das nicht, dass Sie in Ihrem Projekt keine anderen Stile verwenden können. Skeuomorphismus mit seinen winzigen Details und Texturen kann ebenfalls werden gute Entscheidung. Das Wichtigste ist, sich daran zu erinnern, dass das Design für jedes Projekt anders ist. Es muss seinen Geist, seinen Zweck und sein Wesen zum Ausdruck bringen und gleichzeitig praktisch und funktional bleiben. Nach vorne!