Adobe bietet eine Reihe wiederverwendbarer und produktionsreifer Baukasten-Module für sein Content-Management-System AEM an.

Diese nennen sich „Adobe Core Components“ und verkürzen in erster Linie die Entwicklungszeit.

Aber wie erstellt man eine Webseite mit Core Components genau und was gibt es dabei zu beachten? Welches ist der beste Designansatz, und wie sollten die Teammitglieder zusammenarbeiten?

Wenn Ihr Unternehmen AEM oder AEM Cloud Service verwendet, Sie den Designprozess beschleunigen und dabei die bewährten Methoden des AEM-Styling-Systems befolgen möchten, sind Sie in diesem Beitrag genau richtig.

Wir erklären Ihnen, wie Sie eine lange Gestaltungsphase und zu viel Hin und Her in der Entwicklung vermeiden können.

Wir beschreiben den idealen Arbeitsablauf für die Gestaltung von Benutzererlebnissen und die skalierbare Erstellung von Webseiten.

In diesem Artikel..

.. erfahren Sie, was Core Components sind…

.. und wie Ihr Designteam und Ihr Entwicklungsteam zusammenarbeiten sollten!

AEM-Styling-Prozess in Kurzform

Wir konzentrieren uns zum Anfang dieses Artikels auf den Styling-Prozess mit Adobe Experience Manager.

Der beschriebene Prozess passt besonders zu neuen Projekten mit AEM Cloud Service.

Allerdings können Sie auch mit einer On-Premise-Version von AEM einen ähnlichen Designansatz verfolgen.

Die Grundlage des Styling-Prozesses bleibt für alle AEM-Versionen gleich und nutzt die Adobe Core Components, eine Bibliothek aus vorgefertigten Bausteinen.

Der Hauptgedanke hinter dem Gestaltungsprozess lässt sich in drei Konzepten zusammenfassen:

• Verwendung standardisierter Bausteine
• Low Code, ein Software-Entwicklungsansatz, der wenig bis gar keinen Programmieraufwand erfordert
• Wiederverwendbarkeit

Adobe Core Components sind mehr als nur eine Bibliothek von Webelementen.

Sie bestimmen von Anfang an die Gestaltung der Nutzererfahrung und helfen Designern, Webseiten-Besitzern und Entwicklern, an einem gemeinsamen Rahmen zu arbeiten.

Low Code ist ein wichtiger Aspekt des Gestaltungsprozesses. Warum immer das Rad neu erfinden?

Die Core Components bieten eine Grundlage, die den Entwicklungsaufwand drastisch reduziert und die Hauptaufgabe auf das Styling einzelner Bausteine beschränkt. Mit anderen Worten: Es geht lediglich um die Anpassung von CSS und JS. HTML wird nicht angepasst.

Schliesslich müssen die Designelemente für andere Webseiten, Landing Pages oder Intranets wiederverwendbar sein.

Wenn Unternehmen in AEM investieren und eine konsistente Benutzererfahrung über viele Webseiten und Kanäle hinweg aufbauen möchten, müssen sie eine angemessene Informationsarchitektur in Betracht ziehen. Eine gut konzipierte Komponentenbibliothek hilft bei der Implementierung von Webseiten in grossem Umfang.

Im Folgenden werden wir diese Konzepte im Detail erläutern und erklären, was Core Components sind und was es bedeutet, die Nutzererfahrungen mit diesen im Hinterkopf zu entwickeln, um das Projektdesign massgeblich zu beschleunigen.

Was sind Core Components in AEM?

Die Core Components sind standardisierte Web-Content-Management-Komponenten (WCM) für Adobe Experience Manager (AEM).

Sie wurden mit AEM 6.3 eingeführt und zielen darauf ab, die Entwicklungszeit zu verkürzen, die Wartungskosten zu senken und eine bessere Aktualisierbarkeit zu gewährleisten.

Die Verwendung von Core Components ist der beste und empfohlene Ansatz, um ein neues Projekt mit AEM als Cloud Service zu starten. Core Components sind Cloud-fähig. Mit ihnen können Sie neue Webseiten schneller fertigstellen.

Wenn Sie Erfahrung mit der Erstellung von Webseiten haben, ist Ihnen vielleicht aufgefallen, dass einige Elemente oder UI-Muster recht häufig vorkommen. Dazu zählen zum Beispiel Text- und Bildelemente oder auch Teaser, die den Inhalt verwandter Seiten hervorheben.

Die Core Components-Bibliothek bietet eine Liste von 30 vielseitigen Bausteinen, die mit wenigen Klicks zusammengestellt werden können. Dies umfasst unter anderem:

• Titel
• Text
• Bild
• Liste
• Teaser
• Download
• Buttons
• Und noch viel mehr..

