Cordes und Graefe – Website-Komponenten

Für den Haustechnik-Dienstleister Cordes & Graefe haben wir das UX/UI Design sowie die Frontend-Umsetzung der Website übernommen. Die Component Library umfasst mehr als 40 Komponenten und 18 Templates.

Leistungen

Projektzeitraum

2018 – heute

Unsere Aufgabe

Die Cordes & Graefe KG ist Teil der GC-Gruppe, einem Verbund von Großhandelsunternehmen für Waren der Haustechnik. Das Unternehmen suchte eine Agentur für UX- und UI-Design, die responsive Umsetzung im Frontend sowie die Dokumentation in Form eines Frontend Styleguides.

Kern des Projekts war der Aufbau einer Component Library zur Dokumentation und Weiterentwicklung der Website. Die Implementierung des CMS Drupal war Aufgabe einer anderen Agentur, die ebenfalls mit der Component Library gearbeitet hat.

Wireframes

Von Cordes & Graefe erhielten wir zu Beginn des Projekts Wireframes als konzeptionelle Grundlage und zur Kalkulation des Projekts. Anhand der gelieferten Wireframes haben wir Komponenten und Templates identifiziert.

Komponenten & Templates

Die identifizierten Elemente wurden inhaltlich mit dem Kunden abgestimmt und responsiv umgesetzt. Der Prozess fand in mehreren Abstimmungsschleifen statt. Das visuelle Design war in dieser Projektphase zweitrangig, daher wurde in Graustufen gearbeitet.

Aus den entwickelten Komponenten wurden Seitentypen (Templates) zusammengesetzt, die in Summe die gesamte Website widerspiegeln. Insgesamt haben wir 18 Templates und 40 Komponenten mit 150 Varianten erstellt.

Verschiedene Komponenten und Templates des Projekts. Bereits in dieser Phase war alles stufenlos responsiv im Browser nutzbar.

Component Library & Frontend Styleguide

Alle Komponenten und Templates sind von Beginn an responsiv gestaltet worden. In Form einer Component Library wurde eine interaktive Vorschau und der Code jeder Komponente dokumentiert. Diese Dokumentation diente auch als Kommunikationsgrundlage. Es wurde beispielsweise früh im Projekt sichergestellt, dass die spätere Übergabe des Frontend-Codes an die Backend-Agentur reibungslos funktioniert.

Component Library am Beispiel zweier Komponenten: Links kann aus einer Liste die gewünschte Komponente ausgewählt werden. Rechts unten ist die responsive Vorschau zu sehen. Darüber kann optional der Code eingeblendet werden.

Visual Design

Für das visuelle Erscheinungsbild der Website haben wir zunächst einen statischen Entwurf der Startseite unter Berücksichtigung des Corporate Designs entwickelt. In Absprache mit dem Kunden wurden daran einige Anpassungen vorgenommen. Auch Interaktionseffekte und Animationen wurden besprochen.

Links: Unser erster Entwurf des visuellen Designs. Rechts: finales Ergebnis nach einige Korrekturen.

Vom grundlegenden Visual Design der Startseite ausgehend, haben wir alle Komponenten im gleichen Stil gestaltet. Dieser Prozess fand direkt im Frontend Design statt und wurde anhand der Component Library mit dem Kunden besprochen und freigegeben. Es konnte daher auf weitere statische Design-Entwürfe verzichtet werden.

Verschiedene finale Komponenten im Stil des Projekts

Skalierbar und zukunftssicher

Der Aufbau der Website in universell einsetzbaren Komponenten bietet viel Flexibilität. Weitere Seitentypen können mit geringem Aufwand gestaltet werden. Der von uns entwickelte »Living Styleguide« stellt die Konsistenz des Designs sicher und wird stetig weiterentwickelt.

Verschiedene Seitentypen in der Übersicht. Rechts zu sehen eine farbliche Variante, die ebenfalls Teil der Beauftragung war.

Go Live

Nach der Ausgestaltung des Frontend-Styleguides übernahm eine externe Agentur die Entwicklung des Backends und setzte die Website mit Drupal um. Durch die frühzeitige Abstimmung der technischen Übergabebedingungen schon während der Entwicklung des Styleguides haben wir eine einfache Umsetzung sichergestellt.