t3n News Design

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

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

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 wichtig wird.

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

(Grafik: Shutterstock)

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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
9 Antworten
  1. von Stephan am 19.12.2015 (09:10 Uhr)

    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 Teilen
  2. von Kompaktdesign am 19.12.2015 (09:18 Uhr)

    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 Teilen
  3. von JJ180 am 19.12.2015 (12:13 Uhr)

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

    Antworten Teilen
  4. von E. am 20.12.2015 (13:21 Uhr)

    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 Teilen
  5. von Nostra am 22.12.2015 (09:12 Uhr)

    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 Teilen
  6. von adatho am 03.03.2016 (20:32 Uhr)

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

    Antworten Teilen
  7. von Pixelwerker am 18.04.2016 (19:26 Uhr)

    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 Teilen
  8. von woschfan am 28.04.2016 (11:33 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webdesign
6 Webdesign-Trends für 2016, die du kennen solltest
6 Webdesign-Trends für 2016, die du kennen solltest

Als Designer sollte man neue Trends kennen und kann durch sie auch Inspiration bekommen. Jerry Cao, UX-Designer und Content-Stratege, zeigt dir sechs Trends im Webdesign, die dieses Jahr eine Rolle … » weiterlesen

Flat 2.0: Was hinter dem neuen Design-Trend steckt
Flat 2.0: Was hinter dem neuen Design-Trend steckt

Je mehr Designer die fehlende Usability von Flat Design wahrnehmen, desto schneller hat sich ein neuer, mehr vollendeter Trend entwickelt: Flat 2.0. Wir gucken hinter den Trend. » weiterlesen

Der nächste Design-Trend: Floating-Action-Buttons und wie du sie umsetzt
Der nächste Design-Trend: Floating-Action-Buttons und wie du sie umsetzt

Floating-Action-Buttons sind ein Android-Trend – und demnächst vielleicht auch vermehrt im Web zu sehen. Wir zeigen euch, auf was ihr bei der Umsetzung achten müsst. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?