Im folgenden Kapitel wird das Themenfeld des Webdesigns als Schnittpunkt zwischen klassischem Mediendesign und User-Interface-Design näher betrachtet. Dabei soll zuerst ein Überblick über die Entstehung und die Entwicklung des Webdesigns aufgezeigt werden. Daraufhin werden die wichtigsten gestalterischen Grundlagen im Webdesign-Prozess untersucht. In einem weiteren Punkt wird der Begriff des Responsive Webdesigns definiert und genauer erläutert.
Die Entstehung und Entwicklung des Webdesigns ist unweigerlich eng mit dem Aufkommen des World Wide Webs verbunden. Der britischen Physiker und Informatiker Tim Bernes Lee stellte im Jahr 1989 ein erstes Hypertext-Konzept vor, welches später unter dem Namen World Wide Web (kurz: WWW) bekannt wurde.[38] Dabei blieb das Grundprinzip seither unverändert: Hypertext-Dokumente (Websites) werden mit Hilfe von Hyperlinks verknüpft und über Internet-Protokolle übertragen. Bestanden Websites in den Anfängen ausschließlich aus unformatierten Textbausteinen, so sind daraus heute multimediale und dynamische Erlebniswelten geworden. Mit den technischen Entwicklungen von Webtechnologien wuchs auch der gestalterische Anspruch von Websites. Dabei zeichneten sich in den letzten 25 Jahren verschiedene Trends im Webdesign ab, welche sich einerseits technisch und andererseits gesellschaftlich bedingt entwickelten. In den Anfängen des WWW waren es v. a. die begrenzten technischen Möglichkeiten, die ein Webdesign im engeren Sinne erschwerten. Langsame Übertragungsraten, Monitore mit geringer Auflösung und geringer Farbtiefe sowie fehlende Webtechnologien ermöglichten lediglich einfache Websites, welche größtenteils aus Texten, Links und Tabellen bestanden.[39] Dabei unterstützten erste Versionen der Web-Auszeichnungssprache HTML (Hypertext Markup Language) weder verschiedene Schriftarten, noch das Einbinden von Grafiken oder Bildern. Erst im Laufe der 90er Jahre entwickelten sich verschiedene Webtechnologien wie z.B. CSS[40], JavaScript oder Flash, welche den Gestaltungsfreiraum von Webdesignern immens steigerten. Fortan konnten nicht nur verschiedene Schriftarten definiert und formatiert werden, sondern auch Grafiken, Bilder, Töne und Animationen platziert werden. Da sich der Beruf des Webdesigners zur damaligen Zeit noch in der Findungsphase befand, hatten viele Websites – z.T. auch von großen Konzernen – eine sehr amateurhafte Anmutung. So wurden z.B. oftmals grundlegende Gestaltungsprinzipien, wie sie im Verlagswesen seit Jahrzehnten verwendet wurden, schlichtweg missachtet, obwohl diese technisch durch den Einsatz von CSS in gewissem Maße bereits umsetzbar gewesen wären. Dies lag vermutlich auch daran, dass viele „selbsternannte“ Webdesigner zu jener Zeit aus dem eher technischen Bereich der Programmierung kamen und nicht über das nötige gestalterische Knowhow verfügten.[41] Abbildung 6 und Abbildung 7 zeigen beispielhaft die Veränderung des Webdesigns der offiziellen Unternehmens-Websites von Apple und BMW.
Abbildung 6: Screenshot Apple.com im Jahr 1997 (links) und 2016 (rechts) – (www.archive.org am 04.01.2016)
Abbildung 7: Screenshot BMW.de im Jahr 1996 (links) und 2016 (rechts) – (www.archive.org am 04.01.2016)
Mit der zunehmenden Professionalisierung und Verbreitung des Internets sowie der besseren Ausbildung aller am Erstellungsprozess beteiligten Personen und der besseren Planung und Konzeption von Websites wurde auch das Design zunehmend professioneller und nutzerorientierter.[42] Die Dimensionen Usability und Ästhetik rückten dabei immer weiter in den Vordergrund. Mit dem Aufkommen sozialer Netzwerke und dem sog. „Mitmach-Internet“ Anfang der 2000er Jahre etablierte sich eine neue Generation im Internet: das Web 2.0. Websites waren nun nicht länger rein statische Konstrukte aus Texten und Bildern, sondern interaktive Plattformen zum Austausch von Informationen jeglicher Art. Schnellere Internetverbindungen, leistungsfähigere Computer und bessere Monitore erlaubten nun dynamische und aufwendigere Webdesigns.
Auch Fortschritte in der digitalen Bildbearbeitung ebneten den Weg zu einem moderneren Webdesign. Prägend für das Webdesign der 2000er Jahre waren neben intensiven Farben und kräftigen Farbverläufe das sog. Glossy-Design. Grafiken, Logos und Icons wurden mit Hilfe eines Glanz-Effekts auf Hochglanz poliert, um so möglichst viel Räumlichkeit zu erzeugen.[43] Schatteneffekte und Reflexionen verstärkten zudem das Gefühl eines haptischen Erlebnisses.[44] Auch die typografische Ausarbeitung von Schriften rückte zunehmend in den Vordergrund, um einen besseren Lesefluss und eine einfachere Lesbarkeit zu erzielen. Mit der Einführung des iPhones im Jahr 2007 läutete Apple den Trend des sog. Skeuomorphismus ein. Bei dieser Stilrichtung wird die Benutzeroberfläche möglichst realistisch nachempfunden, um dem Nutzer Vertrautheit zu vermitteln und damit eine intuitive Bedienung zu erzielen. Buttons werden dabei möglichst dreidimensional dargestellt, um dem Nutzer zu suggerieren, dass diese gedrückt bzw. geklickt werden können. Oberflächen werden zudem meist mit realistisch anmutenden Texturen in Holz-, Leder- oder Metalloptik versehen. Insgesamt sollte auf diese Weise ein digitales Abbild von analogen Gegenständen erzeugt werden.
Die Stilrichtung des Skeuomorphismus wurde im Jahr 2012 mit der Veröffentlichung von Microsoft Windows 8 nach und nach durch das sog. Flat Design verdrängt. Im Vergleich zum Skeuomorphismus setzt die Stilrichtung des Flat Designs auf geradlinigen Minimalismus ohne unnötige Verzierungen. Dabei wird auf sämtliche Haptik- und Oberflächenstrukturen verzichtet, stattdessen werden kräftige Farbflächen, serifenlose schlanke Schriftarten, reduzierte Icons und flächige Bilder verwendet. Abbildung 8 zeigt beispielhaft den Unterschied zwischen Skeuomorphismus und Flat Design.
Abbildung 8: Unterschied Skeuomorphismus (links) und Flat Design (rechts) am Beispiel der Kompass-App innerhalb von Apple iOS (Bild: http://arstechnica.com/apple/2013/09/death-to-textures-ios-6-and-ios-7-compared-in-pictures/ – letzter Zugriff: 04.01.16)
Matthias Meyer von der Kommunikationsagentur Manxdesign vergleicht die Entwicklung vom Skeuomorphismus zum Flat Design mit der architektonischen Bewegung vom Historismus hin zum Bauhaus.[45] Verfechter des Flat Designs sind der Meinung, dass Nutzer nun keine realitätsnahe Anmutung von Benutzeroberflächen mehr benötigen, da sie inzwischen gelernt haben damit umzugehen. Dennoch können bei extremen Formen des Flat Designs Usability-Einbußen auftreten. So sind z.B. Buttons in manchen Fällen nicht mehr eindeutig als solche zu erkennen, was unter Umständen zu Missverständnissen seitens der Nutzer führen kann.[46] Dennoch lässt sich ein flächendeckender Trend hin zum minimalistischen Flat Design beobachten, sei es im Webdesign, auf anderen Software-Benutzeroberflächen oder sogar im Print-Bereich.
Fast gleichzeitig mit dem Einzug des Flat Designs kam auch die technische Weiterentwicklung von statischen Webdesigns hin zum adaptiven Responsive Design.[47] Das Konzept und die Funktionsweise des Responsive Designs wird in Kapitel 0 genauer erläutert.
Zusammenfassend lässt sich sagen, dass das Webdesign einen fortlaufenden Prozess darstellt, der durch neue technische Möglichkeiten ständig weiterentwickelt wird. Designtrends liegen dabei oft aktuellen Webtechnologien sowie dem allgemeinen Zeitgeist zu Grunde. Wie die Vergangenheit gezeigt hat, sind Trends im Webdesign oft relativ kurzlebig und überschneiden bzw. vermischen sich in gewissem Maße. Dabei kann es – wie auch in anderen Branchen (z.B. in der Automobil- oder Modeindustrie) – dazu kommen, dass sich Designtrends abwechseln und wiederholen. So lässt sich bei einigen Websites, darunter besonders in der Lebensmittelbranche, ein Trend hin zum Vintage- oder Retro-Look beobachten.
Das Design einer Website setzt sich aus zahlreichen unterschiedlichen Komponenten zusammen. Um ein ästhetisches Erscheinungsbild zu erzeugen, bedarf es eines umfassenden Wissens über die menschliche Wahrnehmung von Farben und Formen. In diesem Kapitel soll ein Überblick über die gestalterischen Grundlagen im Webdesign aufgezeigt werden. Dabei verlaufen Aspekte aus der Usability-Forschung sowie der Gestaltungslehre meist Hand in Hand.
Wie in anderen Bereichen unserer Umwelt, unterliegt auch das Betrachten von Websites bestimmten psychologischen Verhaltensmustern. Bei der Suche nach bestimmten Inhalten im WWW ist die nächste Website auf Grund der großen Auswahl meist nur einen Klick weit entfernt. Umso wichtiger ist es daher, den Nutzer innerhalb weniger Millisekunden an die Website zu binden. Anders als z.B....
