Interface Design Trends

Wir schicken unsere helllicht-Website auf
eine (rein hypothetische) Zeitreise

Am 29. Oktober 1969 erblickt das Internet das Licht der Welt. 16 Jahre später, im Jahr 1985, wird nordu.net als erste Website registriert. Interface Design erhält als neue Disziplin mehr und mehr Relevanz. Entdecken Sie mit uns die Entwicklung des Interface Design seit seinen Anfängen 1990.

Die frühen 90er Jahre

No CSS – Welcome Table Design

Zu Beginn der kommerziellen Nutzung ist das Internet noch ein sehr trauriger Ort: Niedrige Datenübertragungsraten, Monitore mit 256 Farben und HTML ohne jede Standardisierung machen jeder Form von Gestaltung das Leben schwer – Interface Design ist daher kein besonders User-orientierter Prozess, sondern vielmehr eine Frage von technischen Möglichkeiten. Aber kein Grund für begabte Pioniere, nicht trotzdem den Sprung in das neue Medium zu wagen. Die Ergebnisse überzeugen allerdings eher durch ihren Inhalt als durch ihre Ästhetik.

Wie so häufig gilt daher auch für die Anfänge der Gestaltung im Internet:
Dabei sein ist erst mal alles!

Logos

HTML steckt noch in Babyschuhen: Die erste HTML-Version unterstützt noch nicht einmal Grafiken. Diese folgen aber glücklicherweise Mitte der 90er Jahre. Von transparenten PNGs und SVG-Grafiken wagen die Internet-Pioniere allerdings noch nicht einmal zu träumen. Sie müssen sich mit JPEG und GIF begnügen. Der Wille zählt!

Typografie

Auch im Bereich Typografie sieht es noch mau aus. Webfonts? Fehlanzeige! In den frühen 90er Jahren ist Gestaltung noch die alleinige Aufgabe des Browsers: Dieser formatiert HTML-Elemente wie Überschriften und Links, indem er gezwungenermaßen auf das kleine Set der vorinstallierten Systemschriften zurückgreift. Times News Roman und Co. sind die unumstrittenen Alleinherrscher im Internet.

Buttons

Schon früh entsteht die Idee, Verknüpfungen mit Buttons zu visualisieren: Mit eingeschränkten Möglichkeiten werden Grafiken entwickelt und mit Hyperlinks versehen. Streng genommen also ein verknüpftes Bild und kein HTML-Button, der Effekt ist aber der gleiche. Typisch für diese Zeit sind die ClipArt-Anmutung, pixelige Kanten und harte Farbkontraste – schließlich stecken Kantenglättung und große Farbtiefen noch in den Anfängen.

Hyperlinks

Der Hyperlink als die zentrale und prägende Idee des Internets wird schon früh geboren. Mit einem einfachen Klick macht er den Wechsel zu einem anderen Dokument möglich. Schon damals hebt er sich – in der Standardkonfiguration gefärbt in einem charmanten Blau und unterstrichen – vom übrigen Text ab: Diese Art der Darstellung verankert sich in den kommenden Jahren so sehr in unseren Köpfen, dass das Prinzip bis heute Bestand hat.

Die späten 90er Jahre

Nicht kleckern. Klotzen! – Spielwiese World Wide Web

Die technische Entwicklung nimmt Fahrt auf: Leistungsfähigere Computer und neue Techniken wie CSS, JavaScript, Flash und GIF-Grafiken revolutionieren das Internet. Die Menschheit hat augenscheinlich nach kargen Zeiten Nachholbedarf. Grelle Farbkombinationen und wild wackelnde Animationen überschwemmen das WWW. Wo immer es möglich ist, wird gefärbt, gestylt und animiert. Jetzt verbreitet sich auch der Begriff des Webdesigners und eröffnet die Spielwiese fürs Interface Design. Wer etwas auf sich hält, zeigt seine Fähigkeit durch animierte GIFs und Counter (Besucherzähler) am Ende seiner Website.

Für die späten 90er Jahre gilt im Webdesign das schmerzhafte Credo: Viel hilft viel.

Logo

