Erfahren Sie, wie Sie in Adobe XD CC eine Landingpage mit Elementen aus Adobe Photoshop CC designen können. Erstellen Sie zunächst ein Wireframe in Adobe XD CC, und importieren und bearbeiten Sie anschließend Inhalte, die Sie in Photoshop CC erstellt haben. Geben Sie Ihr Design für andere frei, um Feedback einzuholen.

Wireframe für eine Landingpage erstellen.

Zusammenfassung:

  • Adobe XD CC wurde speziell für das Designen von User Experiences entwickelt und bietet Tools zur Gestaltung von Wireframes, Low- und High-Fidelity-Designs. Die Erstellung von Wireframes geht schnell und einfach. Alternativ können Sie ein Projekt mit einem kostenlosen UI-Kit für Adobe XD beginnen.

Wireframe in ein High-Fidelity-Design umwandeln.

Zusammenfassung:

  • Um den Design-Prozess zu beschleunigen, lassen sich Elemente aus Photoshop in XD laden.
  • Creative Cloud-Bibliotheken erleichtern den Import von Photoshop-Dateien in XD. In Photoshop vorgenommene Änderungen werden auf Ihr Design in XD übertragen.
  • Mit dem Bedienfeld „Elemente“ lassen sich Farben und Symbole im ganzen Dokument aktualisieren.
  • Replizieren Sie Design-Elemente beliebig oft mithilfe von Wiederholungsrastern.
  • Optimieren Sie einzelne Details. Fixieren Sie beispielsweise Elemente wie die Navigationsleiste, sodass sie beim Scrollen sichtbar bleiben. Prüfen Sie Ihr Design anschließend in einer Vorschau.

Prototyp freigeben und Feedback einholen.

Zusammenfassung:

  • Mit der Funktion „Responsive Resize“ können Sie Ihr Design für verschiedene Bildschirmgrößen skalieren.
  • Um Feedback einzuholen, veröffentlichen Sie einen Prototyp Ihres Designs, und geben Sie ihn für Kunden oder Kollegen frei. Das Feedback lässt sich an zentraler Stelle erfassen. Nachdem Sie die gewünschten Korrekturen implementiert haben, können Sie den vorhandenen Link zum Prototyp aktualisieren.
11/06/2018

Präsentiert von: Howard Pinsky

War diese Seite hilfreich?