Webdesign

• Den Atomen entsprechen UI-Elemente (d. h. die Elemente des User Interface), die nicht weiter teilbar sind, z. B. Buttons, Eingabefelder und Labels, die ein Textfeld beschriften.
• Atome bilden zusammen Moleküle, die spezifische Eigenschaften besitzen. Ein Beispiel für ein Molekül ist ein Formular, das aus den drei Atomen Label, Eingabefeld und Button besteht.
• Die Organismen entstehen aus den Molekülen und sind schon ziemlich komplexe und unabhängige UI-Komponenten, wie Header, die Navigation und Suchfunktion.
• Beim Template sind wir wieder im Webdesigner-Jargon. Templates sind die leeren Seitenvorlagen, die auf Ihren Content warten. Die zugrunde liegende Struktur der Seite ist hier gut sichtbar und ergibt sich aus den Organismen, Molekülen und Atomen.

• Individuelle Gestaltung: Aufgrund der modularen Struktur des Atomic Design lassen sich Websites ganz einfach individuell gestalten.
• Schnelle Implementierung: Der Entwickler kann Atome, Moleküle und Organismen bereits sukzessive umsetzen, ohne auf das fertige Design warten zu müssen.
• Einfache und kostengünstige Anpassungen: Wünscht der Kunde z. B. einen anders gestalteten Button, muss der Entwickler diese Änderung nur in seiner CSS-Klasse durchführen, und schon ist sie überall auf der Seite aktualisiert.
• CI-Konformität: Die zentral definierten Elemente garantieren webseitenübergreifend ein einheitliches, professionelles und den Regeln der CI entsprechendes Erscheinungsbild.

UI-Designelemente und Layouts erstellen wir in der Regel mit Sketch. Sketch arbeitet, im Gegensatz zu Photoshop, vektorbasiert und ist für Webdesign und das Erstellen responsiver Webseiten somit besser geeignet.

Als Tool zur Webseitengenerierung favorisieren wir Pattern Lab. Für den modularen Aufbau Ihrer Webseite kann man sich Pattern Lab gut als den Lego-Kasten vorstellen, aus dem wir uns bedienen. In Pattern Lab heißen alle Atome, Moleküle, Organismen und Templates Ihres User Interface nun Patterns. Diese liegen zentral in der Pattern Library. Die Vorlagen in Sketch heißen Symbole.

Pattern Lab sorgt am Ende dafür, dass alle UI-Komponenten reibungslos miteinander funktionieren.

Das Besondere: Wenn an einem Pattern oder einem Symbol Änderungen vorgenommen werden, werden diese sofort auf alle anderen Patterns und Symbole gleichen Typs übertragen. Veränderungen können so einheitlich und mühelos vorgenommen werden. 

Für das Befüllen der Website-Templates mit relevantem Content, ist ein PIM (Product Information Management System) die beste Lösung. Mit einem PIM haben Sie eine integrierte Medien- und Bildverwaltung und können Produktinfos, Kundendatensätze und Ansprechpartner intelligent mit der Webseite verbinden, ohne dass dafür externe Schnittstellen notwendig werden.

Einem wirkungsvollen Customer Experience Management steht dann nichts mehr im Weg, und Sie können auf Ihrer Webseite ganz gezielt Inhalte ausspielen, die genau auf die individuellen Bedürfnisse Ihrer Kunden zugeschnitten sind.