12 der heißesten WordPress-Webdesign-Trends im Jahr 2020

Inmitten von Glanz, Glamour und meterlangem Chiffon bei den Laufstegshows der Modewoche – ob in Mailand, Paris oder im Big Apple – sind zwei Dinge sicher:

1. Der Redakteur der Vogue wird drinnen eine Sonnenbrille tragen.
2. Einige Entwürfe werden sich an die Spitze setzen und eine reiche Ernte an neuen Trends für die kommende Saison hervorbringen.

Der Laufsteg von WordPress ist nicht anders.

Um Ihre Website auf dem neuesten Stand der Webentwicklung und des Designs zu halten, müssen Sie verstehen, was in der WordPress-Community beliebt ist. Noch wichtiger ist, dass Sie verstehen, warum einige Trends, nun ja, trendy werden.

Auch wenn es so aussieht, ist das, was populär ist, selten willkürlich. Wenn Sie verstehen, wann und warum Sie grundlegende Designelemente einsetzen sollten, sind Sie besser gerüstet, um eine schöne, moderne und funktionale WordPress-Website zu erstellen.

Zunächst werfen wir einen Blick auf die 12 interessantesten Trends im Webdesign von heute. Dann zeigen wir Ihnen, wie Sie diese auf Ihrer eigenen WordPress-Website umsetzen können.

Website-Builder

Selbst bei Tausenden von verfügbaren Themes kann es eine Herausforderung sein, ein Website-Design zu erstellen, das wirklich Ihr eigenes ist. Dieses Paradigma ändert sich jedoch langsam, da das Webdesign immer mehr demokratisiert wird.

Dies ist zum Teil das Ergebnis einer zunehmenden Beliebtheit von Website-Buildern. Diese verwenden eine WYSIWYG-Schnittstelle (What You See Is What You Get), die es allen Benutzern ermöglicht, das Aussehen ihrer Webseiten schnell anzupassen. Website-Builder senken die Schwelle für das Webdesign und geben auch unerfahrenen Nutzern die Möglichkeit, beeindruckende und einzigartige Websites zu erstellen – und zwar schnell.

Um mit der Konkurrenz Schritt zu halten, konzentriert sich WordPress verstärkt auf diese Art von Funktionalität. Es gibt beliebte WYSIWYG-Builder, die explizit für WordPress entwickelt wurden und schon eine Weile auf dem Markt sind, wie Beaver Builder und Elementor.

WordPress ist 2018 mit der vollständigen Veröffentlichung des Block-Editors auf den Plan getreten. Dieser Editor wurde kürzlich als Teil des WordPress-Kerns veröffentlicht. Er ersetzt den TinyMCE-basierten Editor, der lange Zeit in das CMS integriert war.

Inspiriert von anderen WYSIWYG-Buildern, bietet der Block-Editor eine Drag-and-Drop-Oberfläche, mit der Sie verschiedene Bereiche eines Beitrags oder einer Seite frei anpassen können. Es handelt sich dabei nicht um einen reinen Seiten-Builder – Sie können zum Beispiel keine Themes anpassen -, aber er ist von der benutzerfreundlichen, dynamischen Natur der Builder-Oberflächen beeinflusst.

Diese Änderung wirkte sich auf die WordPress-Erfahrung aus, und das Projekt war umstritten. Dennoch scheint es klar zu sein, dass Page Buildern die Zukunft gehört, und wir werden wahrscheinlich erleben, wie sie sich in den kommenden Jahren weiterentwickeln und wachsen.

Minimalismus entwickelt

Flaches Design ist schon seit einiger Zeit beliebt, und es scheint sich nicht zu verändern. Bei dieser Art von minimalistischem Design liegt der Schwerpunkt auf Einfachheit, während flache Farben, Klarheit und viel Weißraum verwendet werden.

Dadurch wird nicht nur der Schwerpunkt auf die Präsentation Ihrer Inhalte gelegt, sondern auch sichergestellt, dass Ihre Website schnell lädt und auf allen Geräten gut aussieht. Diese Art von Minimalismus ist im Arnold-Theme zu sehen, das sich an Kreative richtet und den Weißraum hervorragend nutzt, um Text und Bilder zur Geltung zu bringen.

