#spotlightatomic designliving styleguide

Atomic Design am Beispiel des Alumniportals Deutschland

Atomic Design am Beispiel des Alumniportals Deutschland

Der Design-Prozess begann mit dem Herunterbrechen der Designelemente auf kleinste Einheiten. Aus dem Corporate Design hat PPW damit das Digital Design entwickelt. Auf Basis des Atomic-Design-Ansatzes überarbeitete PPW die Oberfläche des Alumniportals Deutschland schließlich umfassend.

Moderner Workflow: Ein Muss für Entwickler und Designer

Für die Projektbeteiligten ist diese Vorgehensweise eine sinnvolle Grundlage in der Entwicklung von Layouts. Der stabile Aufbau einzelner Elemente hilft dabei, ein responsives Webprojekt einfacher und strukturierter zu machen und führt am Ende zu einer konsistenten und erweiterbaren Webseite. Dabei werden einzelne Elemente innerhalb des „Living Styleguides“ von der alten Form in die neue Form überführt.

Entwickler, Designer und Kunden profitieren vom Gestaltungsbaukasten, zumal die Gestaltung direkt in echten Templates statt in Gestaltungsdummies erfolgt. Die modularen Gestaltungsvorgaben bergen zum einen weniger Überraschungen am Ende des Prozesses. Zum anderen hat PPW das Ausrollen schrittweise über verschiedene Portalbereiche hinweg vorgenommen. Weiterer Vorteil beim Styleguide Driven Development: Die Auswirkungen von Änderungen sind unmittelbar sichtbar und können an zentraler Stelle vorgenommen werden, mit Wirkung auf alle Portalbereiche.

Magazin-Style für das Alumniportal Deutschland

Das Alumniportal Deutschland verbindet weltweit rund 135.000 Mitglieder miteinander. Dass diese sich gut auf den Seiten zurechtfinden, Texte einfach erfassen können und Orientierung erhalten, waren die Ziele des Relaunches. Das alles geht jetzt nach der Anpassung an moderne Lese- und Nutzungsgewohnheiten auf dem Alumniportal Deutschland noch besser. Das Portal ist vollständig auf Responsive Design ausgelegt, mit einem durchgängigen Bedienkonzept vom Desktop bis zum Smartphone.

Die Besucher nutzen nun eine individuelle, eigenständige Webseite im ausgefeilten Magazin-Look. Der Weißraum lässt kognitive Ankerpunkte in den Artikeln besonders zur Geltung kommen. Den Lesefluss konnte PPW damit erheblich verbessern.

Akzente aus Grau und Weiß heraus unterstreichen das Corporate Design und lassen den Nutzer gleichzeitig auf das Wesentliche fokussieren. Besonderer Hingucker ist die Login-Fläche, die sich in Rot seitlich in die Seite hineinschiebt. Nutzer können diese Fläche sofort als Login-Bereich identifizieren. Das erleichtert die Orientierung.

Der Content-first-Ansatz erlaubt der Seite seine individuelle Länge. Sie lässt sich leicht mit dem Smartphone durchscrollen. Die mobile Version ist in der Handhabung denkbar einfach: Wichtige Themen und Funktionen lassen sich zwischendurch per Wischbewegung zur Seite ansehen. Technologien wie GRUNT, Bootstrap und Sass ermöglichen es, responsive Webseiten mit modernen Navigationsprinzipien inklusive Wischgestern auszustatten, wie man sie aus Smartphone- und Tablet-Apps kennt.

Das Portal ist mit dem Content Management System TYPO3 umgesetzt.

Zur Webseite des Alumniportals Deutschland