heim · In einer Anmerkung · Der Designer gab Ratschläge zur Auswahl einer Palette für Infografiken. Weiterentwicklung des Flat-Designs: gedämpfte Farbpalette. Flache Farben

Der Designer gab Ratschläge zur Auswahl einer Palette für Infografiken. Weiterentwicklung des Flat-Designs: gedämpfte Farbpalette. Flache Farben

Wir haben bereits viel über Flat Design gesprochen. Habe viel gezeigt verschiedene Beispiele mit dieser Methode. Wie wäre es mit der Entwicklung einer eigenen Version? Einer der wichtigsten Teile dieser Methode, wenn nicht der wichtigste, ist 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. Das Erscheinungsbild selbst ist einfach, klar und benutzerfreundlich, was es zu einer immer beliebter werdenden Option für mobile Benutzeroberflächen sowie zu einer trendigen Designoption für Webdesign macht.

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 zum Mischen und Anpassen von Farben ignoriert und Paletten verwendet, die den Regenbogen mit mehr Farben umfassen.

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 es sich bei der Farbe um eine Primärfarbe oder um das Ergebnis einer Sekundärfarbe handelt. Farbkombination, oder vielleicht stammt diese Farbe aus einem ganz anderen Teil 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 funktionieren im Vergleich zu herkömmlichen besonders gut, auch auf dunkler Hintergrund, schafft Kontrast und zieht 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 Farben. (Ich persönlich mag graue und ruhige Töne.)

Wenn Sie Ihre eigenen kräftigen Farben in einem flachen Design kombinieren möchten, wählen Sie Einfachheit und Farben mit demselben Farbton und derselben Sättigung.

Anschauliche Beispiele: Probiere diese Farbkombinationen zusammen oder einzeln in Gruppen, 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 funktionieren am besten, wenn sie als dominierende Farben im Vordergrund platziert werden. 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 sich verlassen auf die einzigen Farben, Schwarz und Weiß, um eine helle 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 Erstellung flacher Farbpaletten nicht nur auf einige traditionelle Regeln der Farbauswahl, sondern auch auf Ihren eigenen Geschmack.

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. Weitere Fakten zum Thema Flat Design erfahren Sie in diesem Online-Ratgeber. 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 eine kontrastierende Kombination aus Weiß und Schwarz sein.

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 Webseiten zu erstellen. Hier finden Sie Farben für Material Design, Flat Colors, Windows Metro und Windows Phone 8-Farben. Diese Auswahl wird von HTML- und CSS-Codebeispielen begleitet, damit Sie die gewä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, wird die Auswahl dominiert von helle Farbtöne- von Grün und Blau bis 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 der Benutzeroberfläche auswirken.

Helle Farben. Lebendige Blau-, Grün- und Violetttöne heben sich von weißen oder schwarzen Hintergründen 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 - perfekte 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. Dabei handelt es sich oft um pastellfarbene Orange- und Gelbtöne, kombiniert mit leuchtenden Rot- und Blautönen. Am häufigsten sind es die primären flachen Farben Retro-Stil kombiniert mit sekundären - dadurch lässt sich leichter ein Mischeffekt erzielen.

Praktische Tipps und Tools.

Farben sollten, wie alles andere auch, am besten in Maßen verwendet werden. Bessere Ergebnisse erzielen Sie, wenn Sie in Ihrem Farbschema maximal drei Primärfarben verwenden. Die Wirksamkeit der Farbauswahl im Design basiert weitgehend auf Ausgewogenheit, und je mehr Farben, desto schwieriger ist sie zu erreichen.

Die Farbe bestimmt nicht die Qualität des Designs – sie wertet sie auf.

Pierre Bonnard

Wenn Sie über die ursprünglich für Ihre Palette ausgewählte Farbe hinaus weitere Farben benötigen, verwenden Sie Farbtöne und Schatten. Handeln Sie innerhalb des gewählten Bereichs.

Regel 60-30-10

Mit dieser Gestaltungsregel können Sie schnell ein Farbschema erstellen. Das Verhältnis 60 % + 30 % + 10 % spiegelt die Farbbalance wider. Diese Formel funktioniert, weil sie ein Gleichgewichtsgefühl schafft und es den Augen ermöglicht, sich bequem von einem Punkt zum anderen zu bewegen. Darüber hinaus ist diese Technik äußerst einfach anzuwenden.

60 % ist Ihre dominierende Farbe, 30 % ist Ihre Sekundärfarbe und 10 % ist Ihre Akzentfarbe.

Wanddekoration, Möbel, Accessoires.

Bedeutung der Farben