Diese Komponenten sind so konzipiert, dass sie flexibel sind und zu fast jeder Art von Layout zusammengesetzt werden können. Unserer Erfahrung nach können 80 bis 90 % der üblichen Elemente einer Webseite mit Core Components und etwas Styling umgesetzt werden.

Wie Sie unten sehen können, gibt es die Teaser-Components in vier Varianten, die die meisten Anwendungsfälle abdecken.

Wenn etwas fehlt, können Sie einzelne Core Components auch anpassen und diese um zusätzliche Funktionen erweitern oder für komplexere Szenarien von Grund auf neu erstellen. 

Da Adobe Core Components Open Source sind, können Sie sie auf Github finden.

Zusammenfassend lässt sich sagen, dass Core Components einen standartisierten Weg zur Erstellung von Webseiten bieten und daher viele Vorteile haben:

• Design-agnostisch: Daten, Logik und Design sind vollständig getrennt
• Stilisierung: sie können auf unterschiedliche Weise gestaltet werden
• Flexibilität: sie bieten eine grosse Bandbreite an Funktionalität
• Zukunftssicherheit: sie garantieren die Kompatibilität mit zukünftigen Versionen von AEM

 So verwenden Sie AEM Core Components

Um den Designprozess und die an diesem Prozess beteiligten Personen, Profile und Rollen zu verstehen, ist es wichtig, ein besseres Verständnis für die Verwendung, Erweiterung und Anpassung von Core Components zu bekommen.

Wir werden nicht zu sehr in die technischen Details gehen, aber es ist wichtig, dass die Anatomie einer Core Component verstanden wird.

Die Architektur von AEM Core Components

Einfach gesagt, lässt sich ein Core Component in zwei verschiedene Teile aufteilen: den Backend-Teil und den Frontend-Teil.

Das Backend enthält:

• Das Content-Modell. Dies definiert die Struktur des Inhalts, der in einer Komponente gespeichert werden kann: Ein Teaser könnte zum Beispiel aus einem Titel, einem Bild, einem kurzen Beschreibungstext und einem Link zum Ziel bestehen.
• Die Konfiguration der Komponenten und den Bearbeitungsdialog. Mit diesen Elementen können Sie festlegen, was angezeigt werden soll, was ein Redakteur bearbeiten kann und welche Optionen ihm zur Verfügung stehen.
• Die Logik hinter der Aufbereitung des Inhalts für das Frontend (auch „View“ genannt).

Der Frontend-Teil ist für die Generierung des HTML-Outputs zuständig:

• Eine Markup-Sprache (HTL) wird verwendet, um Inhalte aus dem Backend und HTML-Elemente zusammenzubringen.
• CSS und JS werden für das Styling und die Effekte verwendet, die auf die Elemente angewendet werden.

(Wir verwenden absichtlich möglichst wenig Fachbegriffe, um diesen Beitrag simpel zu halten. Wenn Sie genauere Informationen wünschen, besuchen Sie die offizielle und technische Dokumentation von Adobe).

Anpassen einer Core Component

Ja, eine Core Component kann angepasst werden. Sie können sie entsprechend Ihren Anforderungen erweitern und so vermeiden, dass Sie die Entwicklung von Grund auf neu beginnen müssen.

Allerdings sollten Sie einen Ratschlag beherzigen. Um alle Vorteile zu erhalten und die Kompatibilität mit Upgrades zu gewährleisten, müssen einige bewährte Verfahren und Anpassungsmuster befolgt werden:

1) Ändern Sie niemals den Code direkt. Erweitern Sie stattdessen die vorhandene Logik:

Die Architektur einer Core Component ermöglicht es Ihnen, das Content-Modell, den Dialog und die Logik zu erweitern und einem Redakteur die Verwendung zusätzlicher Inhalte zu ermöglichen.

Nehmen wir zum Beispiel einmal an, Sie würden einem bestimmten Teaser ein „Kategorie“-Feld hinzufügen wollen. Alles, was Sie tun müssen, ist, den Teaser um ein Textelement „Kategorie“ zu erweitern und zu definieren, wie der Redakteur es im Dialog verwenden und wie es im HTML-Output dargestellt werden soll.

2) Gestalten Sie die Components, indem Sie Ihre eigenen CSS-Styles anwenden:

Die Core Components folgen einer Standard-Namenskonvention, die von Bootstrap inspiriert ist, um es erfahrenen Frontend-Entwicklern zu erleichtern, das Branding der Webseite anzuwenden.

Mehr über Anpassungsmuster können Sie hier lesen.

Rollen in Ihrem Team

Die Anpassungsmuster sagen uns, welche Art von Profilen oder Rollen Sie in Ihrem Webseiten-Projektteam benötigen, um eine reibungslose Umsetzung zu gewährleisten.

Im Wesentlichen benötigen Sie zwei Arten von Rollen:

• Einen AEM-Backend-Entwickler, der für die Konfiguration und Erweiterung der Backend-Logik der Core Components zuständig ist.
• Einen Frontend-Entwickler, der CSS und JS beherrscht und der die von den Core Components angebotene HTML-Struktur mit dem gewünschten „Look and Feel“ versehen kann.

Wir sind der Meinung, dass zusätzliche Anpassungen auf ein Minimum reduziert oder sogar vermieden werden können, wenn Sie Ihre Website mit den Core Components im Hinterkopf entwickeln. Dazu später mehr.

Design skalierbar verwalten – dank eines flexiblen Systems

Die Frontend-Entwickler spielen eine Schlüsselrolle im Implementierungsprozess. Sobald sie die Core Components und das Stylesystem beherrschen, sind die Möglichkeiten grenzenlos.

Allein durch die Anpassung des Stils der Components können mehrere Themes für verschiedene Websites, Microsites, Landing Pages und mehr erstellt werden.

Und das Schöne daran ist: Die Core Components bleiben gleich. 

Sie passen einfach ihren Stil an und setzen sie auf neue Weise für verschiedene Webseiten zusammen. Indem Sie ein vielseitiges Set von Components für Ihre digitale Präsenz zusammen mit verschiedenen Themes einrichten, können Sie Designs unkompliziert skalierbar verwalten.

Aber wie kann dies erreicht werden? Damit befassen wir uns jetzt und erläutern, wie man die Core Components bei dem Designen berücksichtigt.

AEM-Design-Workflow mit Core Components

Jetzt, da das Konzept der Core Components klarer ist, können wir den Design-Workflow detailliert beschreiben.

Wir werden die folgenden Fragen beantworten:

• Wie designt man eine Webseite mit AEM unter Verwendung von Core Components?
• Wie designt man eine Webseite mit AEM ohne Komplikationen?
• Wie designt man eine Webseite mit AEM und geht möglichst schnell online?

Wir werden zwei Szenarien behandeln: Zum einen, wenn die UI/UX der Webseite noch nicht fertig ist, und zum anderen, wenn Sie das Design der Website bereits fertig haben.

Möglicherweise führen Sie eine Migration einer bestehenden Webseite zu AEM durch und möchten daher später Änderungen vornehmen.

Schritt 1 – Zuordnung des Mockups zu den Core Components

In unserem ersten Szenario ist das Design der Website noch nicht definiert. Wir beginnen mit einer leeren Seite.

Die zwei wichtigsten Empfehlungen sind:

• Planen Sie das Design auf der Grundlage der Core Components
• Stellen Sie ein Team aus Designern und AEM-Beratern zusammen

Es ist entscheidend, die Core Components von Anfang an zu berücksichtigen. Wir empfehlen Ihnen, vom ersten Tag an AEM-Experten einzubeziehen, da diese Sie erfolgreich durch diesen Prozess führen werden.

Mit anderen Worten: Lassen Sie den Designer nicht allein und ermöglichen Sie eine gemeinsame Zusammenarbeit mit den AEM-Experten und Entwicklern.

Passiert dies nicht, riskieren Sie schlechte Nutzererfahrungen, zusätzliche Kosten, Eskalationen und Frustrationen.

Eine generelles Missverständnis ist, dass ein Framework den Designprozess beschränkt. Aber in Wirklichkeit ist das Gegenteil der Fall. Das Gespräch mit einem AEM-Experten eröffnet neue Perspektiven und setzt das gesamte Potenzial von AEM frei.

Der Designer und der AEM-Experte erstellen gemeinsam ein Mockup mit den wichtigsten Seitenvorlagen und Komponenten, die verwendet werden sollen. Dies garantiert, dass Sie das Beste bekommen, was AEM zu bieten hat.

Wenn das Design Ihrer Website bereits fertig ist, z. B. wenn Sie zu AEM als Cloud-Service migrieren, sollten Sie mit dem Component Mapping beginnen.

Ein AEM-Experte analysiert dabei die Bausteine Ihrer aktuellen Website und ordnet sie den Core Components zu.

Bei diesem Szenario kann es zu einigen Kompromissen kommen:

• Ändern der aktuellen Bausteine auf Ihrer Website, um sie mit dem Layout und den Funktionen der Core Component abzubilden: Nehmen wir an, Sie haben einen Teaser mit 4 CTA, während die Teaser Core Component nur 2 CTA bietet. Hier könnten Sie sich entscheiden, Ihre Anforderungen an die Core Component anzupassen.
• Oder, wenn Ihre Anforderungen nicht anpassbar sind, wäre die Lösung, eine benutzerdefinierte Component zu erstellen, die die Core Component erweitert und auf Ihre aktuelle UX und UI anpasst.

In jedem Fall ist das Ziel für beide Szenarien ein Mockup der Website, bei dem alle Elemente durch Core Components dargestellt werden.

Schritt 2 – Designen mit Adobe XD

Adobe XD ist eine Design-Software.  

Mit Adobe XD können Designer auf der Grundlage der gebrauchsfertigen AEM-Core Components designen und überlegen, wie verschiedene Stile über das Stilsystem von AEM implementiert werden können. 

Adobe hat daher ein UI-Kit für AEM-Komponenten erstellt.

Durch die Verwendung des vorgefertigten UI-Kits, das auf AEM Core Components basiert, werden unnötige Designabweichungen vermieden, insbesondere die Art von Abweichung, die mehr Entwicklungsaufwand erfordert und zusätzliche Kosten verursacht.

Die Schritte für den Designer sind die folgenden:

1. Er stellt die Core Components auf der Grundlage des Mockups zusammen, um das Layout für die verschiedenen Seiten zu erstellen.
2. Er beginnt dann mit dem Styling der einzelnen Components auf der Grundlage ihrer Brand-Identity und visuellen Guidelines der Webseite.

Durch diesen Ansatz wird es für den Backend-Entwickler einfacher, alles in AEM zu konfigurieren. Die Layout-Struktur wird eine Seitenvorlage im CMS darstellen.

Es ist wichtig, dass das Design der Webseite mit den Core Components in Einklang bleibt.

Ein ähnlicher Prozess kann im Fall von Szenario 2 durchgeführt werden.

Schritt 3 – Konfiguration und Gestaltung in AEM nach dem Mockup

Während der Designer das Aussehen der Core Components in Adobe XD anpasst, kann ein AEM-Backend-Entwickler mit der Konfiguration der Seitenvorlagen und Komponenten in AEM beginnen.

Dies kann parallel geschehen, da beide auf der gleichen Grundlage arbeiten – dem definierten Mockup.

Sobald das Design fertig und validiert ist, kann ein Frontend-Entwickler mit der Arbeit beginnen und den richtigen Stil, CSS und JS auf die Core Components anwenden. 

Alles wird in AEM gebündelt und ist bereit für die Veröffentlichung.

Überblick über den AEM-Styling-Workflow

Im Folgenden werden die wichtigsten Schritte des Design-Workflows mit AEM und Core Components zusammengefasst:

1 – Definieren Sie ein Mockup basierend auf den Core Components

2 – Erstellen Sie die Benutzeroberfläche und das Design in Adobe XD

3 – Konfigurieren Sie die Seitenvorlagen und Komponenten und gestalten Sie dann die Core Components in AEM.

Und vergessen Sie nicht, dass ein wichtiger Aspekt darin besteht, von Anfang an ein gemischtes Team aus Designern und AEM-Experten zu haben.

Core Components: Die besten Ergänzungen für AEM Cloud-Service

Auch wenn die Adobe Core Components mit AEM 6.3 vor der Veröffentlichung von AEM Cloud Service erstellt wurden, funktionieren sie am besten, wenn sie zusammen mit der Cloud-Version von Adobe CMS verwendet werden.

Einer der Hauptzwecke von AEM Cloud Service besteht darin, schnelle Innovationen zu ermöglichen und Sie dabei zu unterstützen, sich auf das Wesentliche zu konzentrieren: die Entwicklung herausragender Kundenerlebnisse.

Mit AEM Cloud Service müssen Sie sich nicht mehr um Server, IT-Betrieb, Netzwerk, Sicherheit usw. kümmern.

Die Nutzung von Core Components bietet Ihnen zusätzliche Vorteile, da die Design- und Entwicklungsphase beschleunigt wird. Stellen Sie die Bausteine schnell zusammen, um ein Mockup zu realisieren, und gestalten Sie sie dann mit minimaler Backend-Entwicklung.

Dies ist der beste Weg, um ein AEM-as-a-Cloud-Service-Projekt in Angriff zu nehmen, und ermöglicht es Ihnen, schnell live zu gehen und gleichzeitig die Aktualisierbarkeit zu gewährleisten. 

Endlich können auch Sie Unternehmenswebseiten mit AEM Cloud Service und Core Components schneller erstellen

Das Designen für AEM mit Core Components ähnelt dem, was Sie bereits für andere Projekte tun. Sie nutzen ein Framework, mit dem Sie etwas schneller erstellen können.

Das Schlüsselelement besteht darin, die Core Components bei der Entwicklung zu berücksichtigen und einen AEM-Experten bereits in der ersten Phase des Entwicklungsprozesses einzubeziehen.

Dieser führt Sie durch den Prozess und zeigt Ihnen, wie Sie die Komponenten am besten verwenden, um mögliche Komplikationen zu vermeiden.

Dieser Artikel ist Teil einer Serie über AEM Cloud Service, in der wir erklären, wie Sie zu AEM Cloud wechseln.

Samuel Schmitt

Digital Solution Expert