Direkt zum Seiteninhalt springen

F7 Redesign - In­for­ma­ti­ons­ar­chi­tek­tur

Die bisherige Webseite bestand aus deutlich weniger Inhalten als die Neue, daher war es damals noch nicht nötig, mehr als drei Navigationsebenen zu verwenden. Da für die neue Seite umfangreiche Inhalte geplant sind und wir unsere Leistungen umfassender beschreiben wollten, anstatt diese nur auf einer Seite aufzulisten, haben wir eine zusätzliche Navigationsebene hinzugefügt. Hierdurch teilen sich die Inhalte in kleinere, leichter zu verstehende Unterseiten auf und überwältigen die Nutzer:innen nicht mit endlos scrollenden Textwüsten.

Um den unterschiedlichen Nutzergruppen der neuen Website gerecht zu werden, haben wir die Seite konzeptuell in zwei Bereiche aufgeteilt, den Blog und den Agenturbereich. 

Agen­tur­be­reich

Im Agenturbereich war es uns ein besonderes Anliegen, potenziellen Kund:innen einen umfassenden Einblick in unser Leistungsportfolio zu bieten und die Qualität unserer Arbeit durch Referenzen und Case Studies zu untermauern. 

Die weiteren Seiten dieses Bereichs informieren über unsere Arbeitsweise, die Geschichte unseres Unternehmens, unsere Zertifizierungen und unsere enge Verbindung zur TYPO3 Community. 

  • Referenzen: Hier finden potenzielle Kund:innen eine Übersicht unserer bisherigen Projekte und können in detaillierten Case Studies mehr über unsere Herangehensweise und Erfolge erfahren. 
  • Agentur: Dieser Bereich stellt uns als Unternehmen vor und vermittelt einen Eindruck von unserer Expertise und unserem Engagement. 
  • Leistungen: Hier präsentieren wir unser breites Leistungsspektrum und zeigen, wie wir individuell auf die Anforderungen unserer Kund:innen eingehen. 
  • Kontakt: Die Kontaktseite dient als zentrale Anlaufstelle für Anfragen und ermöglicht eine einfache Kontaktaufnahme. 
  • Teams: Hier stellen wir unsere interdisziplinären Teams und die Struktur der Agentur vor. 
  • Jobs: Hier finden Interessierte unsere aktuellen Stellenanzeigen und können sich über offene Positionen informieren. 

Agenturbereich der neuen F7

Blogbereich der neuen F7

Blogbereich

Unser Blog ist mehr als nur eine Informationsquelle zu unseren Produkten und Dienstleistungen. Er öffnet ein Fenster zu unserer Unternehmenskultur und gibt Einblicke in das, was uns ausmacht. Beiträge wie Ausbildung bei F7 - Der erste Tag gewähren einen authentischen Blick hinter die Kulissen von F7 und vermitteln unsere Werte. So können sich Interessierte ein umfassendes Bild von uns machen. 

Durch die klare Trennung zwischen Informationen zu unseren Dienstleistungen und Einblicken in die Unternehmenskultur sprechen wir gezielt unterschiedliche Zielgruppen an und erleichtern die Navigation auf unserer Website. Potenzielle Kund:innen finden schnell und übersichtlich alles Wissenswerte zu unseren Leistungen und Projekten, während der Blog insbesondere für Bewerber:innen eine wertvolle Ressource darstellt. Dank der neuen Struktur müssen sich Nutzer:innen nicht mehr durch unübersichtliche Textwüsten kämpfen, sondern finden die Inhalte übersichtlich aufbereitet auf einzelnen Seiten. 

Visuelle Trennung

Um diese konzeptionelle Trennung von Blog und Agentur auch visuell und technisch umzusetzen, haben wir ein Konzept entwickelt, das an eine Single Page Application (SPA) erinnert. Der Clou: Der Blog lässt sich über eine prominent platzierte Sidebar öffnen und schließen, unabhängig von der Hauptnavigation. Unser Ziel war es, die neue F7-Website nicht nur performant, sondern auch visuell ansprechend zu gestalten. Deshalb hat unser Frontend-Entwickler Felix verschiedene Technologien unter die Lupe genommen und sich schließlich für barba.js entschieden. 

Barba.js ist eine JavaScript-Bibliothek, die es ermöglicht, nahtlose Übergänge zwischen Seitenwechseln zu realisieren, ohne dabei Elemente, die auf mehreren Seiten gleichbleiben, neu zu rendern. Das Ergebnis: Beim Navigieren durch die Seiten entsteht das Gefühl, eine native App zu bedienen. Neue Inhalte laden schneller und flüssiger als bei herkömmlichen Websites. Animierte Interaktionen mit der Sidebar machen es noch attraktiver, zwischen Blog und Agenturbereich hin und her zu wechseln und neue Inhalte zu entdecken. 

Wireframes und Prototypen

Der nächste Schritt war die Entwicklung von Wireframes, um die Struktur und Informationshierarchie der Inhalte und einzelnen Seiten zu visualisieren und zu planen. Hierbei bauten wir zuerst die geplante Seite aus Wireframes auf und entschieden dann, welche Module (Content Elemente) wir technisch umsetzen und nach Release den Redakteur:innen unseres Systems zur Verfügung stellen wollen.  

Hieraus ergaben sich 18 unterschiedliche Content-Elemente, die von einfachen Textelementen über Teaser-Walls bis hin zu interaktiven Galerien reichten. Um die User Experience zu optimieren, testeten wir diese interaktiven Komponenten intensiv mit Hilfe von Prototypen. So konnten wir potenzielle Fehler oder Schwierigkeiten, beispielsweise bei der Navigation oder der Bedienung der Galerien, frühzeitig erkennen und minimieren. Dieser iterative Prozess ermöglichte es uns, die Benutzerfreundlichkeit der Website kontinuierlich zu verbessern und sicherzustellen, dass alle Elemente intuitiv und reibungslos funktionieren.

Wie es weitergeht

Nachdem das Grundgerüst aus Seiten und Modulen und der neuen Corporate Identity stand, machten wir uns auf die Suche nach einem geeigneten Design- und UI-Stil. 

Im nächsten Artikel werden wir Einsicht in unseren Entscheidungsprozess geben, sowie ein Bild von den aktuellen UI-Trends vermitteln, die sich durch das Web ziehen.