Im Zuge des Relaunch von Blogprojekt.de habe ich mich mal wieder verstärkt mit aktuellen Entwicklungen im Webdesign beschäftigt.
Man sollte mit den neuesten WebDesign-Trends allerdings vorsichtig sein. Nicht jeder Trend ist auch wirklich ein Fortschritt und man muss sicher nicht alle neuen Ideen sofort auf der eigenen Website umsetzen.
Im Folgenden stelle ich 8 aktuelle WebDesign Trends vor und schildere dazu meine Meinung. Zudem gibt es Links zu Beispielen.
Am Ende des Artikels folgt eine Umfrage und natürlich könnt ihr eure Meinung in den Kommentaren hinterlassen. Ich würde mich freuen.
8 aktuelle WebDesign Trends
Alphabetische Auflistung von 8 aktuellen Trends im WebDesign. Dazu gibt es jeweils meine persönliche Meinung und weitergehende Links mit Beispielen.
- Backgroundbild
Immer häufiger stoße ich auf Websites, die ein bildschirmfüllendes Hintergrundbild nutzen. Das sieht sogar recht schick aus und macht die Website etwas unverwechselbarer.Dass dies jedoch auf die Ladezeit der Website geht, ist auch klar, selbst wenn man bei der Dateigröße viel optimiert.
Ganz aktuell ist der Trend Videos als Hintergrund zu nutzen. Da ist aber oftmals die Qualität eher mittelmäßig, da die Dateigröße natürlich eine noch wichtigere Rolle spielt. Für Aufmerksamkeit wird aber auf jeden Fall gesorgt.
Ein paar schöne Beispiele finden sich auf line25.com.
Bildschirmfüllende Hintergrundgrafiken finde ich sehr gut, wenn es thematisch passt. Bei Videos als Hintergrund bin ich eher skeptisch.
- Flat Design
Flat Webdesign ist in aller Munde und überall sieht man Tipps und Tutorials. Dieser Trend geht weg von den Web 2.0 Designs der letzten Jahre und vereinfacht die Präsentation.
Das sorgt für mehr Übersichtlichkeit und einem aufgeräumten Eindruck.
Ich persönlich finde Flat Designs sehr ansprechend, weil sie unter anderem weniger vom eigentlichen Inhalt ablenken. Auf Blogprojekt habe ich zwar kein reines Flat Design verwendet, aber vom Ansatz her geht es in diese Richtung.
Weitere Beispiele findet ihr auf vandelaydesign.com.
Ich mag die Richtung, die mit Flat Design eingeschlagen wird. Es wirkt weit professioneller, aber dafür teilweise auch ein wenig emotionslos und kühler. Deshalb sollte man darauf achten, dass es zur eigenen Website passt.
- Infinite Scrolling
Man kennt es von Google+, Tumblr und einigen anderen Websites. Statt nach einer bestimmten Anzahl von Artikeln oder Beiträgen einen “zu Seite 2” Link drin zu haben, laden beim Herunterscrollen automatisch weitere Inhalte nach.Das kann sehr angenehm sein, da man nicht immer wieder umblättern muss. Allerdings sehe ich auch Nachteile.
So macht es für Website-Betreiber schon Sinn eine Blätter-Funktion drin zu haben, besonders wenn Sie mit Werbeeinblendungen Geld verdienen. Zudem macht man damit eine sinnvolle Nutzung des Footers nahezu unmöglich, weil dieser durch neu geladene Beiträge immer wieder nach unten verschwindet.
Wie man in WordPress ein Infinite Scrolling realisiert, erfährt man auf elmastudio.de.
Auf Social Network Sites und ähnlichen Angeboten mit vielen Meldungen und kurzen Beiträgen finde ich das ganz nützlich. Auf normalen Websites oder Blogs meist aber eher störend und nicht ideal.
- Long Shadow
Nach den Trends Glossy und 3D ist mit den Long Shadows ein weiterer Webdesign-Trend da. So werden z.B. immer mehr Button/Icon-Sets angeboten, die auf Long Shadow setzen.Dabei wird also ein besonders langer Schatten eingebaut, der durchaus reizvoll aussieht.
Weitere Infos und Beispiele finden sich auf hongkiat.com.
Sicher kein riesiger Trend, aber damit kann man einer Website schon einen eigenen Touch geben. Allerdings muss dies zum Design insgesamt passen und da habe ich dann doch meine Zweifel.
- Metro Design
Das Kachel-artige Design stammt von Microsoft und wurde mit dem Windows 8 Phone eingeführt. Mittlerweile ist dieses Design auch auf dem Desktop nutzbar, aber bei weitem nicht so beliebt.Wenig überraschend hat sich dieser Designtrend auch im Webdesign niedergeschlagen und es gibt eine Reihe von Websites, die ihre Inhalte in Kacheln präsentieren.
Teilweise wird dies mit Flat Design kombiniert.
Beispiele gibt es auf 101webdesigns.com.
Während ich es auf dem Smartphone sehr gut fand, sehe ich das Metro Design auf Websites eher skeptisch. Je nach Inhalt einer Website kann es zwar durchaus Sinn machen, aber meist finde ich es dich eher unübersichtlich, als hilfreich.
- Minimalismus
“Einfacher” ist sicher ein Trend im Web. Neben dem Flat Design tendieren viele Webdesigner mittlerweile zu geradezu minimalistischen Webdesigns.Dieser als “Minimalismus” bezeichnete Trend kommt aus der Kunst der 60 Jahre.
Hauptvorteil dieses Trends ist die Präsentation der Inhalte an erster Stelle. Fast nichts lenkt davon ab.
Zudem wirkt sich dies positiv auf die Ladezeiten aus, da kaum Bilder geladen werden müssen.
Beispiele findet ihr auf designinstruct.com.
Ich tendiere selber derzeit auch eher zu einfacheren Layouts, um die Inhalte mehr in den Vorgrund zu rücken und weniger Ablenkung zu bieten. Wenn es zu einfach wird, leidet jedoch der Wiedererkennungswert.
- Parallax WebDesign
Beim Parallax WebDesign arbeitet man mit verschiedenen Ebenen, die sich beim Scrolling (horizontal oder vertikal) unterschiedlich schnell bewegen oder sonstige unterschiedliche Effekte haben.Dadurch entsteht der Eindruck einer gewissen Tiefe, was sehr schön aussehen kann.
Richtig eingesetzt kann man zudem den Inhalt der Website visuell damit unterstützen.
Beispiele für Parallax WebDesign gibt es auf creativebloq.com.
Ich finde diesen WebDesign-Trend optisch sehr ansprechend und wenn er gut eingesetzt wird, ist es auch inhaltlich sinnvoll. Allerdings macht es nur Sinn, wenn man etwas visuell darstellen muss. Für klassische Text-Angebote, wie z.B. diesen Blog hier, ist es weniger geeignet.
- Responsive WebDesign
Nicht unumstritten ist das Responsive Design unter Webentwicklern. Dieses ist so gestaltet, dass es sich automatisch an das Ausgabegerät anpasst.
Viele sind der Meinung, dass dies der optimale Web ist, um Websites sowohl auf dem Desktop, als auch auf mobilen Geräten anzeigen zu lassen.
Andere wiederum sehen eher die Einschränkungen, wenn man so viele verschiedene Endgeräte in einem Design beachten muss.
Beispiele für Responsive Designs finden sich auf socialdriver.com.
Ich bin ein Fan von Responsive WebDesign und habe für Blogprojekt ein ebensolches ausgewählt. Natürlich ist es etwas schwieriger spezielle Features z.B. nur für das Desktop zu realisieren, aber es ist möglich.
Flat Webdesign ist in aller Munde und überall sieht man Tipps und Tutorials. Dieser Trend geht weg von den Web 2.0 Designs der letzten Jahre und vereinfacht die Präsentation.
Nicht unumstritten ist das Sicher gibt es noch mehr WebDesign-Trends, die dann aber oft noch mehr ins Detail gehen und nur bestimmte Website-Elemente betreffen.
Welche man von den oben genannten selber nutzt, hängt vom Einzelfall ab und wie sinnvoll man es einsetzen kann. Keinesfalls sollte man es nur um den Effekt willen machen, sondern es sollte den Besuchern einen Vorteil bringen.
Umfrage
Welche WebDesign-Trends findet ihr gut?
- Responsive WebDesign (63%, 102 Stimmen)
- Flat Design (50%, 82 Stimmen)
- Minimalismus (40%, 66 Stimmen)
- Backgroundbild (29%, 47 Stimmen)
- Parallax WebDesign (16%, 26 Stimmen)
- Infinite Scrolling (14%, 23 Stimmen)
- Metro Design (11%, 18 Stimmen)
- Long Shadow (10%, 16 Stimmen)
- Keinen davon (2%, 3 Stimmen)
Teilnehmerzahl: 163 (max. 8 Stimmen)
WebDesign Book of Trends
Wer noch mehr Beispiele und ein paar weitere WebDesign-Trends entdecken möchte, dem empfehle ich das kostenlose eBook WebDesign Book of Trends.
Die Darstellung der Beispiele ist zwar nicht optimal, aber man kann sich durch viele Beispiele zu den verschiedenen WebDesign Trends wühlen.
Wer wir sind und wie wir arbeiten. In unserem Büro im Zentrum von Köln arbeiten gegenwärtig sieben ausgebildete Redakteur/innen an der Ausarbeitung erstklassiger Inhalte, auf die du dich verlassen kannst. Sämtliche Artikel werden nach dem Vier-Augen-Prinzip publiziert: Nach Fertigstellung der Rohfassung werden die Texte von (mindestens) einem/r anderen Redakteur/in auf orthografische und inhaltliche Richtigkeit hin überprüft.
Diese Seite ist ein Angebot der 4pub GmbH mit Sitz in Köln. Wir haben uns auf den Betrieb hochwertiger redaktioneller Online-Portale spezialisiert und berichten stets redaktionell unabhängig.
- Danke für 16 tolle Jahre - 13. Juli 2023
- So erstellst du deine erste Newsletter-Mail in 10 Schritten mit CleverReach - 13. Juli 2023
- Die 5 besten Features des Amazon Affiliate WordPress Plugin – AAWP - 12. Juli 2023
Wir verwenden auch sehr gerne ein Theme mit Parallax- UND Responsive-Design – und sind sehr zufrieden mit den Ergebnissen auf unseren eigenen Seiten, ich denke es ist ein Spagat zwischen Schön und Nützlich, den man aber machen sollte…
sehr schöne Übersicht. Zum Thema Responsive Webdesign kann ich nur das Thesis Theme empfehlen. Neben vielen Vorteilen bietet es auch eine sehr sehr geringe Ladezeit.
LG
Patrick
Ich habe versucht, auf ET-Tutorials.de ein sehr schlichtes Design, also eher ein Flat-Design zu realisieren.
Hierzu habe ich Thesis verwendet.
Thesis in Verbindung mit einem schlichten Design sollte für gute Ladezeiten sorgen.
… und beim Design und Technik nicht vergessen, es gibt noch unglaublich viele “Surfer” mit dem Internet Explorer 6, 7 und 8, die auf Webseiten zugreifen und dann von Microsoft eigenartige Meldungen angezeigt bekommen, aber nicht die Webseite!
Technik kann nicht Selbstzweck für “Technik-Gurus” sein.
Also responsive ist definitiv ein Muss. Ansonsten mag ich es auch gerne recht schlicht. Dieses komplett Minimalistische, was man öfter sieht finde ich aber dann zu viel des guten.
Was ich auch nicht schön finde ist dieser Trend mit riesiger Schrift (insbesondere bei Überschriften).
Minimalismus geht über alles. Er steigert die Performance, erhöht meist die Conversion-Rate und sieht, für meine Begriffe, auch immer noch am besten aus. Nichts nervt mich mehr, als ewig Scripte, Bilder etc. laden zu müssen.
Auf Blogprojekt.de wird man jetzt von 4 Spalten erschlagen! Und ich Frage mich auch ob die horizontale Navigation die man als erstes ins Auge nimmt wirklich die “wichtigsten” Links enthält. Was bringt ein schönes Design wenn die Inhalte an der “vermeintlich” falschen Stelle sind… Na ja ich kenn die Trafficzahlen der Einzelnen Seiten nicht…
@Peer: Guck dir bitte mal den Blog von ifun.de an. Dieser ist sehr übersichtlich gestaltet insbesondere was die Artikelseiten angeht!
Ich weiß nicht warum alle beim Versuch Websites im Stil der Modern UI(ehem. Metro) umzusetzen immer die ganze Startseite mit Kacheln vollkleistern.
Ich finde die Darstellung von Texten innerhalb der Windows 8 Apps von Microsoft sehr ansprechend und auch zu Minimalismus neigend.
Ich würde mit Metrodesign eher das Vertikale Scrollen und die typischen runden Pfeilbuttons von Windows 8 verbinden als Kacheln.
Die kommen in Windows 8 ja nicht bei der Präsentation von Inhalten zum Einsatz.
Ich stimme für flat Design.
Mit deinem Umfrageplugin stimmt aber was nicht. Mir werden 72% bei responsive Design, 54% bei Flat Design, 46% bei minimalistic usw. angezeigt.
@ Sele
Da jeder Umfrage-Teilnehmer bis zu 8 Optionen bei der Umfrage ankreuzen kann, sind es insgesamt natürlich in der Summe mehr als 100%.
Die Prozentwerte geben einfach an, wie viel % der Umfrageteilnehmer die jeweiligen Trends gut finden.
Ich finde Flat-Design prinzipiell gut, aber es hat auch Nachteile. So macht es eine Website nicht unbedingt besser bedienbar. Flache Buttons sehen einfach nicht mehr aus wie Buttons, dabei sollte man als User direkt erkennen, worauf man klicken kann.
Da bei allen Trends das Wichtigste die Usability ist, sollte man Flat-Design daher nicht unkritisch sehen.
Danke für die Anregungen, da ich jetzt meinen eigenen Blog starten will, war dies genau das richtige für mich. Am Liebsten würde ich ja etwas mit Bildergalerien machen, mal sehen!
Also ich habe mich beim Redesign meiner Seite bewusst für absoluten Minimalismus entschieden und Parallax- und andere Effekte ausgeblendet und den Fokus mehr auf den Inhalt der Seite wie auf deren Design gelenkt. Bis jetzt – so das Feedback meiner Kundinnen – eine gute Entscheidung.
Schöne Übersicht über die verschiedenen Webdesign Trends. Gefällt mir sehr gut. Mein persönlicher Favourit ist ja immer noch Minimalismus. Das Layout ist nicht vollgeklatscht, man behält problemlos Übersicht und genug Weißraum lassen spielt meiner Meinung nach auch immer eine ganz wichtige Rolle fürs Auge.
Hintergrundbilder habe ich zuletzt auch öfters beobachten können. In den meisten Fällen wirkten sie sehr gut, sofern die Farbwahl harmonisch war.
Selbst bin ich momentan ein ziemlicher Fan von Flat Design.
Für Long Shadows habe ich noch keinen passenden Verwendungszweck gefunden.
Responsive Design ist heutzutage meiner Meinung nach ein absolutes Muss. In diesem Sinne hoffe ich dass sich dieser Trend verfestigen wird..
Hi Peer,
schöne Auflistung. Im wesentlichen ist doch mit Trends immer so, dass sie zum eigenen Projekt passen müssen und nicht reiner Selbstzweck sein dürfen. Aber gerade den Eindruck bekommt man leider häufig.
Das ist ein echt super Überblick!
Es macht Spass überall durchzustöbern um zu sehen, was sich andere haben einfallen lassen. Ich persönlich finde, dass Responsive Design sich durchsetzen muss. Es schränkt zwar ein und ist für maximales Design sicher hinderlich, aber mit meinen mobilen Geräten verlasse ich sogar Seiten, ohne diese Unterstützung zu schwer zu handhaben sind.
Danke für die schöne Aufstellung!
Gruss,äjens
Responsives Webdesign ist für inhaltschwere, große Webprojekte immer ein Problem, das separat optimiert werden muss. Ob nur über CSS-Kniffe oder Scripting sei mal dahingestellt. Für kleine Webseiten ist es ideal, schnell aufgesetz und perfekt geignet den Pflegeaufwand zu minimieren. RWD ist aber definitiv ein Trend.
Responsives Design macht für mich nur bei Blogs, News-Seiten und Infoseiten (Z. B. Wetter-Seiten, Wikis) Sinn. Größere Webprojekte, Landingspages und Shops müssen meines Erachtens nicht unbedingt responsiv sein.
Aus meiner Sicht könnten eingie Seiten und vorallem Blogs es etwas mit dem Design konservativer verhalten. Wenn der Content in den Hintergrund gerät, dann sollte man sich überlegen, ob man im Web nicht falsch ist.
Wobei ich mir die Frage stelle – aufwendiges Design bedeutet doch auch langsame Webpage?
Ich finde die bildschirmfüllenden Hintergründe spitze. Da wirkt eine Webseite gleich stimmungsvoller und interessanter… Die Beispiele auf line25.com beweisen es ja.
ein anderer trend sieht so aus, daß viele user mobil auf seiten einsteigen und sie sich zuhause in ruhe nochmal anschauen (laut james schramko und google), weshalb responsive absolut sinn macht. schnelle ladezeiten sind auch sehr wichtig, ebenso: wenig ablenkung, davon gibt’s nämlich schon genug. minimalism + responsive rulez!
Wir haben bewusst beim dem Projekt uhd-tv.info auf das Parallax-Design gesetzt – haben es aber aktuell noch nicht zu sehr “übertrieben” erstmal muss Content auf die Seite, bevor wir sie “schön” machen werden…
Den Parallax Effekt favorisiere ich. Ich benutze Ihn auch den meisten meiner Seiten, er wertet eine Webseite direkt sichtbar auf!
Ein weiterer Trend sind und bleiben “OnePager”. Auch wenn ich Sie generell SEO-technisch für nicht ganz genial halte, muss ich eingestehen, dass sie für einige Projekte und für die Präsentation einiger Unternehmen gegebenenfalls doch gar keine so schlechte Idee ist.
Insbesondere für eine bestimmte Nische macht dass ganze ggf. Sinn.
Recht schnell und entspannt bekommt man da mit dem Divi-Thema auch schöne Ergebnisse hin. Auch Spielereien wie Parallax sind dort machbar.
Viele Trends kommen einfach nie aus der Mode und das ist auch gut so!! Besonders den Minimalismus finde ich immer noch sehr interessant. Nächstes Jahr sollen laut chris-hortsch.de/webdesign-blog/innovative-webdesign-trends-2021.html knallige Neon Farben im Trend liegen…doch auch die lassen sich (wenn sie sparsam und gekonnt eingesetzt werden) super mit dem Minimalismus verknüpfen – oder?
Liebe Grüße
Flyod
Sorry, aber Jahrestrends beim Webdesign, wie in der Modewelt, sind quatsch. Webdesign muss langfristig Sinn machen und vor allem das Ziel einer Website unterstützen.
Natürlich will man auch auffallen, aber wenn man sich die vielen erfolgreichen Websites da draußen anschaut, so haben die vor allem eine gute Usability und sind wirklich nützlich. Da geht es nicht darum einem aktuellen Webdesigntrend hinterher zu rennen.