Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Design

Webdesign-Trends 2016: Was uns im neuen Jahr im Netz erwartet

    Webdesign-Trends 2016: Was uns im neuen Jahr im Netz erwartet

(Grafik: Shutterstock)

Webdesign-Trends kommen und gehen – sie werden erschaffen, um sich von der der Konkurrenz abzuheben und die Aktualität einer Seite zu unterstreichen. Sobald Trends von der Mehrheit eingesetzt werden, gehören sie zu Standards – oder werden später wieder vergessen. Wir zeigen euch, was 2016 im Webdesign wichtig wird.

Digitale Medien entwickeln sich rasend schnell und gehören somit auch zu den kurzlebigsten Produkten, die es gibt. Webseiten, die heute entstehen, sind spätestens in zwei Jahren schon wieder ein alter Hut. Damit wir zumindest für das nächste Jahr gewappnet sind, schauen wir in die Glaskugel – und gucken, was das Jahr so bringt.

Webdesign-Trends 2016: One-Pager, Page-Carousels und Scrollytelling

Eine einfache Scrollytelling-Demo. (Screenshot: Dangersoffracking)
Auch 2016 einer der wichtigsten Webdesign-Trends: Scrollytelling. (Screenshot: Dangersoffracking)

Auch im nächsten Jahr wird der klassische One-Pager uns noch begegnen – vermehrt aber wohl in abgewandelter Form. Eine neuartige Darstellungs-Variante ist das Page-Carousel – die Navigation einer solchen Seite erinnert stark an ein E-Magazin. Inhalte werden vermehrt horizontal dargestellt und durch eine Swipe- oder Klick-Funktion eingeblendet. Dabei sind die Inhalte immer in der Höhe und Breite vollflächig zum aktuellen Viewport, mit einem vertikalen Scrollen kann zum nächsten Bereich gesprungen werden. Um eine solche Seite umzusetzen, gibt es beispielsweise das fullPage.js-Framework.

Wie auch in diesem Jahr, wird der Trend des Scrollytellings – eine Kombination aus Storytelling und Scrolling – sich fortsetzen. Diese Adaption ist ausschließlich für das Web geeignet und stützt sich auf das Scrollen. Mit der Scroll-Geschwindigkeit wird der Ablauf gesteuert und kann somit vom Betrachter beeinflusst werden. Eine Demo gibt es beim Projekt Dangersoffracking.

Webseiten mit SVG und CSS3 animieren

SVG- und CSS3-Animationen werden auch im kommenden Jahr wieder ein Renner werden. Durch die ressourcensparende Alternative können schnell und einfach hübsche Animationen gezaubert werden. Es braucht hierfür kein weiteres JavaScript-Framework oder Assets, die unsere Webseite verlangsamen. Egal ob wir ein animiertes SVG-Burger-Menü oder eine CSS-Keyframe-Animation zaubern – die Möglichkeiten sind riesig.

Obwohl SVG eine alte Technik ist und schon häufiger tot gesagt worden ist, erhält das Vektor-Format immer mehr Zuspruch. Einige Vorteile des Formates waren früher uninteressant – heute hingegen ist das skalierbare Format schon alleine für Retina-Displays wichtig. Auch die Möglichkeit, Pfade direkt mit CSS3 zu animieren, macht es zu einem festen Bestandteil im Jahr 2016. Sicher eine Technik, die in den kommenden Jahren noch weiter Fahrt aufnimmt und noch bessere Spezifikationen erhält.

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

9 Reaktionen
woschfan
woschfan

Liebe Redaktion und Mit-Diskutanten,

da mir mittlerweile mehrfach ein paar Webdesign-Trends aufgefallen sind, die mich massiv nerven, habe ich mich mal auf die Suche begeben und diese Seite gefunden.

Interessanterweise wurden diese Trends bei Euch nicht wirklich beleuchtet bzw. nur angeschnitten. Vor allem die Nachteiligkeit dieser Trends würde ich sehr gern mal zur Diskussion stellen.

- Responsive Design: Leider scheint der Begriff "Responsive" von vielen Webdesignern missverstanden zu werden und mit "nur für mobil" übersetzt zu werden. Man findet mittlerweile zahlreiche Seiten, die zur Nutzung mit Touchscreens optimiert sind und dadurch bei Mausbenutzung (als v.a. die "Desktop-Zielgruppe") unglaublich nervig machen. Heutzutage muss man sich mit zahlreichen Klicks durch Menüs durchboxen, durch die man sich früher noch per Hover schnell ans Ziel kam. One-Click? Heute leider nicht mehr!

