F7 Redesign - Focus on the blog

Our new blog should not only stand out visually from the agency area, but also offer an optimised user experience when consuming the blog content through supporting functions and navigation aids. In this article, we take a closer look at the individual functions and their purpose and show how we use Lottie animations to add variety to our blog teasers.

The optimal Reading experience

Optimum Text length and Character count

The optimum number of characters per line in our articles is designed to be easy to read. Lines that are too long (more than 80 characters) tire the eyes, while lines that are too short (less than 40 characters) can disrupt the flow of reading. We have therefore chosen a balanced line length of around 60 to 70 characters, which enables fluent reading and is easy on the eyes at the same time.

Reading time

The estimated reading time, which can be found next to the publication date in the teasers of our blog articles, provides a quick overview of the length of the respective post. This allows our readers to judge at a glance whether they have time for a short overview or a detailed article.

We calculate the reading time based on the number of words in the article and an average reading speed of 150 words per minute. This estimate is deliberately somewhat conservative, as the actual reading speed depends on various factors, such as

• Complexity of the topic: specialised articles often require a slower and more concentrated reading style than light entertainment topics.
• Individual reading habits: Some people generally read faster than others.

Content navigation and Scrollspy

The content navigation on the right-hand side of the screen serves as a practical guide through the articles. It always shows which section you are currently in and allows you to jump to other sections by simply clicking on them. The currently visible heading is highlighted so that you can maintain an overview even with longer articles and navigate to relevant content.

Thumbnails and Teasers

In the course of the redesign, we discussed whether the new teasers should have a completely independent design. However, we decided to further develop the existing aesthetics, as an adaptation to the new colour palette was planned anyway. This gave us the opportunity to create a coherent visual language.
Another important aspect was the decision to use only vector elements for the new teaser images. This not only ensures a sharp display on all devices, but also allows the teasers to be fully designed in Figma.

This eliminates the need to manage multiple Photoshop files. Instead, all teasers are combined in a central Figma file, which not only makes it easier to access uniform fonts and colours, but also offers the advantage of being able to create vector animations directly in Figma. We use these vector animations to animate individual teasers so that the blog overview no longer looks like a static wall of images and text.

Lottie Animations

What is Lottie?

When you hear about microinteractions and web animations these days, you often hear about Lottie animations. This format was originally developed to export vector animations from Adobe After Effects using the ‘Bodymovin’ plugin and embed them as HTML or SVG on the web.
The project was later supported by a team from Airbnb to make LottieFiles/Lottie more efficient and to enable the export and import of JSON.

Why Lottie?

• Performance: Lottie animations are significantly smaller and more resource-efficient compared to GIFs or videos, resulting in faster loading times and a better user experience.
• Scalability: As Lottie animations are vector-based, they can be scaled to any size without loss of quality. They look just as good on high-resolution screens as they do on small mobile devices.
• Interactivity: Lottie animations can be made interactive so that users can interact with them. This allows for a more dynamic and engaging user experience.
• Flexibility: Lottie animations can be easily integrated into various platforms and frameworks, including websites, mobile apps and even smartwatches.
• Meanwhile, so-called micro-animations and micro-interactions make software more enjoyable to use. Well-known examples of this are YouTube and Spotify's "Like" animations, which evoke positive emotions and encourage user engagement through their playful design. Lottie files are almost always used to display these animations.

How are Lottie animations created?

There are various ways to animate and export SVG elements using Lottie. In addition to the web-based Lottie Creator, there is also a practical Figma plugin that can be used to export and edit existing Figma flows.

Our workflow in Figma is as follows:

1. Create start frame & end frame
2. Create new flow & connections between the frames
3. Preview the animation in Figma
4. Export via the LottieFiles Figma plugin

How are the Animations integrated into the Website?

To integrate a Lottie animation on websites or in apps, the Lottie Player is required. This is a JavaScript library that is simply integrated using the following code snippet:

import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({ autoplay: true, loop: true, canvas: document.querySelector('#dotlottie-canvas'), src: "https://lottie.host/teaser-animation.json", });

How it continues

In the next article, we will shift our focus from the blog to the references. We will look at how we have managed to divide our projects into case studies and simple references and how the individual case studies are structured.