Wissenschaftler untersuchen seit Jahrhunderten die psychologischen Auswirkungen bestimmter Farben. Über die Ästhetik hinaus erzeugen Farben Emotionen und Assoziationen. Je nach Kultur und Umständen können die Bedeutungen der Farben variieren. Deshalb sieht man Modeboutiquen in Schwarz und Weiß. Sie wollen elegant und edel aussehen.


Asos ist komplett schwarz und weiß, mit grünem „Call-to-Action“. Und das ist nicht einfach so.
  • Rot: Leidenschaft, Liebe, Gefahr
  • Blau: Ruhe, Verantwortung, Sicherheit
  • Schwarz: Geheimnis, Eleganz, Böse
  • Weiß: Sauberkeit, Stille, Ordentlichkeit
  • Grün: Neuheit, Frische, Natur

Mehr über die Bedeutung von Blumen erfahren Sie bei Color Culture.

Zuerst Graustufen

Wir spielen in den frühen Phasen der Designentwicklung gerne mit Farben und Tönen, aber dieses Verhalten kann Sie schnell im Stich lassen – Sie können drei Stunden damit verbringen, eine Hauptfarbe auszuwählen und dann trotzdem Ihre Meinung ändern … Es ist sicherlich verlockend, aber nicht besonders effektiv.

Zwingen Sie sich stattdessen dazu, an der Struktur zu arbeiten – dem Abstand und der Platzierung der Elemente in Ihrem Layout. Das spart viel Zeit. Diese Arbeit ist sehr produktiv. Andererseits muss es nicht langweilig sein. Probieren Sie verschiedene Farbtöne aus, wenn Sie etwas Schönes erreichen möchten Aussehen.


Eines meiner Werke, das ihr auf dribbble finden könnt. Einfache monochrome Farben und Fokus auf Elemente.

Vermeiden Sie reines Grau und Schwarz

Einer der wichtigsten Farbtricks, die ich je gesehen habe, ist das Vermeiden graue Farben ohne Sättigung. IN wahres Leben Es gibt keine reinen Grautöne. Das Gleiche gilt für Schwarze.


Am meisten dunkle Farbe Auf diesem Foto ist es nicht #000, sondern #0A0A10

Denken Sie daran, dass Sie der Farbe immer etwas Sättigung hinzufügen müssen. Unterbewusst wird es natürlicher und näher am Nutzer wahrgenommen.

Glaube an die Natur

Die besten Farbkombinationen hat die Natur bereits erfunden. Sie sehen immer natürlich aus. Am besten beobachten Sie einfach die umliegende Natur und entnehmen daraus Paletten für Ihre Entwürfe; in der Natur verändern sie sich ständig.

Um sich inspirieren zu lassen, müssen Sie sich nur umschauen

Behalten Sie den Kontrast bei

Manche Farben passen gut zusammen, andere überhaupt nicht. Es gibt definierende Regeln für das Zusammenspiel von Farbtönen, die am besten demonstriert werden Farbkreis. Sie sollten diese Methoden kennen, müssen sie aber nicht manuell anwenden.

Lass dich inspirieren

Wenn es darum geht, UI-Beispiele zu finden, ist Dribbble eines der besten beste Orte dafür. Es verfügt über ein Tool zur Suche nach Farbe. Wenn Sie also eine visuelle Recherche zur Verwendung einer bestimmten Farbe durch andere Designer durchführen müssen, gehen Sie zu

Video, gedrucktes Design, Innenarchitektur, Mode ... es gibt einfach unzählige Orte, an denen man sich inspirieren lassen kann. Bewahren Sie interessante Funde für zukünftige Ideen auf.



Ich stehle oft gerne Farben aus KPOP-Musikvideos. Sie sind luxuriös.

Werkzeuge

Um es mir leichter zu machen, werde ich ein paar geben die besten Werkzeuge um Farbpaletten auszuwählen. Sie werden Ihnen viel Zeit sparen.

Zweifellos mein Lieblingswerkzeug zum Auswählen von Farben. Sie können einfach eine Farbe auswählen und durch Drücken der Leertaste eine Palette erstellen. Mit Coolors können Sie ein Bild hochladen und daraus eine Palette erstellen. Sie sind nicht auf ein Ergebnis beschränkt – mit dem Selektor können Sie den ursprünglichen Referenzpunkt ändern.

Kühler

Dieses Tool von Adobe gibt es bereits lange Zeit hilft Designern. Es funktioniert im Browser, es gibt auch eine Desktop-Version. Wenn Sie die Desktop-Version verwenden, können Sie das Farbschema nach Photoshop exportieren.

Es ähnelt Kuler, der Unterschied besteht darin, dass Sie nicht auf 5 Farbtöne beschränkt sind. Ideal, wenn Sie Ihre Primärfarben haben und mit zusätzlichen Farbtönen herumspielen möchten.

Designspiration.net

