Diese Webdesign-Trends bestimmen das Jahr 2020

Everything stays different – auch in diesem Jahr bleibt im Bereich Webdesign kein Stein auf dem anderen. 2020 warten sowohl technisch als auch gestalterisch zahlreiche Neuigkeiten rund um das Thema Webdesign auf Sie, die nicht nur spannend sind, sondern auch viele neue Möglichkeiten eröffnen. Die Anforderungen haben sich geändert und nun gilt es vor allem, ein Benutzererlebnis mit perfekter Struktur und hohem Wiedererkennungswert zu schaffen. Eine fesselnde Produktgeschichte und detaillierte Hintergrundinfos dürfen dabei ebenfalls nicht fehlen. Technisch ist vor allem erwähnenswert, dass es CSS-Grid ab sofort für alle Browser gibt. Was sich in diesem Jahr sonst noch tut und welche Themen Sie keinesfalls verpassen dürfen, haben wir für Sie zusammengefasst.

Vereinheitlichte Individualität

Was auf den ersten Blick nach zwei unvereinbaren Gegensätzen aussieht, ergänzt sich im Jahr 2020 auf einzigartige Weise. Vereinheitlichte Layouts spielen weiterhin eine große Rolle. Social Media wird in diesem Jahr von Stream-, Messenger- sowie Chatbot-Layouts dominiert. Die große Herausforderung hierbei wird es sein, trotz der Vereinheitlichung der Layouts einen hohen Wiedererkennungswert zu schaffen. Damit dieser Spagat gelingt, müssen alle Elemente wie Farben und Typographie perfekt aufeinander abgestimmt sein und die Aufmerksamkeit der Nutzer vom ersten Moment an fesseln. Selbstverständlich darf dabei auch die Lesbarkeit der Texte nicht beeinträchtigt werden – hierin liegt eine der größten Aufgaben. Erfolgreiche Beispiele zeigen bereits, wie man es richtig macht: mit eine hohem Level an Emotionalität und Authentizität. Um dieses zu erreichen, empfehlen wir Ihnen, die Geschichte Ihrer Marke auf einzigartige Weise – nachvollziehbar und berührend – zu erzählen.

An leuchtenden Farben führt kein Weg vorbei

Pantone gibt es vor und wir ziehen nach: Starke Farben sind einer der wichtigsten Trends im Jahr 2020. Sie stechen nicht nur sofort ins Auge, sondern eignen sich auch perfekt, um in reduzierten Designs Akzente zu setzen und die Aufmerksamkeit der Nutzer zu fesseln. Zusammen mit einem einzigartigen Grafikstil und ausgefallenen Verzierungen sind sie die ideale Ergänzung zu klaren Linien, wenig Text und viel Weißraum.

Typografische Extravaganz aus dem Plakatdesign

CSS-Masken und andere Effekteigenschaften machen es möglich: Texte mit Texturen, Verläufen und Hintergrundbildfarben halten im großen Stil Einzug ins Webdesign. Auf weißen oder schwarzen Hintergründen springen sie sofort ins Auge und sorgen für einen hohen Wiedererkennungswert, der beim angesagten reduzierten Design ohnehin nicht so einfach zu erreichen ist. Dass das Ganze jedoch nicht zulasten der Lesbarkeit gehen darf, versteht sich von selbst. Wir sind der Meinung, dass es daher umso wichtiger ist, dass auf Kontraste und hervorstechende Schriftarten gesetzt wird. Das gilt besonders auf bunten sowie unruhigen Hintergründen.

So setzen Sie die Trends richtig um

