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

Weshalb Displaywerbung trotz Adwords, Facebook & Co. relevant ist

19. Juni 2018

«Display ist tot.» So mancher Marketer hat diesen Satz gehört. Vor allem in Anbetracht der zunehmenden Bedeutung des Performancemarketings wird gerne mal der Effekt der Displaywerbung in Frage gestellt. So…

Weiterlesen
Weiterlesen

Amazon Schweiz – Chancen & Risiken für eCommerce-Unternehmen

24. April 2018

Amazon bereitet die Ausweitung seiner Präsenz auf dem Schweizer Markt vor. Jean-Gabriel Meylan, Leiter des Paketverteilzentrums der Post, bestätigte kürzlich in einem TV-Beitrag laufende Logistik-Tests mit dem Versandhandelsriesen. Zudem wickelt die…

Weiterlesen
Weiterlesen

Weniger Facebook-Reichweite für Seitenbetreiber – was tun?

23. Januar 2018

Am 12. Januar hat Mark Zuckerberg höchstpersönlich verkündet, dass der Algorithmus des Facebook-Newsfeeds geändert wird. „Private Posts“ sollen gegenüber „gewerblichen Posts“ wieder die Oberhand gewinnen. Nutzer sollen auf Facebook in…

Weiterlesen
Weiterlesen

Finanzmarketing: Content und P2P statt TV und Filiale

18. Oktober 2017

Jeder vierte Internetnutzer besucht keine Bankfiliale mehr. Genau das meldete jüngst der Digitalverband Bitkom und bestätigte damit den Eindruck, dass die Schalterräume nicht mehr das wichtigste Spielfeld des Finanzmarketings darstellen:…

Weiterlesen

Folgen Sie uns