Responsive Design und andere aktuelle Webdesign-Trends

23. September 2014 von

Das Web wächst. Es gibt weiterhin das alte Web der Desktop-PCs. Parallel entsteht in rasender Geschwindigkeit das mobile Web der Smartphones und Tablet-PCs. Das Online-Marketing im Allgemeinen und Webdesigner im Speziellen stehen vor der Herausforderung, Websites an unterschiedlichste Screengrössen anzupassen. Sie lösen diese Aufgabe, indem sie die Gestaltungsprinzipien des Mobile Designs und die des Webdesign verschmelzen. Das Ergebnis ist ein neues, universales Screendesign. Einige seiner zentralen Merkmale möchten wir an dieser Stelle beleuchten.

Responsive Design

Der Begriff Responsive Webdesign beschreibt die Reaktionsfähigkeit der Website auf die Geräte der Nutzer. Es geht im Kern darum, anstelle starrer Strukturen ein Design zu entwickeln, das sich auf die steigende Anzahl verschiedener Displaygrössen anpasst.

responsive_design_sowatec_adisfaction

Abb. 1: Responsive WebsiteDie Bandbreite reicht von Mobildisplays mit 2,5 Zoll über Smartphones mit ca. 3,5 Zoll, diverse Tablet-Typen, Netbooks und Laptops mit 11 bis 15 Zoll bis zu Arbeitsplatz-Bildschirmen mit 30 Zoll und mehr. Für jedes Format eine Version bereitzustellen,  wäre viel zu aufwendig. Stattdessen basiert Responsive Design auf einem Gitter, das sich stufenlos an Bildschirmgrössen anpasst. Im Unterschied zum normalen Aufbau lassen sich mit Hilfe des Gitters Navigations-, Text- und Bildelemente frei skalieren, ja, sogar stapeln.

Bedienelemente zeigen sich bei responsiv gestalteten Webseiten grosszügiger und flächiger, denn  sie sollen sowohl mit der Maus als auch mit dem Finger gleichermassen gut bedient werden können.

Flat User Interface

windows8_kacheln
Abb. 2: Windows 8 Kacheln

Die Webdesigner sind von verspielten, dreidimensionalen Designs zu flachen User Interfaces zurückgekehrt. Besonders das in Abbildung 2 dargestellte Kacheldesign von Windows 8 hat zum häufigeren Einsatz von Flat User Interfaces geführt. Dreidimensionale Effekte sind bei neuen Websites nur noch selten zu sehen. Sie werden oftmals durch leichte Farbverläufe ersetzt. Das Design tendiert zum minimalistischen und ist somit auch bestens für die Bedienung auf Touch-Geräten geeignet.

Kontraste: breite Farbpaletten oder monochrom

Die Farbpalette, die auf einer Website eingesetzt wird, ist meist durch das Corporate Design vorbestimmt. Es ergeben sich jedoch immer wieder Spielräume um aktuelle Farbtrends einzubringen oder die bestehende Palette neutral zu ergänzen. In Kombination mit den flachen Webdesigns werden derzeit sehr breite Farbpaletten eingesetzt. Wem das zu bunt wird, kann monochrome Farbpaletten verwenden. Dieses sehr beliebte Designprinzip bestimmt, dass lediglich eine einzige Farbe in helleren bzw. dunkleren Abstufungen zum Einsatz kommt. Einzelne Farbtupfer sind aber immer möglich, um Buttons hervorzuheben.

Abb. 3: Flat UI und Kontrastfarben
Abb. 3: Flat UI und Kontrastfarben

 

Abb. 4: Monochrome Farben
Abb. 4: Monochrome Farben

Icons

Icons und Illustrationen liegen beim modernen Webdesign voll im Trend. Texte werden durch diese Grafiken ergänzt, überschattet oder gar komplett weggelassen. Ein kluger Ansatz vertraut nicht zu 100% auf die Selbstbeschreibungsfähigkeit der Icons und setzt das Element nur ergänzend ein.

Abb. 5: Schlichtes Icon-Design
Abb. 5: Schlichtes Icon-Design

Bilder

Abb. 6: Nutzung eines grossflächigen Hintergrundbildes bei der Standard Chartered
Abb. 6: Nutzung eines grossflächigen Hintergrundbildes bei der Standard Chartered

Bilder werden zunehmend grossflächiger eingesetzt, beispielsweise als Hintergrund für alle anderen Elemente. Die Bilder verleihen einer Website Tiefe und Atmosphäre und vermitteln, sofern sie sorgfältig gewählt sind, beiläufig eine zweckmässige Botschaft. Daher sollte auf die Selektion der Motive sowie die Qualität der Bilder grossen Wert gelegt werden.

