Webdesign Stile und Trends

Weyers Jenni

1989 entwickelte Tim Berners-Lee die Grundlagen des heutigen World Wide Web. Seitdem hat sich das Internet rasant weiterentwickelt und inzwischen geht man von fast 2 Billionen Websites aus, die es weltweit gibt. Im Laufe der Jahre hat sich nicht nur die die Art und Weise geändert, wie und wofür wir das Web verwenden und dadurch bedingt auch die Funktionalitäten, sondern zum Glück auch die Gestaltung der Websites.

Gerade vor der Vielzahl der Websites und der Informationsflut, die es heute gibt, nimmt das Webdesign eine immer größere Rolle ein, um sich von Konkurrenten abzusetzen und die eigenen Zielgruppen und Ziele zu erreichen. Wer heute eine erfolgreiche Website haben möchte, sollte daher auf ein individuelles Webdesign achten, dass zum eigenen Unternehmen passt. Das schöne ist: es gibt heute so viele Möglichkeiten im Webdesign wie noch nie.

Zur Inspiration möchten wir Ihnen daher hier gerne einige wichtige aktuelle Webdesign Stile mit Beispielen vorstellen.

Skeuomorphismus

Skeuomorphismus bezeichnet den Versuch, durch möglichst reale, natürliche Abbildung von physischen Gegenständen eine Vertrautheit zu schaffen. Es war jahrelang die Stilrichtung schlechthin und sollte dazu führen, dass sich nicht nur Nerds im Internet aufhalten und wohlfühlen, sondern jeder. Wenn man sich heute umschaut, muss man zugeben, es scheint geklappt zu haben. Inwieweit die Stilrichtung tatsächlich dazu beigetragen hat, kann man natürlich nur mutmaßen.

Insbesondere der Apple Gründer Steve Jobs ist für seine Vorliebe für Skeumorphismus bekannt. Daher wundert es auch nicht, dass Apple diese Stilrichtung bis zur Spitze im Jahre 2012 vorangetrieben hat. In Erinnerung sind dem ein oder anderen vielleicht noch Büchershops, in denen die Bücher in Bücherregalen abgebildet wurden oder Kalender mit nachgemachtem Ledereinband und Ringheftung.

Auch für die Benutzeroberfläche von LMMS, einem kostenfreien Onlinetool zur Musikerstellung, wird ganz klar Skeumorphismus eingesetzt, was sich z.B. an der Tastatur und den Reglern zeigt.

Webdesign - Skeuomorphismus lmms
Skeuomorphismus bei LMMS

Insbesondere Aufgrund technologischer Nachteile, wie der Verwendung von diversen Pixelbildern, sowie Schwierigkeiten bei der Umsetzung für mobile Geräte, hat der Skeuomorphismus in Reinform auf modernen Webseiten jedoch sehr stark an Bedeutung verloren. Auch führte diese Stilrichtung zu einer Eingrenzung an Kreativität und Flexibilität und stieß immer dann an seine Grenzen, wenn es Online etwas gab, was es in der Offlinewelt nicht gab. Daher wollen wir den zungenbrecherischen Begriff hier nicht überstrapazieren.

Anleihen bei dieser Stilrichtung finden sich aber heute noch häufig und können bereichernd in Kombination mit anderen Designrichtungen kombiniert werden. Hierzu zählt beispielsweise der Kippschalter des Iphones.

Daneben kommt dem Skeuomorphismus eine besondere Bedeutung zu, denn er förderte einen neuen Trend: Im Jahr 2013 etablierte sich mit dem Flat-Design das genaue Gegenteil des Skeuomorphismus.

Flat-Design

