F7 Redesign - Design Trends

Current design trends

In recent years, the design landscape has evolved rapidly, giving rise to a variety of trends that have had a significant impact on the appearance of websites, apps and digital products. These trends reflect not only aesthetic preferences, but also technological advances and changing user expectations. Of course, trends are not maxims that must be followed blindly, but rather the inspiration that can be drawn from the various implementations.  

Translated with DeepL.com (free version)

Large typography

A striking design trend in which the text content becomes the main element is the use of large typography. The use of extra-large font sizes, often 20px to 32px in body text and headlines larger than 100px, creates a strong visual impact. Display fonts are often used that have been specially developed for large sizes and retain their legibility and impact even when enlarged. Short text lengths and generous white space ensure clarity and structure, while the typography itself takes center stage. Distractions caused by detailed graphics or animated backgrounds are avoided in this style in order to keep attention focused on the text. 

Modern minimalism

Modern minimalism is characterized by few, selected elements, focus on simplicity and clarity. In contrast to classic minimalist designs with hard edges, this style focuses on rounded shapes. This creates a friendlier atmosphere. Often used in modern apps and websites, it creates an elegant and user-friendly interface through clear visual hierarchy, reduced color palette and subtle animations. 

Aurora

The inspiration for the Aurora Design Trend comes from the Northern Lights (Aurora Borealis) and is implemented in the design through animated color gradients that waft irregularly through the background. The gradients convey a feeling of relaxation and naturalness and contribute to a harmonious overall picture. This image is also usually supported by rounded edges and color schemes inspired by nature. 

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­morph­ism

This style uses transparency to overlay elements and create a three-dimensional depth. Surfaces are given a glass-like appearance, giving them a slightly translucent look and making the background appear slightly blurred. Glass morphism is used in the spatial interface of the Apple Vision Pro, as the style helps to convey a sense of spatial depth and thus enables an immersive environment. Users can also better understand which elements are in the foreground and which are behind them, making it easier to navigate and interact in virtual spaces. 

These design trends are just a small sample of the diverse landscape of modern design. However, they show how design is constantly evolving to meet the needs and expectations of users while integrating new technologies and possibilities.

Comparison of design trends

After we had viewed numerous websites for inspiration and documented the various styles and trends, it was a matter of deciding on a style or combining several styles into one.  

To do this, we realised our homepage and individual content elements in three selected styles:

• Modern Minimalism
• Large Typography
• Aurora 

Our design style

None of the realised styles really convinced us visually, but that wasn't a problem as we weren't planning to stick strictly to one style anyway. We wanted to define a new style for ourselves that drew on individual characteristics of the trends mentioned: 

Large typography 

We saw the advantage of not having to support the content with images in all places and letting the textual content speak for itself. We didn't need to add an additional display font to the system, as the Manrope font in wider weights was already ideal for large headlines. The body text can also be read better and much more relaxed with plenty of white space and a larger font.

Rounded corners 

Ever since the development of the first smartphones, rounded corners have stood for a modern and friendly appearance, which is becoming more and more popular. In addition to aesthetic reasons, there are also practical reasons for this, as the rounded corners have been proven to ensure that users are less easily distracted when reading text and can keep their focus better.  

This stylistic device runs through many different trends and is now a fundamental decision when developing corporate identity and implementing the design system.  

Colour gradients and animation 

We use subtly animated colour gradients to create a sense of depth and vibrancy that breathes more life into the site than a static page. In our design, we made a conscious decision to use colour gradients mainly as background elements. This creates a subtle frame for the content and draws the focus to the interaction elements, which are kept in solid colours. This deliberate restraint ensures a clear visual hierarchy and prevents the colour gradients from distracting from the actual content. To ensure that text on colour gradients remains legible, we have chosen font colours that contrast strongly with the background colours.  

The aim was to modernise and refresh the website and brand without copying a style or reinventing the wheel. We wanted to create a contemporary and engaging aesthetic that preserved the brand's identity while providing a unique user experience through innovative technology and an outstanding user experience that sets us apart from the competition.

What happens next

In the next article in our series, we will dive deeper into the blog area and highlight the features that contribute significantly to improving user-friendliness. We'll also look at the workflow we use to create animated Lottie teasers for our blog thumbnails and share the initial approaches to our animation concept.