Benutzeroberflächenplanung mit Adobe XD

In den meisten Fällen beginnt die Planung für eine neue Website mit Stichproben und statischen Designs. Adobe XD ist ein erstklassiges Design-Tool zum Erstellen von Benutzererlebnissen. Adobe empfiehlt die Planung Ihrer Sites-Implementierung mithilfe der UI-Modelle mit Adobe XD oder einem anderen Tool.

Voraussetzungen

Dies ist ein mehrteiliges Tutorial, und es wird davon ausgegangen, dass die im vorherigen Kapitel beschriebenen Schritte abgeschlossen wurden. Dieses Kapitel ist lediglich ein Teil "watch & learn". Es ist keine Aktion erforderlich, um mit nachfolgenden Kapiteln fortfahren zu können.

Um den Videos zu folgen, benötigen Sie Adobe XD installiert, Kostenlose Testversion ist verfügbar.

Ziel

  1. Überprüfen Sie das vom Standardsite-Vorlage und durch das WKND-Designteam.
  2. Erfahren Sie, wie Sie mit UI-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 übergeben.

Was Sie erstellen werden

In diesem Kapitel werden zwei Adobe XD-Dateien überprüft, eine für die Standardsite-Vorlage und eine weitere für die vorgeschlagene WKND-Site. Die

Benutzeroberflächen-Kit für Standardsite-Vorlagen

Allgemeine Schritte:

  1. Laden Sie die XD der Standardsite-Vorlage.
  2. Inspect das UI-Kit in Adobe XD.
  3. Simulieren Sie die Übergabe der Designs an einen Frontend-Entwickler.

WKND UI Kit

Allgemeine Schritte:

  1. Laden Sie die WKND-XD-Datei.
  2. Inspect die Designs für die WKND-Artikelvorlage.

Herzlichen Glückwunsch!

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

Zusätzliche UI-Kits sind verfügbar zum Überprüfen und Herunterladen.

Nächste Schritte

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

Erfahren Sie, wie Sie Seitenvorlagen. Machen Sie sich mit der Beziehung zwischen einer Seitenvorlage und einer Seite vertraut. Erfahren Sie, wie Sie Richtlinien einer Seitenvorlage konfigurieren, um granulare Governance und Markenkonsistenz für Inhalte bereitzustellen. Eine gut strukturierte Zeitschriftenartikelvorlage wird auf der Grundlage eines Mockups aus Adobe XD erstellt.

Auf dieser Seite