Beliebte Webdesign-Trends, die du unbedingt im Auge behalten solltest

Webdesign Trends Es macht denke ich jedem Webdesigner Spaß, nach neuen Inspirationen und Webdesign-Trends zu suchen und sich die Arbeiten anderer Designer anzuschauen. Daher haben wir eine kleine Übersicht unserer aktuellen Lieblings-Webdesign-Trends als Inspirationsquelle für deine nächsten Webdesign-Projekte vorbereitet. Welche der Design-Trends gefallen dir besonders gut und welche weiteren aktuellen Webdesign-Trends sollten deiner Meinung nach unbedingt noch in dieser Auflistung erwähnt werden?

1. Fixe Navigationsleisten

Derzeit extrem beliebt sind fixe Navigationsleisten oder Navigationselemente wie Menü-Buttons oder Logos. Zwar gibt es unter den mobilen Browsern noch einige schwarze Schafe, die fixe Elemente (CSS position:fixed) nicht optimal unterstützen, aber auf Desktop-Browsern funktioniert der Effekt einwandfrei und wird dementsprechend gerne eingesetzt.

Designed to Move

Designed to Move

Plain

plainmade

Weightshift

weightshift

2. Off-Canvas Elemente in Desktop-Browsern

Off Canvas ist definitiv ein heißes Thema im responsive Webdesign (z.b. neu im Einsatz bei Mashable oder The Next Web). Doch warum sollte man eigentlich nicht auch auf Desktop-Browsern Platz optimal nutzen und gewisse Webseiten-Informationen in Off-Canvas-Bereichen unterbringen? Diese Webseiten zeigen, wie der Trend in der Praxis aussehen kann.

A Memoir Project

amemoirproject

The Skybox

skybox

Teehan + Lax

teehanlax

3. Split-Screen Webdesigns

Wunderbar experimentell und aktuell immer beliebter ist der Trend, Webseiten quasi in zwei Hälften zu teilen und unabhängig scrollbar zu machen. Diesen, nennen wir es einmal Split-Screen Webdesign-Trend kannst du dir auf den folgenden drei Webseiten anschauen.

Coffee Surfing

coffeesurfing

Seidenstrasse

seidenstrasse

Valentina Gallo

valentinagallo

4. Riesige Headerbilder mit Typografie

Okay, große Headerbilder sind sicher nichts neues im Web, aber inzwischen gibt es einen deutlichen Trend zu riesigen Headerbildern, die meist den kompletten Bildschirm einnehmen. Durch die großen Bilder kann ein schöner, atmosphärischer Effekt erzieht werden. Kombiniert werden die Headerbilder meist mit einem mittig gesetzten Intro-Slogan.

The Brooklyn Soap Company

bklynsoap

Demi Creative

demicreative

Osborn Barr

osbornbarr

5. Große, Full-Screen Slider

Neben riesigen Headerbildern werden auch die Slider immer größer und die Slider-Bilder werden meist als Fullwidth-Bilder umgesetzt. Auch hier erzeugen die Bilder als Einstieg in die Webseite viel Atmosphäre.

AÃRK Collective

aarkcollective

Neopolitan Clothing

neopolitanclothing

Substrakt

substrakt

6. Großzügige Single Page-Websites

Ein modernere, aktuell sehr beliebter Trend sind auch großzügige, Single-Page Websites, die mit sehr viel Weißraum arbeiten. Dieser Webdesign-Trend kommt oft für die Präsentationen von Produkten, Apps und Web-Services zum Einsatz.

Eden

eden-made

Negative

negativelabs

SpellTower

spelltower

7. Responsive Grid-Layouts

Aktuell auch super-beliebt sind großzügige, asymmetrisch angelegte Grid-Layouts. Dieser Webdesign-Trend eignet sich auch sehr gut für responsive Webdesigns, da die Grid-Elemente auf kleinen Bildschirmen wunderbar untereinander „gestapelt“ werden können.

Etch