Noch immer ist das Internet vor allem ein Ort für Tekkies und Nerds, für Außenstehende wirkt es häufig ähnlich abstrakt und abschreckend wie Astrophysik. Diesem technischen Gedanken folgend kommen futuristische und ausgefallene Schriften zum Einsatz. Gleichzeitig möchte aber niemand auf eine möglichst große Vielfalt an Farben verzichten. Wer kann, tobt sich grafisch ohne Rücksicht auf die Netzhaut voll aus.

Typografie

Der erste Einsatz von CSS ermöglicht nun eine rudimentäre Gestaltung von Schrift. Im Überschwang der Gefühle und Möglichkeiten werden langjährige Erfahrung und umfassendes Wissen gestandener Typografen über Bord geschmissen. Entsprechend sehen die Ergebnisse aus: Text wird ohne Rücksicht auf Lesbarkeit gefärbt, verzerrt und gesetzt. Erlaubt ist, was möglich ist.

Buttons

Buttons sind viel mehr als nur Knöpfe. Sie sind zugleich Ausdruck persönlichen Geschmacks. Typisch sind runde Elemente und eine kreisförmige Anordnung. Da Websites feste Größen haben – schließlich gibt es kaum unterschiedliche Bildschirmauflösungen –, ist diese Darstellung äußerst beliebt und beinahe schon „State of the Art“.

Farben

Wenn wir heute die Farbgestaltung der späten 90er Jahre betrachten, erscheint diese weniger wie professionelles Design, sondern mehr wie ein besonders grauenvolles Verbrechen an der Farblehre. Streng genommen sind die grellen Farben und überzogenen Kontraste jedoch so etwas wie die wilden, pubertären und für Außenstehende mitunter schmerzhaften Jahre eines Heranwachsenden. Es ist die Abkehr von der nüchternen und durch Technik geprägten Internet-Welt der vorherigen Jahre und ein Austesten der wunderbar-vielfältigen neuen Möglichkeiten.

Animierte GIFs

Das animierte GIF ist und bleibt das markanteste Stilmittel der frühen Jahre des Webdesigns. Sich bewegende Baustellen-Grafiken, animierte kleine Bagger oder das klassische @-Zeichen: Nur wenn es sich bewegt, ist es gut. So stellen sich Webdesigner allerorten bei der Wahl der passenden Grafiken nicht die Frage nach ihrer Zielgruppe oder der Usability, sondern sondieren schlicht und einfach ihre Möglichkeiten.

Die frühen 00er Jahre

Web 2.0 – Let's get Glossy

Im Jahr 2002 sind mehr als 500 Millionen Menschen online. Das Internet hat den Techi-Muff abgeschüttelt und ist über Nacht eine Sache für die große Masse geworden. Plattformen wie Skype, Facebook, Youtube und Twitter öffnen das Tor zur vernetzten Welt, Web 2.0 wird zum Buzz-Word einer ganzen Marketing-Generation. Social Media-Plattformen und Blog Services machen das Web zum Mitmach-Internet, Websites werden zum nicht wegzudenkenden Kommunikationskanal. Mit der neuen Dynamik des Internets entwickelt sich ein neuer Trend; Interface Design wird auf Hochglanz poliert.

Welcome Glossy Web!

Logo

Grafik-Programme erlauben inzwischen den Einsatz von kunstvollen Effekten wie Schlagschatten, Verläufen und weichen Kanten. Monitore mit gigantischen Farbtiefen ermöglichen eine brillante Darstellung. Webdesigner sind im kreativen Paradies und schöpfen dieses Potential voll aus. Kein Element kommt ohne Schlagschatten und Verlauf aus. Wer auf Nummer sicher gehen will, kombiniert dazu starke Outlines mit Glow-Effekten.

Typografie

Nach dem Schriften-Desaster der vorigen Jahre findet erfreulicherweise professionelle Typografie Einzug in das Design von Websites und Applikationen. Während Schriftgestaltung zuvor mehr Mittel zum Zweck war, erlauben neue Techniken ein differenziertes und besonneneres Arbeiten mit Schriften, so wie es vorher nur in Printmedien möglich war. Da Webfonts noch nicht durchgängig unterstützt werden, wird komplexere Schriftgestaltung noch durch Grafiken realisiert.