Stellen Sie sich vor, Sie haben eine Idee für eine Farbpalette, müssen diese aber visuell vergleichen verschiedene Varianten. Designispiration ist für diese Zwecke ideal. Sie wählen bis zu 5 Farben und suchen nach Bildern, die zu Ihren Farbtönen passen. Der Dienst sucht nicht nur erfolgreich nach Bildern in einer bestimmten Palette, sondern hilft Ihnen auch bei der Auswahl der richtigen Grafiken für die Integration in das Design.

Sie fragen sich vielleicht: Was ist, wenn ich nach einem Foto in der ausgewählten Farbe suchen möchte? Shutterstock verfügt über ein Tool namens Spectrum, mit dem Sie Fotos eines bestimmten Farbtons finden können. Dafür benötigen Sie nicht einmal ein Abonnement, denn Vorschaubilder mit Wasserzeichen reichen völlig aus, um die Palette zu erstellen.

Tineye Multicolr

Wenn Sie jedoch ein Foto basierend auf mehreren angegebenen Farben finden oder sogar eine bestimmte Menge jedes Farbtons festlegen müssen, verwenden Sie Tineye. Diese Website nutzt eine Datenbank mit 10 Millionen Creative Commons-Bildern von Flickr.

Abschließende Gedanken

Farbe ist eine sehr schwer zu beherrschende Ressource, insbesondere im Zeitalter des digitalen Designs. Die Tipps, die ich in diesem Beitrag gegeben habe, werden es einfacher machen, die richtigen Farbtöne zu finden. Der beste Weg, um zu lernen, wie man atemberaubende Farbschemata erstellt, ist durch Übung. Spielen Sie also viel mit Farben.

Stichworte: ,

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 - ungefähre Übersetzung.) , sowie reichhaltiges Design. Allerdings ist Flat Design gar nicht so einfach, 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.

In 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 „ Material Design. Google hat diesem Stil sogar einen eigenen Abschnitt gewidmet, einschließlich einer Beschreibung der Ziele des Webdesigns, seiner Prinzipien und Anweisungen zum Erstellen verschiedener Designobjekte: Symbole, Layouts usw.

Seitdem ist Flat zu einem wichtigen Trend im Webdesign geworden und macht Websites, Anwendungen und Oberflächenelemente elegant, klar 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 offenbar aufgrund des Fehlens dreidimensionaler Elemente und realistischer Effekte wie Verläufe, Texturen, Glanzlichter, Halbtöne und Schatten als „flach“ bezeichnet. 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.

Das Programm Adobe Illustrator verwendet Vektorgrafiken, die aus Kurven und Linien bestehen, die als Vektoren bezeichnet werden und durch mathematische Formeln angegeben werden.

Früher war Adobe Illustrator kein besonders praktisches Programm zum Erstellen pixelgenauer Grafiken. Die gute Nachricht ist das letzte Version 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 einige 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 Gegenstände 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. Cooler ist ein sehr flexibles Tool, mit dem Sie entweder Ihre eigene Farbpalette erstellen oder aus einer benutzerdefinierten Palette aus einer 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: FlatUIColors.com von Designmodo – ein Dienst mit einer Reihe „flacher“ Farben, sehr praktisch für die Arbeit. Diese Seite ist bei Designern, die etwas Gutes suchen, sehr beliebt geworden Farblösungen für perfektes Design. Versuch es!

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 haben welche typische Eigenschaften, wodurch dieser Effekt erkennbar ist, nämlich: 45-Grad-Neigung und grosse Grösse(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. Sie können viele finden kostenlose Schriftarten in Adobe Typekit, wenn Sie Adobe-Produkte verwenden. 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. Das 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.

Profis

Popularität

Flaches Design ist zum Trend geworden und gewinnt immer mehr an Bedeutung positives Feedback\ von Designern und Webdesignern, und es scheint überhaupt nicht so, als würde es seine Position 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. Flat on the Web hilft Benutzern, sich auf den Inhalt zu konzentrieren, anstatt sich durch visuelle Elemente ablenken zu lassen. Das funktioniert auch bei mobilen App-Oberflächen: Ein klares Design mit großen Schaltflächen sorgt für Nutzen 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 das an den oben genannten Mängeln: Flat Design strebt nach Entwicklung und Veränderung, 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 sorgen außerdem für 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 verschiedene Standpunkte betrachtet, uns auf die Vor- und Nachteile von Flat konzentriert und einige der wichtigsten Prinzipien für die Erstellung eines guten Designs kennengelernt.

Ich hoffe, dass Sie durch diesen Artikel neue Informationen gewonnen haben oder ihn zumindest interessant fanden. 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 Ihnen Flat mit seinen scharfen Kanten, satten Farben und klaren Schriftarten, seiner Sauberkeit und seinem Minimalismus wirklich gefällt, 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!