Die Idee des Flat-Design ist eine der leider wenigen Designerrungenschaften von Microsoft und wurde erstmalig mit dem Erscheinen von Windows 8 für breite Massen eingesetzt. Die Idee ist ein graphisch minimalistischer Gestaltungsstil. Ganz im Gegenteil zum Skeuomorphismus wird beim Flat Design auf den Einsatz von Texturen, Verzierungen, Schatten und Dreidimensionalität verzichtet. Ziel ist es, die Gestaltung vollständig auf das Wesentliche zu fokussieren. Während jedoch auf Schatten verzichtet wird, werden Farben sehr offensiv eingesetzt. So zeichnete sich Windows 8 durch eine viel buntere Gestaltung aus, als seine Vorgängerversionen.

Warum funktioniert Flat-Design in vielen Projekten?

Flat-Design hat ein unverkennbares Erscheinungsbild ohne alle Extras. Es basiert auf einem klaren Verständnis der Informationshierarchie bei der Gestaltung und bei der Platzierung der Webdesign Elemente. Auf diesem Wege werden die Projekte für die Benutzer äußerst verständlich und leicht zu bedienen. Die Interaktion wird erheblich erleichtert.

Entsprechend hat das Flat-Design gerade im Bereich der Apps sehr starke Verbreitung gefunden und wirkt von hier auch verstärkt zurück auf das Design von Websites.

Die 5 Prinzipien des Flat Designs

1. Keine Effekte

Verzicht auf Mittel und Effekte, die 3 Dimensionalität oder Tiefe schaffen: Schlagschatten, Gradienten, gerundete Kanten oder andere Mittel, die Tiefe erzeugen kommen nicht zum Einsatz.

2. Einfache Elemente

Hinsichtlich der Benutzeroberfläche setzt Flat-Design komplett auf einfache Elemente, Schaltflächen und Symbole. Webdesigner verwenden simple Formen wie Rechtecke, Quadrate oder Kreise. Jede Form steht dabei für sich. Im Zentrum des Designs steht die intuitive Bedienbarkeit. Im Idealfall sind keinerlei Erklärungen notwendig. Somit mag Flat-Design vielleicht einfach anmuten, ist es aber auf keinen Fall. Die Komplexität der Design Schemata steht der Komplexität von anderen Webdesignkonzepten in nichts nach.

3. Schwerpunkt Typographie

Da die Elemente wie oben sehr einfach gehalten sind, spielt die Typografie im Flat Design eine sehr wichtige Rolle. Die Schriftart sollte einfach und effizient sein und auch Fett ein gutes Bild abgeben. Durch Schriftkombinationen von sehr einfachen und serifenlosen Schriften mit einer weiteren Schriftart als Kunstelement können sehr interessante Effekte erzielt werden.

Die durch die Schriftauswahl gesetzten Akzente können auch gut dafür genutzt werden, Interaktivität zu signalisieren.

4. Schwerpunkt Farbe

Neben der Typographie spielt auch die Farbe im Flat-Design eine wesentliche Rolle. Häufig sind die Farben weitaus heller und bunter als bei anderen Webseiten. Nicht selten enthalten die so gestalteten Webseiten auch weitaus mehr Farbtöne. Wenn gleich häufig nur zwei bis drei Farben zum Einsatz kommen, gibt es auch Farbpaletten mit sechs bis 8 Farben. Neben Primär- und Sekundärfarben kommen häufig auch Retro-Farben zum Einsatz. Besonders beliebt sind auch Lachsfarben, Lila, Grün und Blau.

5. Minimalismus

Aus den Prinzipien 1 bis 4 ergibt sich bereits ein eher minimalistisches Konzept. Das gesamte Design sollte auf jegliche Form von Schnickschnack verzichten.

Vorteile und Nachteile von Flat-Design

Vorteile Flat Design

  • Es lässt sich hervorragend in responsive Designs integrieren
  • Das System (Informationsstrukturen) sind für Benutzer und Webseitenbesucher sehr leicht erlernbar und auch navigierbar
  • Die Strukturierung des Layouts sowie SVGs sorgen immanent für den Eindruck visueller Ausgereiftheit
  • Gute Lesbarkeit durch einfache oder starke Typographien, strukturierten und knappen Content
  • Schnelle Ladezeiten durch den Verzicht auf Pixelbilder (jpg, png)

