Blog

Flat Design vs Skeuomorphismus

Allgemein, Mobile Market, responsive-webdesign 17. April 2013 By

Als digitaler Full-Service-Dienstleister müssen wir unseren Partnern stets die optimale, kundenspezifische und zeitgemäße Lösung anbieten. Daher ist es wichtig, dass wir Trends früh erkennen, werten und gegebenenfalls an den Kunden weitergeben. Neben dem technologischen Fortschritt gilt dies auch für das User Interface, das Design und Look and Feel einer App oder Webseite.

2012 war das Trendthema beispielsweise Responsive Design und Custom Font Faces. Webseiten passen sich also den Endgeräten wie Smartphones oder Tablets an und werden touch-friendly. Durch Dienstleister wie Google Webfonts wird zusätzlich die Hausschrift in das Design eingebunden und damit die Brand Identity gestärkt. Ein schöner Case dafür ist sicherlich thjnk.de, unser Projekt aus 2012.

2013 werden die genannten Designtrends sicherlich ausgebaut und gleichzeitig standardisiert. Dennoch erwarten uns im Bereich Web- und Mobile Design einige Neuerungen. Zu den Buzzwords 2013 zählt Flat Design.

Was ist Flat Design?

„Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations.“ Quelle

Flat (also flach, Fläche oder plan) verfolgt somit einen neuen minimalistischen Ansatz. Geprägt von Großzügigkeit, Simplifizierung und den Verzicht auf die dritte Dimension. Pionier dieser Philosophie ist Microsoft mit seiner Metro Oberfläche bei Windows 8. Fokussiert auf Funktionalität, reduziert auf Icons und angepasste Größen, um einen Touch Möglich zu machen.

flat_2

Was ist Skeuomorphism?

In den letzten Jahren wurde im Bereich Web und App oft ein anderer Weg beschritten. Mittel wie Farbverläufe, Schlagschatten und Texturen halfen dem User Hierarchien auf Webseiten zu erkennen, klickbare Flächen eindeutig hervorzuheben und bauten Vertrauten auf. So wurden physische Objekte und Eigenschaften nachgeahmt um dem User das Denken abzunehmen. Der Fachbegriff dafür lautet Skeuomorphism, also Skeuomorphismus und bildet sich aus den griechischen Worten “Skeuos”, was soviel bedeutet wie Werkzeug, Gefäß und “morphe”, was Gestalt bedeutet. Größter Verfechter und Vorreiter dieser Design Philosophie war Apple. iOS wie auch das Mac Betriebssystem setzten lange auf Assoziationen in der Gestaltung.

flat_3

Warum Interface Design flach wird!

Skeuomorphism ist verständlich, es sieht schön aus und jeder Designer kann sich wortwörtlich kreativ austoben. Wo ist also das Problem? Ein kleines Beispiel:

Wenn ich eine Ledertextur brauche um ein Adressbuch zu visualisieren, also eine Metapher nutze, setze ich voraus, dass jedes Adressbuch in Leder gebunden ist. Mein Adressbuch ist übrigens digital und zwar ohne Leder. Wenn ich das dennoch mache, fehlen mir Eigenschaften des analogen Buches von 1970. Es fühlt sich nicht an wie Leder, riecht nicht nach Leder und nutzt sich nicht ab wie Leder.

flat_4

Hier wird also sehr kurz gedacht. Allerdings muss man Design als Prozess verstehen. Mit dem ersten iPhone oder dem ersten Betriebssystem musste der User lernen Interaktionen mit einem Bildschirm auszuführen. Also durch Aktion in der Realität eine Reaktion in der Virtualität auszulösen – heutzutage selbstverständlich, damals reine Fiktion. Um diesen Prozess klar zu visualisieren lehnte man den Aufbau, die Funktion und den Look an Bekanntes und vor allem Gelerntes an.

Heutzutage sieht das allerdings anders aus. Die Medienkompetenz ist gestiegen und Kinder erlernen bereits früh den Umgang mit dem Computer. Keines dieser Kinder hat ein Adressbuch aus Leder. Sie werden von Anfang an mit Formen, Ikonografie und deren Wirkung konfrontiert.

Ein X heißt Schließen, ein Haus heißt Homepage, drei Punkte unter einem Bild stehen für Slideshow, ein unterstrichenes Wort ist ein Link und ein Pfeil nach links ist Zurück. Dies könnte man weiterführen mit hellblauen Vögeln für Twitter oder einer Hand mit ausgestrecktem Daumen für Facebook. Die Kernaussage bleibt jedoch: Wir haben gelernt reduzierte Symbole zu erkennen und dahinterliegende Funktion zu deuten. Sie müssen nicht metaphorisch sein um ihre Wirkung zu verdeutlichen. Schlagschatten, die Elemente hervorheben, können stattdessen auch einfach andersfarbig sein und wichtige Aussagen wie Überschriften werden größer geschrieben.

Für das Jahr 2013 gilt also „Die Form folgt der Funktion” und “Weniger ist mehr”

 


Stefan Heinz

Als Art Director ist Stefan Leiter im Bereich Design und Konzeption. Mit Wurzeln in der Welt von Werbeagenturen und dem generalistischen Studium in Online Medien an der Hochschule Furtwangen University hat er sich auf UI und UX sowie Beratung und Kommunikation vertieft.

Mainzelmännchen App … 15. April 2013 Freistaat Thüringen … 18. April 2013