Dieser Trend mag zwar ein Dauerbrenner sein, aber das bedeutet nicht, dass er veraltet ist. Tatsächlich haben sich die Entwürfe weiterentwickelt, um Farbverläufe, Schatten und Bilder in größerem Umfang einzubeziehen. Dadurch entsteht ein größeres Gefühl von Tiefe auf der Seite und kann zu einigen auffälligen Designs führen.

Ein perfektes Beispiel für diesen Effekt ist Hue, das große, klare Schriftarten und Farbverläufe verwendet, um einprägsame Stile zu schaffen.

Die Verwendung von großen, aufmerksamkeitsstarken Fotos und Videos wird ebenfalls immer beliebter, da schnellere Internetverbindungen immer alltäglicher werden. Themes wie Kalium machen sich dies zunutze, indem sie ein insgesamt minimalistisches Design mit Kopfzeilen in voller Breite kombinieren.

Mit diesem Weniger-ist-mehr-Ansatz beim Design können Sie Websites erstellen, die sich von anderen abheben. Außerdem können Sie damit die Ladegeschwindigkeit Ihrer Website verbessern und es den Besuchern erleichtern, die gewünschten Informationen zu finden.

Hohe Sättigung und lebendige Farben

Die Zeiten, in denen es hieß „Sie können jede Farbe haben, solange sie schwarz ist“, sind längst vorbei. Heute sind kräftige Farben und kontrastreiche Kombinationen gang und gäbe. Die Menschen reagieren sehr intuitiv auf Farben, so dass die Wahl des Farbschemas einen erheblichen Einfluss darauf haben kann, wie wir eine Marke oder Website wahrnehmen. Laut Buffer basieren 90 % unserer Beurteilung von Produkten allein auf der Farbe.

Es liegt also auf der Hand, dass eine auffällige Farbkombination eine perfekte Möglichkeit ist, Ihre Website auffallen zu lassen. Auch WordPress-Designer haben diesen Trend nicht verschlafen. Viele Themes haben einen farblichen Schwerpunkt.

Beim Skin-Theme beispielsweise können Sie zwei Farben auswählen, und es wird ein Farbverlaufsschema für Ihre Website erstellt. Sie können auch Ihre eigenen Farbverläufe erstellen und Muster und Strukturen hinzufügen.

Eine weitere Variante dieses Trends, die in letzter Zeit immer beliebter wird, ist die Verwendung von starken Kontrasten. Die Verwendung kontrastreicher Farben verleiht Ihrer Website eine lustige, künstlerische Ausstrahlung und kann auch die Zugänglichkeit fördern.

Ein Thema, das dies gut umsetzt, ist Piñata mit seinen lebhaften Farbschemata, die auch vollständig anpassbar sind.

Es ist unglaublich, was ein kreativer Einsatz von Farbe bewirken kann, um ein ansonsten einfaches Design von der Seite abheben zu lassen. Wie Sie am Piñata-Thema sehen können, kann ein konsistentes Farbschema auf Ihrer gesamten Website, einschließlich der Bilder, sie zu etwas Unvergesslichem machen.

Asymmetrische und gebrochene Layouts

Minimalismus und flache Designs sind schön und gut, aber manchmal möchte man das Gegenteil eines sauberen, ordentlichen Looks. Designer fangen an, die Grenzen zu verschieben, indem sie absichtlich unterbrochene Raster und asymmetrische Designs entwerfen.

Ein Thema, das dies gut umsetzt, ist Albert. Es verwendet gleitende Bilder, sich überlappende Elemente und einen absichtlich verdrehten Look, der ins Auge fällt und Sie zwingt, aufmerksam zu sein.

Eine weitere Variation dieses Trends kommt in Form des Overlap-Themas, das überlappende Elemente und ein unterbrochenes Rasterdesign verwendet, um einen einzigartigen Look zu schaffen.

Diese Art von Design ist schwierig umzusetzen. Sie müssen einen schmalen Grat zwischen visueller Attraktivität und Benutzerfreundlichkeit und Übersichtlichkeit der Website finden. Auch wenn der Inhalt auf unkonventionelle Weise über die Seite verteilt ist, muss alles deutlich sichtbar und auf einen Blick lesbar sein.

Schließlich wollen Sie nicht mit einer schicken Seite enden, von der niemand weiß, wie man sie benutzt.

