Dominierten in den letzten Jahren 3-D-Optik, Verläufe und Schatten das Erscheinungsbild der Web-Welt so wird diese Phalanx in der letzten Zeit mehr und mehr von einem neuen Trend durchbrochen: dem sogenannten Flat-Design. Auch De-Media verschließt sich dieser neuen Entwicklung natürlich nicht. Unsere Grafikabteilung hat sich intensiv mit dem neuen Trend beschäftigt und stellt sich die Frage: Hat das Flat-Design Zukunft, oder handelt es sich hierbei nur um einen weiteren Trend, der bei weitem nicht für alle Seiten kompatibel ist? Lesen Sie die Einschätzung unserer Grafik-Abteilung und sagen Sie uns was Sie über Flat-Design denken? Teilen Sie uns ihre Meinung in Kommentaren mit!

Flat-Design: Einschätzung des neuen Trends

Bis vor kurzem benutzten Designer für die Gestaltung der Webseiten 3-D-Buttons, Spiegelungen, Lichtreflexe und realistische Texturen. Diese Designrichtung wird als Skeuomorphismus bezeichnet. (Definition aus Wikipedia: „Skeuomorphismus (…) ist eine Stilrichtung bei der Objekte in ihrer Gestaltung ein anderes Material oder eine Form eines älteren, vertrauten Gegenstandes bis hin zur vollständigen, für den Benutzer verwechselbaren Vollendung nachahmt, ohne dass diese durch ihre Funktion begründet ist“).

Grenzen des Skeuomorphismus

Skeuomorphismus ist aus gestalterischer Sicht insofern problematisch, dass Objekte aus der realen Welt, digital so nicht funktionierten. Es gibt z. B. genügend Apps auf dem Markt, die zwar wie ein Buch aussehen, einem aber nicht erlauben links und rechts über den Bildschirm zu wischen, um die Seiten umzublättern. Man muss entweder scrollen, auf Bildschirm oder Buttons klicken – dies sorgt für Verwirrung beim Nutzer.
Eine realistische Darstellung begrenzt zudem die Funktionalität des digitalen Mediums. So hat ein Taschenrechner in der Realität nur eine begrenzte Anzahl an Knöpfen und kann nicht beliebig viele Zahlen/Zeilen darstellen. Gestaltet man eine Taschenrechner-App oder ein Programm skeuomorphisch, so ist man gezwungen auf die vielen Möglichkeiten digitaler Medien zu verzichten (z. B. unendliches Scrollen, Ansicht aller vergangenen Resultate, Eingabe verschiedener Formeln etc.). Außerdem belegen skeuomorphische Elemente wertvollen Bildschirmplatz und brauchen deutlich mehr Zeit für den Ladevorgang.

Flat-Design als Gegenentwurf

Um diesen Problemen entgegen zu wirken, setzen immer mehr Designer auf das Gegenteil – das Flat-Design. An sich ist Flat-Design kein neues Phänomen, aber spätestens mit dem Erscheinen von Windows 8 von Microsoft wurde man darauf aufmerksam. Wichtigste Merkmale des Flat-Designs sind:

• Verzicht auf Texturen
• Fehlende Tiefe im Design
• Einfache, übersichtliche Elemente
• Typografie dient als Hauptgestaltungsmittel (Anlehnung an den Buchdruck)
• Hierarchie und Struktur der Inhalte wird durch Größe und Farbe definiert
• Usability und einfache Bedienung genießen Priorität
• Allgemeiner Minimalismus
Man konzentriert sich mehr auf der Funktionalität des Designs und weniger darauf, es schön und realistisch zu gestalten.

Warum spielt Flat-Design erst jetzt eine größere Rolle?

Sehr viele Geräte in verschiedenen Größen und mit sehr unterschiedlichen Auflösungen sind derzeit auf dem Markt. Das Problem dabei: eine kleine Größe des Bildschirms bedeutet nicht automatisch eine kleine Auflösung (iPhone mit Retina-Display), und eine große Größe bringt nicht automatisch eine gute Multimedia-Funktionalität mit sich (Browser von Spielkonsolen, schwarz-weißer Bildschirm bei Kindle). Auch die Geschwindigkeit der Datenübertragung ist nicht überall die gleiche.
Die Webseiten von heute müssen für schwache Prozessoren und schlechte Internetverbindungen der Smartphones optimiert werden. Sie sollen in allen Formaten/Bildschirmgrößen gut aussehen und flexibel in der Bedienung sein (Maus/Touch Screen). Dadurch beschränken sich die Gestaltungsmittel enorm: große Bilder und detailreiche Texturen verbrauchen mehr Datenvolumen und sind nur schwer an verschiedene Bildschirmgrößen anzupassen. Möchte man beispielsweise schöne Texturen auf Retina-Display scharf darstellen, so muss man Bilder in zwei Größen hochladen.
Flat-Design kommt dabei mit modernen gestalterischen Mitteln wie CSS und Java-Script viel einfacher aus. Diese erlauben einfache Grafiken und Diagramme direkt im Browser zu generieren und bilden sich auf allen Bildschirmen scharf und ordentlich ab. Auch die Anpassung der Webseiten an verschiedene Auflösungen wird dadurch einfacher. Durch Programmierung gestaltete Elemente lassen sich einfacher beeinflussen, sei es in der Größe oder durch Verschiebung der Elemente.
Technologien wie Web-Fonts und Icon-Fonts begünstigen den Einsatz von Flat-Design. Früher war man darauf angewiesen, wenige plattformübergreifende Schriften zu benutzen oder Überschriften und Texte in anderen Schriften als Bilder verwenden. Heutzutage hat man die freie Auswahl zwischen qualitativen Web-Fonts, die eine richtige typografische Gestaltung ermöglichen. Dazu liefern die Icon-Fonts die Möglichkeit, scharfe Icons unabhängig von der Auflösung anzubieten. Zwar können diese Icons nur einfarbig sein, aber das stellt gerade für Flat-Design kein Problem dar.

Das große Fazit unserer Grafik-Abteilung

Kurzum: Flat-Design ist ein Versuch, sich mit der Zweidimensionalität des Bildschirms anzufreunden und deren Vorteile zu nutzen anstatt diese zu vertuschen. Außerdem dient es als Starthilfe, um Webseiten, Applikationen und Programme schneller und funktionaler zu machen.

Probleme des Flat-Designs:

Die Gestaltung nach den Prinzipien des Flat-Designs ist nicht so einfach, wie es auf den ersten Blick aussieht. 3-D-Buttons des skeuomorphischen Designs waren immer als solche zu erkennen. Mit einer reduzierten Gestaltung wird es zunehmend schwieriger die Funktionalität zu kommunizieren. So kann ein einfacher Pfeil einen „Zurück“-Button darstellen und beim Klick auf die vorherige Seite führen oder ein Icon neben einer Überschrift sein und gleichzeitig keine weitere Funktion außer schönem Aussehen haben.

Empfehlungen für Flat-Design

Raster: Den Aufbau und die Anordnung der Elemente an ein bestimmtes Raster anpassen, viel sogenannten „white Space“ zwischen den einzelnen Elementen lassen sowie auf Überladung und Unübersichtlichkeit aufpassen. Zu viele Elemente sorgen für Ablenkung, vor allem auf kleinen Bildschirmen.
Farben: Bunte Farben sind „in“ – gerne auch Retro. Man sollte für eine Seite im Vorfeld eine Farbpalette festlegen, die nicht zu viele Farben enthält, aber trotzdem genug Abwechslung ermöglicht und die Seite von allen anderen im Web unterscheidet. Tipp: Eine Farbe mit hohem Farbwert aussuchen und diese als Basisfarbe festlegen. Die anderen Farben der Farbpalette können sich dann an der Basisfarbe orientieren, haben aber einen reduzierten Farbwert oder werden durch das Hinzumischen von schwarz oder weiß abgedunkelt oder aufgehellt. Andere Designrichtungen begrenzen sich meistens auf zwei bis drei Farben. Beim Flat-Design können es ruhig sechs bis acht werden.
Typographie: Ausdruckstarke und leicht zu lesende Schriften benutzen und mit Schriftgrößen und Farben gestalten. Am besten sucht man sich eine serifenlose Schrift als Hauptschrift, nimmt eine andere revolutionäre Schrift als Sekundärschrift und benutzt beide als gestalterisches Element. Wenn möglich, sollte zudem auf lange Texte verzichtet werden. Gut organisierte, klare Sätze liegen im Trend!
Einfache Elemente: Einfache, klar erkennbare Elemente benutzen. Einfarbige Icons, minimalistische Grafiken, Buttons ohne Verläufe, Schattierungen, komplizierte Effekte. Elemente sollen groß genug sein, damit man sie leicht klicken oder berühren kann. Ansprechende Farben benutzen, um User darauf aufmerksam zu machen und zur Interaktion zu motivieren.
Strukturierte Inhalte: Flat-Design ist nicht nur Aussehen. Die Struktur der Inhalte und ihre Hierarchie sind ebenfalls sehr wichtig. Je weniger Ablenkung von den wichtigen Inhalten vorhanden ist, desto schneller erreicht der Benutzer sein (und möglicherweise auch Ihr!) Ziel. Den meisten Nutzern ist es egal, ob ein Button beim hover blinkt, oder ob der Background der Seite keine Papiertextur hat. Für sie ist es wichtig zu verstehen, welche Information auf der Seite angeboten wird, wo man was mit einer App machen kann und wie man es macht.
<nbsp;>

Mögliche Lösung „Almost-Flat-Design“

Das ist der Stil, mit dem die meisten Designer zufrieden sind. Das „Almost-Flat-Design“ versucht den Problemen des Flat-Designs entgegen zu wirken und durch subtile Schattierungen und leichte Verläufe dem Design etwas Tiefe zu verleihen. Dem User wird das Finden interaktiver Flächen dadurch erleichtert. Es ist zwar aus der Sicht der Usability ein guter Schritt nach vorne, aus gestalterischer Sicht führt es jedoch zu einem Stilmix.
Mehr dazu, warum „Almost-Flat-Design“ eine bessere Lösung sein kann, als komplettes Flat-Design kann man im Artikel von Felix Winkelnkemper (http://t3n.de/news/welt-ward-flach-kritischer-478460/) nachlesen.

Zukunft des Flat-Designs:

Genau wie bei jedem anderen Trend kann man nicht genau sagen, ob das Flat-Design eine Revolution auslöst, sich weiterentwickelt oder gar verschwindet. Deswegen ist es wichtig zu verstehen: Flat-Design passt nicht für jede Webseite und nicht für jede App. Bevor man anfängt alle Webseiten pauschal zu „flach zu machen“, sollte man an die eigene Zielgruppe und an die Anforderungen der Seite denken.
Was denken Sie über Flat Design? Die Zukunft oder nur ein flüchtiger Trend? Teilen Sie uns ihre Meinung in Kommentaren mit!

Bildquelle: http://designmodo.com/flat-design-principles/