- Menü-Design: Da muss ich mich schon fast wiederholen... Nein, leider sehe ich viel zu oft nur noch Hamburger, auch in der Desktop-Variante. Full Menu? Wird einfach abgeschafft :-((

- Hero Image: Bevor man irgendwelche Informationen lesen kann, muss man erst mal plakatgroße Bilder wegscrollen. 1. völlig überflüssig, 2. (Text-)Content is not king, 3. Seiten werden extrem austauschbar und verlieren optisch an Individualität :-(

- Riesige Schriftarten und viiiiiiiel Whitespace: Ja, der neue Trend heißt: Lasst den User scrollen bis sein Finger abfällt. Übersichtliche, kompakte Darstellungen werden durch vereinzelte Elemente mit möglichst viel Luft dazwischen ersetzt. Eigentlich das Gegenteil der Flat-Design-Idee.

Da bei all diesen überflüssigen Trends die Usability auf der Strecke bleibt, muss ich als User versuchen, die Probleme irgendwie selbst zu lösen. Mittlerweile habe ich einige Seiten kleiner gezoomt (erfreulicherweise merkt sich der Firefox diese Seiten und zeigt sie bereits kleiner an), um so halbwegs den Überblick zu behalten. Und ich schreibe konsequent die Webseiten-Betreiber an mit der Aufforderung, ihr rein Trend-gesteuertes (und nicht Nutzer-gesteuertes) Design zu überdenken. Dem Paradigma "UX Design" steht das "Mobile Trend Design" gegenüber.

Abschließend nur ein paar Beispiele für Seiten, auf die o.g. Trends weitgehend zutreffen:
- http://www.hochschule-heidelberg.de (sowie zahlreiche andere SRH-Hochschulen)
- http://reiseauskunft.bahn.de/
- http://de.voyages-sncf.com/de/
- http://www.hood.de

Was sagt ihr zu diesen Trends bzw. dazu, dass manch offensichtlich nutzerorientierte Techniken missachtet werden?

Antworten

Pixelwerker
Pixelwerker

Auch wenn der Artikel nicht ganz so konkret wird, spricht er doch ein wichtiges Thema an: selbst Webdesign unterliegt Trends und damit einem Wandel davon was "schön" bzw. ästhetisch ist.
Und das ist ziemlich spannend. Ich hab versucht in meinem Blog-Artikel etwas konkretere Webdesign Trends für 2016 aufzuzeigen, falls sich jemand noch weiter dafür interessiert: http://pixelwerker.de/webdesign-trends-2016-kassel/
Freue mich über eure Meinung :)

Antworten

adatho
adatho

Weitere Trends sind Card-Layout, Hamburger Menus & Micro Actions...

Antworten

Nostra
Nostra

Ein Trend in 2016 wird sein, Artikel wieder vermehrt für den User statt für die Suchmaschinen zu schreiben. Vielleicht wird dann auch wieder mehr gelesen.

Antworten

E.
E.

Ich hoffe das 2016 das Scrollen ohne Scrollbalken (Oma und Opa dankt es) und Ladeanimationen (die Ungeduld dankt es) der Vergangenheit angehören werden. (Zeit zur Mediation könnte man ja hinschreiben. ;))

Und zuletzt: Ich mag die Artikel von Jonathan immer sehr!
Also hier ein großes Danke zum Jahresende für die tollen und spannenden Infos für dieses Jahr. :)

Antworten

E.
E.

Meditation, meinte ich, aber Mediation ist auch nicht schlecht. :D

Antworten

JJ180
JJ180

Die Überschrift ist falsch. "Webdesign-Trends 2012" ist passender.

Antworten

Kompaktdesign
Kompaktdesign

Ich hoffe nur, dass Ihr Euch in Bezug auf die Intros täuscht.

Auch früher waren die Betreiber der Websites die einzigen, die ihr Intro cool fanden. Für Besucher, die schnell an Informationen gelangen wollten, war das einfach nur nervig.

Auch finde ich die Überlegung etwas krank die Wartezeit für den Seitenaufbau mit einer Maßnahme zu verschönern, die selbst Wartezeit für den Seitenaufbau verursacht.

Aber das ist nur meine Meinung dazu.

Antworten

Stephan
Stephan

hallo Redaktion,

ein ewig langer Text zu "Trends 2016", mit dem Fazit: "Trends kennen auch kein Jahresende, sie kommen und gehen" - ist das Euer Ernst?

Spätestens nach dieser Erkenntniss hätte ich entweder die Headline überdacht oder den Sinn des Artikels in Frage gestellt.

Meiner Meinung nach wird es nie einen generellen Design-Trend geben, weil man bei der Gesamtbetrachtung die Vielzahl verschiedenster Brachen berücksichtigen muss. Manche Designs funktionieren bei bestimmten Branchen nicht, oder machen deren Seitenbetreiber unglaubwürdig gegenüber dem Kunden/Betrachter. Daher kann es nur Design Trends für jeweils bestimmte Branchen und Gewerke geben, nie aber eine Verallgemeinerung! Der Artikel handelt auch eher von technischen Entwicklungen und die haben zunächst nichts mit Design zu tun. Oder: Designer und Entwickler sind zwei unterschiedliche Berufe, wie etwa Buchhalter vs Koch.

"Design" fängt für mich da an, wo technische Möglichkeiten nicht für ihren Selbstzweck, sondern gewinnbringend für das zu designende Objekt eingesetzt werden. Aber Ihr habt dieses Naturgesetz auf den Kopf gestellt. Eine bessere Überschrift könnte meiner Meinung nach "Technik Ideen für 2016, zur Unterstützung Eures Designs" oder "Was Ebtwickler 2016 ihren Designern zu bieten haben" sein.

In diesem Sinne, guten Rutsch

Stephan

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen