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

Neobroker Whitepaper anfordern

05. Oktober 2020

Weiterlesen
Weiterlesen

Weg vom Produkt, hin zum Problem

14. November 2019

Bisherige Konzepte müssen auf den Prüfstand, sagt Tim Riepenhausen, geschäftsführender Gesellschafter der Digitalagentur adisfaction aus dem CROSSMEDIA-Worknet, denn: „Finanzmarketing für Millennials geht anders.“ Fünf Beobachtungen und was sich daraus schließen…

Weiterlesen
Weiterlesen

Jetzt sagt nicht, das Thema Marke kommt wieder!

04. November 2019

Nein, wer hätte das gedacht: Brand-Marketing schlägt Performance-Marketing in der Umsatzwirkung. Das hat adidas mit Hilfe seines ökonometrischen Modells herausgefunden. Das Ergebnis ist ungefähr so überraschend wie die Erkenntnis, dass…

Weiterlesen
Weiterlesen

Customer Relationship Management (CRM) – erst die Strategie, dann das System

02. September 2019

CRM-Systeme dienen der effizienten Steuerung und stetigen Optimierung der Kundenbeziehung. Echte Kundenzentrierung braucht aber mehr als ein Werkzeug.

Weiterlesen

Folgen Sie uns

Newsletter Anmeldung hier

Kontaktformular öffnen

    tyytyväinen GmbH verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur dazu Ihnen die von Ihnen explizit gewünschten Informationen zur Verfügung zu stellen. Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage gem. §13f DSGVO im Rahmen unserer Datenschutzerklärung einverstanden.