Autohaus Fischer

Das Autohaus Fischer wollte eine Webseite, die alle wichtigen Informationen rund um seinen Service jederzeit leicht zugänglich macht und insbesondere die Terminvereinbarung fördert.

Sitemap

1920-1280--Fischer--Sitemap.jpg

Wir begannen mit der Erstellung der Sitemap, um direkt zu erkennen, welche Inhalte gebündelt werden sollten und wie man sie so einfach wie möglich zugänglich macht. Dies führt zu einem besseren Verständnis der Ziele und Zwecke der Website.

Wireframing

1920-1936--Fischer--Wireframes.jpg

Anschließend erstellten wir Wireframes, um mögliche Informationsarchitekturen zu definieren, die festlegten, wo die Inhalte platziert werden sollten und wie die verschiedenen Seiten miteinander in Beziehung stehen.

Component creation

1920-1280--Fischer--Components.jpg

Um die visuelle Konsistenz zu gewährleisten und die spätere Programmierung der Webseite zu beschleunigen, haben wir eine fest definierte Sammlung von Komponenten erstellt, aus denen dann die endgültigen Designs zusammengestellt wurden.

Coding

1920-1280--Fischer--Code.jpg

Nach Fertigstellung der Screendesigns, bauten wir das zugrunde liegende Designsystem der Webseite, bestehend aus den einzelnen Design-Tokens und -Komponenten. Die technische Umsetzung basiert auf dem React Framework nextjs in Kombination mit dem Headless CMS von Strapi und der Framer Motion Library.

Learning

1920-1280--Fischer--Screen-Mobile.jpg

Der Zusammenschluss vieler öffentlich zugänglichen Bibliotheken bei der Umsetzung eines solchen Projektes hat uns immer wieder gezeigt, wie positiv die Entwicklung in diese Richtung in den letzten Jahren verlaufen ist. Es zeigt, welche Mehrwerte gemeinsam erreicht werden können, anstatt isoliert zu arbeiten.