SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
FLAT DESIGN
Die digitale Welt
wird platt gemacht.
FLAT DESIGNFLAT DESIGN
Die digitale Welt
wird platt gemacht.
Ein Überblick über Flat Design und
aktuelle Weiterentwicklungen
FLAT DESIGNFLAT DESIGN
5
Überall im Web hört man den
Begriff Flat Design.Seit einigen
Jahren gewinnt derTrend immer
mehr an Bedeutung,da mitt-
lerweile mehr und mehr große
Unternehmen ihr Design darauf
umstellen. Aber was genau be-
deutet Flat Design und worin be-
gründet sich dieser ästhetische
Wandel? Und was bedeutet der
Designwandel für Marken und
Unternehmen?
4
Was ist „Flat Design“?
Beauty of simplicity: In der Designästhetik des Flat Design sind Elemente klar,
einfach und flach gestaltet. Das User Interface ist clean und intuitiv bedienbar.
Typografie wird inszeniert und gerne auch groß und plakativ gespielt. Texte am
Bildschirm zu lesen macht Spaß, denn bei der typografischen Gestaltung wird viel
Wert auf Attraktivität und Lesbarkeit gelegt. Die Farbpalette ist häufig bunt aufge-
baut. Farben können kräftig oder auch gesättigt sein.In jedem Fall werden sie gerne
großflächig eingesetzt.
Der Inhalt tritt in den Vordergrund und strukturiert das Seitenlayout, so dass die
Website einfach und schnell verstanden wird. Eine wichtige Rolle spielen auch
Weißraum bzw. Freiflächen, die für eine bessere Übersichtlichkeit sorgen und dem
Content ausreichend Raum geben,um entsprechend wirken zu können. Rein deko-
rative Elemente,Texturen,Verläufe und Effekte wie Schlagschatten und Glows wer-
den weitestgehend vermieden. Funktionen und Features werden auf die wirklich
wichtigen reduziert.Das Weglassen von Elementen kann sogar so weit gehen,dass
ein höchst minimalistisches Seitenlayout entsteht.
FLAT DESIGNFLAT DESIGN
7
Wo trat Flat Design zum ersten Mal auf?
Mit Einführung des Windows Phone 7 Ende 2010 brachte Microsoft unter dem Be-
griff „Metro Design“ eine neue Art der Gestaltung in sein User Interface.Alle über-
flüssigen Elemente wurden entfernt; anstelle von Buttons wurden die Content-
Elemente zur Klickfläche. Da Typografie selbst Content darstellt, erhielt sie viel
Raum,um zu wirken.Hinzu kamen farbige Kacheln und eine klare,reduzierte Icon-
sprache.Mit Windows 8 gelangte das Metro Design auch auf den Desktop und wurde
schließlich bekannt.
Gerne wird mit vollflächigen Bildern oder Videos im Seitenhintergrund gearbeitet,die
zur Emotionalisierung und Einzigartigkeit des Look & Feel beitragen können.
Flat Design schließt nutzerzentriertes Design nicht aus.Um den Designprinzipien der
Einfachheit und Reduktion folgen zu können,stellt sich bei einer flach gestaltetenAn-
wendung oder Plattform mehr denn je die Frage,mit welchem Bedürfnis der Nutzer
eine Website besucht und welche Inhalte und Funktionen er auf jeden Fall erwartet.
.............................................................................................................................
Webauftritt der Kindernothilfe von denkwerk. www.kindernothilfe.de
.............................................................................................................................
...................................................
Metro Design: Windows 8
...................................................
6
FLAT DESIGNFLAT DESIGN
9
Welche Gründe gab es dafür?
Informationsüberfluss
Begründen lässt sich der Design-Trend teilweise mit der zunehmenden Unüber-
sichtlichkeit der digitalen Welt.Massen an Daten stürzen tagtäglich auf uns ein und
nur ein kleiner Teil davon ist tatsächlich Information.Flat Design hält dagegen und
besticht durch eine reduzierte,übersichtliche Gestaltung,die Inhalte für den Nutzer
schnell erfassbar und verständlich abbildet.
Das Ende des Skeuomorphism
Nutzer haben inzwischen gelernt, mit digitalen Bedienmechanismen so natürlich
umzugehen, dass eine Nachahmung von realen Objekten wie beispielsweise digi-
talen Adressbüchern in Leder- und Papieroptik nicht mehr notwendig ist.Diese Art
der Darstellung geht mit natürlichen Beschränkungen des realen Objekts einher,
so dass sie den digitalen Nutzungsmöglichkeiten heute nicht mehr gerecht werden
kann.
Responsive Design wird Pflicht
Der stetig wachsende Marktanteil von Smartphones und Tablets macht es unver-
zichtbar, dass ein Webauftritt sich – unabhängig vom mobilen Endgerät – so über-
sichtlich und nutzerfreundlich wie möglich darstellt.Damit sich die Website fluide
an die jeweiligeAusgabegröße anpassen kann,muss das Layout flexibel und modular
aufgebaut sein.Für die mobile Nutzung der Website muss die zu ladende Datenmen-
ge auf eine gute Performance hin optimiert werden. Der im Flat Design reduzierte,
inhaltsfokussierte Aufbau einer Website kommt sowohl responsivem Verhalten als
auch schnellen Ladezeiten sehr entgegen.
8
...................................................................
Skeuomorphism: iOS 6 Notizen-App
....................................................................
......................................................................
Skeuomorphism: iCal auf dem Mac
.......................................................................
.......................................................................................................................................................................................
denkwerk entwickelte für Vapiano eine smarte Responsive-Design-Lösung. www.vapiano.de
.......................................................................................................................................................................................
FLAT DESIGNFLAT DESIGN
Parallelen in der Design-Geschichte
Mit der Industrialisierung beginnt auch die eigentliche Geschichte des Designs.
Diese Zeit war durch eine große Anzahl neuer Techniken geprägt,die eine massen-
hafte Produktion von Konsumgütern oder Bauten in bis dahin undenkbaren Größen
ermöglichten.Neben den neuen technischen Möglichkeiten kam es zu gesellschaft-
lichen Veränderungen in allen Lebensbereichen wie Wohnen, Bildung, Arbeit und
Kultur1
. Für die Gestaltung von Massenprodukten griff man auf Stile vergangener
Epochen (z.B.aus der Romantik,Gotik oder Renaissance) zurück,die sich abgewan-
delt in Ornamenten auf Gebrauchsgegenständen wiederfanden. Der Historismus
versuchte durch diese Stilzitate alte Werte aus vergangenen Epochen auf die neuen
Industrieprodukte zu übertragen,so dass sie von der – durch den gesellschaftlichen
Wandel verunsicherten – Bevölkerung positiv angenommen wurden2
.
Im aufkommenden Funktionalismus hinterfragte man dieses Vorgehen.Die ästhe-
tische Form eines Objekts wurde nun aus seiner Funktion heraus entwickelt und
gestaltet (“Form follows function”,Louis H.Sullivan) und alles Unfunktionale – wie z.B.  
Ornamente – wurde entfernt.
Der Funktionalismus setzte sich in der Designgeschichte in unterschiedlichen Strö-
mungen und Zeiten fort. Im niederländischen De Stijl wurde die formale Gestal-
tung auf einfache Grundelemente reduziert.Das Verhältnis von Flächen,Farben und
Linien rückte in den Mittelpunkt. Auch im Bauhaus (1919-33) versuchte man, den
Historismus durch eine klare,reduzierte und funktionale Formsprache zu ersetzen.
Gestalterische Ansätze wurden aus geometrischen Grundformen entwickelt und
führten zu funktionalen und reduzierten Ergebnissen.
Nach dem zweiten Weltkrieg trat der Funktionalismus in Westdeutschland als Gute
Form in Erscheinung.Nun kamen neben Einfachheit und Funktionalismus zusätz-
lich Werte wie hoher Gebrauchswert, lange Lebensdauer, gute Verständlichkeit,
Verarbeitung und Technologie, ergonomische Anpassung und ökologische Nach-
haltigkeit in den Vordergrund3
. Die Firma Braun mit Dieter Rams als Chefdesigner
übertrug die Haltung der guten Form auf die Industrie und schuf so Design-Klassi-
ker. Dieser Zeit entstammt auch der Spruch „Weniger (Design) ist mehr (Design)“,
der das Bewusstsein für Qualität,Langlebigkeit und Ökologie beschreibt.
3 Design - eine Einführung: Entwurf im sozialen,kulturellen und wirtschaftlichen Kontext,Beat Schneider,Walter de Gruyter,2005,S.114
1 http://www.bpb.de/geschichte/deutsche-geschichte/kaiserreich/139649/industrialisierung-und-moderne-gesellschaft
2 Geschichte des Design in Deutschland,Gert Selle,Campus Verlag,2007,S.66
10 11
FLAT DESIGNFLAT DESIGN
In den sechziger und siebziger Jahren geriet der Funktionalismus in die Kritik, da
die Idee der rein funktionalen Produkte aus wirtschaftlichen Gründen imitiert wur-
de.Dies führte zu gut bedienbaren Produkten,die aber unanschaulich,austauschbar
und langweilig waren. So gerieten nun zum Beispiel die trostlosen Betonplatten-
bauten der Trabantenstädte in die Kritik, die ohne Berücksichtigung der Bedürf-
nisse der Bewohner entwickelt worden waren. Das Design musste sich von einer
rein praktischen und technischen Dimension hin zu einer emotionalen und sym-
bolischen Dimension weiterentwickeln.
In der Postmoderne wurde bedingt durch eine Überflussgesellschaft die sym-
bolische und zeichenhafte Funktion von Design wichtiger.Design wurde farbig,in-
dividuell,locker und verspielt.Die Inszenierung von Individuen und Design als Trä-
ger von Werten,die durch den Erwerb auf den Käufer übergehen sollen,wurden zu
neuen Design-Anforderungen.Produkte erfüllten neben ihrer „praktischen“ Funkti-
on nun auch expressive und kommunikative Funktionen.
12 13
Ende der neunziger Jahre trat der Funktionalismus in Form der Neuen Einfachheit
wieder in den Vordergrund.Nach der Postmoderne war der Markt von „überladener
Ästhetik“ übersättigt und es entstand das Bedürfnis nach Einfachheit und Beruhi-
gung. Diese Einfachheit bedeutete aber nicht eine Rückkehr zu simplen Lösungen.
Designs aus dieser Zeit waren formal reduziert, verwendeten dafür aber teilweise
komplizierte Aufbauten. Die Einfachheit wurde zur zeichenhaften Funktion. Das
Verhältnis zwischen Funktionalismus und zeichenhaften Funktionen normalisier-
te sich, so dass eine ausgewogene Mischung aus formal reduzierter und zeichen-
hafter Bedeutung entstand.
Der Einschnitt mit der Digitalisierung ist für das Design ähnlich groß wie der mit
der Industrialisierung Ende des 19. Jahrhunderts. Damals bestimmten die neu-
en Technologien in Form von Dampfmaschinen, Stahlkonstruktionen oder der
Arbeitsteilung das Leben so sehr wie heute die heutige Digitalisierung.
Die digitale Technik ermöglicht neben Aspekten wie Effizienzsteigerung und
verbesserter Wirtschaftlichkeit auch, dem Bedürfnis nach Individualtät
und Eigenständigkeit besser nachgehen zu können. Durch die Digitalisie-
rung können die Funktion eines Produkts und das Design losgelöst vonei-
nander entwickelt werden. So umhüllte in der nicht-digitalen-Zeit das Ge-
häuse (das Design) einer Schreibmaschine die enthaltene Technik. In der
Digitalisierung löst sich diese Verbindung auf.Das Design richtet sich der zeichen-
haften Funktion aus und kann sich an Zielgruppen anpassen. Die Form ist losgelöst
von der Funktion.Diese Rahmenbedingungen führen zu einer großen stilistischen
Vielfalt,die durch die Vernetzung auch immer schnelleren Trends unterworfen ist.
FLAT DESIGNFLAT DESIGN
14
Erkenntnisse aus der Designgeschichte
Es lassen sich Gemeinsamkeiten in der Reaktion auf Industrialisierung und Digita-
lisierung finden. Der Historismus bediente sich aus einer Unsicherheit gegenüber
der neuen Zeit an Stilistiken vergangener Epochen. Man griff auf tradierte Werte
zurück und versuchte diese weiterzuverwenden.
In der Digitalisierung griff das Design aufgrund der starkenTrennung von Funktion
und Form auf reale Metaphern zurück und versuchte die reale Welt zu imitieren
und Neues dadurch besserverständlich zu machen (Skeuomorphism).In den letzten
Jahren sind diese Metaphern überflüssig geworden, da die Nutzer die Funktionen
gelernt haben und die Zeichen heute teilweise veraltet sind – wie zum Beispiel das
Disketten-Symbol für die Speichern-Funktion.
.........................................................................................................................................................................
Der analoge Gebrauchsgegenstand findet sich adaptiert in der digitalen Welt wieder.
.........................................................................................................................................................................
15
Wenn sich eine Marke oder Identität im Web widerspiegeln und erkennbar bleiben
soll, ist dies auch bei der Einarbeitung von Design-Trends zu beachten. Daher soll-
te man genau prüfen, wie und wo Flat Design eingesetzt werden kann. Die absolut
flache Gestaltung von Benutzeroberflächen kann auch Hürden aufwerfen: Interak-
tionsflächen sind manchmal nicht sofort als solche zu erkennen.Elemente erschei-
nen gleichartig,so dass eine visuelle Hierarchie erschwert werden kann.Ein einzig-
artiges Look & Feel kann verloren gehen,wenn viele Websites ähnlich gestaltet sind.
Um dem entgegen zu wirken,ergeben sich in Zukunft spannende Möglichkeiten der
Weiterentwicklung flacher Designs – im Folgenden sind einige beschrieben.
Was bedeutet nun derAuf-
schwung von Flat Design für
eine Marke? In Zeiten,in denen
Produkte immer gleichförmiger
werden und der Wunsch nach
Individualität immer größer
wird,ist eine einzigartige
Markenwahrnehmung ein
zentraler USP.
FLAT DESIGNFLAT DESIGN
Almost Flat Design
Mitte 2011 launchte Google den Dienst Google+ und startete damit die visuelle Auf-
frischung seiner Plattformen. Das Design stellt dabei eine Variante des Flat Design
dar,die sich „Almost Flat“ nennt.Hierbei werden dezent feine Schlagschatten,dünne
Outlines,leichte Verläufe und halbtransparente Flächen eingesetzt,so dass sich Ele-
mente vom Hintergrund,auf dem sie stehen,besser unterscheiden lassen.
16
...............................................................................
Almost Flat Design: Google+ Profilseite
...............................................................................
Unschärfe
In der Bildgestaltung in User Interfaceswird immer häufiger mit Unschärfe gearbei-
tet, um die verloren gegangene Tiefe des Flat Design wiederherzustellen. Im Trend
sind außerdem Fotografien mit geringer Tiefenschärfe, die einen kleinen Schärfe-
bereich ausweisen. Unschärfe wird in der Fotografie unter anderem bei Tilt-Shift-
Effekten bewusst eingesetzt. Die ästhetische Qualität der Unschärfe wird bewusst
gestaltet und teilweise digital nachempfunden.Technisch lässt sich der verstärkte
Einsatz von Unschärfe auch damit begründen,dass Bilder in HTML-5 weichgezeich-
net werden können.
.........................................................
Tilt-Shift-Effekt bei Fotografien
.........................................................
17
FLAT DESIGNFLAT DESIGN
Transluzenz
Halbtransparente Flächen über Hintergründen erzeugen eine leichte Tiefe auf
einem zweidimensionalen Medium. Ganz neu ist dieser Trend nicht, jedoch prägt
er in Kombination mit dem Aspekt Unschärfe zu einem wesentlichen Teil das
Look & Feel von iOS7.Darüber hinaus findet sich Transluzenz häufig in flachen Web-
site-Designs,die mit einem vollflächigen Bild oder Video im Hintergrund arbeiten.
18
...................................................................................
Transluzenz: iOS7-Aufbau auf dem iPhone
...................................................................................
Long Shadow Design
Anfänglich konnte man diesen Trend bei der Gestaltung von Icons beobachten.
Inzwischen findet er sich auch in anderen Bereichen.Bei dieser Designästhetikwirft
ein Objekt einen Schatten im 45°-Winkel,der ca.zweieinhalb mal so lang ist wie das
Objekt selbst.Somit erhält das Objekt trotz flacher Anmutung eine gewisse Tiefe.
................................................................
Long Shadow: Icons von denkwerk
................................................................
19
FLAT DESIGNFLAT DESIGN
20
Animationen und Transitions
Digitale Produkte können durch den EinsatzvonAnimationen oder Parallax-Effekten
neue Dimensionen erhalten. Hierzu zählen zum Beispiel Bewegung oder Überlage-
rung. Jony Ive spricht bei der Einführung von iOS7 dabei von „new types of depth“.
Hier ist zum Beispiel die Nutzung des Beschleunigungsmessers auf dem iPhone
gemeint, wodurch der Homescreen einen 3D-Eindruck erhält. Des Weiteren gibt es
Websites, bei denen sich Elemente wie Infografiken oder zusätzliche Hinweise erst
im Moment des Scrollens animiert aufbauen.Animationen und Transitions können
beim Nutzer für ein echtes Wow-Erlebnis sorgen,so dass die Website nachhaltig Ein-
druck hinterlässt.Die Seite wird belebt und ihre Benutzung macht Spaß.
...............................................................................................................................................................................
Animation: Kampagnenseite FERCHAU Expedition von denkwerk. expedition.ferchau.de
...............................................................................................................................................................................
Fazit
Flat Design ist als Vertreter des Funktionalismus zu einem Zeichen für Einfachheit
geworden. Für das Visual Design bedeutet das eine Reduktion der Gestaltungsmit-
tel. Die verbleibenden Mittel wie Schrift, Icon, Farbe, Fotos, Videos oder Animati-
on erhalten ein größeres Gewicht und müssen zeichenhafte Funktionen abbilden.
Dadurch wird der Anspruch an diese Elemente erhöht und zum Beispiel eine emo-
tionalere Bildgestaltung sowie eine ausdrucksstarke, gut lesbare Schrift gefordert.
LetzteWeiterentwicklungenwie Long ShadowoderAlmost Flat zeigen aber,dass Flat
Design in seiner Reinform aufgeweicht wird und wieder eine formale Vielfalt ent-
steht.
Die Herausforderung an die Gestaltung im Flat Design ist eine angemessene
Inszenierung von Design und somit von Marken. Wie in der Designgeschichte
bereits passiert, darf Design nicht langweilig und austauschbar werden. Wie kann
ein Look & Feel eigenständig bleiben, die Werte einer Marke adäquat abbilden und
gleichzeitig nutzerfreundlich sein und Spaß machen?
Was bedeutet Flat Design für Unternehmen und digitale Markenauftritte? Hier gilt
es sicher nicht,blind jeden Trend mitzumachen,sondern vielmehr zu hinterfragen,
wie die eigene Marke zeitgemäß dargestellt werden kann, ohne dabei modisch zu
werden und ihre Kernwerte zu verlieren.
Wenn Sie wissen möchten,wie Ihr Unternehmen im Web abgebildet werden kann,
sprechen Sie uns an.
21
FLAT DESIGNFLAT DESIGN
Autoren: Christian Leuenhagen,Coralie Feil
© 2014 denkwerk – Alle Rechte vorbehalten
Kontakt: Melinda Burmeister
presse@denkwerk.com – T +49 221 2942 100
denkwerk GmbH
Vogelsanger Straße 66
50823 Köln
Reichenberger Straße 124
10999 Berlin
Geschäftsführer: Jochen Schlaier,Marco Zingler
Handelsregister: Amtsgericht Köln,HRB 31595
IMPRESSUM
FLAT DESIGN
www.denkwerk.com

