WebDesign-trends 2019: Von Smartphones, Ladezeiten und Besucherführungen

2019 ist das Jahr für kluge Weiterentwicklungen: Sei es Webseiten sinnvoll zugänglicher für Benutzern von Smartphones zu machen oder diesen plattformunabhängig besser durch die Webseite zu begleiten, damit er auch da rauskommt, wo man es als Betreiber wünscht. Hier sind unsere Top10 Webdesign-Trends, die sicherlich wichtig für Sie sein könnten.

Warum es notwendig ist, Ladezeiten zu reduzieren

Wir sind alle ungeduldig. In einer gefühlt immer schnelleren Welt, sollte im besten Fall alles reibungslos und sofort funktionieren. Im World Wide Web ist das nicht anders. Internetseiten, die länger als 2 Sekunden laden, halten den Besucher nicht nur auf sondern hinterlassen negativeren Eindruck. Daher ist es wichtiger denn je seine Webseite schlank zu halten, um nicht Gefahr zu laufen, dass User abspringen und vielleicht sogar die Seite des Mitbewerbers besuchen. Noch schlimmer aber: Seit dem Google Update von Juli 2018 bevorzugt die Suchmaschine Seiten, welche schneller laden als dessen Konkurrenz. Bilder sollten daher gewissenhaft komprimiert werden. Ebenso sollten nur die nötigen Schriften geladen werden oder man greift gleich zu Variable Fonts, die zusätzlich die Ladezeit senken können. Zusammengefasst bedeutet das, dass der Designer schon in der Gestaltungsphase diesen Punkt im Hinterkopf behalten sollte, damit spätere SEO-Maßnahmen (Suchmaschinenoptimierungen) auch ordentlich greifen können.

Deshalb „Mobile first“ zuerst

Seit Jahren gewinnt die Nutzung von mobilen Endgeräten im Webdesign stetig an Relevanz, was mit deren komfortablen Bedienung zusammenhängt. Mittlerweile ist es sogar so, dass die Suchmaschine Google mehr Anfragen über Smartphones und Tablets erhält als über Desktop-Computer. Die Folge war, dass Google im ersten Quartal 2018 den „Mobile-First-Index“ eingeführt hat. Dieser besagt, dass Seiten, die für mobile Endgeräte optimiert wurden, im Suchergebnisranking bevorzugt werden. Im Umkehrschluss heisst das, das Betreiber, welche Ihre Inhalte nicht dem Trend aufbereiten, von Google weiter unten angezeigt werden.

Doch was genau heißt „Mobile First“? Dies ist eine Herangehensweise beim Design von Webseiten: Zuerst wird die mobile Version einer Webseite gestaltet, anschließend die größeren Varianten wie z. B. für Tablets, Laptops und Desktop-Computer. Inhalte wie Bilder, Texte, Tabellen, etc. sollen dabei so angelegt und angezeigt werden, dass diese gut lesbar sind und komfortabel bedient werden können. Relevante Inhalte, die von der Zielgruppe erwartet werden, stehen im Vordergrund. Features, welche im Desktopbereich zum Einsatz kommen, werden auch erst ab einer gewissen Bildschirmgröße eingeblendet und das Layout der Gestaltung entsprechend neu angeordnet.

Flat-Design 2.0 - mehr als nur Design

Die Ursprünge des „Flat-Design“ liegen im sogenannten „Interface-Design“: Dies ist die Darstellung der grafischen Benutzeroberfläche von Automaten und Computersoftware. Anstatt diese aber so realitätsgetreu wie möglich darzustellen, ging man in die entgegengesetzte Richtung und vereinfachte diese zum ressourcenschonenden „Flat-Design“. Ende 2010 wurde eine solche Gestaltung im Windows-Phone eingeführt, welches später für Windows 8 mit dem bekannten Kacheldesign zum Einsatz kam. 2017 begannen Designer dem Trend „Mobil-First“ zu folgen und das „Flat-Design“ fand seinen Weg in das World Wide Web. Herausgekommen ist eine Gestaltung, dessen Datengrößen sehr gering ist. Dadurch werden kürzere Ladezeiten begünstigt und das Erlebnis einer Webseite verbessert - sowohl für mobile Besucher und Nutzern von Computern. Ein zusätzlicher Benefit: Suchmaschinen erkennen, dass die Seite schnell lädt und verbessern damit dessen Suchergebnisposition.

