F7 Redesign - The new Corporate Identity

After joining F7 Media in August 2023, my first project was the redesign of our own company website. The goal here was to use  website as a reference for projects that we would like to realise in the future. The challenge was therefore to develop a modern and minimalist design to really showcase our website content and our expertise.

Of course, we didn't miss the opportunity to incorporate a few small gimmicks to liven up the character of the site a little. But that's all I'm going to reveal for now ;) 

Visual identity

Looking at our previous website, the delicate serif headlines, combined with the hard edges and the very limited colour palette, painted a picture of a brand that did not seem to carry much weight in terms of external impact. It is particularly important for a web agency to characterise its public image with a consistent and modern brand image in order to convey the quality and topicality of its own work.

So before the new website could be realised, F7's corporate identity (CI) had to be updated first. 

The choice of typography

When analysing the fonts on the old F7 website, I noticed that three different fonts were used in numerous styles. 

In theory, combining different fonts is a good way to present content in a more attractive way and to clarify the hierarchy of information, but using too many fonts can lead to visual clutter and impair user-friendliness. A standardised typographic concept with a maximum of two font families improves readability and supports branding through a consistent look and feel. More about combining fonts

In order to break away from this visual confusion and establish a clear and modern brand image, we agreed on 2 sans serif fonts that harmonise well with each other. 

Lato offers very good legibility and versatile application options, making it perfect for use in body text and labels. The geometric shapes of Manrope immediately catch the eye, giving the font a clear, minimalist character and creating a modern typeface in combination with Lato. Manrope was therefore our choice for headlines to create a contrast to the body text in Lato. This makes the hierarchy of information and therefore the weighting of different information much clearer than before.

Once the basic framework in the form of typography and colour palette had been decided, it was time to find a style that we as a company wanted to identify with and that would visually appeal to the users of our site. 

The choice of colors

To symbolise our close connection to the TYPO3 community, we decided to add an orange colour to the colour palette. Although an orange colour already existed on the F7 website, it was only used within images and was not used in the UI elements of the site.

It quickly became apparent that although the complementary colours blue and orange made a good combination, the old pale blue tone did not achieve the desired effect in contrast and the orange was too dominant. The issue of accessibility also plays a major role in the choice of colour, as the colours have to be selected in such a way that the resulting contrast, for example when used as text and background colour, must be high enough to guarantee easy readability. 

This resulted in the requirement for me to change the primary colour tone of the F7 brand, as the colour palette had to be adapted anyway through gradations and additions.

During a brief internal search for the shades of blue used, I noticed several applications in which different shades of blue were used. 

• F7 Letterhead and print material 
• A highlighted Wall in the office 
• F7 Website and digital branding 

Of course, these are different areas of application where slight variations in colour tone are not unusual. Nevertheless, when looking at the various colour applications, the desire arose for a darker shade of blue to create a dynamic contrast to the bright orange color. 

The new F7 colour palette

After I was given the go-ahead to adapt the primary brand colour as part of the website redesign, the colour palette for the new F7 was quickly created. 

What comes next

With the visual reorientation of the brand as a basis, the actual conception and design of the website began. In the next article in this series, we will take a look at the planning of the information architecture and the new navigation concept.