Nachteile Flat Design

  • Trotz der einfachen Anmutung ist es sehr schwierig und aufwendig ein gutes Flat Design zu erstellen.
  • Durch die Einfachheit kann Flat-Design sehr schnell langweilig wirken.
  • Weil es so beliebt ist, wird es schwer Individualität zu generieren.

Sicherlich ist das Flat-Design in seiner Reinform (siehe unsere Flat-Design 1.0 Demo) unter Webdesignern gelinde gesagt nicht unumstritten und polarisierend. Zwar bietet es herausragende Eigenschaften hinsichtlich Usability, Klarheit und Informationsfokussierung, aber hinsichtlich Wiedererkennungswert und Markenbildung wird dem Designstil häufig Austauschbarkeit vorgeworfen. Aus unserer Sicht bilden die Designprinzipien aber hervorragende Anhaltspunkte für Weiterentwickelungen und Anreicherungen dieses Stils. Sie sind häufig Ausgangspunkt für die Entwicklung einzigartiger und minimalistischer Websites. Ferner hat sich aus dem Flat-Design eine vielleicht etwas unstrittigere Designrichtung entwickelt, die sich „Almost Flat-Design“ nennt und die wir im Folgenden etwas näher beschreiben wollen.

Almost Flat-Design

Almost Flat-Design wird auch als Flat 2.0 oder Semi Flat-Design bezeichnet. Dahinter verbirgt sich folgendes Konzept, welches sich aus dem Flat-Design ableitet:

Die einfachen Elemente bleiben, aber es wird wieder Tiefe und Komplexität hinzugefügt, um die flachen Designs ansprechender, intuitiver bedienbar und individueller zu machen. Insbesondere werden dezente Schatten, Highlights und Verläufe hinzugefügt um hierdurch Buttons leichter als solche erkenntlich und Schnittstellen verständlich zu machen sowie dem Design eine etwas weichere, natürliche und individuellere Note zu geben.

Wie so oft im Leben handelt es sich also um einen Mittelweg, der eingeschlagen wird. Schlimm für Puristen und Webdesigner, die extreme Positionen vertreten. Eventuell aber ein guter Weg zur „Gewinnung der Mitte“, der meisten Menschen und damit in der Regel auch der meisten Besucher der Websites.

Auf dieser Basis sind verschiedene hybride Stile entstanden und entstehen weiter. In ihnen schlummern immer noch jede Menge Ideen und Konzepte des Flat-Designs. Einer der bekanntesten und beliebtesten Stile, die sich hieraus entwickelt haben, ist das Material Design.

Material Design

Die Debatte Skeuomorphismus versus Flat-Design wurde relativ heiß gekocht – ging sie doch einher mit Apple versus Microsoft. In der Zwischenzeit jedoch führte Google die Gedanken von Flat und Almost Flat (Flat 2.0) weiter und kombinierte sie mit Aspekten des Skeuomorphismus. Et voilà – das Material Design war dar. Wie auch im Flat 2.0 sind bereits Tiefen und Schatten enthalten. Allerdings umfasst das sogenannte Material Design eine Menge mehr und stellt eine komplette Designsprache dar.

Google selbst beschreibt Material Design als „…eine visuelle Sprache, die die klassischen Prinzipien des guten Designs mit der Innovation von Technologie und Wissenschaft verbindet.“

Die Prinzipien von Material Design

Materialbezug

Der Name Material Design ist gewissermaßen Programm. Inspiriert ist die Designsprache von physischen Gegenständen und ihren Texturen. Hierbei spielen neben Lichtreflektionen vor allem Texturen und Schatten eine wichtige Rolle.

Fett, graphisch und mit Intention

Bedeutung und Fokus wird durch Methoden geschaffen, die aus dem Druck bekannte sind. So dienen Typographie, Raster, Raum, Farbe und Bildsprache dazu die Aufmerksamkeit zu steuern.

Bewegung und Animationen

Zum einen fokussiert Bewegung die Aufmerksamkeit des Nutzers, zum anderen gibt Sie Rückmeldung über kohärente Vorgänge. Neue Elemente reorganisieren so die Umgebung, während neue Interaktionen weitere Transformationen erzeugen. Hierbei entwickeln sich die technologischen Möglichkeiten immer weiter. Zum Beispiel ist es möglich SVGs mit Javascript zu animieren (Demo).

Technologische Flexibilität

Das Material Design soll einen Markenausdruck ermöglichen. Aus technologischer Sicht können Unternehmensspezifische Codes, Plugins oder Komponenten in die Designelemente eingebaut werden. Die Idee ist clever und ressourcenschonend.

Plattformübergreifender Ansatz

Hier sind vor allem die gemeinsamen Komponenten zu erwähnen, die für Android, iOs und das Web verwendet werden.

Vorteile und Nachteile von Material Design

Vorteile Material Design

  • Das Design ist minimalistisch und zeitgemäß
  • Durch die Tiefen kann es benutzerfreundlicher und einfacher zu bedienen sein
  • Es kann für beliebige Plattformen im Internet verwendet werden
  • Es ist Entwicklerfreundlich, da es genau vorgegebene Richtlinien von Google beinhaltet
  • Animationen bieten neue Nutzererfahrungen

Nachteile Material Design

  • Durch die konkreten Vorgaben können Kreativität und Individualität zu kurz kommen.
  • Zu viele Bildelemente und Farben können verwirrend wirken
  • Die Assoziation mit Google und dem Ecosystem
  • Eher Technologie als Design getrieben
  • Die Fülle an verwendeten Rechtecken für diverse Elemente kann verwirrend wirken.
  • Mit den verfügbaren Technologien können sehr leicht verwirrende Benutzeroberflächen geschaffen werden. Zum Beispiel eine Vielzahl von sogenannten (FABs) Floating Action Buttons.

Minimalismus

Im Internet überdauern wenige Dinge. Bereits vor dem Flat-Design Trend gab es eine Tendenz, sich auf das Wesentliche zu Fokussieren. Bereits die früheren Seiten von Apple zeigen diese Bestrebung und setzten bereits in den späten 90er Jahren Maßstäbe hinsichtlich Aufgeräumtheit, Klarheit und Fokussierung. Minimalismus beschränkt sich aber keinen Falls auf die neuen Disziplinen wie Webdesign, Appdesign und Screendesign.

In den bildenden Künsten zum Beispiel, bezeichnet der Minimalismus eine Bewegung, die Ihre Wurzeln in den 1960er Jahren und den USA hat. Bei dieser sogenannten Minimal-Art geht es um Objektivität, schematische Klarheit sowie Logik. Der Fokus liegt auf den primären Strukturen. In der Architektur hingegen, ist der Minimalismus seit den 1980er Jahren vertreten. Die Wurzeln der Stilrichtung befinden sich allerdings in weiter zurück reichenden Epochen der Architekturgeschichte. Im Kern des Minimalismus als Architekturstil geht es um eine klare Formsprache. Auf Dekorationselemente wird verzichtet. Ebenso findet der Minimalismus auch als Geisteshaltung und Lebensphilosophie hinsichtlich eines einfacheren oder bewussteren Lebens (Downshifting) seit je her seine Anhänger. Sei es aus religiöser Überzeugung oder auch als Gegenbewegung zur Konsum- und Überflussgesellschaft. So gab es gerade in den letzten Jahren verstärkt wieder viele die sich ganz bewusst für ein minimalistischeres Leben entschieden haben um dadurch ein erfüllteres Leben zu führen. Auch Dauer-Bestseller wie „Simplify your life“ zeigen wie wichtig das Thema ist.

Webdesign - Minimalismus
Webdesign – Minimalismus

Minimalismus im Webdesign

