Blog
E-Mail

mxpost

Telefon

0201-848300

Hammerstr. 156
45257 Essen

Flat Design – was es ist, warum es bleibt

27. Juni 2013

Immer wieder ent­wi­ckeln sich globale Strö­mun­gen im Web, die man als Mar­ke­teer oder Desi­gner nicht igno­rie­ren kann. Das Web 2.0 war so etwas, genau wie der Ein­fluss von Social Media auf die Gestal­tung von Web­sei­ten, und jetzt sieht es aus, als würde die Welt flacher werden: Flat Design ist das Zau­ber­wort. Da wir glauben, dass erfolg­rei­che Online-Kommunikation diese Ent­wick­lung nicht unbe­rück­sich­tigt lassen sollte, und weil das Thema viel weniger kom­pli­ziert ist, als es sich anhört, wollen wir Flat Design hier kurz beleuchten.

Was ver­steht man unter Flat Design

Unter Flat Design ver­steht man den aktu­el­len Trend zu einer Gestal­tung, die geprägt ist vom

  • Ver­zicht auf Texturen
  • Typo­gra­fie als Gestaltungsmittel
  • stark aus­ge­präg­ter Hier­ar­chie in Größen und Farben
  • Ver­zicht auf Plastizität

Anwen­dung fand das Flat Design zuerst in der Gestal­tung von Smartphone-Apps und setzte sich fort in aktu­el­len Ver­sio­nen des Android-Betriebssystems. Einen end­gül­ti­gen Durch­bruch erfuhr Flat Design erstaun­lich offen­siv im Metro-Designvon Windows 8. Damit hat sich dieser Trend in recht kurzer Zeit zu einer ernst zu neh­men­den gestal­te­ri­schen Linie ent­wi­ckelt. Dass iOS 7, die gegen­wär­tige Version des iPhone-Betriebssystems, sich dieser Ent­wick­lung stellen musste, war schon vor dem aktu­el­len Release zu erwar­ten. Und tat­säch­lich über­nimmt iOS 7 viele Ele­mente des Flat Designs. Es wird auf Plas­ti­zi­tät und Licht-Effekte ver­zich­tet, die Farben werden pri­mär­far­bi­ger und die Icons weniger pho­to­rea­lis­tisch. Aber welche Hin­ter­gründe gibt es für diese rapide Ent­wick­lung? Wir ver­su­chen das Phä­no­men aus den zwei Rich­tun­gen zu beleuch­ten, die zum Sie­ges­zug von Flat Design geführt haben: Technik und Mode.

Der Weg zum Flat Design aus tech­ni­scher Sicht

Die letzen Jahre sind durch eine enorme Diver­si­fi­zie­rung der Aus­ga­be­me­dien gekenn­zeich­net. Konnte man um den Jahr­tau­send­wech­sel noch davon aus­ge­hen, dass man sich in einer stän­di­gen Ent­wick­lung in eine vor­her­seh­bare Rich­tung befin­det, nämlich hin zu bes­se­ren Pro­zes­so­ren, bes­se­rem Daten­durch­satz, grö­ße­ren Moni­to­ren mit höherer Auf­lö­sung und umfas­sen­der Multimedia-Fähigkeit, haben sich diese Merk­male wei­test­ge­hend ver­äs­telt und von ein­an­der abge­kop­pelt. Heute bedeu­tet ein großer Monitor nicht gleich­zei­tig gute Multimedia-Fähigkeiten (Browser von Spiel­kon­so­len wie der Wii); heute ist eine hohe Auf­lö­sung nicht gleich­be­deu­tend mit einer großen Wie­der­ga­be­flä­che (iPhone mit Retina-Display) oder mit einer hohen Daten­ge­schwin­dig­keit (Tablet-PCs im Mobilnetz).

Diese viel­sei­ti­gen Aus­ga­be­me­dien ver­än­dern die Anfor­de­run­gen an die Pro­gram­mie­rung zeit­ge­mä­ßer Web­sites und Apps. Heute ist eine Website

  • res­sour­cen­scho­nend im Hin­blick auf ein­fa­che Pro­zes­so­ren in Smart­pho­nes oder schle­che Daten­ver­bin­dung und Volu­men­ta­rife in mobilen Netzen
  • fle­xi­bel in der Dar­stel­lung um Hoch­for­mate wie Quer­for­mate, kleine und große Screens, dicht und weniger dicht auf­ge­löste Dis­plays zu bedienen
  • fle­xi­bel in der Bedie­nung um mit Mouse oder Berüh­rung zu funktionieren

