Die Evolution des Flat Designs: eine dunkle Farbpalette. Flaches Design und Farbpalette – SkillsUp – praktischer Katalog mit Lektionen zu Design, Computergrafik, Photoshop-Lektionen, Photoshop-Lektionen Auswahl an flachen Farben

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

„Während es heutzutage einfach ist, gute Farbpaletten zu finden, ist es immer noch schwierig, gute Farbkombinationen für die Datenvisualisierung zu finden“, 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 Website „Color Hunt“, 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 wirkungsvoll, wenn man zwei oder zwölf Farben auswähle, 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

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.

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.

• 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 wirksam.

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.

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.

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.

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öffentlichte Windows Phone 7, das ein flaches Design mit scharfen Kanten und einfachen Grafiken verwendete, das von einem seiner 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 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. 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. Dies funktioniert auch für Schnittstellen mobile Anwendungen: Klares Design mit großen Tasten 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 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!

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. Es muss gleich gesagt werden, dass Flat Design in allen Farbfragen einzigartig ist. Die leuchtenden Farben des flachen Designs ziehen sofort die Aufmerksamkeit der Nutzer auf sich. Anders als traditionell Farbschemata, bestehend aus zwei oder drei Farbtönen, flache Layout-Designs werden in vier oder mehr Farben hergestellt. 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 zum Erstellen von Websites. Hier finden Sie Farben für Materialdesign, Flat-Farben, Windows-Metro-Farben und Windows Phone 8. Diese Sammlung wird von Codebeispielen in HTML und CSS 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, 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. Beispielsweise ist es unwahrscheinlich, dass Sie eine Kombination aus Rot, Gelb und Gelb sehen 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.

Ein Trend wie Flat Design entwickelt sich ständig weiter – es entstehen neue Standorte, an denen flache Elemente aktiv eingesetzt werden. Flaches Design wurde in letzter Zeit mit leuchtenden Farben in Verbindung gebracht, aber In letzter Zeit Möglicherweise stellen Sie fest, dass viele Designer begonnen haben, ruhigeren Farbtönen den Vorzug zu geben und eine aufgehellte oder gedämpfte Farbpalette zu verwenden. 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.

Auch die Verwendung einer gedämpften Farbpalette kann hilfreich sein, wenn helle Farben Konflikt mit dem Hauptthema der Website. 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, aber sie müssen 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 Pastellfarben bezeichnet. Die Sättigung der Farbtöne kann von fast weiß bis zu einem Farbton variieren, der nur geringfügig heller als die Originalfarbe ist. 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 eine Vielzahl von Themen, bei denen eine aufgehellte Palette mehr als angebracht 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 das Hauptmerkmal des Restaurants zu vermitteln, das den Besuchern traditionelle Gerichte bietet, die entsprechend zubereitet werden 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. Der Kontrast gedämpfter Töne mit hellen Elementen hilft dem Benutzer, sich auf den Hauptinhalt – Rezepte, Tipps und Tricks – zu konzentrieren. Darüber hinaus trägt das subtile Farbschema dazu bei, einen Teil der negativen Wahrnehmung zu beseitigen, die bei einem Besucher entstehen 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. Schmutzig, dunkle Schatten Sie eignen sich gut, wenn Sie auf der Website die entsprechende Atmosphäre schaffen möchten. Sieht gedämpft gut aus Farbpalette auf kommerziellen Websites, wie etwa der Website von Ann Taylor.

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, sich auszudrücken Hauptidee Cafébesitzer – 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. Dunkle Farben passen perfekt zu einer Vielzahl von Inhalten, sodass Sie Akzente gezielter setzen und die Aufmerksamkeit des Benutzers auf das Wichtigste lenken können.