Webtrends 2020: Das kommt bei Webdesign, SEO und UX auf uns zu

 

Webtrends 2020: Das kommt bei Webdesign, SEO und UX heuer auf uns zu

Du willst wissen, was 2020 im Webdesign für kleine, feine Websites angesagt ist? Hier meine Recherche-Ergebnisse:

Fazit für die Ungeduldigen:

  • Angeblich geht der Trend heuer weg von der flachen Ästetik (“Flat Design”), hin zu mehr Dreidimensionalität.

  • Man wendet sich auch hin zu mehr Unordnung, Persönlichkeit und Überraschungen.

  • Wie in den letzten Jahren wird für die Seitenbesucher weiter vereinfacht.

  • Neue Technologie 5G: Wir werden uns in Zukunft noch schneller im Netz bewegen und dies auch bei unseren Besuchen auf Websites erwarten. Dem müssen wir mit noch besseren Ladezeiten Rechnung tragen.

  • Als Kontrast zur Schnelligkeit will man Leuten im Netz Räume bieten, wo sie innehalten und sich gerne aufhalten. Dem tragen die Untertrends “mehr Persönlichkeit” und “Überraschungen” Rechnung.

Du musst natürlich nicht jeden Trend umsetzen. Es schadet aber nicht, die Richtung zu kennen.

1. Websites - Design

a) Vereinfachen

Wann immer möglich: Vereinfache. Aus eigener Erfahrung weiß ich, dass immer noch ein bißchen mehr geht.

Ob bei Texten, Bildern, Grafiken: Zeige nur so viele Bilder wie nötig und halte die Texte so kurz wie möglich.

Verringere die kognitive Last deiner Seitenbesucher. Lass sie möglichst schnell finden, was sie suchen. Lass sie bei jedem Klick wissen, wohin er sie bringt. Vergrabe wichtige Infos nicht in langen, umformatierten Texten. Schäle die wichtigen Infos heraus.

Bombardiere sie nicht mit vielen vielen Bildern, durch die sie sich mühsam scrollen müssen. Denk dabei vor allem ans Handy, wo bei vielen Bildern Bild für Bild runter gescrollt werden muss.

b) Spiel mit Schriften

Schriften sind Design-Elemente.

Empfohlen wird, 2020 einfach mal zu experimentieren: Nutze größere Schriftgrößen, als du es bisher getan hast. Probier neue Schriftarten aus. Achte dabei bitte immer drauf, wie die mobile Darstellung ist.

Bereits in den letzten Jahren sind Schlagworte und Überschriften auf Websites aufgeblasen worden, um Akzente zu setzen. Dieser Trend setzt sich heuer fort.

Beispiel für große Schrift auf Website

c) Persönlichkeit reinbringen - nicht perfekt sein:

Das schaffst du mit Zeichnungen: Verwende unperfekte, handgezeichnete Design-Elemente wie Icons oder Illustrationen.

Beispiel für Nicht-Perfekt-Sein

d) Fotos mit Grafiken mixen

Auch das bringt mehr Persönlichkeit rein: Indem du Fotos nicht nur hinstellst, wie sie sind, sondern sie auch noch mit Grafiken und Illustrationen behübschst. Auf diese Weise individualisierst du sie.

Beispiel für Foto mit Illu mischen

e) Tiefe kreieren

Mit leichten Schatten, Schichten und schwebenden Elementen schaffst du optische Tiefe. Dieser Trend unterstreicht die Tendenz hin zur Verwendung von 3-D-Elementen. Die meiner Meinung nach übertrieben sind für kleine, feine Websites. Du musst jetzt nicht unbedingt 3-D-Elemente kreieren, um up-to-date zu sein. Aber du siehst, wohin sich Webdesign gerade bewegt.

Beispiel für Tiefe auf der Squarespace-Website.
Beispiel für Tiefe geben mit leichten Schatten und schwebenden Elementen
Beispiel 3D-Effekt

Die folgenden Trends sind keine Must-Haves. Sie zeigen aber schön , wo die Reise hingeht:

f) Skeuomorphismus

Wie bitte?! Auch heuer durfte ich ein neues Wort lernen (letztes Jahr war’s “Brutalism”). Skeuomorphismus ist eine Stilrichtung, bei der Formen eines älteren, vertrauten Gegenstandes nachgeahmt werden. Was aber nicht durch die Funktion begründet ist. Beispiele: Abbildung eines analogen Taschenrechners oder eines Notizblocks mit Spiralbindung.

g) Easter Eggs

Hier geht’s drum, kleine Überraschungen für deine Seitenbesucher zu verstecken, kleine Spielereien. Das versteckte Osterei von Squarespace ist zum Beispiel die Spielerei auf der 404-Error-Seite: https://www.squarespace.com/moved

h) Customizen mit CSS

Mit CSS legst du Layout, Farben und Typografie gesondert fest. Oder du läßt es einen Webdesigner machen. Und individualisierst damit deine Seite weiter.

Beachte bitte: Bei Webbaukästen wie Squarespace kann es passieren, dass es bei Updates durch die Plattform zu Störungen kommen kann. Ich nutze zum Beispiel CSS-Kunstgriffe, um meinen Cookie Consent zu stylen.

i) Weg von Flat Design

Flat Design zeichnet sich durch vereinfachte, abstrakte Designsprache aus. Heuer geht der Trend von diesem “Über-Trend” im Design angeblich weg:

Beispiel für Flat Design: Taschenrechner von Apple (iMac)

Beispiel für Flat Design: Taschenrechner von Apple (iMac)

 

j) Weg vom Brutalism

Die beim Brutalismus geforderte strenge Ordnung widerspricht dem heuer geforderten explorativen Verhalten. Er ist daher designmäßig beim Abklingen. Angeblich.

k) Dark mode

Manche Design-Propheten sprechen davon, dass der Dark-Modus d e r Design-Trend 2020 wird: Nutzer haben damit die Option, eine Seite in einen dunklen Modus umzustellen. Mit dunklen Hintergründen treten manche Design-Elemente stärker hervor. Manche Elemente kontrastieren dadurch mehr. Die Augen sollen entlastet werden:

Beispiel “Dunkel-Modus”

l) Noch mehr White Space

Der Trend geht zu noch mehr freien Flächen. Und damit weg von Bildern, die vom einen zum anderen Bildschirmrand reichen. Also, hin zu kleineren Bildern, die durch den Freiraum herum noch mehr wirken sollen. Und die vielleicht mit Gekritzel (aka “Illustrationen”) individualisiert werden.

m) Futuristische Farb-Schemata

Willst du auf den Trend “futuristisch anmutende Website” setzen, setz leuchtende, strahlende Farben ein. Dieser Sub-Trend kommt daher, dass der Dunkel-Modus und extremer Minimalismus am Vormarsch sind. Mit solchen Farben kannst du wirklich scheinen.

2. UX (User Experience)

Geschwindigkeit - 5G

Die fünfte Mobilfunk-Generation bedeutet, dass wir in Zukunft noch schnellere Download-Geschwindigkeiten haben werden. Das heißt, Leute werden es einfach gewohnt sein, noch größere Datenmengen in noch kürzerer Zeit zu kriegen.

Dem trägst du mit deiner Website Rechnung, indem sie schnell lädt. Daher auch heuer wieder: Sieh zu, dass du das Datenvolumen deiner Website möglichst gering hältst. Wie du deine Ladezeit (mit deiner Squarespace-Website) verbesserst, erfährst du hier.

Mobile First

Schon lange ist die Rede von “Mobile First”: Damit ist gemeint, dass du im Design vorrangig darauf schaust, wie die Website am Handy aussieht (und nicht am Desktop). 



Es sieht so aus, als ob heuer die nächste Welle anrollt, die mobile first betont. Warum? Um es uns wieder ins Gedächtnis zu rufen ;) Und: Weil nach wie vor immer mehr Menschen Seiten mit ihren Mobilgeräten und von unterwegs besuchen.

Vereinfachen

Die Design-Trends hängen natürlich mit den Trends im Bereich Benutzerfreundlichkeit und Suchmaschinen-Optimierung zusammen.
Vereinfachst du deine Seiteninhalte, mistest du aus und fokussierst du ohne Ablenkungen auf das Notwendige, wirkt sich das auf die Benutzerfreundlichkeit deiner Homepage aus.

Wir alle haben weniger Zeit und scannen Inhalte, bevor wir uns dazu entschließen, sie im Detail zu lesen / anzusehen.

3. SEO

Sprachsuche im Aufwärtstrend

Gesprochene Suchanfragen rücken langsam in den Vordergrund - auch in der Nachzügler-Region DACH: Man macht sich Gedanken darüber, was man konkret tun kann auf der Website, um die Sprachsteuerung zur berücksichtigen.

Google scheint bei der Sprachsuche vor allem Content zu berücksichtigen, der in den Top 3 der organischen Suchergebnisse zu finden ist. Besonders gerne werden Seiten zitiert, die ohnehin schon in den “Featured Snippets” auftauchen.

Featured Snippets

Um in die Featured Snippets zu kommen, setzt du am besten auf kurze, knackige Antworten. Am besten in Aufzählungsform. Featured Snippets tauchen vor allem als Absatz, Liste oder Tabelle auf.

Vielleicht wird sich auch weisen, dass Texte im Plauderton gut ankommen, wenn es um sprachgesteuerte Suche geht. Es deutet auch einiges darauf hin, dass die Ladegeschwindigkeit stark beeinflußt, welche Seite bei der Sprachsuche ausgespuckt wird.