So sieht das Web im neuen Jahr aus

Das sind die 5 Webdesign-Trends 2016
Kommentare

Zum Jahreswechsel haben gute Vorsätze Konjunktur. Doch was muss man als Designer beachten, damit die eigenen Absichten auch in die Tat umgesetzt werden können? Wir verraten es Euch und werfen einen Blick auf die 5 Webdesign-Trends in 2016.

1991 konnten im World Wide Web lediglich Textseiten mithilfe eines einfachen Linien-Webbrowsers ausgelesen werden. Heute, knapp 25 Jahre später, sind visuelle Elemente kaum noch aus dem Webdesign wegzudenken. Weißer Hintergrund, schwarzer Text und blaue Hyperlinks sind Relikte einer längst vergessen Zeit und gehören nicht mehr ins Standardrepertoir von Webdesignern.

Textlastige Seiten mussten zunehmend aufwendig gestalteten Internauftritten Platz machen. Wurde Designern anfangs noch freie Hand bei der visuellen Gestaltung gelassen, zielt die optische Umsetzung heutzutage auf die Steigerung der User Experience ab. Die fortschreitende massenhafte Verbreitung von mobilen Endgeräten sowie der Bedeutungsverlust von Desktop-PCs werden diese Entwicklung noch verstärken. Dass die Nutzer 2016 im Mittelpunkt von Designentscheidungen stehen, spiegelt sich in fünf Webdesign-Trends wider.

1. Minimalismus

minimalismus

Minimalismus, Quelle: www.collectif-yay.com

Minimalistische Seiten drücken die zentrale Idee im Webdesign des vergangenen Jahres aus: Schlichtheit. Den eigenen Entwurf auf das Nötigste zu reduzieren, verleiht der eigenen Page nicht nur eine gewisse Eleganz, sondern verringert ebenfalls die Ladezeiten. Insbesondere in Zeiten der massenhaften Verbreitung von mobilen Endgeräten ein klarer Vorteil. Der Verzicht von übermäßig vielen Bausteinen macht es zudem einfacher, die eigene Präsenz im Web responsiv zu gestalten.

So ist zum Beispiel der Internetauftritt des YAY Design Studio auf seine wesentlichen Kerninhalte reduziert. Spracheinstellungen, ausklappbares Menü, Logo und Kontaktadresse machen es möglich, die Aufmerksamkeit der User nahezu ausschließlich auf den prägnanten Aufmacherspruch zu lenken, der sich auch farblich von den anderen Elementen absetzt.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Der Stil des Minimalismus erlaubt es, Animationen und Interaktionen sowie dynamische Typografien, Bilder und HD-Videos vorteilhaft in die eigenen Entwürfe zu integrieren. Trends wie das Storytelling im Webdesign gewinnen nicht zuletzt deswegen immer mehr an Einfluss. In Kombination mit dem Hamburger-Icon als Menüersatz werden minimalistische Designs in einer Vielzahl symmetrischer Formen und Anordnungen das Netz im Jahr 2016 dominieren.

2. Flat Design 2.0

fladesign

Flat Design 2.0, Quelle: www.christmaswithjoy.com

Seit 2010 macht das Flat Design das Web durch die Reduzierung optischer Bausteine effizienter. Es sorgt für eine bessere Performance und geräteübergreifende Skalierbarkeit. Allerdings ist aufgrund des Verzichts auf haptische Ornamente nicht immer ganz klar, was angeklickt werden kann und was nicht – darunter leidet insbesondere die visuelle Hierarchie.

Die meisten Designer sind sich dieser Tatsache bewusst geworden und setzen wieder verstärkt auf schmückendes Beiwerk. Hierbei handelt es sich allerdings weniger um das Ende des Flat Design, sondern vielmehr um seine Weiterentwicklung. Die ursprüngliche Version war eine Reaktion auf die technischen Erneuerungen im Gerätebereich und zielte auf die Steigerung der Effizienz ab. Das Flat Design 2.0 hingegen richtet seinen Fokus auf die Bedürfnisse der Nutzer und steigert so die User Experience. Da die Aufmerksamkeitsspanne der User ein knappes Gut ist, müssen visuelle Elemente heutzutage so gestaltet sein, das sie intuitiv bedient werden können und schnell zu den gewünschten Ergebnissen führen.

Das Flat Design 2.0 setzt deshalb nicht nur auf Minimalismus, dynamische Farben und einfache Typografien, sondern beinhaltet darüber hinaus aussagekräftige Icons, Ghost-Buttons, prägnante Typografien, akzentuierte Farben und feine Schattenwürfe zur Steigerung von Tiefe und Komplexität. Insbesondere der letzte Punkt wird am Beispiel des Christkinds auf Christmaswithjoy.com sehr gut demonstriert. Die plastische Darstellung mit viel Liebe zum Detail verkörpert prägnant, worauf es im Flat Design 2.0 ankommt. Da in 2016 Effizienz und User Experience ebenso gefragt sind, wird uns dieser Stil im nächsten Jahr häufig begegnen.

3. Kartenlayouts

cardlayouts

Kartenlayout, Quelle: www.behance.net

Der ungebrochene Einfluss der User Experience wird sich im neuen Jahr gleichsam auf die Entwicklung des Flat Designs 2.0 auswirken. Die Strömung wird mit immer mehr Designmustern verschmelzen. Denkbar ist neben dem verstärkten Einsatz von Fotografien und Bilddateien vor allem die Integration von Animationen und interaktiver Elemente. Deswegen werden Flat Design und Material Design in 2016 enger zusammenrücken und viele Webseiten verstärkt auf Kartenlayouts setzen, die typisch sind für den Material-Design-Ansatz.