Buttons

Der Button wird zum zentralen Interface-Element der Nullerjahre. Als bedeutendes Bedienelement wird dieser ebenfalls dem aktuellen Modetrend im Web unterworfen: Stark abgerundete Ecken, ein deutlicher Farbverlauf sowie weiche Kanten sind obligatorisch. Ein starker Schlagschatten sorgt außerdem für den typischen 3D-Look, der den User auffordert: „Klick – mich – an!“.

Farben

Eine Festlegung auf einfache Farben gibt es kaum. Flächen werden mit Verläufen gefüllt, um möglichst viel Räumlichkeit zu schaffen. Wo das nicht ausreicht, werden Muster, sogenannte Patterns, genutzt, um visuelle Highlights zu schaffen. Ebenfalls typisch für diese Design-Phase sind starke Kontraste für Interface-Elemente. Komplementär- und starke Helldunkelkontraste geben den Elementen zusätzlich visuelles Gewicht.

Icons

Die Gestaltung von Icons ist ebenfalls von Räumlichkeit geprägt. Während später der Trend zur abstrakten Darstellung hingehen wird, sind Icons in dieser Ära noch sehr bildlich und aus heutiger Sicht überzeichnet. Durch die Kombination kontrastreicher Farben mit vielen Effekten erinnern Elemente häufig an Spielzeugkisten aus der frühen Kindheit.

Die späten 00er Jahre

Skeuomorphismus – Web is Art!

Mit dem Stapellauf des iPhones von Apple im Jahr 2007 beginnt der Siegeszug der Smartphones und damit auch der des Skeuomorphismus: In der immer abstrakteren digitalen Welt wird die Sehnsucht nach Vertrautem zum Leitmotiv und Gestaltung zur Kunst erhoben. Individualität in der Bedienung ist ein Ausdruck von Schöpfungskraft. Gepaart mit der Darstellung von alltäglich und real anmutenden Elementen wie Schreibtischen, Schränken und Tafeln, meist im Retro-Stil, werden Websites zu eigenständigen Kunstwerken. Nachteile zu Lasten der Usability werden gerne in Kauf genommen.

Zurück in die Zukunft!

Logo

Bei der Logogestaltung ist ein deutlicher Wandel gegenüber der vorherigen Interface Design-Epoche zu spüren: Effekte werden deutlich reduziert und Signets vereinfacht. Eine leichte Entwicklung hin zu typografisch geprägten Logos ist bereits zu erkennen, auch wenn der Höhepunkt dieser Entwicklung erst später folgen wird.

Typografie

Die durchgehende Unterstützung von Webfonts eröffnet im Bereich Interface Design neue Möglichkeiten. Zu den bekannten Serifen- und Grotesk-Schriften gesellen sich „Handwritten“-Schriften, die eine persönlich anmutende Optik schaffen. Typisch ist der Einsatz dieser Handschriften in Verbindung mit grafischen Elementen wie Papier- oder Holzhintergründen.

Buttons

Eine Verbesserung der Usability schaffen Buttons, die als grafische Bausteine hervorgehoben werden. Sie machen deutlich, dass es sich um Call-to-Action-Elemente handelt. Da für Buttons in der Regel Hintergrundgrafiken verwendet werden, bieten diese gestalterischen Spielraum.

Farben

Die Zeiten farbiger Flächen und starker Verläufe sind vorüber, en vogue sind nun vor allem strukturierte Hintergründe in Leder- oder Holzoptik. Ziel ist es, Materialien und Strukturen so realistisch wie möglich darzustellen. Je plastischer desto besser.

Icons

Icons erleiden ein ähnliches Schicksal wie ihre Kollegen, die Buttons: Standardisierte Icon-Sets, die vorgefertigte Grafiken liefern, sind Geschichte. Dem Anwender das Gefühl einer durchgehend einheitlichen User Experience zu geben, hat höchste Priorität. Um das zu erreichen, müssen sich Icons in den hochgradig individuellen Look ihrer Website oder Web-Application perfekt einfügen.

Seit den frühen 2010er Jahren

Flat Design – Less is more

Geradliniger Minimalismus entrümpelt den nostalgischen, detailverliebten Stil der vergangenen Jahre. Inhalte rücken wieder in den Fokus – Content is King, again. Zudem erfordern Tablets, Smartphones und E-Reader mit ihren verschiedensten Größen ein grundlegendes Umdenken im Interface Design: Die Lösung bringt Responsive Webdesign, das Websites und Web-Applikationen flexibel an die unterschiedlichen Endgeräte anpasst. Die bisher ausgeübte Praxis für Websites, sowohl eine mobile als auch eine Desktop-Variante bereitzuhalten, wird somit hinfällig und durch eine dynamische, fließende und höchst agile Technik ohne feste Pixelmaße und starre Größen ersetzt.

Flat und Responsive Design führen zu einem radikalen Umdenken im Interface Design.

Logo

Einfachheit dominiert auch bei der Gestaltung von Logos: Diese werden weiter reduziert, Typografie wird noch wichtiger. Praktisch, denn so müssen sie nicht mehr als Grafik eingebettet werden, sondern funktionieren als echter Text. Das freut nicht nur Suchmaschinen, sondern macht die Arbeit mit diesem Element deutlich flexibler. Soll es komplexer sein, dann sind vektorisierte, beliebig skalierbare SVGs das Mittel der Wahl.

Typografie

Content steht allerorten im Mittelpunkt und deswegen rückt die Textgestaltung an prominente Stelle: Typografie ist wichtiger denn je, um Texte lesbar zu machen und emotional aufzuladen. Der gezielte Einsatz von typografischen Kontrasten ist typisch für Flat Design. Insbesondere die Mischung von Serifen- und Grotestk-Schriften ist ein wichtiges Stilmittel.

Buttons

In den 2010er Jahren sind die Nutzer im Umgang mit Websites und Web-Applikationen so souverän wie noch nie. Dies wirkt sich merklich auf das Interface Design aus: Die räumliche, realitätsnahe Optik der vergangenen Jahre ist nicht mehr nötig. Buttons als zentrale, klickbare Elemente sind reduziert und flach, Schrift und Farbe zeichnen den Button als solchen aus.

Farben

In der Gestaltung dominieren die Grundfarben Rot, Gelb Grün und Blau, allerdings nicht mit so gesättigt wie zuvor, sondern reduzierter, zurückgenommener. Farben werden gezielt eingesetzt, um Schwerpunkte zu setzen oder ganze Seitensektionen farblich abzutrennen.

Icons

SVG-Grafiken stellen auch die Welt der Icons auf den Kopf: Wie die Buttons sind auch Icons in der Darstellung sehr reduziert und flach, gleichzeitig werden sie deutlich abstrakter und lassen viel Liebe zum Detail erkennen. Die Verbreitung von bestimmten Icon-Sets hilft den Usern bei der Orientierung.

Das war's?

Writing code? That’s the easy part. Getting your application in the hands of users, and creating applications that people actually want to use – now that’s the hard stuff.
(Jeff Atwood, Stack Exchange)

Ist Flat Design in einem sich ständig wandelnden Internet auch nur ein kurzer Trend, über dessen Eigenheiten wir alle in einigen Jahren schmunzeln werden? Definitiv nein. Wir bewegen uns heute zunehmend in einem technischen Umfeld, in dem uns die Technik kaum neue Grenzen setzt und in dem Betriebssysteme, Apps, Programme und Websites immer stärker miteinander verschmelzen.

Interface Design muss heute das Bedürfnis der User nach Usability und Content in ihren Mittelpunkt stellen – das wird sich auch in den kommenden Jahren nicht ändern. Schauen wir in die Regionen mit Vorreiterrolle in Sachen Web wie USA und Skandinavien, können wir bereits erahnen, dass wir erst am Anfang eines weitreichenden Umbruchs stehen: Mit der Emanzipation der User werden diese anspruchsvoller und kritischer in ihren Erwartungen.

In den kommenden Jahren wird es daher für Websites und Web-Applikationen bedeutend sein, die Ansprüche der Anwender an Usability, Content und User Experience zu erfüllen.