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

Adobe XD lernen

Elemente der Skizze mit Hilfe eines Rasters übertragen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Dokumentraster ist flexibel einzusetzen, um sämtliche Objekte präzise zu erstellen und den einzelnen Zeichenflächen, in denen diese Objekte benötigt werden, zuzuordnen. Das Video beschreibt die Verwendung anhand der Erstellung einer einfachen Navigations- und Infoleiste.

Transkript

Um Objekte in den leeren Zeichenflächen besser anlegen und platzieren zu können, eignet sich das Bearbeitungsraster sehr gut als Unterstützung. Ich zeige Ihnen in diesem Video, wie flexibel das Raster anhand der Erstellung einer einfachen Menü- und Informationsleiste zu verwenden ist. Als erstes, um ein R aster überhaupt einblenden zu können, muss ich die einzelne Zeichenfläche, die ich bearbeiten möchte, aktivieren. Das tue ich, indem ich auf den Namen klicke. Also, nicht einfach in die Zeichenfläche rein, weil, wenn hier Elemente drin sind, erreichen Sie diese. Bei einer leeren Zeichenfläche ist es allerdings egal. Gut, und dann taucht hier rechts in dieser Werkzeugleiste, in diesem Panel, das Raster auf. Zunächst einmal würde ich sagen, ein Raster von 25 eignet sich sehr gut. Das würde ich auch als Standard definieren. Und dann hat man hier noch die Möglichkeit, entsprechend Farben einzustellen. Da muss man evtl. mal schauen, wie das dann hinterher, wenn man vom Wireframe zum Mockup gelangt, also d. h. mit Farben bereits arbeitet, inwieweit die harmonieren und man sie gut voneinander unterscheiden kann. Nun soll als erstes hier in den Top-Bereich dieser Zeichenfläche eine Art Informations- und simple Navigationsleiste. Und ich zoom dafür mal in diesen Bereich hinein. Mit gedrückter Leertaste können Sie im Übrigen die Zeichenfläche nach links und rechts schieben, also, mit gedrückter Leertaste und dann der linken Maustaste. So, ich mache das jetzt als erstes Mal ganz grob. Ich brauche zwei Rechtecke, die ich einmal so aufziehe und dann ein zweites, das ich hier aufziehe. Beide besitzen einen Rahmen, das lasse ich auch mal so. Und zwar markiere ich mir jetzt beide und kontrolliere den Rahmen mal genauer. Wir haben also hier eine Farbangabe, die möchte ich so nicht haben. Ich nehme also hier lieber mal 909090, das ist ein etwas anderes Grau. Man sieht kaum den Unterschied, aber es passt einfach für auch meine weiteren Elemente besser. Und den Rahmen lasse ich auch bei beiden identisch, der kann schon bestehen bleiben, wobei das linke Rechteck, das soll auch die gleiche Flächenfüllung bekommen. Also, auch hier nochmal 909090. Und wenn ich das öfter benutze, dann bietet es sich auf jeden Fall an, es hier mit aufzunehmen. So, jetzt habe ich allerdings einen Fehler gemacht, ich muss nämlich erst hier reingehen. So, und jetzt kann ich das Grau mit aufnehmen. Und für diese Leiste brauche ich ein etwas helleres Grau, d. h. hier verwenden wir mal einfach DDDDDD. Das bestätige ich ebenfalls und nehme auch diesen Grauton mit auf. Jetzt habe ich weiß, das etwas dunklere und das etwas hellere Grau. Bei der Erstellung eines Wireframes arbeite ich eigentlich fast durchgängig mit vier Farben, nämlich diesen zwei Einstellungen und zusätzlich nochmal einem Schwarzton. Auch den füge ich mir schon mal hinzu. Aber für diese Einstellung hier, für das Rechteck, soll das hellere Grau übernommen werden. Also, mit solchen vier Farben arbeite ich fast durchgängig, weil mehr benötige ich nicht, um mit Kontrasten und auch entsprechenden Hinweisen zu demonstrieren, welche Funktion da gedacht ist und ob etwas aktiv ist oder inaktiv ist. Und jetzt möchte ich gerne hier in diesem linken Teil einen Pfeil drin haben. Und da haben wir das Problem, dass wir bei solch einem Raster natürlich sehr schlecht einen Pfeil zeichnen können mit diesen Grundformen. Wenn so etwas ansteht, dann gehe ich einfach hin und ändere mir mein Raster um. Und in dem Falle setze ich das Ganze mal um auf 2, natürlich extrem klein hier. Also, zoome ich da mal ein bisschen rein. So, und nun kann ich mein Raster natürlich sehr präzise einsetzen, um auch einen solchen Pfeil umzusetzen. Natürlich wäre es jetzt direkt möglich, dass oberhalb dieser Fläche zu machen. Ich persönlich arbeite aber lieber in der freien Fläche, weil man muss dann sonst sehr aufpassen, dass man nicht die darunter liegenden Flächen aktiviert. Und somit fange ich hier einfach mal drunter an. Der erste Prozess für den Pfeil ist, ich brauche ein kleines Rechteck, mehr soll das gar nicht sein. Dieses Rechteck, das ziehe ich jetzt hier mal auf. Die Größe kann ich jetzt mal kurz überprüfen, 1-2-3-4-5-6-7-8-9-10-11-12, bis dahin würde das reichen. Huch, jetzt habe ich das verschoben. Machen wir nochmal, 1-2-3-4-5-6-7-8-9-10-11-12, das wäre die Breite. Und 1-2-3-4-5-6-7 hoch, also, noch einen höher, das würde schon mal passen. Dieses Rechteck braucht keinen Rahmen, das deaktiviere ich. Und als Farbe wähle ich mir jetzt einfach mal irgendeine beliebige Farbe aus, die ich hier sehr gut sehen kann. Das wäre mein Rechteck, der erste Teil von meinem Pfeil. Und jetzt brauche ich hier vorne noch ein Dreieck und dieses Dreieck, das mache ich am besten hiermit, und zwar mit dem Zeichenstift, alternativ die Taste "P". Auch hier klicke ich auf einen Eckpunkt, 1-2-3-4-5-6-7-8-9-10-11-12-13-14-15. Ich hoffe, ich habe mich nicht verzählt. Und dann kommt das Ganze quasi nur noch in die Mitte, so, und da wieder hin. Und auch hier brauche ich den Rahmen nicht, aber die Flächenfüllung. Jetzt schauen wir, ja, das sieht gut aus, ich habe mich nicht verzählt. Hier muss man natürlich, wenn man das jetzt nicht im Vorfeld schon ausprobiert hat, sich eine vernünftige Dimension zurecht denken. Das Tolle ist natürlich, dass ich auch hier jetzt relativ leicht die Dimensionen verändern und anpassen kann. Also, wie man jetzt hier sieht. Wichtig ist, dass das Ganze wirklich in der Mitte ist. Und da hilft mir so ein kleines Raster. In einem letzten Schritt markiere ich jetzt alle beiden Elemente und setze die Fläche mal auf weiß. Und jetzt sieht man, die sind markiert. Und jetzt klicke ich mit der rechten Maustaste hier hinein und sage einfach "Gruppieren" oder alternativ Command+G. So, und jetzt kann mir die Fläche keiner mehr auseinander reißen. Und damit habe ich die Möglichkeit, das Ganze hier oben sehr schön und präzise auch zu platzieren. Zoome mal ein bisschen raus, dann sieht man das auch. So sollte es aussehen. Wir haben also so einen kleinen Pfeil nach links, der als Anhaltspunkt für die Navigation dient, dass ich also hier mit einem Klick da drauf wieder auf den vorherigen Bildschirm oder, in dem Falle jetzt, auf die vorherige Zeichenfläche komme. Was fehlt mir noch? Mir fehlt noch eine Schrift. Zunächst aber mal mache ich hier das Raster wieder größer auf 25. Also, das kann ich jetzt entweder eingeben oder ich sage wieder "Standard verwenden". Das hat halt den großen Vorteil, wenn man das in dieser Form macht. Ja, dann nehme ich noch die Schrift, ziehe mal hier einen Rahmen auf und sage nun, "Information zur Registrierung". Die Schrifteinstellungen, die nehme ich so, wie sie hier sind. Das kann ich eigentlich schon so lassen. Ich passe jetzt allerdings nur das Kästchen an. Das ist schon meine ganze Zeichenfläche. Und platziere das jetzt so, dass es vernünftig aussieht. Und was mir jetzt noch fehlt hier, ist, dass der Rahmen der Texte nicht hier drüber rausläuft, dass ich also wirklich auch direkt eine Information bekomme. Platzieren wir es auf 10. Und damit wäre das, glaube ich, schon perfekt. Und das Ganze soll allerdings eine weiße Schriftfarbe sein. Also, die Flächenfarbe hier ist weiß und das übernehme ich dann auch an der Stelle. Und damit hätte ich meinen ersten Block bereits erfüllt und habe im Wesentlichen alle relevanten Einträge gemacht, die ich brauche für diese Navigationsleiste. Nun hat man den Vorteil, dass man das sehr schnell übernehmen kann. Ich markiere mir auch hier wieder das komplette Objekt, rechte Maustaste, "Gruppieren", damit das nirgendwo verschoben wird, und brauche jetzt nur noch auf allen Bildschirmen bzw. allen Zeichenflächen, wo das benötigt wird, dieses Element hin kopieren. Also d. h., ich greife mir das, halte die Alt-Taste gedrückt und ziehe es jetzt wieder einfach an die jeweiligen Positionen, so. Und ich muss es dann natürlich noch anpassen, so dass es genau mittig sitzt. Das Ganze haben wir nicht mehr beim Confirmen, da brauchen wir das nicht mehr nach der Planung. Und hier brauchen wir noch mal eins. So, gehen wir wieder runter und platzieren das. Dann brauchen wir noch eins und noch eins, und das Prinzip, so würde es jetzt weiter gehen. Man muss es dann eben entsprechend genau ausrichten. Und Sie sehen allerdings, wie das Raster dabei helfen kann, Elemente bzw. Objekte zu konstruieren und aneinander auszurichten. Ebenso ist das Raster ein Hilfsmittel, um diese Objekte auf unterschiedlichen Zeichenflächen leicht an identischen Positionen zu platzieren.

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!