Más contenido relacionado

Ähnlich wie Flat Design. Die digitale Welt wird platt gemacht (2014)

Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Wolfram Nagel
 
IxDA Frankfurt – Sponsor Pitchdeck
IxDA Frankfurt – Sponsor PitchdeckIxDA Frankfurt – Sponsor Pitchdeck
IxDA Frankfurt – Sponsor PitchdeckIxDA Frankfurt
 
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für MenschenDon't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschenthink moto GmbH
 
Futuregram #.03 - Chatbots
Futuregram #.03 - ChatbotsFuturegram #.03 - Chatbots
Futuregram #.03 - ChatbotsTRENDONE GmbH
 
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...dasmedienkombinatde
 
Virtual reality-architektur
Virtual reality-architekturVirtual reality-architektur
Virtual reality-architekturVisCircle
 
Partizipationskonzept: Entwicklung eines digitalen Diskursraumes
Partizipationskonzept: Entwicklung eines digitalen DiskursraumesPartizipationskonzept: Entwicklung eines digitalen Diskursraumes
Partizipationskonzept: Entwicklung eines digitalen DiskursraumesMarja Annecke
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
Integration – Interaktion – Innovation: Das Convention Center der Zukunft
Integration – Interaktion – Innovation: Das Convention Center der ZukunftIntegration – Interaktion – Innovation: Das Convention Center der Zukunft
Integration – Interaktion – Innovation: Das Convention Center der ZukunftGCB German Convention Bureau e.V.
 
