APP-IDEE ZUM PRÄSENTATIONSFÄHIGEN PROTOTYP

Du hast eine Idee für eine App? In Adobe XD kannst du ein funktionsfähiges Modell deiner App erstellen, das du auf deinem Smartphone vorführen kannst.

Wireframes herunterladen
1. Klicke im Startbildschirm von Adobe XD im Bereich „UI-Kits“ auf „Wireframes“, oder klicke hier.
2. Klicke auf der Behance-Seite auf die Schaltfläche „Download kits“ (Kits herunterladen).
3. Entpacke den Ordner „Wires.zip“, und öffne die gewünschte XD-Datei in Adobe XD.
 
Design erstellen
1. Rufe das Zoom-Werkzeug auf, und ziehe den Cursor über eine Zeichenfläche, um die Ansicht zu vergrößern.
2. Wechsle zum Auswahlwerkzeug. Durch Klicken und Ziehen über die gewünschten Elemente auf der Zeichenfläche wählst du sie aus. Wähle „Bearbeiten > Kopieren“ und dann „Datei > Neu“. Gib für das neue XD-Dokument die gewünschte Größe der Zeichenfläche an. Mit „Bearbeiten > Einfügen“ fügst du die kopierten Elemente zur neuen Zeichenfläche hinzu.
 
Hinweis: Wenn du auf den Titel einer Zeichenfläche klickst, werden alle Inhalte darauf ausgewählt. Wähle „Kopieren“, und füge den Inhalt in ein neues Dokument ein.
 
3. Klicke bei gedrückter Umschalttaste auf alle Elemente, die du entfernen möchtest. Rufe das Kontextmenü auf, und wähle „Löschen“.
 
Hinweis: Je nachdem, wie die Zeichenflächen erstellt wurden, musst du möglicherweise im Ebenenbedienfeld (Ansicht > Ebenen) mit der rechten Maustaste bzw. mit Control-Klick auf eine Ebenengruppe klicken und „Gruppierung aufheben“ wählen, um einzelne Elemente auswählen zu können.
 
4. Positioniere weitere Elemente durch Ziehen und Loslassen.
5. Per Doppelklick auf eine Form (z. B. auf ein Rechteck) machst du Punkte auf einem Pfad sichtbar. Durch Ziehen der Punkte kannst du die Form verändern.
6. Wiederverwendbare Zeichenformate erstellen: Wähle ein Textelement aus. Bearbeite den Text über die Einstellungen in den Bereichen „Text“ und „Erscheinungsbild“ des Eigenschafteninspektors. Klicke im Bedienfeld „Elemente“ (Ansicht > Elemente) auf das Pluszeichen (+) neben „Zeichenformate“. Jetzt kannst du das Format immer wieder anwenden.
7. Wiederverwendbare Symbole erstellen: Erstelle eine Form oder ein anderes Design-Element. Ggf. empfiehlt es sich, Elemente zu gruppieren. Klicke im Bedienfeld „Elemente“ auf das Pluszeichen (+) neben „Symbole“. Jetzt kannst du das Symbol immer wieder anwenden.
8. Zwei weitere Zeichenflächen erstellen: Wähle das Zeichenfläche-Werkzeug. Klicke auf die gewünschte Größe. Wiederhole diesen Schritt.
9. Mit dem Auswahlwerkzeug klickst und ziehst du nun über die erste Zeichenfläche, um die Elemente auszuwählen. Klicke auf „Wiederholungsraster“. Ziehe dann den grünen Griffpunkt auf der rechten Seite, damit die Elemente auf der zweiten Zeichenfläche wiederholt werden. Setze den Cursor zwischen die beiden Zeichenflächen. Ziehe die magentafarbene Linie, bis der Rand dem Abstand zwischen den Zeichenflächen entspricht.
10. Ziehe drei Bilder aus dem Finder bzw. Explorer auf das Wiederholungsraster, um die Formen zu füllen.
11. Ziehe eine Textdatei mit drei Zeilen Text auf das Wiederholungsraster, um den Platzhaltertext für die Überschriften zu ersetzen.
12. Hebe die Auswahl des Wiederholungsrasters auf, und wähle es erneut aus. Klicke auf „Wiederholungsraster aufheben“, um die verborgenen Inhalte der anderen Zeichenflächen anzuzeigen.
 
Prototyp erstellen
1. Wechsle in den „Prototyp“-Modus. (Klicke auf die Registerkarte in der oberen Menüleiste.)
2. Ziehe einen Draht von einer Zeichenfläche zu einer anderen.
3. Klicke oben auf die Schaltfläche für die integrierte Vorschau, um den User-Flow zu testen.
 
Fertig! Weitere Anleitungen findest du in den Tutorials zu Adobe XD.