Single Page Websites

Abb. 7: Minimalistische Single-Page-Website
Abb. 7: Minimalistische Single-Page-Website

Single-Page-Layouts sind ein weiterer Gestaltungstrend für designorientierte Websites. Diese Websites präsentieren ihren kompletten Inhalt auf einer meist sehr langen, bildlastigen und vertikal angelegten Seite. Die Navigation scrollt bei einem Klick automatisch nach unten an die gewünschte Stelle im Layout. Die auch One-Pager genannten Seiten, werden meist von Designliebhabern aufgrund der kreativen Möglichkeiten eingesetzt. Die fliessende Anmutung der linearen Struktur erleichtert das Storytelling. Eine gute Lösung sind Single Page Websites auch für Gestaltungen mit wenig Text (und vielen Bildern). Diese Designvariante  wird oft für einzelne Produkte, Personen oder kleinere Unternehmen genutzt.

Typographie

Für Websites mit viel Content ist die typographische Optimierung ein wichtiger Faktor, um ansprechende Optik und gute Lesbarkeit zu erzielen. Das Smashing Magazine, einer der führenden Blogs für Webdesigner, analysiert, dass textlastige Websites vorwiegend auf Serifenschriften im Contentbereich setzen, während Überschriften grösstenteils serifenlos dargestellt werden.

Abb. 8: Verteilung der meistgenutzten Schriftarten
Abb. 8: Verteilung der meistgenutzten Schriftarten

Die derzeit populärste Schriftart ist Georgia. Sie wird von Websites wie The Guardian oder der Financal Times verwendet. Auch Arial wird häufig eingesetzt, etwa auf Zeit.de und BBC. Es fällt auf, dass der grösste Teil der Websites keine Standardschriften nutzt. Das Web zeigt hier eine Entwicklung zur typographischen Vielfalt.

Besonders interessant: Die Grösse der Überschriften nimmt zu. Der Durchschnitt wuchs seit 2009 um 10 Pixel. Auch die Schriftgrössen der Inhalte legten in den letzten Jahren zu: Die meisten Websitetexte hatten 2009 eine Pixelgrösse zwischen 12 und 14. Heute dominieren Grössen zwischen 14 und 16 Pixeln.

Fazit

Insbesondere an responsivem Webdesign, aber mittelbar auch an den anderen, hier vorgestellten Designtrends führt kein Weg vorbei. Der anhaltende Boom mobiler Geräte sowie das veränderte Nutzerverhalten verlangen Webdesign, das Display-übergreifend optimale User Experience ermöglicht. Wer im digitalen Zeitalter bestehen möchte, muss die Webpräsenz als zentralen, oftmals ersten Touchpoint und wichtigstes Aushängeschild des Unternehmens begreifen. Eine technisch einwandfreie, optisch ansprechende und nutzerfreundliche Lösung ist Pflicht.

Quellen

Bildquellen

Weiterlesen

Intensivtraining Performance Marketing – adisfaction Experten bei der IAB Academy

20. April 2017

Am 9. und 10. Mai 2017 findet in den Räumen der HWZ Zürich das Intensivtraining Performance Marketing der IAB statt. In der Runde der IAB Academy Referenten wird auch Rebecca…

Weiterlesen
Weiterlesen

Das Online-Finanzmarketing braucht mehr Content

29. März 2017

Nach dem Jahreswechsel fluten traditionell große Mengen frischer Zahlen zum Thema Online-Finanzmarketing in die einschlägigen Fachmedien. Eine unserer Aufgaben als Marketingberater für Finanzdienstleister besteht darin, diese Daten zu sichten und…

Weiterlesen
Weiterlesen

Customer Journey im Banking – GfK-Studie zum ROPO-Effekt

02. März 2017

Dass sich das Bankgeschäft verändert hat und die Grenzen zwischen online und offline zunehmend verschwimmen, ist keine ganz neue Erkenntnis. Trotzdem liefert die zum dritten Mal durchgeführte GfK-Studie zur Customer…

Weiterlesen
Weiterlesen

5 kritische Faktoren des HR-Marketings im Web

04. Februar 2017

Personal anheuern – kein Problem. Qualifiziertes Personal anheuern – schon schwieriger. Qualifiziertes Personal dazu bewegen, in einem kleinen Unternehmen an Düsseldorfs Peripherie anzuheuern – beinahe unmöglich. Warum gelingt es uns…

Weiterlesen

Folgen Sie uns