Im Umkehrschluss bedeutet das: Das Layout beinhaltet keine aufwendigen Bedienungselemente, z. B. Symbole und Buttons, die möglich realitätstreu umgesetzt sind (Stichwort: Skeuomorphismus). Ebenso wird auf unnötigen, ästhetischen Ballast verzichet, der keinen eindeutigen Sinn hat. Stattdessen liegt der Gestaltungsfokus auf guter Bedienbarkeit, minimalistischem und sinnvollem Aufbau der Webseite sowie dessen Verständlichkeit. Jedes grafische Element (Bilder ausgeschlossen) wird sinnvoll vereinfacht, ohne aber dessen Bedeutung zu verlieren. Um die Aufmerksamkeit des Users zu lenken, kann mit kräftigen Farben und Farbübergängen gearbeitet werden. Unwichtigere Inhalte,  z. B. zusätzliche Buttons neben dem Kontaktelement, können mittels Konturen oder ungesättigten Farben visuell abgeschwächt werden. So ergibt sich beinahe automatisch ein leichtes, ressourcensparendes und effektives Design.

Mit Flat-Design 2.0 wurde das ursprüngliche Design weiterentwickelt und mittels Schatten und / oder Farbübergängen eine zusätzliche Tiefe und Dreidimensionalität erzeugt, die dem Original fehlte. Damit ging man einen kleinen Schritt zurück in Richtung Skeuomorphismus. Der Besucher einer Webseite erkennt somit schneller komplexe Symbole und dessen Gehalt - auch wenn diese auf einem kleinen Bildschirm, z. B. vom Smartphone, angezeigt werden. Flat 2.0 ist daher die vollendetere Gestaltungsvariante.

Asymmetrischer Aufbau schafft Aufmerksamkeit

Asymmetrische Webseiten sind ein Ergebnis von der Art und Weise wie wir Inhalte im Internet wahrnehmen: Durch den täglichen Konsum von Unmengen an Daten haben wir uns feste Muster angeeignet: Texte werden im Form eines „F“ wortwörtlich gescannt. Dabei lesen wir nicht bewusst sondern überfliegen diese nur und bleiben an gesuchten bzw. für sich selbst interessanten Wörtern hängen. Webseiten allgemein werden vom Auge im „Z-Muster“ erfasst, d. h. von links oben nach rechts oben, diagonal nach links unten und abschließend nach rechts unten. So werden Elemente, die sich außerhalb dieser Zonen befinden, weniger
wahrgenommen und deswegen nicht so oft aufgerufen.

Um mit dieser Tradition zu brechen, meiden Webdesigner 2019 vermehrt über Jahre hinweg angelernte Gestaltungsmuster und konzentrieren sich bewusst auf einen asymmetrischn Aufbau von Webseiten, um gezielt die Aufmerksamkeit zu lenken. Was noch vor einiger Zeit für Verwirrung sorgte, gewinnt mehr und mehr an Popularität. Das Ergebnis ist, dass sich vermehrt Besucher Inhalte wieder bewusst anschauen und diese auch erfassen. Durch die sinnvoller Nutzung großzügigem Weißraums, harmonischen Farben und kreativer Typografie wird eine gestalterische Tiefe geschaffen, die mit herkömmlichem Aufbau schwer möglich wäre. So kann auf wichtige Elemente hingewießen und der gezielt Benutzer gelenkt werden.

Schriften sind mehr als nur schön

Neben asymmetrischem Aufbau können auch Schriften den Stil einer Seite entscheidend prägen. Serifenlose Schriften wirken leicht, modern und dynamisch. Serifenschriften hingegen strahlen Seriosität und Würde aus. Daher sollte man bei der Wahl der Hausschrift für das eigene Unternehmen genau darauf achten, welche Schriftart man verwendet und wie diese vom Betrachter wahrgenommen werden soll.

Lange wurden Serifenschriften auf Grund niedrigeren Bildschirmauflösungen und der damit zusammenhängenden schlechten Darstellung vernachlässigt. Heutzutage gehören solch technische Probleme aber der Vergangenheit an und Webdesigner nehmen diese auch 2019 vermehrt in Ihr gestalterisches Repertoire auf. Besonders beliebt ist die Kombination von einem serifenlosen Fonts und einer Serifenschriften. So können Überschriften mittels Serifen Akzente setzen, während Fließtexte als einfache Schrift gesetzt sind. Verbunden mit der oben beschriebenen Wahrnehmung kann dies den entscheidenden Unterschied machen.