Selbstverständlich sollten Sie nicht jedem Trend einfach blind vertrauen. Dabei ist es oft schwierig, die Spreu vom Weizen zu trennen und sich für oder gegen die Umsetzung eines Trends zu entscheiden. So kann es passieren, dass Sie Ihr komplettes Design an einen neuen Trend anpassen und dieser nach einem halben Jahr bereits wieder in Vergessenheit geraten ist oder aber von vornherein überhaupt nicht beim Zielpublikum ankommt. Um dies zu vermeiden, analysieren wir vorher ausführlich, welche Trends das Potenzial haben, länger zu bleiben, und bei welchen es sich eher um Eintagsfliegen handeln wird. Als Grundsatz gilt dabei immer: Je schnelllebiger Trends sind, desto eher eignen sie sich für kleinere Projekte wie zum Beispiel Landing Pages. Trends, bei denen sich abzeichnet, dass sie sich länger halten werden, sollten dementsprechend auch in größerem Stil und vor allem auch bei alteingessenen Unternehmen umgesetzt werden.

Wenn Sie Fragen haben, kümmern wir uns jederzeit gerne um Ihr Anliegen. Wie auch immer Sie sich entscheiden, wir stehen Ihnen als Webagentur gerne mit Rat und Tat zur Seite.

In diesem Sinne, herzlichst Ihr
Mirza M. Oezoglu

Fluid Design, Trends 2020, Webdesign

Responsive Webdesign einfach erklärt

Responsive Webdesign war, wenn mich nicht alles täuscht, 2013 /2014 das Buzzword Number One im Online-Business. Fluid Design war in aller Munde und out war auf jeden Fall (da waren sich alle einig) Fixe Layouts. Aber ist das immer noch so? Wo liegen die Unterschiede? Wo geht die Online-Reise eigentlich hin? Wir differenzieren zunächst zwischen „Website-Typ“ und „Layout-Typ“, damit wir alles leichter voneinander abgrenzen können.

Der Website-Typ beschreibt im Allgemeinen das grundsätzliche Verhalten der Seite: also ist die Seite Responsive oder Adaptive? Der Layout-Typ hingegen definiert das Verhalten des Designs einer Seite: also ob es sich um ein Fixed-Layout, Fluid-Layout oder Elastic-Layout handelt.

Website-Typen

Der Website-Type (egal ob, responsive oder adaptive) beschreibt im allgemeinen, wie sich die Seite grundsätzlich unabhängig vom Layout verhält. Bei Responsive-Websites stehen die Inhalte und das Design im Mittelpunkt. Wohingegen bei Adaptive-Websites (kommt heute fast nicht mehr zum Einsatz) die Fähigkeiten des Anzeigegerätes im Fokus stehen.

Unabhängig von beiden „Systemen“ bedient sich jede Website mindestens eines Layout-Typen: Fixed, Fluid oder Elastic.

Responsive Website

Responsive Website Design kommt zum Einsatz, wenn eine optimale visuelle Darstellung auf allen Displaygrößen erreicht werden soll. Der Fokus liegt hier klar auf der idealen Informationsaufbereitung. Durch Breakpoints (Umbrüche) wird das Mindestmaß definiert bei dem das Layout noch “funktioniert”. Dabei passt sich der Inhalt solange fließend an den verfügbaren Platz an, bis ein Breakpoint erforderlich ist. Sobald zum Beispiel zwei Teaser-Boxen nicht mehr ausreichend Platz nebeneinander haben, erfolgt ein Umbruch und das Layout ändert sich insofern, dass sich die Boxen dann zum Beispiel untereinander über die volle Breite anordnen. Die Veränderung kann durch Repositionierung, Skalierung und/oder das Ein- und Ausblenden von Inhalten auf den verfügbaren Platz erfolgen – die Webseite reagiert sozusagen in Echtzeit. Die Anpassungen erfolgen in diesem Fall client-seitig über das CSS. So werden auch nicht benötigte Inhalte geladen und je nach Platz und/oder Bedarf ein- oder ausgeblendet.

In der Regel bedienen sich Responsive Websites eines Fluid Layouts. Die Seite inkl. Der einzelnen Module nutzen prozentual den verfügbaren Platz.

Adaptive Website

Bei Adaptive Websites steht vielmehr das Ausgabegerät im Vordergrund und weniger das Design. Es werden die Fähigkeiten und die tatsächliche Auflösung der spezifischen Geräte definiert und angesprochen (768px, 1024px, etc.). Eine Adaptive Website bedient sich zwar eines flexiblen Gedankens, jedoch nicht in einer so flexiblen Art und Weise wie Responsive Websites. Man spricht im Zusammenhang mit Adaptive Websites auch von “server-seitigen Anpassungen”. Der Server prüft und liefert in diesem Fall dem Endgerät (z.B. Mobile, Tablet, Desktop) des Besuchers ein vollständig individuell abgestimmtes Template aus, welches ihm die bestmögliche User Experience ermöglicht. Mit entsprechenden spezifischen Templates werden beispielsweise einem mobilen Endgerät nur die Grafiken oder Funktionalitäten ausgeliefert, die auch tatsächlich benötigt werden.

Mit diesen Fixed Layouts orientieren sich Entwickler an sehr häufig auftretenden Displaygrößen (z.B. iPad für Tablet). Dies hat den gravierenden Nachteil, dass sollte sich die Displayauflösung des Besuchers etwas vom berücksichtigten Template unterscheiden, die Seite folglich nicht optimal angezeigt wird (Scrollbalken oder verschenkter Platz).

Jetzt werden Sie zu Recht fragen, warum nutzt man denn noch diese Technik? Nun das erkläre ich Ihnen gerne. Adaptive Design eignet sich hervorragend für sog. Kiosk-Systeme. Hier ist die Auflösung bekannt und man kann das Template optimal auf die entsprechende Auflösung anpassen.

Die Layout-Typen
Mit den Layout-Typen beschreiben wir das konkrete Verhalten des Website-Designs. Was passiert beispielsweise ganz konkret mit einer Box passiert, wenn sich zum Beispiel das Browserfenster verkleinert oder vergrößert.

Fixed Layout
Wie der Name bereits vermuten lässt, hat das Layout eine feste in Pixel definierte Breiten- und/oder Höhenangaben. Demnach kann sich das Layout auch nicht an das Browserfenster anpassen. Beim Verkleinern des Browserfensters erscheinen Scrollbalken und die Webseite wird schlichtweg „abgeschnitten“ oder auf Smartphones bis zur Unkenntlichkeit verkleinert. Bei großen Monitoren hingegen entsteht an den Seiten viel ungenutzter Freiraum.

Fluid Layout
Das Layout basiert im Grunde auf prozentualen Breitenangaben. So passt sich die Seite flexibel in der Breite an den verfügbaren Platz an. Hierfür definiert man einen Maximalwert für die Breite der Seite , den Rest erledigt das System vollautomatisch und in Echtzeit.

Elastic Layout
Beim Elastic Layout wird das Browserfenster immer vollständig ausfüllt. Die Seite passt sich also sowohl in der Höhe als auch in der Breite an. Grundvoraussetzung ist allerdings, dass alle verwendeten Inhalte sehr flexibel angelegt werden. Hier können Pixelgrafiken beim Skalieren schon einmal zu Schwierigkeiten führen.

Fazit

Die Begriffe sind im Grunde gut voneinander trennbar. Für „flexible Webseiten“ hat sich im täglichen Sprachgebrauch jedoch „Responsive Website“ als Oberbegriff etabliert. Dies liegt auch daran, dass es schlichtweg zu umständlich ist die verschiedenen Definitionen auseinander zu halten, oder weil auch Mischformen nicht ausgeschlossen sind. Der nächste Schritt ist die zunehmende Entwicklung auch eine Responsive Website um Server-seitige Anpassungen zu ergänzen (RESS = Responsive Design with server-side components). Das zeigt eindrucksvoll, dass die technischen Möglichkeiten lange nicht ausgereizt sind. Gerade wir als erfahrene Agentur sind jedoch überzeugt: das Design und das Layout sollten die User-Experience des Besuchers positiv unterstreichen. Deshalb arbeiten wir nach dem Motto: nicht alles Mögliche umzusetzen, sondern aus der Vielfalt der Möglichkeiten das Sinnvolle zu wählen.

In diesem Sinne, herzlichst Ihr
Mirza M. Oezoglu

Fluid Design, Responsive Design