Damit ergeben sich stär­kere Ein­schrän­kun­gen in den Gestal­tungs­mit­teln. Große Bilder, etwa Tex­tu­ren als Hin­ter­gründe, oder auf­wän­dig gestal­tete Buttons, erzeu­gen Daten­last und sind schlech­ter geeig­net sich auf ver­schie­dene Auf­lö­sungs­dich­ten ein­zu­stel­len. Will man etwa ein Retina-Display bedie­nen, muss fast immer auf Java­Script zurück­ge­grif­fen werden, um Gra­fi­ken in einer höheren Auf­lö­sung aus­zu­lie­fern. Gleich­zei­tig ermög­licht die Wei­ter­ent­wick­lung von HTML und CSS inner­halb der Pro­gram­mie­rung (und nicht aus­schließ­lich im Gra­fik­pro­gramm) zu gestal­ten. Die neuen Buz­zwords sind hier Respon­sive Design, Web- und Icon­fonts, CSS-Gradients, -Tran­si­ti­ons, -Borders. Auch der Einsatz von Java­Script ist mitt­ler­weile so unkom­pli­ziert, dass ein­fa­che Gra­fi­ken und Dia­gramme einfach dyna­misch im Browser gene­riert werden können.

Web­fonts und Flat Design

Endlich wird die freie Auswahl von Schrif­ten in allen Brow­sern und den meisten Smartphone-Betriebssystemen unter­stützt. Auch recht­lich gibt es hier was­ser­dichte Lösun­gen. Das ist noch nicht lange so. Bis vor Kurzem musste man sich ent­we­der auf den Einsatz sehr weniger, platt­form­über­grei­fen­der Schrif­ten kon­zen­trie­ren oder – etwa bei Texten in der Haus­schrift – Bilder ver­wen­den. Mit den neuen Mög­lich­kei­ten, Web­fonts (also brow­ser­ge­eig­nete Schrif­ten) zu ver­wen­den, ergibt sich zum ersten Mal die Chance auf wirk­li­che typo­gra­fi­sche Gestal­tung. Ein Haupt­merk­mal des Flat Design.

Die Uhr von Android 4: Ohne einen aus­druck­star­ken Font nicht denkbar.

Icon­fonts und Flat Design

Icon­fonts stellen eine prak­ti­sche Mög­lich­keit dar um Icons auf­lö­sungs­un­ab­hän­gig auf einer Website ein­zu­set­zen. Der Desi­gner baut die Icons, die er auf der Website ver­wen­den will, einfach in eine Schrift um, die er dann, wie jeden anderen Font ein­set­zen kann. Weil Schrif­ten immer als Vek­to­ren und nicht als Pfade ange­legt werden, sind sie ohne Qua­li­täts­ver­lust ska­lier­bar und werden auch auf hoch­auf­lö­sen­den Dis­plays scharf dar­ge­stellt. Der Nach­teil ist aller­dings, dass, wie mit anderen Schrif­ten auch, die Icons nur in einer Farbe dar­ge­stellt werden. Mehr­far­bige Icons sind mit dieser Tech­no­lo­gie nicht umzu­set­zen. Das ist dra­ma­tisch für ein Design­kon­zept mit auf­wen­dig gestal­te­ten, glossy Icons – für Flat Design ist es um so besser.

Respon­sive Web Design und Flat Design

Und was hat Respon­sive Web Design (RWD) mit Flat Design zu tun? RWD kon­zi­piert eine Website nicht als fest­ste­hende Bühne, sondern bezieht die Über­le­gung ein, dass sich das Layout und die Hier­ar­chien anpas­sen müssen, wenn die Website auf unter­schied­li­chen Geräten ange­se­hen wird.

Eigent­lich gibt es keinen zwin­gen­den Zusam­men­hang zwi­schen RWD und Flat Design. Was RWD aber von einem Design erwar­tet, ist ein hohes Maß an Fle­xi­bi­li­tät. Da müssen sich Bild- und Text­grö­ßen anpas­sen lassen oder Posi­tio­nen und Aus­rich­tun­gen ver­än­dern lassen. Ein klas­si­sches Design, das sich auf Bilder und Effekte ver­lässt, führt hier schnell zu sehr kom­pli­zier­ten und teuren Lösun­gen. Weil Flat Design weit­ge­hend mit Mitteln der Pro­gram­mie­rung gestal­tet, ist es viel leich­ter anzupassen.

Der Weg zum Flat Design aus gestal­te­ri­scher Sicht