Layouts in Kartenform erlauben es, reichhaltige Inhaltsangebote organisiert und übersichtlich darzustellen, und sorgen auf diese Weise für eine angenehme Surferfahrung. Außerdem können Boxen ohne großen Aufwand automatisch an verschiedene Displayauflösungen angepasst werden und eignen sich daher perfekt für responsive und adaptive Designs.

Ein gutes Kartenlayout zeichnet sich dadurch aus, dass nicht nur das Aufmacherbild und die Verlinkungen, sondern die gesamte Box angeklickt werden kann. Außerdem sollte der Raum zwischen den einzelnen Karten klar zu erkennen sein. Die User sollten nicht darüber ins Grübeln geraten, wo eine Box anfängt und wo sie endet. Behance.net vermittelt einen Eindruck davon, wie klar strukturierte Karten auszusehen haben.

4. Mehr Animationen und Interaktionen

animationen

Mehr Animationen und Interaktionen, Quelle: www.dreamteam.pl

Animationen lenken die Aufmerksamkeit der Nutzer auf sich und können dadurch die Bausteine einer Webseite in eine klare visuelle Hierarchie bringen. Animierte Elemente vermitteln den Anwendern ein Gefühl dafür, wie sie mit bestimmten Angeboten interagieren können und fördern auf diese Weise ihre intuitive Bedienbarkeit. Außerdem hauchen sie ansonsten eher langweiligen Interaktionsmöglichkeiten neues Leben ein. So werden beispielsweise ansprechend animierte Verlinkungen deutlich häufiger angeklickt als Hyperlinks, die nur ihre Farbe ändern.

Aber nicht nur Animationen können sich förderlich auf die Konversion der eigenen Webseite auswirken, sondern durch die Fortschritte in HTML5, CSS, JavaScript und jQuery sind Designer ebenfalls in der Lage ausdrucksstarke Interaktionen zu integrieren. Push-Notifications, Personalisierungstools und Mikrointeraktionen werden im kommenden Jahr den visuellen Auftritt vieler Internetauftritte ergänzen.

Besonders gern wird die Kombination von Animation und Interaktion auf Seiten eingesetzt, die auf lange Scrolling-Passagen setzen. Techniken wie das Parallax-Scrolling bieten Gestaltern große kreative Freiheiten um Methoden wie etwa das Storytelling vorteilhaft zu implementieren. Ein besonders schönes Beispiel dafür, wie die Kombination der beiden Elemente die User Experience steigern kann, bietet die Page Dangersoffracking.com. Dass Animationen aber auch in der Lage sind, die persönlichen Note der eigenen Webseite gekonnt zu unterstreichen, beweist der Internetauftritt der Bühnenbildnerin und Ausstellungsgestalterin Katarzyna Konkowska.

5. Dynamische Typografien, Bilder und HD-Videos

dynamic

Dynamische Typografien, Bilder und Videos, Quelle: www.spotify.com

Seitdem das Rendern von Texten und die Verfügbarkeit von Fonts kaum noch ein Problem im Netz darstellen, spielen Schriften eine immer wichtigere Rolle im Webdesign. Dynamische Typografien setzen in der Regel aber nicht auf besonders aufwendig verzierte Schriftarten. Ihre typografische Gestaltung orientiert sich eher am aktuellen Trend des Flat Designs. Um die Aufmerksamkeit der Nutzer auf sich ziehen, werden Designer in 2016 weiterhin auf simple Texte in unterschiedlichen Formen und Farben setzen.

Oftmals werden dynamische Typografien als Ersatz für Bilder und Illustrationen genutzt. Doch am besten entfalten sie ihre volle Wirkung in Kombination mit aussdrucksstarken Bildern, die den gesamten Hintergrund einer Webseite ausfüllen. Solche Hero-Headers werden im kommenden Jahr das Bild vieler Landing- und Login-Pages beherrschen.

Durch die massenhafte Verbreitung schneller Breitbandanbindungen und HD-Displays erstreckt sich die Entwicklung nicht nur auf gestochen scharfe Bildinhalte, sondern umfasst auch hochauflösendes Videomaterial. Unterstützt wird diese Annahme durch die Mauserung von HD-Background-Videos zur populärsten Methode im Storytelling.

Wie man dynamische Typografien sowie animierte Hintergrundbilder im minimalistischen Flat-Design-Stil aufbereitet und an die Parallex-Scrolling-Methode koppelt, demonstriert der Musikstreaming-Dienst Spotify auf seiner englischen Internetpräsenz eindrucksvoll.

Fazit

Die fünf Trends geben klar vor, in welche Richtung sich das Webdesign in 2016 entwickeln wird: Die visuelle Gestaltung muss sich in erster Linie an den Bedürfnissen der Nutzer orientieren und nicht an den eigenen künstlerischen Ansprüchen. Doch nicht jede der fünf Methoden ist für alle Internetauftritte geeignet. Um seinen guten Vorsätzen gerecht zu werden, sollte man sich im neuen Jahr deshalb immer von den Wünschen der User zu seinen Entwürfen zurückarbeiten.

 

Aufmacherbild: Typographic design greeting card via Shutterstock / Urheberrecht: Iveta Angelova

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -