Trends im Webdesign

Date:  |  Author: Matthias Pommranz

Icon TrendsWas macht eine zeitgemäße Website aus? Heute sehen Websites anders aus als vor fünf oder zehn Jahren; das ist offensichtlich, auch wenn man sich nicht explizit mit Webdesign beschäftigt. In diesem Beitrag möchte ich die langfristigen Trends und den Stand der Entwicklung zusammenstellen.

Als Kommunikationsmedium bringt das Web Anbieter und Nutzer zusammen. Daher spiegeln sich Einflüsse aus unterschiedlichen Richtungen im Webdesign wieder: Veränderungen bei den Erwartungen und Gewohnheiten der Nutzer, Gerätetechnik, weiterentwickelte Webstandards, rechtliche Vorgaben… Stellvertretend seien drei wichtige Faktoren genannt:

  • Selbstverständlichkeit. Anders als noch in den Neunzigern nutzt heute der größte Teil der Bevölkerung das Web. Youtube und Wikipedia, soziale Netzwerke wie Facebook sowie eine Unmenge an Onlineshops tragen ihren Teil dazu bei. Mit der Erfahrung der Nutzer steigen aber auch die Erwartungen an die Qualität der Angebote.
  • Mobile Nutzung. Durch leistungsfähigere Netze und neue Endgeräte (Smartphones, Tablet-PCs, Netbooks) hat sich das Web vom Schreibtisch gelöst und ist zu einem dauerhaften Begleiter im Alltag geworden. Websites müssen dieser Nutzung Rechnung tragen, von der Form der Informationsaufbereitung (kürzere, aktuelle Informationen) über die Präsentation bis zur Technik.
  • Offene Standards. Mit wachsender Browser-Vielfalt und parallel zum Erfolg von Open Source Software wächst die Bedeutung einheitlicher, konzernunabhängiger Webstandards. Die aktuellen Technologien HTML5 und CSS3 bieten Webdesignern mehr gestalterische und interaktive Möglichkeiten für ihre Projekte. HTML5-Multimediafunktionen wie Webvideo und Animationen ermöglichen es, bei vielen Anwendungen auf Adobe Flash zu verzichten.

Wie machen sich diese Faktoren nun im Webdesign bemerkbar?

Mehr Bilder

  • Größere Bilder. Da nicht mehr wie früher mit jedem Byte gegeizt werden muss, sind großformatige Abbildungen inzwischen ein wichtiges Element bei der Präsentation von Produkten, Veranstaltungen oder anderen Themen. Bilder statt langer Texte, das kommt auch den veränderten Sehgewohnheiten entgegen. Voraussetzung sind natürlich aussagekräftige Motive in guter Qualität.
  • Bildpanels. Größere Bilder brauchen Platz, um zu wirken, daher werden nicht mehr so viele Abbildungen auf eine Seite gepackt. Slider (Diashows) auf Produktseiten oder auf der Homepage präsentieren wechselnde Inhalte an derselben Layoutposition. Das Vergrößern von Bildern oder Videos per Popup ist eine akzeptierte und für Mobilgeräte geeignete Technik. Als besonderes Stilmittel verwenden manche Websites bildschirmfüllende Hintergrundbilder, die mit sparsamen Text/Grafikelementen Atmosphäre schaffen.
  • Illustrationen. Auch Grafiken sind wieder stark im Kommen: als Infografiken, stark reduzierte Skizzen im Handmade-Look oder als aufwändige Photoshop-Montage – ganz nach Bedarf.

Webdesign mit großformatigem FotoGroßformatige Fotos bieten sich an bei einem Fischrestaurant

Webdesign mit IllustrationenDropbox zeigt mit Illustrationen, wie einfach und persönlich sein Onlinedienst funktioniert

Typografische Freiheit

  • Webfonts. Die Zeiten, in denen Web-Typografie auf Arial, Verdana und Times als kleinstem gemeinsamen Nenner der Betriebssysteme begrenzt war, sind vorbei – dank verschiedener Techniken zur Font-Einbindung und Online-Anbietern wie Google Webfonts, die kostenlos Schriften als externe Ressource bereit stellen. Damit sind individuelle und gleichzeitig lesefreundliche Texte kein Problem mehr.
  • Große Schriften. Die vektorbasierten Webfonts lassen sich prima in großen Schriftgraden einsetzen. Ein Stilmittel, das bei richtigem Einsatz großzügig und elegant wirkt.
  • Individuelle Typografie. Mit den neuen Freiheiten wird Typografie verstärkt als individuelles Designelement eingesetzt: Schriften mit persönlichem oder experimentellem Charakter, sogar komplett frei gezeichnete Buchstaben.

Webdesign mit klarer, großer SchriftGroßes Foto, wenig Schrift: einfach und wirkungsvoll, eben „plain“

Webdesign mit individueller TypografieIndividuelle Typografie bei maptia.com

