F7 Redesign - Design Trends

Aktuelle Design Trends

In den letzten Jahren hat sich die Designlandschaft rasant weiterentwickelt und eine Vielzahl von Trends hervorgebracht, die das Erscheinungsbild von Websites, Apps und digitalen Produkten maßgeblich prägen. Diese Trends spiegeln nicht nur ästhetische Vorlieben wider, sondern auch technologische Fortschritte und veränderte Nutzererwartungen. Natürlich handelt es sich bei Trends nicht um Maxime, denen man blind folgen muss, sondern vielmehr um die Inspiration, die man aus den verschiedenen Umsetzungen herausziehen kann.  

Große Typographie

Ein markanter Designtrend, bei welchem der Textinhalt zum Hauptelement wird, ist der Einsatz von großer Typografie. Durch die Verwendung von extragroßen Schriftgrößen, oft 20px bis 32px im Fließtext und Headlines die größer als 100px sind, wird eine starke visuelle Wirkung erzielt. Dabei kommen häufig Display Fonts zum Einsatz, die speziell für große Größen entwickelt wurden und ihre Lesbarkeit und Wirkung auch bei starker Vergrößerung behalten. Kurze Textlängen und großzügiger Weißraum sorgen für Klarheit und Struktur, während die Typografie selbst im Mittelpunkt steht. Ablenkungen durch detaillierte Grafiken oder animierte Hintergründe werden in diesem Stil vermieden, um die Aufmerksamkeit beim Text zu halten. 

Moderner Mi­ni­ma­lis­mus

Moderner Minimalismus zeichnet sich durch wenige, ausgewählte Elemente, Fokus auf Einfachheit und Klarheit. Im Gegensatz zu klassischen minimalistischen Designs mit harten Kanten setzt dieser Stil auf abgerundete Formen. Dies erzeugt eine freundlichere Atmosphäre. Häufig verwendet in modernen Apps und Websites, schafft er eine elegante und benutzerfreundliche Oberfläche durch klare visuelle Hierarchie, reduzierte Farbpalette und dezente Animationen. 

Aurora

Die Inspiration für den Aurora Design Trend stammt von Polarlichtern (Aurora Borealis) und wird im Design durch animierte Farbverläufe umgesetzt, die unregelmäßig durch im Hintergrund wabern. Die Verläufe vermitteln ein Gefühl von Entspannung und Natürlichkeit und tragen zu einem harmonischen Gesamtbild bei. Dieses Bild wird auch meist durch abgerundete Kanten und Farbschemen unterstützt, die sich an der Natur orientieren. 

Bento Grids

Flexible layout systems inspired by Japanese bento boxes are known as bento grids. They allow content to be divided into rectangular areas of different sizes and offer advantages such as flexibility, responsive design, visual hierarchy and efficient use of space

Glass­mor­phism

Dieser Stil nutzt Transparenz, um Elemente überlagern zu können und so eine dreidimensionale Tiefe zu erzeugen. Oberflächen erhalten ein glasartiges Aussehen, wodurch sie leicht durchscheinend wirken und den Hintergrund leicht verschwommen erscheinen lassen. Beim räumlichen Interface der Apple Vision Pro kommt Glassmorphismus zum Einsatz, da der Stil dazu beträgt, ein Gefühl von räumlicher Tiefe zu vermitteln und so eine immersive Umgebung ermöglicht. Ebenfalls können Nutzer besser nachvollziehen, welche Elemente im Vordergrund stehen und welche sich dahinter befinden, was die Navigation und Interaktion in virtuellen Räumen erleichtert. 

Diese Design-Trends sind nur ein kleiner Ausschnitt aus der vielfältigen Landschaft der modernen Gestaltung. Sie zeigen jedoch, wie sich Design ständig weiterentwickelt, um den Bedürfnissen und Erwartungen der Nutzer:innen gerecht zu werden und gleichzeitig neue Technologien und Möglichkeiten zu integrieren.

Vergleich von Design Trends

Nachdem wir zahlreiche Websites zu Inspirationen gesichtet und die verschiedenen Stile und Trends dokumentiert hatten, ging es darum, sich für einen Stil zu entscheiden oder mehrere Stile zu einem zu kombinieren.  

Hierzu setzten wir unsere Startseite und einzelne Content Elemente in drei ausgewählten Stilen um: 

• Modern Minimalism 
• Large Typography 
• Aurora 

Unser Design-Stil

Keiner der umgesetzten Stile konnte uns visuell so richtig überzeugen, aber das war kein Problem, da wir ohnehin nicht planten, uns strikt an einen Stil zu halten. Wir wollten einen neuen Stil für uns definieren, der auf einzelne Eigenschaften der genannten Trends zurückgreift: 

Große Typographie 

Wir sahen den Vorteil darin, nicht an allen Stellen darauf angewiesen zu sein, die Inhalte mit Bildern unterstützen zu müssen und den textlichen Inhalt quasi für sich sprechen zu lassen. Hierbei mussten wir nicht noch eine zusätzliche Display Schrift ins System bringen, da die Manrope Schrift in breiteren Schnitten bereits ideal für große Headlines war. Auch der Fließtext lässt sich mit viel Weißraum und größerer Schrift besser und viel entspannter lesen. 

Abgerundete Ecken 

Spätestens seit der Entwicklung der ersten Smartphones stehen abgerundete Ecken für ein modernes und freundliches Erscheinungsbild, welches sich mehr und mehr durchsetzt. Das hat neben ästhetischen Gründen auch praktische Gründe, denn die abgerundeten Ecken sorgen nachweislich dafür, dass sich Nutzer:innen beim Lesen von Text nicht so leicht ablenken lassen und besser den Fokus behalten können.  

Dieses Stilmittel zieht sich durch viele verschiedene Trends und ist heutzutage eine Grundsatzentscheidung bei der Entwicklung der Corporate Identity und bei der Umsetzung des Design Systems.  

Farbverläufe und Animation 

Durch dezent animierte Farbverläufe erschaffen wir ein Gefühl von Tiefe und Lebendigkeit, welche der Seite mehr Leben einhaucht als eine statische Seite. In unserem Design haben wir uns bewusst dafür entschieden, Farbverläufe hauptsächlich als Hintergrundelemente einzusetzen. Dadurch schaffen wir einen dezenten Rahmen für die Inhalte und lenken den Fokus auf die Interaktionselemente, die in Volltonfarben gehalten sind. Diese bewusste Zurückhaltung gewährleistet eine klare visuelle Hierarchie und verhindert, dass die Farbverläufe vom eigentlichen Inhalt ablenken. Um sicherzustellen, dass Texte auf Farbverläufen gut lesbar bleiben, haben wir Schriftfarben gewählt, die in starkem Kontrast zu den Hintergrundfarben stehen.  

Ziel war es, die Website und die Marke zu modernisieren und aufzufrischen, ohne dabei einen Stil zu kopieren oder das Rad neu erfinden zu müssen. Wir wollten eine zeitgemäße und ansprechende Ästhetik schaffen, die die Identität der Marke bewahrt und gleichzeitig durch innovative Technologie und eine herausragende Benutzerfreundlichkeit ein einzigartiges Nutzererlebnis bietet, das uns von der Konkurrenz abhebt.

Wie es weiter geht

Im nächsten Artikel unserer Serie tauchen wir tiefer in den Blogbereich ein und beleuchten die Features, die maßgeblich zur Verbesserung der Nutzerfreundlichkeit beitragen. Außerdem gehen wir auf den Workflow ein, mit dem wir animierte Lottie Teaser für unsere Blog Thumbnails erstellen und teilen die ersten Ansätze unseres Animationskonzepts.