CSS-Gitter

Die Webdesignerin Hui Jing Chen beschreibt CSS-Gitter als „das Web bekommt endlich seinen Führerschein“. Ihrer Meinung nach hat sich das Webdesign zu lange an Druckstandards gehalten, und sie sieht in CSS-Gittern einen großen Schritt weg von dieser selbst auferlegten Beschränkung. Was genau ist ein CSS-Raster?

Kurz gesagt, handelt es sich um ein responsives Raster, das sich dynamisch verändert, je nachdem, wo es angezeigt wird. Diese Art von Design ist Ihnen wahrscheinlich am häufigsten auf mobilen Geräten begegnet. Die Seitenelemente werden je nach Größe des Fensters verkleinert und neu angeordnet. Dasselbe ist auch in Standardbrowsern möglich, wo sich das Seitendesign in Echtzeit ändert, wenn Sie die Größe des Fensters ändern.

Es ist davon auszugehen, dass CSS-Grid-Designs weiter an Beliebtheit gewinnen werden. Einige WordPress-Themes machen bereits davon Gebrauch, darunter das Kuhn-Theme, das Sie oben in Aktion sehen können. Sehen Sie, wie sich Bilder, Text und Spalten in Echtzeit ändern, wenn das Fenster wächst und schrumpft?

Das ist weit entfernt von statischen, vom Druck inspirierten Designs.

Mobilfreundliche Designs

Als wir von responsiven Designs sprechen, lassen Sie uns über mobile Geräte sprechen. Im Jahr 2016 überstieg die Zahl der Internetnutzer auf mobilen Geräten zum ersten Mal die Zahl der Desktop-Nutzer. Dies war ein Wendepunkt in der Webnutzung und machte deutlich, dass die Erstellung von Websites, die auf mobilen Geräten responsive sind, wichtiger denn je ist.

Wir haben bereits darüber gesprochen, wie Sie Ihre WordPress-Website für mobile Nutzer optimieren können.

Eine Möglichkeit, dies zu tun, besteht darin, das WPtouch-Plugin herunterzuladen, das auf der Grundlage Ihrer Website ein mobiles Thema erstellt, das Sie nach Belieben anpassen können. Dieses Plugin wird von Google empfohlen und stellt sicher, dass Ihr mobiles Theme den Standards der Suchmaschine entspricht (obwohl es zu bedenken ist, dass seine Bewertungen etwas gemischt sind).

Sie können auch das Jetpack-Plugin verwenden, um schnell ein mobiles Theme für Ihre Website zu erstellen.

Ein weiteres Plugin, das großen Wert auf die Kompatibilität über verschiedene Geräte hinweg legt, ist Elementor. Mit diesem vielseitig einsetzbaren Tool können Sie dynamische Breiten einstellen und einzelne Seitenelemente je nach Anzeigegerät konfigurieren.

Dieser Page Builder kann mit jedem Theme verwendet werden. Sie können Ihre Website auch auf Handys, Tablets und Desktops emulieren, so dass Sie sicherstellen können, dass sie unabhängig von der Betrachtungsweise großartig aussieht.

Mikrointeraktionen

Beim Design kommt es auf die Details an. Der aufkommende Trend der Mikrointeraktionen konzentriert sich auf diese kleinen Details und ist in den letzten Jahren immer beliebter geworden. Wie der Name schon sagt, bezieht sich dieses Konzept auf die Art und Weise, wie Elemente auf der Website auf kleine Interaktionen reagieren.

Ein Beispiel für dieses Konzept in Aktion ist eine kurze Animation, die abgespielt wird, wenn Sie auf ein Symbol klicken oder den Mauszeiger darüber bewegen. Wahrscheinlich ist Ihnen das schon einmal begegnet, z. B. bei den Facebook-Reaktions-Emojis.

Mikrointeraktionen verleihen Ihrer Website ein lebendiges, taktiles Gefühl. Sie vermitteln das Gefühl, dass Sie wirklich mit der Seite interagieren, anstatt nur auf eine statische Wand von Informationen zu starren.