Flexibles Layout

  • Responsive Design. Früher überlisteten Webdesigner die HTML-Strukturen, um feste Layouts zu bekommen, die auf allen Rechnern gleich aussehen. Inzwischen haben CSS und mobile Geräte die Internet-Landschaft gewandelt. Heute sorgen Responsive Design-Layouts dafür, dass sich die Seite beim User an das jeweilige Endgerät anpasst, vom Großformat-Bildschirm über Netbooks bis zu Smartphones. Das bedeutet mehr Aufwand bei der Konzeption und Ausarbeitung der Website, für die Besucher wird die Nutzung der Website jedoch deutlich angenehmer. Daher ist Responsive Design ein wichtiges Thema für erfolgreiche Websites.
  • Grid Layouts. Module und Blöcke sind wichtige Elemente beim Responsive Design. Grid Layouts betonen sie noch stärker für ein modulares, rasterorientiertes Design – ein Gestaltungsprinzip, das Microsoft für den Startschirm von Windows8 verwendet.

Multimediale Inhalte für alle GeräteMultimediale Inhalte für alle Geräte: Seit dem Relaunch setzt die ARD verstärkt auf Videos und große Abbildungen

Klar und einfach

  • Reduktion. Auf dem kleinen Display eines Smartphones kommen Inhalte nur zur Geltung, wenn auf alle unnötigen Elemente verzichtet wird. Dieses minimalistische Design wird im Gegenzug mehr und mehr auch für Websites eingesetzt, die für größere Monitore konzipiert sind. Apple setzt seit Jahren konsequent auf Minimalismus – bei den Produkten ebenso wie im Screendesign und in der Werbung.
  • Form follows function. Ein Gestaltungsprinzip aus dem Produktdesign, das auch die Bedienung von Online-Applikationen erleichtert, z.B. das neue Google Maps.
  • Flat Design. Passend zu den bisherigen Trends erzeugt Flat Design Klarheit mit Hilfe von 2D-Elementen und sachlichen Fonts. Auf 3D-Effekte, Schatten, Verläufe, Farbmuster etc. wird bewusst verzichtet; sie kommen allenfalls zum Einsatz, um Buttons und andere Navigationselemente besser sichtbar und damit benutzerfreundlicher zu machen.

Minimalistisches WebdesignDer Relaunch von issuu.com konzentriert sich ganz auf die angebotenen Inhalte

Flat DesignSkype kommt bunter und nicht ganz so minimalistisch daher, aber ebenfalls im aktuellen Flat Design

Großzügige Navigation

  • Fixed Position Navigation. Statt umfangreicher Menüs finden man nun häufig eine bewusst einfache, einzeilige Leiste mit den wichtigsten Stichpunkten, evtl. ergänzt durch Suchfeld, Login-Funktion etc. Websites mit langen Seiten platzieren diese Leiste gerne dauerhaft oben auf dem Bildschirm, das erspart (gerade bei mobilen Geräten) viel Scrollen. Werden weitere Unterpunkte angeboten, geschieht das häufig nicht mit einem klassischen Ausklappmenü, sondern durch Einblenden eines großzügigen Navigations-Layers.
  • Infinite Scrolling. Eine Funktion, die durch Facebook populär wurde: Hat man bis zum Ende der Seite gescrollt, werden automatisch die nächsten Inhalte nachgeladen.
  • One-Page-Sites. Die Website besteht dabei nicht aus mehreren (wenigen) Seiten, sondern aus einer einzigen Seite, gegliedert in Inhaltsblöcke, die über die Navigation herangescrollt werden. Eignet sich für kleinere Websites, z.B. für einzelne Produkte oder Dienstleister.
  • Off-Canvas Elemente. Ebenfalls eine Funktion, die aus der Entwicklung von Mobilgeräte-Websites stammt: Statt alle Inhalte in einer langen Reihe untereinander anzuordnen, gelangt man durch seitliches Wischen auf Bereiche neben der eigentlichen Seite. Bei genügend Platz (auf größeren Bildschirmen) werden sie gleich mit angezeigt.

NavigationspanelsGroßzügige Navigationspanels bei BMW

One-Page-WebsiteScrollen statt blättern – Beispiel für ein One-Page-Layout

Off-Canvas-PrinzipDiese Seite erklärt und illustriert das Off-Canvas-Prinzip

Fazit

Webdesign soll Inhalte für die Besucher interessant und gleichzeitig gut nutzbar gestalten – eine spannende Aufgabe, die immer wieder neue Faktoren berücksichtigen muss. Die vorgestellten Trends zeigen verschiedene Herangehensweisen, meist struktureller Art, da bleibt immer noch genügend Spielraum für individuelles Design. Als Auftraggeber einer neuen Website können Sie sich darauf verlassen, dass die aktuellen Techniken (HTML5 / CSS3, JavaScript, Responsive Design) eine gute Grundlage für die nächsten Jahre bieten. 

.