Minimalismus beschreibt auch im Webdesign die Kunst des Weniger, die Kunst des Bewussten. Minimalistisches Webdesign ist beliebt und (nach wie vor) modern. Allem voran bedeutet Minimalismus im Webdesign den Verzicht auf unnötige Elemente. Für jedes Element gilt es zu hinterfragen: Hat dieses Element einen Mehrwert für meine Webseite oder eben nicht. Auch hier darf man Minimalismus nicht mit Einfachheit verwechseln.

Lieber Freund, entschuldige meinen langen Brief, für einen kurzen hatte ich keine Zeit.
– Charlotte von Stein (1742-1827), Hofdame in Weimar, an Johann Wolfgang von Goethe –

Bei minimalistischem Webdesign geht es in erster Linie darum, mit möglichst wenigen und möglichst einfachen Elementen den größtmöglichen Effekt zu erzielen. Entsprechend erfordert die Erstellung einer minimalistischen Webseite häufig deutlich mehr Konzeption und sicherlich mehr Entscheidungsfreude als andere Designstile. Der Webdesigner benötigt ein tiefes Verständnis für die Information, um fundierte Designentscheidungen treffen zu können. Im Prozess bedeuten diese Auswahlprozesse, dass man Elemente entfernt und prüft, ob die Website auch ohne diese Elemente funktioniert. Ist das nicht der Fall, werden Sie verworfen. Entgegen der viel verbreiteten Meinung ist minimalistisches Webdesign also weit mehr als einfach nur Weißräume zu schaffen. Es geht darum, sich von Unnötigem zu trennen um Wesentliches zu betonen.

Die Prinzipien und Stilelemente des Minimal Webdesigns

  • Wenig oder keine Farbverläufe (Gradienten), Schatten oder Texturen
  • geringes Maß an Detailliertheit
  • versteckte bzw. verdeckte Navigation
  • ausreichend Weißraum
  • Reduktion der Farben. (Faustregel: Nicht mehr als 3 Gleichzeitig)
  • keine unnötigen Buttons oder Bedienelemente
  • besondere Bedeutung der Typographie
  • Keine detailüberladenen Fotografien

Vorteile und Nachteile des minimalistischen Webdesigns

Vorteilen des Minimal Webdesigns

  • Minimalismus ist kein kurzfristiger Trend. Er ist schon lange „In“ und das wird auch noch eine Weile so bleiben.
  • Wenige Objekte auf den Seiten führen zu sehr schnellen Ladezeiten
  • In Zeiten der Reizüberflutung erlaubt minimalistisches Webdesign den Fokus auf das Wesentliche. Zum Beispiel Produkte und Dienstleistungen, die Sie anbieten.
  • Minimalismus sorgt für gehirngerechte Navigationen, die intuitiv zu Bedienen sind.
  • Minimalismus erzeugt Transparenz für den Benutzer

Nachteile und Risiken

  • Es können Designs entstehen, die unfertig oder unausgewogen wirken, wenn sie nicht gründlich durchdacht werden.
  • Wenn bei der Informationsarchitektur und Navigationsarchitektur auf zu viel verzichtet wird, kann leicht eine wenig komfortable Nutzererfahrung entstehen. (Fehlende Menüpunkte zum Beispiel.)

Fazit

In Zeiten der Reizüberflutung sind minimalistische Websites benutzerfreundlich, sinnvoll und erfolgreich. Außerdem entsprechen minimalistische Designs am ehesten dem Anspruch der Zeitlosigkeit, während andere Trends deutlich kürzeren Halbwertszeiten unterliegen und vermutlich eher einen Relaunch erfordern.

Eine wirklich gelungene Umsetzung fängt allerdings bei der Zielsetzung von Websites an. Verfolge ich mit einer Website zu viele Ziele, ist eine gute minimalistische Umsetzung im Design fast nicht mehr möglich. Anders gesagt ist eine minimalistische Website mehr als eine reine Designentscheidung. Der Erfolg hängt von Zielsetzung und Inhalt ab. Da Minimal Webdesign eben kein Trend ist, werden wir das Thema in weiteren Artikeln zukünftig vertiefen.