Der Schritt in die Zukunft ist ratio­na­ler und funk­tio­na­ler. Bis vor kurzem schraub­ten Desi­gner an immer mehr shiny und glossy Designs, so wie wir es z.B. von Apple gewöhnt waren. 3D Buttons, Spie­ge­lun­gen und raf­fi­nierte Licht­ef­fekte sind mitt­ler­weile Stan­dard. Dazu kommen hap­ti­sche Ober­flä­chen (Leder- oder Holz-Optik) in den Apple Anwen­dun­gen. Dagegen setzten immer mehr Desi­gner auf genau das Gegen­teil – wie Micro­soft mit seiner aktu­el­len Web­seite oder Google mit seinen Design-Richtlinien. Farbige Flächen und Buttons struk­tu­rien die Seiten. Es ist über­sicht­lich, schnell zu erfas­sen und zu nutzen. Die Usa­bi­lity ist wieder auf dem Vor­marsch, chic ist es ja trotz­dem. In Ver­ges­sen­heit gera­tene Design-Grundsätze haben sich wieder nach vorne gekämpft: „form follows func­tion“ erlebt ein Revival. Ist also doch wieder am Ende weniger mehr? Farben spielen im Flat Design wieder eine größere Rolle. Durch den Ver­zicht auf glossy Effekte und mög­lichst rea­lis­ti­sche Dar­stel­lungs­wei­sen sind sie mehr in den Vor­der­grund getre­ten, sind stim­mungs­vol­ler und direk­ter (schön auf der Site von mini­mal­mon­key). Das Mit­spra­che­recht des Nutzers bei der Gestal­tung der benutz­ten App scheint mehr Aus­wir­kun­gen zu haben. Die Webapp SUN (Wet­ter­dienst für iOS-Geräte) macht durch ihre ein­fa­che Bedien­bar­keit und das Swit­chen zwi­schen den Farb­pa­let­ten einfach Spaß.

»SUN« iPad Wetter-App

Flat Design folgt dem Trend, den Content einer Website nach Vorne zu bringen – mit wenig Aufwand, ohne viele Bilder, aber natür­lich mit einem struk­tu­rie­ren­den Layout-Konzept. Ein schöner Gegen­pol zur oft über­trie­be­nen Bil­der­flut oder klein­tei­li­gen Layouts. Da ist die Flat Design basierte Web­seite ein kleiner Erholungsurlaub …

Die Her­aus­for­de­run­gen des Flat-Design

Für den Desi­gner ist Flat Design durch­aus eine Her­aus­for­de­rung. Shiny Buttons sind zumin­dest unmiss­ver­ständ­lich Buttons, und zum Klicken gedacht. Mit der redu­zier­ten Palette an Desi­gnele­men­ten wird es kom­pli­zier­ter, die Funk­tion hin­der­nis­frei zu kom­mu­ni­zie­ren. Jay­Scrum (ein Pro­jekt­ma­nage­ment Tool) setzt auf Flat Design in seiner Android-App und zeigt hier durch­aus die Fall­stri­cke. Der links­zei­gende Pfeil soll mich aus der Seite „Pro­jects“ zurück­brin­gen zur Über­sicht. Das ist schon zu ver­ste­hen, vor allem, weil iOS-Apps an ähn­li­cher Stelle immer einen »Zurück«-Button haben. Gene­rell ist das Symbol aber nicht ein­deu­tig als Bedien­ele­ment zu ver­ste­hen. Hätten wir hier ein etwas anderes Symbol – zum Bei­spiel einen schrä­gen Pfeil – könnte es genau­so­gut ein Icon für »Pro­jects« sein.

Ein schrä­ger Pfeil könnte genau­so­gut ein Icon für »Pro­jects« sein

Man ver­lässt sich hier also sehr auf gelern­tes Ver­hal­ten und ein natür­li­ches Ver­ständ­nis für die Lese­rich­tung. Das ist sicher kein grober Usability-Schnitzer, ver­deut­licht aber, dass ein sauber kon­zi­pier­tes Layout im Flat Design nicht nur Gestal­tungs­merk­mal, sondern auch Ver­pflich­tung ist, um die ein­fa­che Bedien­bar­keit zu gewährleisten.

Vom His­to­ris­mus zum Bauhaus, vom Skeuomor­phis­mus zum Flat Design