Sie können einen ähnlichen Effekt mit dem Plugin Animate It! auf Ihrer eigenen Website erzielen. Mit diesem Plugin können Sie Animationen zu fast jedem Inhalt, einschließlich Bildern und Text, hinzufügen. Sie können auch bestimmen, wann die Animation ausgelöst wird, wie oft sie wiederholt wird und einen Start- und Endpunkt festlegen.

Schauen Sie sich das folgende Beispiel an, in dem das Bild so eingestellt ist, dass es eine „Pop“-Animation ausführt, wenn der Cursor darüber fährt.

Mikrointeraktionen sind jedoch nicht nur für Animationen und Bilder geeignet. Mit dieser Technik können Sie auch Text auf interessante Weise nutzen.

Einige Seiten bieten Ihnen beispielsweise die Möglichkeit, Text zu markieren und ihn dann in sozialen Medien zu teilen. Mit dem Highlight and Share Plugin, das beliebte Netzwerke wie Facebook, Pinterest und LinkedIn unterstützt, können Sie diese Funktion in Ihre Website integrieren.

Das sind nur einige Beispiele dafür, wie Sie Mikrointeraktionen nutzen können, um Ihre Website lebendiger und reaktionsfähiger zu gestalten.

Schrägen und Diagonalen

Eine Website schräg aussehen zu lassen, klingt vielleicht nicht nach der besten Idee, ist aber tatsächlich einer der am schnellsten wachsenden Designtrends. Schräge Linien und diagonale Unterbrechungen verleihen Ihrer Website nicht nur ein modernes Aussehen, sondern helfen auch, das Auge auf der Seite zu führen. Dies funktioniert besonders gut bei einseitigen Designs, die die einzelnen Abschnitte auf optisch ansprechende Weise voneinander trennen.

Viele WordPress-Themes ermöglichen es Ihnen, einen schrägen Look auf Ihrer Website zu implementieren.

Werfen Sie zum Beispiel einen Blick auf das Flamingo-Theme, mit dem Sie ein einzigartiges Design mit diagonalen Trennlinien erstellen können. Die Ergebnisse sind unbestreitbar ein Blickfang, und die Anpassungsfähigkeit des Themas ermöglicht es Ihnen, beim endgültigen Design kreativ zu sein.

Eine weitere Variante des schrägen Designs bietet das Thema Upward. Diese Option verwendet ein eher traditionelles, rasterbasiertes Layout, setzt aber schräge Linien für ein ungewöhnliches und stilvolles Aussehen ein. Es ist außerdem vollständig anpassbar und bietet eine Vielzahl von Optionen.

Wie Sie sehen, kann ein unkonventionelles Design Ihre Website wirklich ausdrucksstark machen. Es ist auch eine gute Möglichkeit, den Inhalt klar zu trennen und die Aufmerksamkeit Ihrer Besucher auf die wichtigsten Elemente zu lenken.

Große, fette Schriftarten

Typografie ist die Kunst der Verarbeitung und des Drucks von Schriften. Mit anderen Worten, es ist ein Weg, Worte in Kunstwerke zu verwandeln. Wenn Sie große Schriftarten verwenden, können Sie mit einer stilvollen Kopfzeile sofort den Ton für Ihre Website angeben. Großer Text sorgt außerdem dafür, dass die Botschaft auch auf einem kleineren Bildschirm gut ankommt.

Ein Thema, das dies gut zeigt, ist Wedding Planner.

Dieses Thema veranschaulicht auch einen anderen aktuellen Trend: Schriftvariation. Anstatt sich auf eine oder zwei ähnliche Schriftarten zu beschränken, können Sie durch die Kombination von serifen- und serifenlosen Schriften ein einzigartiges Ergebnis erzielen.

Kreativer Einsatz von Schriftarten ist nicht nur für Kopfzeilen geeignet. Das Retro-Portfolio-Thema zeigt, wie Sie verschiedene Schriftarten verwenden können, um auf der Seite selbst einen retro-inspirierten Look zu schaffen.

Das Wichtigste ist, dass die Lesbarkeit immer noch eine Rolle spielt. Solange Ihr Text noch lesbar ist, können Sie ruhig mit verschiedenen Schriftarten, -größen und -anordnungen experimentieren.

Maßgeschneiderte Illustrationen