20191010 dianafrank blackbox re
20191010 dianafrank blackbox re 20191010 dianafrank blackbox re
20191010 dianafrank blackbox re diana frank
 
NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?
NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?
NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?HANDSPIEL GmbH
 
USEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey MapsUSEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey MapsUSEEDS GmbH
 
Sharing City vs. Smart City. Fokus Berlin.
 Sharing City vs. Smart City. Fokus Berlin. Sharing City vs. Smart City. Fokus Berlin.
Sharing City vs. Smart City. Fokus Berlin.Thomas Doennebrink
 
interaktive Medienfassade
interaktive Medienfassadeinteraktive Medienfassade
interaktive Medienfassadebixxx
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWebmontag MRN
 
Wie kann das Public Display den Kontext erkennen und darauf reagieren
Wie kann das Public Display den Kontext erkennen und darauf reagierenWie kann das Public Display den Kontext erkennen und darauf reagieren
Wie kann das Public Display den Kontext erkennen und darauf reagierenChristoph Mühlbauer
 
Product tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux shortProduct tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux shortInken Petersen
 

Ähnlich wie Flat Design. Die digitale Welt wird platt gemacht (2014) (20)

Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
IxDA Frankfurt – Sponsor Pitchdeck
IxDA Frankfurt – Sponsor PitchdeckIxDA Frankfurt – Sponsor Pitchdeck
IxDA Frankfurt – Sponsor Pitchdeck
 
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für MenschenDon't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
 