Kann man dem aktu­el­len Trend zur flachen Gestal­tung also mehr Bedeu­tung zumes­sen, als einer ver­gäng­li­chen Mode? Folgt die Hin­wen­dung zu einer Interface-orientierten Gestal­tung einem wie­der­keh­ren­den Muster? Ist es normal, dass sich deko­ra­ti­ves, meta­pho­ri­sches Design zu einer iko­no­gra­fi­schen Form wandelt, die ihre eigenen Gestal­tungs­merk­male auf­weist? Flat Design als das next big thing des Inter­nets zu bezeich­nen wäre sicher­lich vor­ei­lig. Trotz­dem hat es in der Design­ge­schichte bereits ähn­li­che Bemü­hun­gen um eine eigene Form­spra­che gegeben, beson­ders im Umgang mit neuen Tech­no­lo­gien. Vom Bauhaus über Dieter Rams’ Pro­dukt­de­sign für Braun haben Desi­gner ständig ver­sucht, sich von den Beschrän­kun­gen einer meta­pho­ri­schen Erklä­re­bene zu lösen und eigene, der Funk­tion des Objekts ent­spre­chende, Stil­mit­tel zu entwickeln.

SABA 311WL (1933) vs. Braun SK 2 (1955)

Nun ist Flat Design sicher kein design­theo­re­ti­scher Ansatz sich vom Rück­griff auf analoge Ver­glei­che zu befreien, sondern vor allem eine Gegen­be­we­gung des Geschmacks. Dass Flat Design gerade einen solchen Boom erfährt, liegt natür­lich auch in der der Post-Web-2.0 Ära begrün­det, in der ein­fa­che Web-Apps wie Wun­der­list und beson­ders die Anwen­dun­gen von Apple mit Ana­lo­gien zu ähn­li­chen Pro­duk­ten aus der nicht Digi­ta­len Umge­bung ihre Usa­bi­lity demons­trie­ren wollten.

Skeuomor­phis­mus am Bei­spiel Wun­der­list und OS X »Lion« Adressbuch

Dieser Krücke aus der Lebens­welt – man spricht übri­gens von Skeuomor­phis­mus – stellt das Flat Design ein neues Selbst­ver­ständ­nis ent­ge­gen. Ob das nun ein bewuss­ter Prozess ist, oder aus den Zeichen der Zeit geboren: offen­sicht­lich ist, dass sich das Web-Design damit von den anderen Design-Disziplinen eman­zi­piert, und sich zuge­steht, seine eigenen Gesetze zu haben und seinen eigenen Kon­ven­tio­nen zu folgen.

Wo kann es also hingehen?

Man sollte das Phä­no­men Flat Design sicher nicht über­be­wer­ten. Wenn man sich daran satt gesehen hat, und der tech­ni­sche Fort­schritt mit neuen Mög­lich­kei­ten kommt, werden sich auch neue Design-Trends ergeben. Trotz­dem ist dieser Trend erst einmal nicht zu igno­rie­ren – und beson­ders Windows 8 und Android werden die Seh­ge­wohn­hei­ten der User prägen. In der zuneh­men­den Auf­lö­sung des gra­fi­schen User­in­ter­faces – die mit Geräten wie google glass ein­her­geht – ent­wi­ckelt sich Flat Design viel­leicht zur Sprache des all­ge­gen­wär­ti­gen Information-Layers.

Wei­ter­füh­rende Links

Pinterest-Sammlung mit Flat Designs: http://​pin​te​rest​.com/​w​a​r​m​a​r​c​/​f​l​a​t​-​u​i​-​d​e​s​i​gn/ t3n über Flat Design: http://​t3n​.de/​n​e​w​s​/​f​l​a​t​-​d​e​s​i​g​n​-​w​e​b​d​e​s​i​g​n​-​t​r​e​n​d​-​4​3​8​9​41/

Aus unserem Blog:

Design Web­sites für Praxen, Büros und Handwerk

10. Oktober 2017

Websites auf hohem Design-Niveau müssen nicht das Budget sprengen. Oft glauben kleine Unternehmen, Praxen und Handwerksbetriebe, dass man sich die Beratung von Agenturen nicht leisten kann. Aber mit Hilfe von professionellen Mietlösungen lassen sich High End … mehr

Nacht­le­ben App für SnapNight

28. August 2017

Für unseren Kunden SnapNight haben wir eine Party App entwickelt, die auf einem Radar Clubs und Events in der Umgebung anzeigt.In der Location können Besucher via QR-Code einchecken, um zu bewerten, zu kommentieren und Bonuspunkte (z.B. für Freigetränke) zu sammeln. Die App ist für … mehr

Haltung als Säule im Cor­po­rate Image Prozess

21. August 2017

Auf eine schöne und spannende Markenwelt, die Haltung zeigt und diese auch bewahrt!Stellen Sie sich folgendes Szenario mal vor: Ganz gewieft wird eine Marke kreiert auf der Basis von durchaus seriösen Marktanalysen, der Eruierung von Zielgruppenbedürfnissen, … mehr