Grundsätzlich sollte sich der Designer Gedanken über das Thema "Barrierefreiheit" machen: Ausreichend Kontrast von Text und Hintergrund, lesbare Schriftgrößen sowie kurze Textabschnitte und ein logischer Layoutaufbau (Stichwort: Screen-Reader) sollen das Weberlebnis so angenehm wie möglich gestalten.

Wie Farben uns motivieren

Seit schon mehreren Jahren hält sich dieser Trend beharrlich und 2019 wird sich das auch nicht ändern. Bewusst ausgewählte Farben betonen nicht nur die Persönlichkeit einer Webseite sondern liefern unterbewusst Informationen an die definierte Zielgruppe: Rot ist z. B. eine sehr maskuline Farbe, welche mit Hitze und Leidenschaft verbunden wird. Leider ist diese eher unpassend, wenn es um Umweltschutz geht. Hier wäre ein frisches Grün die bessere Wahl, da die Farbe mit dem Thema Natur asoziiert wird.

Für sogenannte Call-To-Action-Elemente, die den Besucher zu einer Handlung motivieren sollen, wird eine zusätzliche Farbwelt entwickelt. Diese muss sowohl zum Bild des Unternehmens passen als auch genügend Kontrast zu dieser bieten. Hier kommen die kräftigen, vibrierenden Farben ins Spiel. Sie heben sich von der eigentlichen Farbwelt ab und werden so von Benutzern bemerkt und korrekt positioniert auch von Ihnen benutzt. Kräftige Farben kommen auch Menschen zu Gute, dessen Sehvermögen eingeschränkt ist.

Ergänzt wird dieser Trend mit Farbübergängen. Hintergründe können mit leichten Verläufen unverbraucht und einzigartig wirken und das Erscheinungsbild einer Webseite entscheidend prägen. Je nach Zweck können auch Symbole mit dezenten Farbübergängen mehr Tiefe bekommen (siehe Flat 2.0) oder mit Komplementärfarben Akzente gesetzt werden und Besucher zu einer Aktion führen.

Geometrische Formen schaffen mehr Tiefe

Einfache, geometrische Formen finden seit 2016 ihren Weg in das Webdesign. In Verbindung mit minimalistischem Design, Flat-Design und asymmetrischem Gestaltungsraster können geometrische Formen eine sinnvolle Addition darstellen: Nicht nur ästhetisch hebt man sich von Mitbewerbern durch mehr Tiefe und Dynamik ab sondern schafft auch eine weitere Ebene, um den Besucher der Webseite gezielter zum angestrebten Endpunkt, z. B. die Kontaktaufnahme, zu lotsen. Dies kann durch Farben, Inhalte (Bilder) und dessen Position erzielt werden.

Selbst die Form ist unterbewusst aussagekräftig: Rechtecke stehen für Stabilität. Rauten, Trapeze und Dreiecke hingegegen muten dynamisch an. Ein weiterer Pluspunkt ist, dass geometrische Formen schnell laden und damit Benutzer von Smartphones nicht ausgeschlossen werden. Kein Wunder also, dass diese 2019 noch deutlicher zum Trend werden.

Minimalismus und natürliche Formen

Während der Werktag gefühlt immer kürzer wird und effektiver geplant werden möchte, passt sich das Webdesign diesem anhaltenden Trend an: Inhalte, die keinen eindeutigen Mehrwert bieten, werden bewusst reduziert und auf die relevanten Elemente beschränkt. So spart sich der Benutzer die Mühe im „Wirrwarr“ seinen Weg zum Ziel zu finden sondern wird im besten Fall vom Layout und dessen Farben und Bildern geleitet. Der angestrebte Minimalismus hat daher nicht nur einen visuellen Zweck sondern verfolgen auch die Funktionalität, so dass sich der Besucher wieder bewusst auf Inhalte, wie Texte, konzentrieren kann.

Ein weiterer Schritt ein angenehmeres Benutzererlebnis zu schaffen, ist die Vermeidung von geraden Formen. Stattdessen geht der Trend vermehrt in Richtung Kurven, Rundungen und asymmetrische Aufteilungen (Stichwort: Goldener Schnitt). Der Hintergrund dessen ist, digitalen Produkten die Starre und Künstlichkeit zu nehmen und stattdessen die Natur zu imitieren, d. h. wenig bis keine geraden Linien, Kurven und abgerundete Buttons. Letztere dürfen dabei auch gerne transparent (siehe Bild) dargestellt werden, um so noch mehr Leichtigkeit zu transportieren und die Webseite atmen zu lassen. Dies kommt der Seite und dem User zu Gute.

