Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Adobe XD lernen

Benötigte Zeichenflächen anlegen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Video zeigt, wie einzelne Zeichenflächen erstellt und anhand einer Idee benannt werden.

Transkript

Nachdem wir unsere Idee in Form eines Scribbles greifbar gemacht haben, ist der nächste Schritt nun die Anlage dieses Scribbles in Adobe Experience Design CC. Und Sie erinnern sich vielleicht noch an die grundlegende Skizze. Wir brauchen dafür neun Arbeitsflächen und da es sich um eine App-Entwicklung handelt, eine Rallye-App für Fahrzeuginformation, Streckeninformation und eine Registrierung für iOS, nehme ich hier die vorgefertigte Größe des iPhone 6/7 in 375x667 Pixeln. Das wähle ich aus, klicke also dann quasi auf dieses Symbol und befinde mich jetzt in der Bearbeitung Adobe XD. Erster Schritt ist, die einzelnen Arbeitsflächen, die ich habe, auch immer direkt benenne, und das ist der "Welcome-Screen", dem wird später noch mal eine besondere Bedeutung zukommen, wenn es vom Wireframe über das Mock-up zum Prototypen geht. Aber zunächst einmal ist es nur die Benennung. Dann speichere ich am besten dieses Dokument direkt ab und gehe mal hier in den Dokumentenordner und sage dazu "rallye_app_v_01_"-- Nennen wir es ruhig mal "Wireframe". Da kann da schon mal nichts mehr schiefgehen und nun muss ich im Wesentlichen nichts anderes machen wie einzelne Arbeitsflächen erstellen. Und hier haben wir es jetzt relativ leicht, da jede Arbeitsfläche in der gleichen Größe verwendet werden muss, bietet es sich förmlich an, auch diese schon vorgefertigte Arbeitsfläche, die wir jetzt hier sehen, einfach mit der Tastenkombination Alt und linker Maustaste zu kopieren. Zunächst einmal zoome ich raus, damit ich Platz habe, und ja, drücke jetzt die Alt-Taste, halte die gedrückt, greife die soeben erstellte Arbeitsfläche oder Zeichenfläche und ziehe sie nun einfach hier neben. Lassen sie hier ruhig ein wenig Platz, das ist wichtig, dann später für den Prototyp, ansonsten müsste man immer noch was neu anordnen. So, und das Ganze mache ich jetzt ein zweites Mal und Sie sehen, wenn man an der gleichen Position ist, dann gibt es diese blaue Linie, das sagt mir, dass ich in der vertikalen Ausrichtung schon mal korrekt bin und wenn ich die richtigen Abstände habe, dann bekomme ich das signalisiert durch diese pinke Flächenfüllung und damit weiß ich dann, dass das wirklich genau im Raster aufgebaut ist. Ich brauche noch eine dritte, und machen wir es grade fertig, das waren jetzt insgesamt neun Zeichenflächen und diese neun Zeichenflächen, die haben die Aufgabe, in einem ersten Block-- So, das Ganze funktioniert eben auch noch unten. Die haben die Aufgabe, in einem ersten Block die Registrierung durchzuführen, in einem zweiten Block die Fahrzeuge mit Detailinformationen und einer Grafik zu versehen. In einem dritten Block, die eigentlichen Streckeninformation. Nun, müssen Sie oder sollten Sie die einzelnen Screens noch benennen. Ich beschleunige diesen Prozess jetzt mal. So, und nachdem alle Zeichenflächen benannt sind, speichere ich dieses Dokument noch einmal ab. Ein kleiner Hinweis vielleicht zur Benennung dieser einzelnen Zeichenflächen: Im Grunde ist es egal, aber ich habe mir angewöhnt, solche Benennungen, seien das nun Zeichenflächen oder Buttons oder grundsätzlich sämtliche Elemente, die ich später auch den Entwicklern zukommen lasse, in englischen Begriffen zu benennen. Das hat einfach den Vorteil, dass wir keine Umlaute drinhaben und dass viele dieser Begriffe in Englisch leichter in Programmierung, leichter in Sourcen zu übernehmen sind, es ist aber keine zwingende Vorgabe. Also, wenn Sie lieber mit deutschen Begriffen arbeiten, ist das überhaupt kein Problem, man muss dann nur aufpassen, später bei einem möglichen Workflow, der stark in die programmtechnische Seite hineinreicht, das man dort keine Probleme mit dem Bezeichnern bekommt. Das wäre im Prinzip der erste Schritt mit Adobe XD. Das Erstellen von Zeichenflächen und die Benennung dieser Zeichenflächen und im nächsten Step werden wir nun das Ganze mit Inhalten füllen.

Adobe XD lernen

Lernen Sie die Funktionen des Adobe Experience Design, kurz Adobe XD, anhand eines kompletten Praxisworkshops.

3 Std. 20 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.01.2017
Aktualisiert am:17.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!