Futuregram #.03 - Chatbots
Futuregram #.03 - ChatbotsFuturegram #.03 - Chatbots
Futuregram #.03 - Chatbots
 
innovation 2011
innovation 2011innovation 2011
innovation 2011
 
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtec...
 
Virtual reality-architektur
Virtual reality-architekturVirtual reality-architektur
Virtual reality-architektur
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 
Partizipationskonzept: Entwicklung eines digitalen Diskursraumes
Partizipationskonzept: Entwicklung eines digitalen DiskursraumesPartizipationskonzept: Entwicklung eines digitalen Diskursraumes
Partizipationskonzept: Entwicklung eines digitalen Diskursraumes
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Integration – Interaktion – Innovation: Das Convention Center der Zukunft
Integration – Interaktion – Innovation: Das Convention Center der ZukunftIntegration – Interaktion – Innovation: Das Convention Center der Zukunft
Integration – Interaktion – Innovation: Das Convention Center der Zukunft
 
20191010 dianafrank blackbox re
20191010 dianafrank blackbox re 20191010 dianafrank blackbox re
20191010 dianafrank blackbox re
 
Human-Computer-Interaction - Usability Engineering im Bildungskontext
Human-Computer-Interaction - Usability Engineering im BildungskontextHuman-Computer-Interaction - Usability Engineering im Bildungskontext
Human-Computer-Interaction - Usability Engineering im Bildungskontext
 
NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?
NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?
NUTZER:effekt #12 - Wie kommen digitale Innovationen in die Welt?
 
USEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey MapsUSEEDS° :: Customer Journey Maps
USEEDS° :: Customer Journey Maps
 
Sharing City vs. Smart City. Fokus Berlin.
 Sharing City vs. Smart City. Fokus Berlin. Sharing City vs. Smart City. Fokus Berlin.
Sharing City vs. Smart City. Fokus Berlin.
 
interaktive Medienfassade
interaktive Medienfassadeinteraktive Medienfassade
interaktive Medienfassade
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
Wie kann das Public Display den Kontext erkennen und darauf reagieren
Wie kann das Public Display den Kontext erkennen und darauf reagierenWie kann das Public Display den Kontext erkennen und darauf reagieren
Wie kann das Public Display den Kontext erkennen und darauf reagieren
 
Product tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux shortProduct tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux short
 

Mehr von denkwerk GmbH

Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...
Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...
Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...denkwerk GmbH
 
AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...
AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...
AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...denkwerk GmbH
 
Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)
Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)
Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)denkwerk GmbH
 
Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)
Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)
Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)denkwerk GmbH
 