Wieso sich User mit Mikroanimationen wohler fühlen

2019 wird gute und erfolgreiche Interaktion mit Webseiten noch wichtiger als zuvor. Das hat unter anderem mit der Menge an täglichem Internetkonsum zu tun. Im Umkehrschluss bedeutet das, dass sich Webseiten analog dazu natürlicher verhalten müssen, um weiterhin einen angenehmen Aufenthalt bieten zu können. Apps machen es erfolgreich vor: Ein positives Nutzungserlebnis rückt immer weiter in den Mittelpunkt.

Designer müssen sich auf Grund dieser Weiterentwicklung immer mehr Gedanken machen, wie sich der User auf der Webseite wohl fühlt. Ein subtiler aber wichtiger Teil dabei sind sogenannte „Mikroanimationen“. Mikro heißt übersetzt „klein“ bzw. „fein“. „Animation“ bedeutet wörtlich „zum Leben erwecken“. Hierbei sind aber keine Videosequenzen oder Trickfilmanimationen gemeint sondern dezente Bewegungen von Teilen der Benutzeroberfläche. Beliebte Beispiele sind:

  • Buttons wechseln beim Hovern die Farbe und verändern beim Klick. Dies ist wertvolles Aktions-Feedback für den Besucher
  • Progressbars zeigen den Fortschritt einer Aktion, z. B. eines Downloads, an. So weiß der Benutzer wie viel Zeit er benötigt
  • Checkboxes werden mit einer kleinen Animation ausgefüllt und zeigen dauerhaft die aktuelle Auswahl des Users an
  • Warenkorb ändert die Farbe und die Anzahl dessen Elemente ploppt klein auf. Der Besucher hat die Einkäufe im Blick

Solch kleine Feedbacks verbessern die Erfahrung mit der Webseite (Stichwort: User Experience) wesentlich und erleichtern die Bedienung dieser: Der Nutzer wird entlastet und kann die restlichen Inhalte wie Texte sowie dessen Gehalt und Bilder bewusst wahrnehmen. Als weiteres Plus immitieren kleine, stufenlose Bewegungen Lebendigkeit und nehmen die Künstlichkeit des interaktiven Produktes.

Darum sind authentische Fotos so wichtig

Sie sind schön anzuschauen. Dabei können Bilder aber so viel mehr: Sie dienen wunderbar als Einstieg in eine neue Themenwelt und bieten eine willkommene Abwechslung zu endlosen Textwüsten. Hochwertige und authentische Bilder werten die Internetseite sowie den Inhalt enorm auf: Sie können einen wertvollen Einblick ins Unternehmen geben und zeigt reale Mitarbeiter, welche man beim Besuch auch antrifft. Das schafft Transparenz und Vertrauen. Zusätzlich können die richtigen Bildausschnitte das Motiv deutlicher und spannender in Szene setzen (Stichwort: Fibonacci Spirale), denn Symmetrie kann schnell unnatürlich und langweilig anmuten.

Steigt man tiefer in das Thema ein, tun sich ganz andere Eigenschaften auf: Zum Beispiel assoziieren Betrachter Motive mit Luxusartikeln mit Ansehen, Wohlstand und Trends. Aufnahmen von Gesichtern können unterbewusst die Aufmerksamkeit des Besuchers auf andere Elemente lenken, denn wohin die Person auf dem Bild blickt, sieht man meist automatisch auch hin. Diesen Trick kann man sich gut bei Inhalten zu Nutze machen, die der User nicht übersehen darf. Ein Lächeln hingegen erzeugt positive Emotionen und verbessern somit auch die User-Experience.

Auf der anderen Seite aber: Qualitativ schlechte Bilder können den guten Eindruck einer Seite beschädigen. Daher sollte sehr darauf geachtet werden, wer die Fotos erstellt: Lieber investiert man etwas mehr in gute, aussagekräftige Fotos als in einen unprofessionellen Eindruck, der darüber entscheiden könnte, ob der Besucher vielleicht doch den Mitbewerber kontaktiert.

 

In den letzten Jahren wurde schon viel unternommen, um den Aufenthalt auf Webseiten angenehmer und komfortabler zu gestaltet. 2019 werden diese Anstrengungen mit klugem Feintuning ergänzt und noch weiter auf den Besucher zugegangen. Wichtig ist, das man ihn leitet und dorthin führt, wo er letzten Endes landen soll - und das er es gerne getan hat.