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.
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
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.
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.
Bilder
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
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.
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
- Responsive Webdesign: Zillgens, C., (2013). Responsive Webdesign: reaktionsfähige Websites gestalten und umsetzen, München: Hanser.
- Farben und Icons: Reflections on Web Design Trends in 2013. Available at: http://designmodo.com/web-design-trends-2013 [Accessed May 6, 2013]
- Single Page: Web Design Trends 2013. Available at: http://www.the-webdesign.net/blog/web-design-trends-2013 [Accessed May 6, 2013].
- Typografie: Case Study – Typographic Design Patterns And Current Practices (2013) I Smashing Magazine. Available at: http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013 [Accessed May 6, 2013].
Bildquellen
- Abb. 1: Responsive Webdesign, adisfaction (2013).
- Abb. 2: Windows 8 Kacheln, HideIPVPN, (2013). windows8.jpg. Available at: http://www.hideipvpn.com/wp-content/uploads/2012/12/windows8.jpg [Accessed May 6, 2013].
- Abb. 3: Flat UI und Kontrastfarben, Dribble, (2013). weather-app-iphone.jpg. Available at: http://dribbble.s3.amazonaws.com/users/48601/screenshots/540216/attachments/39321/weather-app-iphone.jpg [Accessed May 6, 2013].
- Abb. 4: Monochrome Farben, Designmodo, (2013)(c). cathryn-anne.jpg. Available at: http://cdns.designmodo.com/wp-content/uploads/2013/04/cathryn-anne.jpg [Accessed May 6, 2013].
- Abb. 5: Schlichtes Icon-Design, Designmodo, (2013)(b). 132.jpg. Available at: http://cdns.designmodo.com/wp-content/uploads/2013/03/132.jpg [Accessed May 6, 2013].
- Abb. 6: Nutzung eines grossflächigen Hintergrundbildes bei der Standard Chartered, The Financial Brand, (2013). standard_chartered_website-565×417.jpg. Available at: http://thefinancialbrand.com/wp-content/uploads/2013/03/standard_chartered_website-565×417.jpg [Accessed May 6, 2013].
- Abb. 7: Minimalistische Single-Page-Website, Eden, (2013). Eden – back to nature… I iPhoneRückseiten aus Holz I FSC-zertifiziert. Available at: http://www.eden-made.de [Accessed May 6, 2013].
- Abb. 8: Verteilung der meistgenutzten Schriftarten, Smashing Magazine, (2013)(e). Typfaces-comparison.png. Available at: http://www.smashingmagazine.com/wp-content/uploads/2013/03/Typfaces-comparison.png [Accessed May 6, 2013].