Traditionell haben sich die meisten Websites darauf beschränkt, neben dem Textinhalt auch Fotos und Animationen zu verwenden. Dies ändert sich jedoch schnell. Viele Designer haben erkannt, dass sie mit Hilfe von Illustrationen eine einzigartige Identität schaffen können und mehr Freiheit bei der Gestaltung ihrer visuellen Marke haben.

Die Verwendung von Illustrationen im Design Ihrer Website ist eine großartige Möglichkeit, sie persönlicher zu gestalten und allein mit Bildern eine Geschichte zu erzählen. Einen talentierten Illustrator zu engagieren, kann auch viel billiger sein, als ein Team von Fotografen zu beauftragen, wenn Ihre Website eine Auffrischung braucht.

Im Gegensatz zu den meisten Trends, die wir in diesem Beitrag behandelt haben, gibt es hier keine einfache Lösung zum Herunterladen. Der wichtigste Punkt ist, dass Sie einen Illustrator finden müssen, dessen Stil zu Ihrer Website passt. Außerdem müssen Sie unbedingt sicherstellen, dass Sie ihn für seine Arbeit bezahlen. Talent kostet Geld, und niemand will wirklich für „die Öffentlichkeit“ arbeiten.

Darüber hinaus gibt es einige Dinge, die Sie bei der Gestaltung Ihrer Website rund um Illustrationen beachten sollten.

Zuallererst sollten Sie sicherstellen, dass Ihr Theme ein Layout mit voller Breite verwendet, damit Sie die Bilder optimal zur Geltung bringen können. Ein gutes Beispiel ist das Illustrator-Theme, das speziell für diese Art von Design entwickelt wurde.

Ein weiteres sehenswertes Theme ist TheGem, das über ein responsives Full-Width-Design verfügt, das perfekt für große Bilder geeignet ist. Dieses Theme ist sehr vielseitig, mit Layouts, die für Geschäfte, Portfolios und Unternehmen gleichermaßen geeignet sind.

Ein paar gut platzierte Illustrationen können viel dazu beitragen, Ihre Website zu verschönern. Sie tragen auch dazu bei, das Storytelling zu verbessern, und verleihen Ihrer Marke eine ganz eigene visuelle Identität.

Dunkle Modi

Die Benutzererfahrung könnte sich in diesem Jahr ändern, da die Schnittstellen auf die dunkle Seite wechseln. Sei es, um die Augen zu entlasten, oder einfach nur, weil der Look besser zum Stil Ihrer Website passt, die Einführung einer dunkleren Farbpalette ist eine Überlegung wert.

Eine Möglichkeit, ein wenig Stimmung in Ihr WordPress-Adminpanel zu bringen, ist das Dark Mode Plugin.

Dieser besondere Trend begann wahrscheinlich mit Programmierern. Die meisten Codebearbeitungsprogramme verfügen über einen Dunkelmodus, um die Augen zu schonen. Bei Brackets beispielsweise kann der Benutzer zwischen hellen und dunklen Themes wählen.

Es gibt auch immer mehr Themes und Websites, die Front-End-Benutzern die Möglichkeit bieten, zu einer dunkleren Version zu wechseln. Es ist erwähnenswert, dass dunkle Modi den Energieverbrauch des Bildschirms senken, was sie auch zu einer umweltfreundlicheren Option macht.

Ein Schwerpunkt auf Barrierefreiheit

Die Erstellung von barrierefreien Websites ist ein Trend, dem man Aufmerksamkeit schenken sollte. Vor allem WordPress hat den Schwerpunkt auf barrierefreie Codierungsstandards gelegt.

In echter Open-Source-Manier hat das WordPress-Team eine umfassende Informationsseite über alle seine Bemühungen um Barrierefreiheit erstellt. Die Mitglieder der Gemeinschaft und die Benutzer sind ebenfalls aufgefordert, sich an der Arbeit zu beteiligen. Wenn Sie mehr erfahren möchten, können Sie sich über die neuesten Web Content Accessibility Guidelines (WCAG) informieren.

WordPress-Webdesign-Trends im Jahr 2020

Kein Zweifel: 2020 wird ein aufregendes Jahr für WordPress-Nutzer, und Sie müssen ein wenig arbeiten, um mit den neuesten Webentwicklungstrends Schritt zu halten. Designer schlafen nie, und sie finden immer neue Wege, um WordPress besser aussehen und funktionieren zu lassen.