"Digitale Transformation" - denkwerk GmbH @ dmexco 2017
"Digitale Transformation" - denkwerk GmbH @ dmexco 2017"Digitale Transformation" - denkwerk GmbH @ dmexco 2017
"Digitale Transformation" - denkwerk GmbH @ dmexco 2017denkwerk GmbH
 
IA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story MappingIA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story Mappingdenkwerk GmbH
 
IA Konferenz 2016 - Ideation
IA Konferenz 2016 - Ideation IA Konferenz 2016 - Ideation
IA Konferenz 2016 - Ideation denkwerk GmbH
 
Unterwegs beim London Design Festival 2014, Lucía Grompone
Unterwegs beim London Design Festival 2014, Lucía GromponeUnterwegs beim London Design Festival 2014, Lucía Grompone
Unterwegs beim London Design Festival 2014, Lucía Gromponedenkwerk GmbH
 
6 Überlebenstechniken für die digitale Welt von morgen
6 Überlebenstechniken für die digitale Welt von morgen6 Überlebenstechniken für die digitale Welt von morgen
6 Überlebenstechniken für die digitale Welt von morgendenkwerk GmbH
 
Connected Commerce - Handel mit vernetzten Konsumenten
Connected Commerce - Handel mit vernetzten KonsumentenConnected Commerce - Handel mit vernetzten Konsumenten
Connected Commerce - Handel mit vernetzten Konsumentendenkwerk GmbH
 
Mobile im Handel: Showrooming als Chance
Mobile im Handel: Showrooming als ChanceMobile im Handel: Showrooming als Chance
Mobile im Handel: Showrooming als Chancedenkwerk GmbH
 
How to unlock the next level of digital revolution
How to unlock the next level of digital revolutionHow to unlock the next level of digital revolution
How to unlock the next level of digital revolutiondenkwerk GmbH
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)denkwerk GmbH
 
denkwerk Ideation Workshops (2014)
denkwerk Ideation Workshops (2014)denkwerk Ideation Workshops (2014)
denkwerk Ideation Workshops (2014)denkwerk GmbH
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
Fast Forward - Innovationsberatung mit denkwerk (2013)
Fast Forward - Innovationsberatung mit denkwerk (2013)Fast Forward - Innovationsberatung mit denkwerk (2013)
Fast Forward - Innovationsberatung mit denkwerk (2013)denkwerk GmbH
 
Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)
Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)
Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)denkwerk GmbH
 
Sägespäne in der Pixelwelt
Sägespäne in der PixelweltSägespäne in der Pixelwelt
Sägespäne in der Pixelweltdenkwerk GmbH
 
Multiscreen - voll vernetzte schöne Welt?
Multiscreen - voll vernetzte schöne Welt?Multiscreen - voll vernetzte schöne Welt?
Multiscreen - voll vernetzte schöne Welt?denkwerk GmbH
 
Eins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive DesignEins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive Designdenkwerk GmbH
 

Mehr von denkwerk GmbH (20)

Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...
Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...
Starke Persönlichkeiten statt Werbefloskeln: Was den Erfolg von Marken in der...
 
AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...
AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...
AR & VR – One trick pony oder doch die größte Chance für das Marketing? (denk...
 
Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)
Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)
Wie Sprachsteuerung den E-Commerce verändert (denkwerk GmbH @ dmexco 2017)
 
Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)
Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)
Content Marketing und Storytelling (denkwerk GmbH @ dmexco 2017)
 
"Digitale Transformation" - denkwerk GmbH @ dmexco 2017
"Digitale Transformation" - denkwerk GmbH @ dmexco 2017"Digitale Transformation" - denkwerk GmbH @ dmexco 2017
"Digitale Transformation" - denkwerk GmbH @ dmexco 2017
 
IA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story MappingIA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story Mapping
 
IA Konferenz 2016 - Ideation
IA Konferenz 2016 - Ideation IA Konferenz 2016 - Ideation
IA Konferenz 2016 - Ideation
 
Unterwegs beim London Design Festival 2014, Lucía Grompone
Unterwegs beim London Design Festival 2014, Lucía GromponeUnterwegs beim London Design Festival 2014, Lucía Grompone
Unterwegs beim London Design Festival 2014, Lucía Grompone
 
6 Überlebenstechniken für die digitale Welt von morgen
6 Überlebenstechniken für die digitale Welt von morgen6 Überlebenstechniken für die digitale Welt von morgen
6 Überlebenstechniken für die digitale Welt von morgen
 
Connected Commerce - Handel mit vernetzten Konsumenten
Connected Commerce - Handel mit vernetzten KonsumentenConnected Commerce - Handel mit vernetzten Konsumenten
Connected Commerce - Handel mit vernetzten Konsumenten
 
Mobile im Handel: Showrooming als Chance
Mobile im Handel: Showrooming als ChanceMobile im Handel: Showrooming als Chance
Mobile im Handel: Showrooming als Chance
 
How to unlock the next level of digital revolution
How to unlock the next level of digital revolutionHow to unlock the next level of digital revolution
How to unlock the next level of digital revolution
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
 
denkwerk Ideation Workshops (2014)
denkwerk Ideation Workshops (2014)denkwerk Ideation Workshops (2014)
denkwerk Ideation Workshops (2014)
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Fast Forward - Innovationsberatung mit denkwerk (2013)
Fast Forward - Innovationsberatung mit denkwerk (2013)Fast Forward - Innovationsberatung mit denkwerk (2013)
Fast Forward - Innovationsberatung mit denkwerk (2013)
 
Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)
Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)
Digitale Produktentwicklung - der denkwerk Prozess mit Methodenkompendium (2012)
 
Sägespäne in der Pixelwelt
Sägespäne in der PixelweltSägespäne in der Pixelwelt
Sägespäne in der Pixelwelt
 
Multiscreen - voll vernetzte schöne Welt?
Multiscreen - voll vernetzte schöne Welt?Multiscreen - voll vernetzte schöne Welt?
Multiscreen - voll vernetzte schöne Welt?
 
Eins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive DesignEins für alle! Ein Praxisworkshop zu Responsive Design
Eins für alle! Ein Praxisworkshop zu Responsive Design
 

Flat Design. Die digitale Welt wird platt gemacht (2014)

  • 1. FLAT DESIGN Die digitale Welt wird platt gemacht.
  • 2. FLAT DESIGNFLAT DESIGN Die digitale Welt wird platt gemacht. Ein Überblick über Flat Design und aktuelle Weiterentwicklungen
  • 3. FLAT DESIGNFLAT DESIGN 5 Überall im Web hört man den Begriff Flat Design.Seit einigen Jahren gewinnt derTrend immer mehr an Bedeutung,da mitt- lerweile mehr und mehr große Unternehmen ihr Design darauf umstellen. Aber was genau be- deutet Flat Design und worin be- gründet sich dieser ästhetische Wandel? Und was bedeutet der Designwandel für Marken und Unternehmen? 4 Was ist „Flat Design“? Beauty of simplicity: In der Designästhetik des Flat Design sind Elemente klar, einfach und flach gestaltet. Das User Interface ist clean und intuitiv bedienbar. Typografie wird inszeniert und gerne auch groß und plakativ gespielt. Texte am Bildschirm zu lesen macht Spaß, denn bei der typografischen Gestaltung wird viel Wert auf Attraktivität und Lesbarkeit gelegt. Die Farbpalette ist häufig bunt aufge- baut. Farben können kräftig oder auch gesättigt sein.In jedem Fall werden sie gerne großflächig eingesetzt. Der Inhalt tritt in den Vordergrund und strukturiert das Seitenlayout, so dass die Website einfach und schnell verstanden wird. Eine wichtige Rolle spielen auch Weißraum bzw. Freiflächen, die für eine bessere Übersichtlichkeit sorgen und dem Content ausreichend Raum geben,um entsprechend wirken zu können. Rein deko- rative Elemente,Texturen,Verläufe und Effekte wie Schlagschatten und Glows wer- den weitestgehend vermieden. Funktionen und Features werden auf die wirklich wichtigen reduziert.Das Weglassen von Elementen kann sogar so weit gehen,dass ein höchst minimalistisches Seitenlayout entsteht.
  • 4. FLAT DESIGNFLAT DESIGN 7 Wo trat Flat Design zum ersten Mal auf? Mit Einführung des Windows Phone 7 Ende 2010 brachte Microsoft unter dem Be- griff „Metro Design“ eine neue Art der Gestaltung in sein User Interface.Alle über- flüssigen Elemente wurden entfernt; anstelle von Buttons wurden die Content- Elemente zur Klickfläche. Da Typografie selbst Content darstellt, erhielt sie viel Raum,um zu wirken.Hinzu kamen farbige Kacheln und eine klare,reduzierte Icon- sprache.Mit Windows 8 gelangte das Metro Design auch auf den Desktop und wurde schließlich bekannt. Gerne wird mit vollflächigen Bildern oder Videos im Seitenhintergrund gearbeitet,die zur Emotionalisierung und Einzigartigkeit des Look & Feel beitragen können. Flat Design schließt nutzerzentriertes Design nicht aus.Um den Designprinzipien der Einfachheit und Reduktion folgen zu können,stellt sich bei einer flach gestaltetenAn- wendung oder Plattform mehr denn je die Frage,mit welchem Bedürfnis der Nutzer eine Website besucht und welche Inhalte und Funktionen er auf jeden Fall erwartet. ............................................................................................................................. Webauftritt der Kindernothilfe von denkwerk. www.kindernothilfe.de ............................................................................................................................. ................................................... Metro Design: Windows 8 ................................................... 6
  • 5. FLAT DESIGNFLAT DESIGN 9 Welche Gründe gab es dafür? Informationsüberfluss Begründen lässt sich der Design-Trend teilweise mit der zunehmenden Unüber- sichtlichkeit der digitalen Welt.Massen an Daten stürzen tagtäglich auf uns ein und nur ein kleiner Teil davon ist tatsächlich Information.Flat Design hält dagegen und besticht durch eine reduzierte,übersichtliche Gestaltung,die Inhalte für den Nutzer schnell erfassbar und verständlich abbildet. Das Ende des Skeuomorphism Nutzer haben inzwischen gelernt, mit digitalen Bedienmechanismen so natürlich umzugehen, dass eine Nachahmung von realen Objekten wie beispielsweise digi- talen Adressbüchern in Leder- und Papieroptik nicht mehr notwendig ist.Diese Art der Darstellung geht mit natürlichen Beschränkungen des realen Objekts einher, so dass sie den digitalen Nutzungsmöglichkeiten heute nicht mehr gerecht werden kann. Responsive Design wird Pflicht Der stetig wachsende Marktanteil von Smartphones und Tablets macht es unver- zichtbar, dass ein Webauftritt sich – unabhängig vom mobilen Endgerät – so über- sichtlich und nutzerfreundlich wie möglich darstellt.Damit sich die Website fluide an die jeweiligeAusgabegröße anpassen kann,muss das Layout flexibel und modular aufgebaut sein.Für die mobile Nutzung der Website muss die zu ladende Datenmen- ge auf eine gute Performance hin optimiert werden. Der im Flat Design reduzierte, inhaltsfokussierte Aufbau einer Website kommt sowohl responsivem Verhalten als auch schnellen Ladezeiten sehr entgegen. 8 ................................................................... Skeuomorphism: iOS 6 Notizen-App .................................................................... ...................................................................... Skeuomorphism: iCal auf dem Mac ....................................................................... ....................................................................................................................................................................................... denkwerk entwickelte für Vapiano eine smarte Responsive-Design-Lösung. www.vapiano.de .......................................................................................................................................................................................
  • 6. FLAT DESIGNFLAT DESIGN Parallelen in der Design-Geschichte Mit der Industrialisierung beginnt auch die eigentliche Geschichte des Designs. Diese Zeit war durch eine große Anzahl neuer Techniken geprägt,die eine massen- hafte Produktion von Konsumgütern oder Bauten in bis dahin undenkbaren Größen ermöglichten.Neben den neuen technischen Möglichkeiten kam es zu gesellschaft- lichen Veränderungen in allen Lebensbereichen wie Wohnen, Bildung, Arbeit und Kultur1 . Für die Gestaltung von Massenprodukten griff man auf Stile vergangener Epochen (z.B.aus der Romantik,Gotik oder Renaissance) zurück,die sich abgewan- delt in Ornamenten auf Gebrauchsgegenständen wiederfanden. Der Historismus versuchte durch diese Stilzitate alte Werte aus vergangenen Epochen auf die neuen Industrieprodukte zu übertragen,so dass sie von der – durch den gesellschaftlichen Wandel verunsicherten – Bevölkerung positiv angenommen wurden2 . Im aufkommenden Funktionalismus hinterfragte man dieses Vorgehen.Die ästhe- tische Form eines Objekts wurde nun aus seiner Funktion heraus entwickelt und gestaltet (“Form follows function”,Louis H.Sullivan) und alles Unfunktionale – wie z.B.   Ornamente – wurde entfernt. Der Funktionalismus setzte sich in der Designgeschichte in unterschiedlichen Strö- mungen und Zeiten fort. Im niederländischen De Stijl wurde die formale Gestal- tung auf einfache Grundelemente reduziert.Das Verhältnis von Flächen,Farben und Linien rückte in den Mittelpunkt. Auch im Bauhaus (1919-33) versuchte man, den Historismus durch eine klare,reduzierte und funktionale Formsprache zu ersetzen. Gestalterische Ansätze wurden aus geometrischen Grundformen entwickelt und führten zu funktionalen und reduzierten Ergebnissen. Nach dem zweiten Weltkrieg trat der Funktionalismus in Westdeutschland als Gute Form in Erscheinung.Nun kamen neben Einfachheit und Funktionalismus zusätz- lich Werte wie hoher Gebrauchswert, lange Lebensdauer, gute Verständlichkeit, Verarbeitung und Technologie, ergonomische Anpassung und ökologische Nach- haltigkeit in den Vordergrund3 . Die Firma Braun mit Dieter Rams als Chefdesigner übertrug die Haltung der guten Form auf die Industrie und schuf so Design-Klassi- ker. Dieser Zeit entstammt auch der Spruch „Weniger (Design) ist mehr (Design)“, der das Bewusstsein für Qualität,Langlebigkeit und Ökologie beschreibt. 3 Design - eine Einführung: Entwurf im sozialen,kulturellen und wirtschaftlichen Kontext,Beat Schneider,Walter de Gruyter,2005,S.114 1 http://www.bpb.de/geschichte/deutsche-geschichte/kaiserreich/139649/industrialisierung-und-moderne-gesellschaft 2 Geschichte des Design in Deutschland,Gert Selle,Campus Verlag,2007,S.66 10 11
  • 7. FLAT DESIGNFLAT DESIGN In den sechziger und siebziger Jahren geriet der Funktionalismus in die Kritik, da die Idee der rein funktionalen Produkte aus wirtschaftlichen Gründen imitiert wur- de.Dies führte zu gut bedienbaren Produkten,die aber unanschaulich,austauschbar und langweilig waren. So gerieten nun zum Beispiel die trostlosen Betonplatten- bauten der Trabantenstädte in die Kritik, die ohne Berücksichtigung der Bedürf- nisse der Bewohner entwickelt worden waren. Das Design musste sich von einer rein praktischen und technischen Dimension hin zu einer emotionalen und sym- bolischen Dimension weiterentwickeln. In der Postmoderne wurde bedingt durch eine Überflussgesellschaft die sym- bolische und zeichenhafte Funktion von Design wichtiger.Design wurde farbig,in- dividuell,locker und verspielt.Die Inszenierung von Individuen und Design als Trä- ger von Werten,die durch den Erwerb auf den Käufer übergehen sollen,wurden zu neuen Design-Anforderungen.Produkte erfüllten neben ihrer „praktischen“ Funkti- on nun auch expressive und kommunikative Funktionen. 12 13 Ende der neunziger Jahre trat der Funktionalismus in Form der Neuen Einfachheit wieder in den Vordergrund.Nach der Postmoderne war der Markt von „überladener Ästhetik“ übersättigt und es entstand das Bedürfnis nach Einfachheit und Beruhi- gung. Diese Einfachheit bedeutete aber nicht eine Rückkehr zu simplen Lösungen. Designs aus dieser Zeit waren formal reduziert, verwendeten dafür aber teilweise komplizierte Aufbauten. Die Einfachheit wurde zur zeichenhaften Funktion. Das Verhältnis zwischen Funktionalismus und zeichenhaften Funktionen normalisier- te sich, so dass eine ausgewogene Mischung aus formal reduzierter und zeichen- hafter Bedeutung entstand. Der Einschnitt mit der Digitalisierung ist für das Design ähnlich groß wie der mit der Industrialisierung Ende des 19. Jahrhunderts. Damals bestimmten die neu- en Technologien in Form von Dampfmaschinen, Stahlkonstruktionen oder der Arbeitsteilung das Leben so sehr wie heute die heutige Digitalisierung. Die digitale Technik ermöglicht neben Aspekten wie Effizienzsteigerung und verbesserter Wirtschaftlichkeit auch, dem Bedürfnis nach Individualtät und Eigenständigkeit besser nachgehen zu können. Durch die Digitalisie- rung können die Funktion eines Produkts und das Design losgelöst vonei- nander entwickelt werden. So umhüllte in der nicht-digitalen-Zeit das Ge- häuse (das Design) einer Schreibmaschine die enthaltene Technik. In der Digitalisierung löst sich diese Verbindung auf.Das Design richtet sich der zeichen- haften Funktion aus und kann sich an Zielgruppen anpassen. Die Form ist losgelöst von der Funktion.Diese Rahmenbedingungen führen zu einer großen stilistischen Vielfalt,die durch die Vernetzung auch immer schnelleren Trends unterworfen ist.
  • 8. FLAT DESIGNFLAT DESIGN 14 Erkenntnisse aus der Designgeschichte Es lassen sich Gemeinsamkeiten in der Reaktion auf Industrialisierung und Digita- lisierung finden. Der Historismus bediente sich aus einer Unsicherheit gegenüber der neuen Zeit an Stilistiken vergangener Epochen. Man griff auf tradierte Werte zurück und versuchte diese weiterzuverwenden. In der Digitalisierung griff das Design aufgrund der starkenTrennung von Funktion und Form auf reale Metaphern zurück und versuchte die reale Welt zu imitieren und Neues dadurch besserverständlich zu machen (Skeuomorphism).In den letzten Jahren sind diese Metaphern überflüssig geworden, da die Nutzer die Funktionen gelernt haben und die Zeichen heute teilweise veraltet sind – wie zum Beispiel das Disketten-Symbol für die Speichern-Funktion. ......................................................................................................................................................................... Der analoge Gebrauchsgegenstand findet sich adaptiert in der digitalen Welt wieder. ......................................................................................................................................................................... 15 Wenn sich eine Marke oder Identität im Web widerspiegeln und erkennbar bleiben soll, ist dies auch bei der Einarbeitung von Design-Trends zu beachten. Daher soll- te man genau prüfen, wie und wo Flat Design eingesetzt werden kann. Die absolut flache Gestaltung von Benutzeroberflächen kann auch Hürden aufwerfen: Interak- tionsflächen sind manchmal nicht sofort als solche zu erkennen.Elemente erschei- nen gleichartig,so dass eine visuelle Hierarchie erschwert werden kann.Ein einzig- artiges Look & Feel kann verloren gehen,wenn viele Websites ähnlich gestaltet sind. Um dem entgegen zu wirken,ergeben sich in Zukunft spannende Möglichkeiten der Weiterentwicklung flacher Designs – im Folgenden sind einige beschrieben. Was bedeutet nun derAuf- schwung von Flat Design für eine Marke? In Zeiten,in denen Produkte immer gleichförmiger werden und der Wunsch nach Individualität immer größer wird,ist eine einzigartige Markenwahrnehmung ein zentraler USP.
  • 9. FLAT DESIGNFLAT DESIGN Almost Flat Design Mitte 2011 launchte Google den Dienst Google+ und startete damit die visuelle Auf- frischung seiner Plattformen. Das Design stellt dabei eine Variante des Flat Design dar,die sich „Almost Flat“ nennt.Hierbei werden dezent feine Schlagschatten,dünne Outlines,leichte Verläufe und halbtransparente Flächen eingesetzt,so dass sich Ele- mente vom Hintergrund,auf dem sie stehen,besser unterscheiden lassen. 16 ............................................................................... Almost Flat Design: Google+ Profilseite ............................................................................... Unschärfe In der Bildgestaltung in User Interfaceswird immer häufiger mit Unschärfe gearbei- tet, um die verloren gegangene Tiefe des Flat Design wiederherzustellen. Im Trend sind außerdem Fotografien mit geringer Tiefenschärfe, die einen kleinen Schärfe- bereich ausweisen. Unschärfe wird in der Fotografie unter anderem bei Tilt-Shift- Effekten bewusst eingesetzt. Die ästhetische Qualität der Unschärfe wird bewusst gestaltet und teilweise digital nachempfunden.Technisch lässt sich der verstärkte Einsatz von Unschärfe auch damit begründen,dass Bilder in HTML-5 weichgezeich- net werden können. ......................................................... Tilt-Shift-Effekt bei Fotografien ......................................................... 17
  • 10. FLAT DESIGNFLAT DESIGN Transluzenz Halbtransparente Flächen über Hintergründen erzeugen eine leichte Tiefe auf einem zweidimensionalen Medium. Ganz neu ist dieser Trend nicht, jedoch prägt er in Kombination mit dem Aspekt Unschärfe zu einem wesentlichen Teil das Look & Feel von iOS7.Darüber hinaus findet sich Transluzenz häufig in flachen Web- site-Designs,die mit einem vollflächigen Bild oder Video im Hintergrund arbeiten. 18 ................................................................................... Transluzenz: iOS7-Aufbau auf dem iPhone ................................................................................... Long Shadow Design Anfänglich konnte man diesen Trend bei der Gestaltung von Icons beobachten. Inzwischen findet er sich auch in anderen Bereichen.Bei dieser Designästhetikwirft ein Objekt einen Schatten im 45°-Winkel,der ca.zweieinhalb mal so lang ist wie das Objekt selbst.Somit erhält das Objekt trotz flacher Anmutung eine gewisse Tiefe. ................................................................ Long Shadow: Icons von denkwerk ................................................................ 19
  • 11. FLAT DESIGNFLAT DESIGN 20 Animationen und Transitions Digitale Produkte können durch den EinsatzvonAnimationen oder Parallax-Effekten neue Dimensionen erhalten. Hierzu zählen zum Beispiel Bewegung oder Überlage- rung. Jony Ive spricht bei der Einführung von iOS7 dabei von „new types of depth“. Hier ist zum Beispiel die Nutzung des Beschleunigungsmessers auf dem iPhone gemeint, wodurch der Homescreen einen 3D-Eindruck erhält. Des Weiteren gibt es Websites, bei denen sich Elemente wie Infografiken oder zusätzliche Hinweise erst im Moment des Scrollens animiert aufbauen.Animationen und Transitions können beim Nutzer für ein echtes Wow-Erlebnis sorgen,so dass die Website nachhaltig Ein- druck hinterlässt.Die Seite wird belebt und ihre Benutzung macht Spaß. ............................................................................................................................................................................... Animation: Kampagnenseite FERCHAU Expedition von denkwerk. expedition.ferchau.de ............................................................................................................................................................................... Fazit Flat Design ist als Vertreter des Funktionalismus zu einem Zeichen für Einfachheit geworden. Für das Visual Design bedeutet das eine Reduktion der Gestaltungsmit- tel. Die verbleibenden Mittel wie Schrift, Icon, Farbe, Fotos, Videos oder Animati- on erhalten ein größeres Gewicht und müssen zeichenhafte Funktionen abbilden. Dadurch wird der Anspruch an diese Elemente erhöht und zum Beispiel eine emo- tionalere Bildgestaltung sowie eine ausdrucksstarke, gut lesbare Schrift gefordert. LetzteWeiterentwicklungenwie Long ShadowoderAlmost Flat zeigen aber,dass Flat Design in seiner Reinform aufgeweicht wird und wieder eine formale Vielfalt ent- steht. Die Herausforderung an die Gestaltung im Flat Design ist eine angemessene Inszenierung von Design und somit von Marken. Wie in der Designgeschichte bereits passiert, darf Design nicht langweilig und austauschbar werden. Wie kann ein Look & Feel eigenständig bleiben, die Werte einer Marke adäquat abbilden und gleichzeitig nutzerfreundlich sein und Spaß machen? Was bedeutet Flat Design für Unternehmen und digitale Markenauftritte? Hier gilt es sicher nicht,blind jeden Trend mitzumachen,sondern vielmehr zu hinterfragen, wie die eigene Marke zeitgemäß dargestellt werden kann, ohne dabei modisch zu werden und ihre Kernwerte zu verlieren. Wenn Sie wissen möchten,wie Ihr Unternehmen im Web abgebildet werden kann, sprechen Sie uns an. 21
  • 12. FLAT DESIGNFLAT DESIGN Autoren: Christian Leuenhagen,Coralie Feil © 2014 denkwerk – Alle Rechte vorbehalten Kontakt: Melinda Burmeister presse@denkwerk.com – T +49 221 2942 100 denkwerk GmbH Vogelsanger Straße 66 50823 Köln Reichenberger Straße 124 10999 Berlin Geschäftsführer: Jochen Schlaier,Marco Zingler Handelsregister: Amtsgericht Köln,HRB 31595 IMPRESSUM