etchapps

Future Insights Live 2013

futureinsightslive

Karl Anders

karlanders

Wie gefallen dir die Webdesigns und welche der Design-Trends findest du besonders modern? Über dein Feedback und weitere Webdesign-Tipps freuen wir uns sehr!

44 Kommentare

  1. Hallo Ellen, ein sehr schöner Artikel der mir sehr gefallen hat mit einigen wunderschönen Design Ideen :) für Webseiten. Ist doch bestimmt schon wieder ein neues Theme in der Mache ;)
    Besonders gut finde ich die Fixen Navigationsleisten in Verbindung mit Off-Canvas, also praktisch das man nicht Navigation oder ähnliches einblendet sondern das es Artikel oder Seiten sein können die da von der Seite reinfahren. Ist bestimmt schwierig umzusetzen, hab da keine Ahnung von.
    Auch gefallen mir große Webseiten mit Typografie und einer Art Magazin Style wie bei der neuen „Norr“ Webseite das der Fall ist zum Beispiel.

    Seit ich dein Baylys Theme verwende lese ich gerne hier bei dir im Blog, gibt ja ne Menge zu entdecken ;)

  2. Hey Ellen! Dankeschön für die tolle Zusammenstellung und die schönen Design-Beispiele! Ich bin froh, dass das Web gestalterisch immer schöner wird. Gleichzeitig frage ich mich aber auch, ob der Trend bald wieder zu Webseiten gehen wird, die besser konvertieren.

    Momentan scheint es so, als müsste der Benutzer immer mehr arbeiten und interagieren, um letzten Endes die Inhalte zu bekommen, um die es eigentlich geht.

    Die Emotionen, die man bei einer Webseite spürt, die klasse mit großen Bildern und viel Spielereien gestaltet ist, sind zwar schön, aber ich habe das Gefühl, dass die Wirtschaftlichkeit vieler Seiten für die Ästhetik geopfert wird.

    Besonders im mobilen Bereich gibt es momentan nur selten Lösungen, die ästhetisch und wirtschaftlich zugleich sind. Oft ist es ja dann doch nur ein ewiges Scrollen von langen Inhalten, die mit ein paar Grafiken aufgepeppt sind. Ich glaube das geht noch besser und bin sehr gespannt, wie sich das noch entwickeln wird!

    Trotzdem tolle Sammlung und nochmals danke! :)

    Beste Grüße

    Artur

  3. Hallo,
    als normaler User finde ich die Seiten größtenteils nicht besonders benutzerfreundlich.
    Der übermäßig groß eingesetzte Weißraum zwingt mich zum ständigen scrollen und nervt einfach nur. Die großen Bilder machen sie Seiten z.T. ziemlich langsam und das schon auf einem normalen Desktop Rechner, auf mobilen Geräten wird das wohl kaum besser aussehen. Sehr nervig finde ich auch die Slider die ständig neue Bilder einblenden und die man nicht stoppen kann, schrecklich.
    Genug gejammert, bye

  4. Hi!

    Tolle Übersicht … schön wären noch Hinweise zu den einzelnen Trends, welche Themes dazu passend zu erwerben sind … für WordPress etc.

    Danke
    Gregor

  5. Das Single-Page-Konzept finde ich sehr attraktiv. Ich plane seit einigen Monaten ein neues Projekt und würde da gern so etwas verwenden. Wollt ihr nicht mal so ein Theme bringen?!

  6. Liebe Ellen,
    das ist ein schöner Beitrag. Ich finde die geteilten Bildschirmseiten wunderbar und danke Dir für den Tipp. Wann gibt es dazu die ersten WordPress Themes?
    Liebe Grüße
    Dörte

  7. Ich finde die vorgestellten Trends optisch auch ausgesprochen schön – Aber zum Teil von der Usability her eher unpraktisch.

    Große Slider, die erst einmal den Bildschirm „bedecken“, bevor Inhalte geliefert werden und zum scrollen zwingen – Da kann ein Interessent schon weg sein, weil er eben nicht schnell die gewünschten Informationen findet. Meinen Kunden rate ich davon eher ab – auch wenn’s zugegebenermaßen sehr hübsch aussieht.

    Mit den Single-Page-Seiten kann ich mich auch als User so überhaupt nicht anfreunden. Ich finde es sehr schwierig, auf solchen Seiten gezielt nach Informationen zu suchen. Ich bin gespannt, ob sich das durchsetzen wird.

  8. ich muss gestehn ich kann die fixen leisten überhaupt nicht leiden. die „riesigen headerbilder“ sind anfangs noch super für den ersten eindruck, aber sobald man eine seite mehr als zweimal besucht nervig. super sliders sind super und die klaren single pages geben einem das gefühl sich ganz mit dem produkt auseinanderzusetzen, also tiptop. gridview ist sowieso klasse wenn man man einen schnellen überblick bekommen will.

  9. Moin Ellen,

    schicke Sachen dabei und auf jeden Fall einige interessante Trends. Und wie das fast immer mit Trends ist, taugen sie nicht immer und in jedem Fall für die Masse. Sollen sie ja auch gar nicht unbedingt. Das ist wie mit Avantgarde in der Mode. Die ist auch nicht massentauglich, aber sie zeigt Trends auf und einiges findet später Einzug in die Massenmode.

  10. Hallo Ellen,
    dein Newsletter ist in meinem Spam gelandet. Dabei freue ich mich immer schon auf deine Beiträge!

    Unter den vielen Trends gefallen mit besonders die unendlichen Seiten mittels Wischeffekt. Sobald die Zeit da ist, werde ich mir so eine Seite bauen. Die Anwendung ohne Unterseiten ist ja prima für Tabletts und Smartphones geeignet.

    Welcher Anwender welchen Seitentyp bevorzugt, ist ja Zielgruppenabhängig. Viele kleine Firmen haben viel zu große Webseiten, verschachtelt und mit zuviel Informationen. Ich stehe eher für Klein und Fein, das ist wohl ein Wandel und das fertige Design für meine „neue Webseite“ wartet schon an der Pinnwand auf Umsetzung.

    Vielen Dank für deine tolle Recherche und die wirklich guten Tipps!

  11. Webdesign entwickelt sich entlang technischer Neuerungen. Das muss so sein, experimentieren macht Spass. Fixierte Navigationsleiste gab es zwar schon früher, aber man sieht sie jetzt so häufig, weil viel mit Twitter Bootstrap herumgebastelt wird.

    Nicht alles was machbar ist, ist auch sinnvoll. Erinnert sich noch jemand z.B. an durchlaufende JavaScript-Nachrichtenticker oder an üppige Flash-Intros? Noch heute wird man von Kunden mit Jacob-Nielsen-Usability-Weisheiten von 1995 gequält („externe Links müssen mit einer separaten Seite öffnen, weil sonst der Besucher die Website verlässt“), die sich im Zeitalter von Smartphones und Tab-Browsern längst überlebt haben.

    Es hat seinen Grund, warum horizontale Navigatonsleisten zum Standard geworden sind, und meist mit „Home“ beginnen und mit „Kontakt“ aufhören. Dreht man die Reihenfolge um, entsteht Konfusion. Die Leute wollen keine neue Navigation erlernen. Sie warten, dass jede Website so funktioniert wie sie es gewohnt sind. Daraus entsteht Konvention.

    Websites (nicht alle) sind in erster Linie Informationsangebote. Die Besucher wollen möglichst schnell an die Information, nach der sie suchen. Ich habe Leute an einer Off-Canvas-Navigation scheitern sehen. Von den Trends bleibt am Ende des Tages nur das übrig, was verstanden wird und praktisch ist. Und das ist gut so.

    • Sehe ich auch so. Die gute Benutzbarkeit ist das Wichtigste. Wenn der Besucher ein wunderschönes Design vor sich hat, aber mit der Navigation nicht klar kommt oder ewig auf den Seitenaufbau wartet, ist er oder sie schneller weg als es dem Webseitenbetreiber lieb sein kann.

  12. sehr, sehr schöne Beispiele herausgesucht. Off-Canvas finde ich klasse, auch bei eurem neuen Theme sehr toll auf dem Desktop umgesetzt. Grid-Layouts waren schon immer klasse und die Zwei-Spalten-Desings sind auch eine coole Idee. Wenn man doch nur Zeit hätte, alle auszuprobieren … ;)

  13. Hallo Ellen,

    danke für diesen tollen Beitrag.

    Hättest du einen Tipp wie ich „Großzügige Single Page-Websites“ technisch in WordPress umsetzen könnte?

    Gruß Viktor

  14. Ach, diese Trends ;)

    Aus meiner Sicht ist es sehr schwer bei der Planung einer Website, sich für bestimmte Trends zu entscheiden. Welche werden im halben Jahr noch aktuell sein? Schliesslich möchte man ein Layout entwickeln, welches nahezu zeitlos ist und nicht in einem Jahr redesigned werden muss., weil man das Layout an jeder Ecke zu sehen bekommt. Klar, gibt es auch Projekte, die ein Redesign öfters vertragen müssen, die sind aber eine Ausnahme.

    Als ich die Projektseite http://optimus.io projektiert hatte, stand ich auch vor der Entscheidung: Was ist heutzutage modern? Welche Techniken haben sich durchgesetzt? Was will der Besucher sehen? Was findet er gut? Welche Informationen sind relevant? Was „wiegt“ die Umsetzung nach der Programmierung? Genügt eine Seite oder muss es unbedingt Unterseiten geben? Muss der Header fix sein? Welchen Vorteil bringt er? Ruckelt die Seite dann beim Scrollen?

    Man muss auch nicht jeden Trend gleich übernehmen bzw. umsetzen. Da müsste man schauen, welche „Modeerscheinungen“ wirklich zur Zielgruppe und zum Projekt passen.

    • Noch zumal die Trends immer schneller wechseln – zumindest ist das mein Eindruck. Gut, wenn man es schafft, ein einigermaßen zeitloses und gleichzeitig individuelles Design hinzukriegen, welches eben nicht nach eineinhalb Jahren schon wieder altbacken oder überholt aussieht. Das zu erreichen, finde ich allerdings sehr schwierig.

  15. Würde euer famoses Waipoua-Theme sicher kaufen, hätte es eine (in den Optionen deaktivierbare) fixe Navigationsleiste.

  16. Ich steh ja wirklich auch sehr auf die grafische Entwicklung in der letzten Zeit. Manches scheint mir aber fast so, als würde Flash wieder aus dem Grab auferstehen. Animated-Gifs -> Flash -> CSS3-Transitions? Bei Flash war irgendwann die Regel: Nur da, wo wirklich ein User-Nutzen damit verbunden ist, oder dezent für Werbebanner. Aktuell erleben wir aber genau diese Sinnlosigkeit wieder, von der man sich eigentlich schon verabschiedet hatte. Haltet Euch nur mal die Unmengen Code vor Augen… die Bandbreitenverschwendung. Aber wie gesagt, optisch steh‘ ich auch sehr drauf und die Verweildauer steigert es oftmals auch. Nutzt nur nichts, wenn ich nicht mit 50M/bit unterwegs bin. Page-Speed-Optimierung wird ebenfalls zur Mega-Herausforderung. Wollte das nur mal so in den Raum gestellt haben. Klasse Zusammenstellung jedenfalls.

    • Tja, das ist immer das Problem: eine hohe Geschwindigkeit zu erreichen bei trotzdem nicht zu schäbig komprimiertem Bildmaterial. Sicherlich kann man an verschiedenen weiteren Stellen was rausholen, zum Beispiel CSS schlank halten, CMS mit gutem Caching verwenden (oder ganz ohne CMS und Datenbank arbeiten?), JavaScript minimieren, Requests gering halten. Trotzdem: leichtgewichtiges Bildmaterial ist für mich immer oberste Regel.

  17. Hallo Ellen,

    schön zum Angucken. Bis auf die „fixe Navigationsleiste“ aber alles nur sehr schwer für Websites anzuwenden, die mehr sein sollen, als Reklametafeln oder Portfolio-Sammlungen. Viel nützlichen Inhalt bekommt man mit diesen trendigen Designs nicht rüber. Unter SEO-Gesichtspunkten sicher bedenklich. Und all diese riesigen Bilder auf dem Smartphone?

  18. http://bootswatch.com/united/

    Ist zwar Bootstrap, finde die Idee aber ganz nett: eine fixe Navigationsleiste und eine zweite dazu, die aber erst fixiert wird, wenn man nach unten scrollt. Ist natürlich nicht so schön wie ein Premium WP Theme, aber sehr funktional.

  19. Hallo,
    nette Trendauflistung, bin jedoch der Meinung, dass viele Trends für vieles nicht so richtig tauglich sind.
    Gut, Mode, Photographen, edles Einzelprodukt, Parfüme u.ä. Da können die Webdesigner sich so richtig austoben und spielen und es ist dann ja auch nichts dagegen zu sagen.
    Seiten die Informationen schnell und gezielt, in größerer Anzahl vermitteln wollen und müssen, sollten solchen Trends nicht unkritisch folgen. Orientierungs – Bildchen als Wegweiser und wissen wo bin ich ist was anderes und kann mit dem z.B. Waipoua gut umgesetzt werden und eine horizontale Navigation habe ich auch noch.
    Da die „neuen“ User immer älter werden, teste ich im kleineren Privatkreis, was geht und was geht weniger. Off-Canvas-Navigation z.B. ist zwar auch schick, jedoch testet das mal ab 50++…
    Da hätte ich mir beim Waipoua z.B. einen „Big“ Footer gewünscht(den ich mir jetzt selber reingebastelt habe). Letztlich gesagt ist nicht der Trend entscheidend, sondern das Produkt und die Zielgruppe. Ein Trend auf einer Unterseite einzusetzen wäre auch noch eine Überlegung, wenns denn passt. Als Anregung und Überblick finde ich den Beitrag, wie fast alles von Ellen, sehr gelungen.
    Lieben Gruß Ria

  20. Schöne Übersicht. Ich denke jedoch, mal sollte auf Trends allgemein nicht blind vertrauen. In erster Linie soll das Design zum Zweck der Seite passen. Was bringt eine schicke Aufmachung wenn dadurch der Inhalt total entstellt wird :)

  21. Das sind Trends, die meiner Meinung nach in die richtige Richtung gehen. Mir gefallen die modernen Seiten immer mehr und es wirkt auch nicht so verspielt, sonder frisch und fröhlich. Und der Besucher findet sich immer besser zu recht. Toller Artikel:)

  22. Richtig genial finde ich die „Seidenstrasse“ Webseite. Für das Thema einfach die ideale Umsetzung.
    Wäre auch ideal für private Reisetagebücher. Vielleicht gibt es demnächst dazu was auf meinem Blog.

    Was ich nicht versteh, warum du „Single Websites“ mit „viel Weißraum“ gleichsetzt. Das sind für mich zwei verschiedene Bereiche.

    Gruß Matthias

  23. Also mich hat ja die Seidenstraße so richtig vom Hocker gerissen. Danke für diese gelungene Auswahl. LG

  24. Wow, danke für diese tolle Trend Übersicht! Die Single Pager fallen mir immer mehr auf! Teilweise sogar sehr gut umgesetzt, doch oft wird vergessen, WIE der User überhaupt wieder zu einer guten Führung gelangt. Ich sehe oftmals Seiten, wo ein „ToTOP“ Link fehlt, die obere Navi nicht fix am Bildrand steht usw. Da sollte man wirklich aufpassen! Denn ein User hat keine Lust vom unteren Ende der Seite wieder bis ganz nach oben zu scrollen! Da machen Hash Links Sinn oder ein einfacher ToTOP Button. Hauptsache, der User mus nicht sein Mausrad glühen lassen :)

    Single Page für mich ein klares JA! Doch bitte nur mit funktionierender Navi!

  25. Hallo Ellen,

    eine wirklich schöne und gelungene Sammlung, besonders toll finde ich immer wieder das Grid-Layout, einfach praktisch :) Die feste Navigationsleiste hat auch was, bloß schade, dass manche Browser da nicht mitspielen wollen.

    Es ist immer wieder schön neue Artikel auf elmastudio.de zu lesen!

  26. Tolle Zusammenstellung der neuesten Webdesigmer Trends! Allerdings sollte für jeden Kunden erneut überlegt werden, wieviele Trends zum Einsatz kommen, schlielich planen viele Firmen oder Unternehmer, ihr neues Webdesign für einen langen Zeitraum im Netz zu lassen. Relikte vergangener Trends können dann schnell negativ auffallen. Also nicht übertreiben ;)

  27. Da sind zwar ein paar sehr schöne Webdesigns dabei, aber auch ein paar wo ich sagen würde der Trend geht etwas schneller vorbei.
    Ich persönlich mag es Flat, wie eben auch Windows 8 Kacheln.
    Aber bei Webseiten steh ich besonders auf Inhalte. Und egal wie hübsch ein Webdesign auch ist – meist geht für so ein Design Inhalt flöten. Dann verlasse ich die Seite schnell. Parallax sagt mit gar nicht zu, aber ich komme auch vom Dorf ohne schnelles Internet. Da kann man Parallax Scrolling Webdesigns auch kaum ertragen (natürlich nur die schlecht gemachten, das ist mir klar). Auch Parallax kann schnell laden, aber meistens läd alles am Start gefühlte 5 Minuten – Bounce Rate Gaining :)

  28. Hallo, vielen Dank für die Übersicht, hat jemand Erfahrungen, welchen Einfluss diese Seiten für SEO habebn? Sind Flat-Designs schwieriger zu optimieren als Seiten mit einem klassischen Menü?

    VG,
    Björn

  29. Hallo,

    ich verfolge eure Artikel immer sehr gespannt. Auch dieser ist wieder super gelungen! Derzeit beschäftige ich mich viel mit der Präsentation datenlastiger Produkte (der Fokus wird nicht auf die Optik des Produktes, sondern auf die Eigenschaften gelegt ). Leider tun sich sehr viele Firmen schwer damit, technische Produkte dem Kunden so anzubieten, dass er das Gefühl hat, nicht von Informationen und Inhalt überladen zu werden und die Übersicht behält. Daher würde ich mich wahnsinnig darüber freuen, von euch einen Artikel darüber lesen zu dürfen

    Liebe Grüße

  30. Ein Trend ist ein Trend ist ein Trend. Der Schwerpunkt liegt aktuell klar auf DESIGN und TECHNIKEN, und weniger auf TECHNIK. Denn zuweilen hängt es ander Performance und am krassen Unterschied zur mobilen Darstellung.

    Aber einige „Trends“ gehen in jedem Fall in eine gute, hilfreiche, userfreundliche Richtung, wie FLAT DESIGN und die fixen Navigationen etc.

  31. Ich denke ein weiterer Trend, gerade da Tablets und Smartphones immer wichtiger werden gehen in die Richtung horizonzal scrollender Webseiten. Das wurde z.B. auf der Homepage von pilz-it.de gut umgesetzt, da auch ohne JavaScript noch aufrufbar.

  32. Guter Post und schöne, moderne Inspirationen. Ich denke, dass heute oft weniger mehr ist und übersichtliche und schlichte Websites beliebter sind.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *