medani-pixel
news
03
Sep 13

Flat Design – Der Webdesign Trend 2013 und wie man Flat Design zielführend einsetzt

Spätestens seit der Veröffentlichung des Microsoft Windows 8 Betriebssystems, das die langjährige Design-Vorreiterrolle von Apple mit überraschend frischem Wind kontrastierte, ist der Begriff Flat Design in der Designwelt in aller Munde.

Spätestens seit der Veröffentlichung des Microsoft Windows 8 Betriebssystems, das die langjährige Vorreiterrolle von Apple als die designaffine Benutzeroberfläche mit überraschend frischem Wind kontrastierte, ist der Begriff Flat Design in der Designwelt in aller Munde. Man muss diesen Begriff nicht kennen, um zu bemerken, dass in dem flächigen, minimalistisch designten und auf wenige Farbflächen reduzierten Betriebssystem Einiges grundlegend anders ist als bis dahin.

 

windows-oberflaecheapple-oberflaeche

Im Vergleich: Apple und Windows Benutzeroberfläche 2013. [quelle v.l. n. r. :  microsoft.com, apple.com]
Wie man dieser neuartigen Darstellungsform gegenüberstehen mag ist natürlich subjektive Geschmackssache. Trotzdem ist es äußerst interessant zu beobachten, dass sich diese Designrichtung 2013 wie ein regelrechtes Lauffeuer im Webdesign abgebildet hat. Wir wollen hier den Fragen nachgehen, was dieser Trend ist, warum er gerade heute in dieser Form erscheint, und ganz besonders, wie Flat Design zielführend für Kundenprojekte eingesetzt werden kann.

 

Was ist Flat Design?

Das englische Adjektiv flat hat in der deutschen Übersetzung zahlreiche Bedeutungen, die viel über den Begriff Flat Design aussagen: eben, flach, platt, breit, glatt. Aber auch kontrastarm, flau und sogar geschmackslos. (quelle: dict leo). Die ersten Begriffe beschreiben schön die formalen Eigenschaften dieses Designtrends, nämlich eine zweidimensionale und flächige Gestaltung, ebene und großzügige räumliche Gestaltung, die den Verzicht auf Verläufe und Imitationen des dreidimensionalen Raums erfordert. Klare detailarme Flächen, sowie einfarbige breite Farbflächen und Formen. Gerade im Webdesign ist dies sehr deutlich zu sehen. Waren bis vor Kurzem noch dreidimensionale Buttons mit aufwendigen Verläufen und erhabenem Aspekt am Puls der Zeit, auch bezeichnet als Skeuomoporhic Design, steht heute ein einfaches plakativ gefärbtes Rechteck mit einem einfachen Schriftzug. Wo auf der einen Seite ein Notizbuch mit möglichst realitätsgetreuen Lederimitaten, Nähten und Einschublaschen, die virtuelle PC Welt fast kitschig vertraut erscheinen lässt, steht heute ein abstrahiertes flächiges Konglomerat an aneinandergereihten Farbfeldern.

 

button-skeuomorphicbutton-flat

Im Vergleich: Button im Skeuomorphic Design (li) und im Flat Design (re)
Die weiteren oben genannten Begriffe kontrastarm, flau und geschmacklos, deuten ebenfalls auf wichtige Teilbereiche des Phänomens hin, die natürlich entstehen können, wenn zu viele klare Flächen ungeschickt kombiniert werden. Beim Design ist es wichtig, auch diese Punkte im Auge zu behalten, da gerade bei reduzierter Gestaltung besonderes Gespür und Know-how notwendig ist, um die richtige Wirkung zu erzeugen. Wie man Flat Design zielführend für individuelle Websites und Online Shops einsetzen kann, darauf gehen wir deshalb später noch intensiv ein.

 

Warum Flat Design gerade heute?

Zur Entstehung von Flat Design und dem Zusammenhang zur heutigen Zeit gibt es verschiedene Zugänge. Manche Autoren und Blogger setzen den Ursprung von Flat Design eindeutig mit Microsoft in Verbindung, und dessen Notwendigkeit sich visuell im Corporate Design der User Interfaces vom Zugpferd Apple zu unterscheiden, das mit dem Betriebssystem OSX den Trend zu dreidimensionalen durch Materialnachbildungen geprägtem Design und lebensnahen Imitaten von Gegenständen die Designwelt prägte. Dass Windows deshalb mit einer komplett anderen Ästhetik startete, ist hier eine plausible Erklärung. (quelle: webdesigner 7/8/2013, S6)

Ein weiterer Grund ist sicher die Notwendigkeit, die Darstellung des Designs, an die oft noch reduzierten Möglichkeiten der vielfältigen mobilen Geräte anzupassen. Fotorealistisches Design verlangt stets hochauflösende Bilder und Grafiken, die mühselig in verschiedenen Formaten designt und herausgerechnet werden müssen, um dann verpixelt auf dem einen oder anderen Gerät nach langer Ladezeit zu erscheinen. Hier ist Flat Design ein großer Fortschritt, da sich die klaren einfachen Formen mühelos an unterschiedlichste Formate anpassen lassen und auch auf kleinen Displays durch ihren plakativen Charakter gut zu sehen sind. Auch die Ladezeiten sind bei Flat Design eindeutig geringer, da Designs oft zur Gänze im CSS definiert werden können, und Grafiken wenn überhaupt nur sehr spärlich brauchen. Das bis dahin oft verwendete Skeuomorphic Design basiert auf hochauflösenden Grafiken. (quelle: webdesigner 7/8/2013, S28-29)

Ein weiterer Aspekt kann im kulturellen Zusammenhang gesehen werden, wenn man sich die globale Entwicklung der Städte, des Berufslebens und des Tagesablaufs von vielen Menschen betrachtet. Öffnungszeiten werden tendenziell länger, mehr Tätigkeiten werden generell in kürzerer Zeit realisiert, und mehr Menschen leben auf engerem Raum zusammen. Zwischen Geschwindigkeit und Bewegung ist Flat Design ein starker und erfrischender Kontrast und eine klare Antwort auf eine Gesellschaft in Veränderung.

Flat Design zielführend einsetzen

Damit Flat Design für Kundenprojekte erfolgreich eingesetzt werden kann, ist Feingefühl und Design Know-how nötig. Denn leicht kann die Gefahr bestehen, dass oben genannte unvorteilhafte Adjektive zur Realität werden.

Wichtig für eine positive Anmutung von Flat Design ist viel Raum rund um die farbigen Flächen herum. Viel Weißraum hilft, die flächigen alleine für sich stehende klaren Flächen aufzulockern und leicht zu machen, und insgesamt für eine freundliche Stimmung zu sorgen, die für das Corporate Design von vielen Unternehmen sehr wichtig sein kann.

Damit trotz der reduzierten Gestaltung für Individualität gesorgt ist, bekommt die richtige Wahl der Typografie einen hohen Stellenwert. Schriften besitzen für sich starke Aussagekraft, und diese werden, wie auch Designmagazine wie screenguide, bestätigen noch stärkere Wirkung, wenn sie sich in einem derart reduzierten Raum befinden. Damit die besondere Identität Ihrer Firma trotz der minimalistischen Gestaltungsart eindeutig zu erkennen ist, empfiehlt es sich aussagekräftige Web Fonts zu verwenden, die diese Identität passend erzeugen.

wombats

Flat Design mit aussagekräftiger Typografie und gezielt eingesetzten Schattenbereichen
im medani Projekt Wombats.

Damit wichtige Schaltflächen und Inhaltsbereiche gut zu sehen sind, kann es durchaus zielführend wichtig sein an der einen oder anderen Stelle Schatten einzusetzen. Damit kann die Übersicht verstärkt werden, und dafür gesorgt werden, dass Buttons auch klar und schnell als solche erkennbar sind.

Bei Fotos empfiehlt es sich Tiefenschärfe gezielt einzusetzen. Damit kann die Eindimensionalität der flachen Formen mit der nötigen Tiefe kontrastiert werden. Ihre Bilder kommen hier noch besser zur Geltung, wenn sie nicht detailreich sind, sondern sich durch ein gelungenes Spiel von Tiefenschärfe ganz klar von den flachen Formen abheben und dadurch das Raumgefühl vergrößern.
Es ist zielführend, die Wirkung von Design auf jede Anforderung genau abzustimmen. Wir freuen uns, Sie hier beraten zu können und das passende Design für Ihren Unternehmenszweck mit Ihnen und für Sie zu erarbeiten.

SENDEN
SENDEN