Software AG – Frontend Component Library für Drupal

Die Software AG betreibt erfolgreich das Online-Forum »ARIS Community«. Wir haben UX/UI Design und Frontend-Development übernommen und die Code Library in PatternLab dokumentiert.

Screenshot des Projekts

Projektzeitraum

Unsere Aufgabe

Die »ARIS Community« ist die Online-Community der Software AG für das Produkt ARIS. 2017 suchte die Software AG eine Agentur für das Redesign des Forums im Responsive Design sowie für die Umsetzung aller Frontend-Templates. Die Integration in das Drupal-CMS sollte anschließend inhouse stattfinden.

Im Jahr 2024 hat die gesamte ARIS Community ein Re-Design erhalten, dass wir ebenfalls umgesetzt haben. Auf Grundlage unserer Arbeit von 2017 haben wir alle Templates und Komponenten auf den Prüfstand gestellt, modernisiert und in PatternLab als Component Library bereitgestellt.

Mobile Ansichten der Aris Community

Weitere Infos stellen wir schnellstmöglich zur Verfügung. Nachfolgend finden Sie den Prozess des Projekts von 2017.

Scribbles

Im ersten Schritt haben wir Scribbles erstellt, um alle relevanten Elemente und Module der Website zu identifizieren. Intern wurden die Entwürfe in drei verschiedenen Größen visualisiert, um das Verhalten auf verschiedenen Displays darzustellen. Die Responsivität wurde später direkt im Browser umgesetzt.

Einige Scribbles der verschiedenen Seitentypen.

Technischer Prototyp

Aus den Skizzen sowie Inhalten und Funktionen der bisherigen Website wurde ein responsiver Prototyp entwickelt. Der Prototyp wurde mit dem Kunden abgestimmt, getestet und in mehreren Stufen optimierten.

In HTML/CSS/JS entwickelter Prototyp zur Abstimmung mit dem Kunden.

Visual Design

Ein elementarer Teil des Redesigns war die Entwicklung eines Farbleitsystems, das sich konsistent durch die Website zieht. Für den Kopfbereich der Seite wurde eine Grafik entwickelt, die in jedem Themenbereich die Farben ändert. Die teils eckige, teils abgerundete Form des Logos wurde in ausgewählten Elementen aufgegriffen.

Verschiedene Bereiche der Website in verschiedenen Farben.

UX/UI & Responsive Design

Visual Design und technischer Prototyp wurden im nächsten Schritt zusammengeführt und das responsive Design direkt im Browser ausgestaltet. Animationen und Interaktionen wurden in diesem Zuge mit entwickelt.

Finales Template der Startseite in drei exemplarischen Displaygrößen.

Go Live

Nach der Designabstimmung setzte die Software AG die Website selbstständig mit dem CMS Drupal um. Dafür erstellten wir HTML/CSS/JS-Templates. Das Forum wird nach und nach gemeinsam weiterentwickelt. Es entstehen neue Bereiche und Komponenten.