Benutzeroberflächenplanung mit Adobe XD

In den meisten Fällen beginnt die Planung einer neuen Website mit Mockups und statischen Designs. Adobe XD ist ein erstklassiges Design-Tool zum Erstellen von Benutzererlebnissen. Adobe empfiehlt, die Implementierung Ihrer Sites mithilfe von UI-Mockups durch den Einsatz von Adobe XD oder anderen Tools.

Voraussetzungen

Dies ist ein mehrteiliges Tutorial. Sie sollten dazu die im vorherigen Kapitel beschriebenen Schritte abgeschlossen haben. Dieses Kapitel bietet Ihnen die Möglichkeit, einfach zuzuschauen und zu lernen. Es ist keine Aktion erforderlich, um mit nachfolgenden Kapiteln fortfahren zu können.

Um den Videos folgen zu können, muss Adobe XD installiert sein. Eine kostenlose Testversion ist verfügbar.

Ziel

  1. Betrachten Sie das von der Standard-Site-Vorlage und vom WKND-Designteam bereitgestellte Benutzeroberflächen-Kit.
  2. Erfahren Sie, wie Sie mit Benutzeroberflächen-Kits eine AEM Sites-Implementierung zuordnen und planen können.
  3. Erfahren Sie, wie Sie in Adobe XD erstellte Benutzeroberflächen-Designs zur Implementierung an Frontend-Entwickler bzw. -Entwicklerinnen übergeben.

Was Sie erstellen werden

In diesem Kapitel werden zwei Adobe XD-Dateien betrachtet, eine für die Standard-Site-Vorlage und eine weitere für die vorgeschlagene WKND-Site.

Benutzeroberflächen-Kit für die Standard-Site-Vorlage

Allgemeine Schritte:

  1. Laden Sie die XD-Datei der Standard-Site-Vorlage herunter.
  2. Sehen Sie sich das Benutzeroberflächen-Kit in Adobe XD an.
  3. Simulieren Sie die Übergabe der Designs an Frontend-Entwicklerinnen und -Entwickler.

Benutzeroberflächen-Kit von WKND

Allgemeine Schritte:

  1. Laden Sie die XD-Datei zum WKND-Artikel herunter.
  2. Prüfen Sie die Designs für die WKND-Artikelvorlage.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben gelernt, wie Benutzeroberflächen-Kits von Adobe XD zur Zuordnung und Planung einer AEM Sites-Implementierung verwendet werden können.

Diese zusätzlichen UI-Kits stehen zur Verfügung und können heruntergeladen und angesehen werden.

Nächste Schritte

Im nächsten Kapitel wird eine neue Seitenvorlage erstellt, die auf dem WKND-Artikel-Design basiert.

Erfahren Sie, wie Sie Seitenvorlagen erstellen und ändern. Lernen Sie den Zusammenhang zwishen Seitenvorlage und Seite kennen. Erfahren Sie, wie Sie die Richtlinien einer Seitenvorlage konfigurieren, um für Inhalte granulare Governance und Markenkonsistenz zu gewährleisten. Basierend auf einem Mockup wird in Adobe XD eine gut strukturierte Zeitschriftenartikelvorlage erstellt.

Auf dieser Seite