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