F7 Redesign - Die neue Corporate Identity

Nach meinem Einstieg bei F7.de im August 2023 war mein erstes Projekt die Neugestaltung unserer Firmenwebsite. Hier ging es darum, die eigene Firmenseite als Referenz für Projekte zu nehmen, die wir gerne zukünftig umsetzen würden. Daher galt es, ein modernes und minimalistisches Design zu entwickeln um unsere Seiteninhalte, aber auch unser Können so richtig gut in Szene zu setzen. 

Natürlich haben wir es uns nicht nehmen lassen ein paar kleinere Spielereien mit einzubauen, um den Charakter der Seite ein wenig aufzulockern. Mehr werde ich dazu aber erstmal nicht verraten ;) 

Visuelle Identität

Bei einem Blick auf unsere bisherige Webseite wurde durch die zarten Überschriften in Serifen, in Kombination mit den harten Kanten und der stark limitierten Farbpalette, ein Bild gezeichnet, welches eine Marke zeigt, für die Außenwirkung kein großes Gewicht zu haben scheint. Dabei ist es besonders bei einer Webagentur wichtig, die Außenwirkung durch ein konsequentes und modernes Markenbild zu prägen, um die Qualität und Aktualität der eigenen Arbeit zu vermitteln. 

Bevor es also an die Umsetzung der neuen Website ging, stand zuerst eine Aktualisierung der Corporate Identity (CI) von F7 an. 

Die Wahl der Typographie

Bei der Analyse der Schriften auf der alten F7 Website fiel mir auf, dass drei unterschiedliche Schriftarten in zahlreichen Schnitten verwendet wurden. 

Grundsätzlich ist die Kombination aus unterschiedlichen Schriftarten ein guter Weg, um Inhalte attraktiver darzustellen und die Informationshierarchie zu verdeutlichen, jedoch kann die Verwendung von zu vielen Schriftarten zu einer visuellen Unruhe führen und die Benutzerfreundlichkeit beeinträchtigen. Ein einheitliches typografisches Konzept mit maximal zwei Schriftfamilien verbessert die Lesbarkeit und unterstützt die Markenbildung durch ein konsistentes Erscheinungsbild. Mehr zur Kombination von Schriftarten

Um sich von dieser visuellen Unruhe zu lösen und ein klares und modernes Markenbild zu etablieren, haben wir uns auf 2 serifenlosen Schriften geeinigt, die gut miteinander harmonieren. 

Lato bietet eine sehr gute Lesbarkeit und vielseitige Einsatzmöglichkeiten und eignet sich damit perfekt für den Einsatz im Fließtext und Labels. Bei der Schrift Manrope fallen sofort die geometrischen Formen auf, die der Schrift einen klaren, minimalistischen Charakter verleihen und in Kombination mit Lato ein modernes Schriftbild liefern. Manrope war also unsere Wahl für Überschriften, um einen Kontrast zum Fließtext in Lato zu schaffen. Hierdurch wird die Informationshierarchie und somit die Gewichtung von verschiedenen Informationen viel deutlicher als zuvor. 

Nachdem das Grundgerüst in Form von Typographie und Farbpalette beschlossen war, hieß es einen Stil zu finden, mit dem wir uns als Firma identifizieren wollen und der die Nutzer:innen unsere Seite visuell anspricht. 

Die Wahl der Farben

Um unsere enge Verbindung zur TYPO3 Community zu symbolisieren, haben wir uns dazu entschieden, die Farbpalette um einen orangen Farbton zu erweitern. Zuvor existierte zwar bereits ein oranger Farbton auf der F7 Website, dieser wurde allerdings nur innerhalb von Bildern verwendet und fand keinerlei Anwendung in den UI Elementen der Seite. 

Es stellte sich schnell heraus, dass die Komplementärfarben Blau und Orange zwar eine gute Kombination bildeten, der blasse Blauton im Kontrast jedoch nicht den gewünschten Effekt erzielte und das Orange zu dominant wirkte. Auch das Thema Barrierefreiheit spielt bei der Farbwahl eine große Rolle, denn es gilt, die Farben so zu wählen, dass der entstehende Kontrast, zum Beispiel beim Einsatz als Text- und Hintergrundfarbe hoch genug sein muss, um eine einfache Lesbarkeit zu garantieren. 

Hieraus resultierte für mich die Anforderung, den primären Farbton der F7 Marke abzuändern, da die Farbpalette durch Abstufungen und Erweiterungen eh angepasst werden musste. 

Bei einer kurzen internen Recherche nach den verwendeten Blautönen sind mir einige Anwendungsfälle aufgefallen, in denen verschiedene Blautöne verwendet wurden. 

• F7 Briefkopf und Printmaterial 
• Wand im Büro 
• F7 Website und digitales Branding 

Natürlich handelt es sich hier um verschiedene Einsatzgebiete, bei denen leichte Abweichungen im Farbton auch nicht unüblich sind. Dennoch entstand durch das Betrachten der verschiedenen Farbanwendungen der Wunsch nach einem dunkleren Blauton, um einen dynamischen Kontrast gegenüber der knalligen Farbe Orange herzustellen. 

Die neue F7 Farbpalette

Nachdem ich die Freigabe erhielt, die primäre Markenfarbe im Zuge des Website Redesigns anzupassen entstand schnell die Farbpalette für die neue F7. 

Wie es weiter geht

Mit der visuellen Neuausrichtung der Marke als Basis, begann die eigentliche Konzeption und Gestaltung der Website. Im nächsten Artikel dieser Serie werfen wir einen Blick auf die Planung der Informationsarchitektur und auf das neue Navigationskonzept.