Gestalten Sie Ihre Webseite interessanter.
Sie möchten Ihre eigene Webseite weiterentwickeln und mehr Erfolg im Web? Dann sollten Sie auf jeden Fall die aktuellen Webdesign-Trends im Auge behalten. Denn auch im Jahr 2020 gibt es wieder neue Entwicklungen. Dabei werden nicht nur verschiedene gestalterische Elemente, sondern auch verstärkt technische Komponenten integriert. Wir präsentieren die 10 wichtigsten Webdesign-Trends für 2020, die man auf jeden Fall kennen sollte.
Mobile First
Das Web ist mobil. Allein in Europa haben laut Statista im Jahr 2019 über 40 Prozent der Internetnutzer ein mobiles Gerät zum Surfen verwendet. Um dieser Entwicklung gerecht zu werden, ist eine gut funktionierende, responsive, mobile Version einer Webseite elementar. Denn selbst Google stellt seinen Search-Index sukzessive auf mobile Endgeräte um. Aktuelle Trends weisen sogar darauf hin, dass Mobile First auch in der Produktion Einzug halten wird. Konzepte werden also zuerst für das Smartphone und das Tablet entwickelt, um sie dann als Desktopversion zu adaptieren. Aber der Trend geht noch weiter. Nicht nur die technische Umsetzung, sondern auch Inhalte nehmen mobile Nutzer anders wahr, weshalb mobile User Experiences angepasst werden müssen.
Ein Beispiel ist das sogenannte Hamburger Menu, das erst mit einem Klick auf die drei waagrechten Striche die gesamte Menüsteuerung enthüllt. Entwickelt wurde es für mobile Anwendungen und durch seine Einfachheit schnell auf den Desktop übertragen. Auf kleinsten Bildschirmen die volle Navigation zu ermöglichen ist das Ziel. Doch auch Desktop User profitieren: Kennt ein User eine Menüführung bereits und die Navigation der Seite bleibt auf verschiedenen Geräten konsistent, erhöhen sich statistisch Verweildauer und Interaktionsraten. Aber es bleiben nicht nur Vorteile: Sind so die Unterseiten der Menüführung nicht sofort sichtbar, braucht es einen Klick mehr, um das volle Angebot einzusehen. Daher heißt es auch hier: Seien Sie interessant.
Illustrationen, Fotos, Animationen und natürlich Videos
360° Bilder, animierte GIFs, Tiefenunschärfe und, und, und. Möchte man mit Bildern aus der Masse hervorstechen, sorgt gerade speziell für Ihre Webseite erstellter Content für einen interessanten, authentischen und ehrlichen Eindruck. Trotz Mehraufwand helfen individuelle Beiträge, dem eigenen Webauftritt mehr Persönlichkeit zu verleihen, das Image zu erhöhen und, ganz im Gegensatz zu den meisten Stockfotos, Individualität einzuhauchen. So setzen sich Bildeffekte, Animationen und Illustrationen immer mehr als Alternative zu statischem und eingekauftem Content durch. Dadurch können sich Unternehmen einzigartig präsentieren und vor allem: Ihre eigenen Geschichten authentisch erzählen.
Videos sind schon seit einigen Jahren ein wichtiger Web-Bestandteil, um für Abwechslung zu sorgen und bestimmte Zielgruppen gezielter anzusprechen. Denn gerade jüngere Nutzer schauen sich lieber ein Video an, als einen Text zu lesen. Sie sind vielfältig einsetzbar und können sowohl für die inhaltlich informative, imagetragende, als auch produkterklärende, dekorative Begleitung verwendet werden. So ersetzen kurze, sich wiederholende Videos immer öfter statische Hintergrundbilder im Header. Statistiken und Graphen werden in kleine Videos verpackt, vereinfacht dargestellt oder das Image aufpoliert. Dank Videos wirken die Homepages lebhafter, erfrischender und sorgen für Traffic. Noch dazu sind Videos auch in der SEO-Optimierung von Vorteil. Denn auch Google bevorzugt audiovisuelle Inhalt immer mehr, das freut die Crawler und bringt Sie beim Ranking nach vorne.
Der Parallax-Effekt
Parallax-Scrolling ist schon seit einigen Jahren ein wichtiger Teil von modernen Webseiten und dadurch nach wie vor aktuell. Der Parallax-Effekt erzeugt Tiefenwahrnehmung beziehungsweise Dreidimensionalität oder dient als Initialzünder für kleinere Grafiken oder Animationen beim Scrollen. Für ersteres bewegen sich Hintergrundbilder einer Seite langsamer als Bilder und Grafikelemente im Vordergrund und es wirkt, als würden sich die hinteren Bilder tiefer in der Seite befinden. Für Parallax-Animationen wird das Scrollen zum grafischen Aufbau genutzt, ähnlich eines Stop-Motion-Films – jeder Scrollpunkt hat also ein festes Bild, durch die Bewegung entsteht die Animation. Aber auch hier gilt meistens: Weniger ist mehr! Zu viele Parallax-Scrolling-Effekte können vom Inhalt ablenken oder den Nutzer irritieren. Gerade auf kleineren Endgeräten kann es schnell seine Wirkung verlieren.
Experimentelle Designs vs. Standard-Layouts
Experimentelle Layouts können mit typischen Erwartungen brechen. Das Design lockert hierbei erwartete Strukturen auf und inszeniert eine einzigartige Benutzererfahrung. Besonders beliebt ist das Broken Grid Layout, bei dem einzelne Elemente aus dem vorgegebenen Raster fallen und den Fokus auf verschiedene Aspekte lenken. Solche Konzepte sind arbeitsintensiver, erfordern mehr Fingerspitzengefühl und können den Benutzer schnell irritieren. Aber: Schon kleine Experimente setzen gezielte Akzente.
Möchte man auf jahrelang bewährte Konzepte zurückgreifen, kann man stattdessen beliebte Design-Templates verwenden. Nutzerfreundlich und dennoch variabel erfreuen sie sich durch ihre einheitliche und klare Struktur immer größerer Beliebtheit. Sie sind nicht nur wesentlich kostengünstiger und einfacher zu erstellen, sondern bestechen zusätzlich durch ihre benutzerfreundliche, einheitliche Bedienung. So kann sich der Nutzer besser auf die Inhalte konzentrieren und wird nicht von komplizierten Prozessen abgelenkt. Experimentell oder klassisch? Man hat immer eine Wahl.
Scroll-Animationen auf Single Pages
Der Trend für Webseiten, die ihre umfangreichen Inhalte auf einer einzigen Seite präsentieren, hält sich bereits mehrere Jahre. Denn User wollen lieber scrollen, als auf die nächste Seite zu klicken. Dabei sollen Scroll-Animationen und -effekte die Illusionen vermitteln, dass die Seite nicht „lang“ ist. Der Clou hierbei ist, dass man nicht einfach eine Webseite von oben nach unten durch scrollt, sondern die Seite sich immer weiter aufbaut und Inhalte mit verschiedenen Effekten nach und nach ein- beziehungsweise ausgeblendet werden.
3D-Modelle
Die ansteigende Leistungsfähigkeit von Prozessoren und Grafikkarten macht‘s möglich. In der Film- und Autoindustrie, der Architektur und dem immer schneller wachsenden Segment der digitalen Spiele kaum noch wegzudenken sind 3D-Modelle schon seit vielen Jahren ein essentielles Gestaltungsmittel. Auch auf Webseiten entwickeln sich interaktive 3D-Objekte immer mehr zu einem neuen Trend. Sie lassen die Schwelle zwischen digitaler und echter Welt immer mehr verschmelzen. Augmented oder Virtual Reality sind nur zwei der großen Themenfelder. Sie lassen Inhalte noch bombastischer wirken und Nutzer immersiver in Inhalte eintauchen. Für die Zukunft bietet dieser Bereich noch viel Potenzial. Neue Stile, Nutzererlebnisse und völlig neue Stimmungswelten sind in den nächsten Jahren zu erwarten.
Mikrointeraktionen
Ähnlich wie größere Animationen helfen Mikrointeraktionen, die Augen der Nutzer gezielt auf gewünschte Inhalte zu lenken. Sie werden aktiv, sobald ein Nutzer in Interaktion mit der Webseite tritt. Sie sollen ihn dazu animieren, die Seite weiter zu entdecken, mehr Zeit auf ihr zu verbringen und tiefer in sie einzutauchen. Thema Professionalität: Mikrointeraktionen dienen nicht nur der Effekthascherei, sondern häufig auch einer besseren Benutzerführung.
Farbverläufe und knallige, kontrastreiche Farben
Früher waren Farbverläufe gerade mit kräftigen Farben nach einer Überflutung des Webs nahezu tabu. Das hat sich in den letzten Jahren komplett gewandelt. Clever platzierte und CI-konforme Farbverläufe wirken sparsam eingesetzt dynamisch. Zusätzlich sorgen sie für Tiefe in vielleicht sonst eher flachen Designs, besonders in Verbindung mit knalligen Farben und einer nüchternen, geradlinigen Gestaltung. Früher wurden Farbverläufe nahezu überall eingesetzt, heute dienen sie eher zur Kontrast- und Fokusbildung.
Variable Schriftarten
Ziel dieser neuen Schrifttechnologie ist es, Schriften flexibler anpassen und ändern zu können. Dabei speichert man die einzelnen Schriftschnitte nicht mehr in eigenen Dateien, sondern legt sie mit verschiedenen Achsen fest. So kann man Stärke, Breite, Neigung, Größe und Kursive viel flexibler und einfacher verändern. Hier kann man seine Kreativität ausleben und zusätzlich Werte für Serifenform, Kontrast oder Konturen festlegen. Auch auf die Ladezeit wirken sich variable Fonts positiv aus und können an verschiedene Gegebenheiten wie Displaygröße und -auflösung angepasst werden.
Mauseffekte
Neben Bildern lassen sich auch Mauszeiger animieren. Diese Technik entwickelt sich kontinuierlich weiter und bietet bereits jetzt zahlreiche Möglichkeiten, Nutzer noch mehr in die Seitengestaltung einzubinden. So verändert sich der Cursor je nach Hintergrund, über den sich der Mauszeiger bewegt. Dies kann man, je nach Wunsch und Seitenstrategie, weiter ausarbeiten, sodass sich zum Beispiel der Hintergrund mit dem Mauszeiger mit bewegt.
Fazit
Natürlich kann und muss man nicht jeden Webdesign-Trend in die eigene Webseite einbauen. Es gibt auch kein Patentrezept, welche Entwicklungen man unbedingt einsetzen sollte. Auf jeden Fall ist wichtig, die relevantesten Trends zu verfolgen und sich einen guten Überblick zu verschaffen. So bekommt man neue Ideen und kann gezielt einen modernen, individuellen und vor allem nutzerorientierten Internetauftritt gestalten.
