Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Adobe XD lernen

Start eines Design-Projektes, Formate, Neuanlage

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der erste Schritt bei der Arbeit mit Adobe XD ist die Anlage neuer Zeichenflächen. Die Zeichenfläche ist der aktive Bereich, der bei der Demonstration der interaktiven Prototypen alle sichtbaren Objekte beinhaltet. Welche Auflösungen und Voreinstellungen Adobe XD anbietet und wie Sie bei der Anlage vorgehen können, beschreibt das Video.

Transkript

Der erste Schritt von der Idee zu einer interaktiven Designumsetzung mit Adobe XD ist die Auswahl der entsprechenden Zeichenoberflächengrößen, also, der Dimensionen. Und der Anlaufpunkt ist nach dem Start des Programms das Begrüßungsfenster. Und Sie können sehen, Sie haben hier die Auswahl zwischen iPhone, iPad und einem Webbrowser sowie der benutzerdefinierten Größe. Schauen wir uns das hier einmal etwas genauer an, stellen Sie fest, dass wir die Wahl haben zwischen iPhone 6/7, einmal Plus, einmal normal. Die Unterschiede erkennt man an den Pixel-Dimensionen in den runden Klammern. Genauso sieht es auch beim iPad aus, nur dass wir hier noch das Surface z. B. da drunter stehen haben. Also, ich finde das auch witzig, iPad, und dann taucht hier das Surface auf. Aber letztendlich ist es auch egal, was davor steht, weil gemeint sind wirklich nur diese Dimensionen. Und wenn Sie, wie jetzt auch hier z. B. beim Webbrowser, eine andere Dimension benötigen wie die, die hier angegeben ist, können Sie nochmal benutzerdefiniert auch tatsächlich hier Werte eintragen, also bspw. 100x100 oder was auch immer. Und damit aber nicht genug. Da sich ja nicht nur die Arbeit mit dem neuen Dokument auf eine einzige Zeichenfläche beschränkt, sondern mehrere anzulegen sind, starte ich das Dokument jetzt hier einfach mal und gehe mal über das iPhone 6 dort hinein. Also, d. h. ich wähle mir iPhone 6/7, diese 375x667 Pixel aus und starte das Dokument. So, und dann sieht man in dem neuen Dokument nun, was noch umbenannt ist, also, man sollte es dann auch direkt speichern, befindet sich nun solch eine Zeichenfläche. Mit dieser Zeichenfläche ist, ähnlich wie im Adobe Illustrator, oder was heißt ähnlich, eigentlich genauso wie im Adobe Illustrator, gemeint, dass das, was an Objekten in meinem Device, also in einem iPhone oder auch in einem Webbrowser, sichtbar sein soll, das gehört in die Zeichenfläche. Objekte, die außerhalb der Zeichenfläche platziert werden, die sind zwar in diesem Designdokument enthalten, werden aber nicht angezeigt hinterher. Diese Designflächen, die kann man aktivieren, indem man hier oben auf den Namen klickt. Und man sieht anhand der Anfasser schon, ich kann auch die Größen verändern. Also, wenn mir das jetzt z. B. zu breit ist, dann kann ich es auch schmaler machen. Dann ist es zwar kein iPhone 6/7 mehr, aber Sie sehen, worauf es ankommt. Es ist eigentlich nur die Breite des Dokumentes gemeint oder die Dimensionen der Dokumente. Ich kann auch hier die Größe wieder rückgängig machen, also, ganz normal Tastenkombination Command+Z und ich habe wieder die ursprüngliche Größe. Und hier sieht man auch nochmal, diese kann ich auch hier drüber über den Dialog in der Werkzeugpalette verändern. Ebenfalls eine nette Funktion ist, wenn ich das Ganze im Querformat haben möchte. Also, einmal hier Landscape-Format, oder Querformat, und einmal Hochkant. Adobe XD ist nicht auf eine Zeichenfläche begrenzt. Das macht auch keinen Sinn. Bei der Erstellung von interaktiven Prototypen braucht man ja mehrere. Und somit kann ich z. B. auch eine zweite, neue Zeichenfläche erstellen. Und eine sehr elegante Möglichkeit ist es, diese erste Zeichenfläche als Referenz zu benutzen und dann mit gedrückter Alt-Taste und gedrückter linker Maustaste einfach diese Zeichenfläche kopieren. So, Sie sehen, da kann man das Ganze auch schön interaktiv direkt platzieren. Und wenn ich jetzt die linke Maustaste loslasse, dann habe ich eine exakte Kopie der ersten Zeichenfläche. Ich kann auch eine neue Zeichenfläche direkt erstellen. Und zwar gibt es dafür hier links, das Werkzeug in der Werkzeugleiste. Alternativ die Tastenkombination "A". Ich klicke also drauf und erhalte nun hier in dem Moment, wenn ich hier das Ganze aufziehe, auch die Auswahl. So, im Moment, ich mache das noch mal rückgängig, habe ich ja eine Zeichenfläche aktiviert, das war jetzt der Grund, warum hier noch einiges in der Werkzeugleiste zu sehen war. Jetzt klicke ich einfach in den grauen Hintergrund und nochmal hier auf das Werkzeug. Und jetzt sieht man, bekomme ich die Auswahl. Und das sind genau die gleichen Auswahlmöglichkeiten, die auch der Begrüßungsdialog bietet. Also, wir haben das iPhone, wir haben das iPad oder die Tablets. Hier ist das Ganze gesplittet nach Apple-Geräten, nach Google-Geräten, nach Microsoft-Geräten und nach Web. Und genauso kann ich mir natürlich auch hier für die Watch z. B. eine Oberfläche herausziehen, oder gehen wir nochmal ein Stück nach links, klicke nochmal hier drauf, oder bspw. auch für das Web eine große Auflösung erstellen. So, wenn man sich das Ganze jetzt im herausgezoomten Zustand einmal anschaut, dann sieht man, hat man da schon ein wunderbares Raster. Ich kann selbstverständlich auch mit dem gleichen Werkzeug beliebige Größen aufziehen, da bin ich völlig flexibel, also kann die ja auch im Nachhinein wunderbar verändern. Sehr schön auch hier schon zu sehen die interaktiven Möglichkeiten, also die interaktive Ausrichtung, die hier drin ist, die vereinfacht auch so ein Layout oder so eine Erstellung der Zeichenflächen ganz erheblich. Ich kann dann auch z. B. sagen, ich möchte genau 750 Pixel in der Breite oder 800 Pixel in der Höhe haben. Und dann habe ich auch genau diese Pixelangaben, die ich benötige. Und damit bin ich völlig flexibel. Wenn man das Ganze jetzt grafisch mal so ein bisschen auseinander zieht, z. B. hier mein Layout für das iPhone machen, dann mein Layout für die Watch, mein Layout für den Webbrowser und für was auch immer. Last but not least, besteht die Möglichkeit, auch diese Zeichenflächen zu benennen und das sollte man auch machen, indem Sie einfach hier oben auf den Namen einen Doppelklick ausführen und dann z. B. sagen "Welcome Screen", oder Willkommensbildschirm, wie auch immer Sie das gerne bezeichnen möchten. Empfehlenswert, das wirklich auch von Anfang an zu machen, damit man den Überblick behält. Und gerade bei sehr vielen Elementen, die man nun anordnet, auch genau weiß, welcher Bildschirm, oder welche Zeichenfläche genauer genommen, ist denn für welche Bildschirmfunktion eigentlich gedacht. Und damit wissen Sie, wie man mit Adobe XD unterschiedlichste Zeichenflächen für die Umsetzung der eigenen User-Interface-Designs oder Layouts erstellen kann.

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!