Wondershare Mockitt (Tutorial) Einfach Prototypen und XD Design erstellen

Wir haben jetzt unsere Seiten erstellt, aber wollen diese jetzt mit unserem Design füllen. Dafür sind die Werkzeuge, welche wir am linken Programmrand finden essenziell. Wie diese funktionieren, sowie wie wir unsere Elemente auf einer Seite anordnen und über das Ebenenfenster verwalten können, schauen wir uns jetzt an. Wir haben bei den Werkzeugen einmal ein Text-Tool, welches man mit der Taste T auswählen kann, um Texte auf einer Seite zu erstellen, dieses schauen wir uns im folgenden Kapitel noch an, sowie das Bild-Werkzeug. Unter dem Text-Werkzeug können wir jetzt aber auch einfach Rechtecke mit R, Kreise mit O oder Linien mit der Taste L auswählen und durch Aufschieben auf unserer Seite erstellen. Drücken wir dabei die Shift-Taste können wir symmetrische Formen erstellen. Hier sehen wir beim Aufschieben auch direkt die Abmessungen aber können diese auch nach dem Erstellen einfach über seine Ränder immer individuell bearbeiten. Wir haben hier auch ein neues Symbol über unserem Element, mit welchem wir es auch drehen können. Haben wir ein Werkzeug ausgewählt und wollen unsere normale Maus wieder, um bestehende Objekte einfach auswählen und verschieben zu können, einfach die gleiche Taste erneut drücken. Haben wir ein Element ausgewählt können wir am rechten Rand Einstellungen zu diesem machen. Hier haben wir ganz oben die Möglichkeit das Element auf der Seite oder anhand anderer Objekte, wenn wir mehrere gleichzeitig ausgewählt haben, auszurichten. Darunter sehen wir dann den Namen des Objektes, welcher relevant für die Ebenenübersicht ist und können das Objekt auch ausblenden, sodass es nicht mehr angezeigt aber nicht gelöscht ist. Daneben können wir es auch sperren, damit es nicht mehr verschoben oder generell verändert werden kann. Wir sehen dann auch die genaue Position und Größe des Elements in Pixeln, was für die Übertragung des Designs in Code bspw. sehr hilfreich sein kann. Alles, was wir jetzt darunter noch finden, sind Designeinstellungen. Einmal können wir das Objekt transparent machen und sagen, ob es fix an der Stelle sein soll oder oben oder unten fürs Scrollen fixiert werden soll. Wir können in Kreise oder Rechtecke auch doppelt klicken, um einen Text auf diesen zu erstellen. Das ist für Schaltflächen bspw. super praktisch. Wie dieser Text aussieht, können wir hier auch einstellen und darunter auch die Füllfarbe für da Element generell einstellen. Sowie einen Rand aktivieren, wo wir auch die Farbe, Dicke und Linienart auswählen können. Verändern wir eine Farbe, können wir eine neue direkt aus dem Farbfeld auswählen, oder eine über einen HEX oder RGB Code eingeben. Über die Pipette können wir auch einfach eine Farbe aus dem Projekt auswählen oder unten auch auf zuletzt verwendete Farbe zugreifen, was super praktisch ist um einfach immer die gleichen Farben zu verwenden. Hier können wir auch auf vorgefertigte Farbpaletten zugreifen. Über den Haken vor den Punkten können wir die Farbe auch transparent machen, falls wir bspw. nur einen Rahmen oder Füllfarbe haben möchten. Bei kantigen Elementen können wir oberhalb auch einzelne Ecken oder alle Ecken symmetrisch abrunden. Schließlich können wir auch einen Schatten zum Element hinzufügen, wo wir die Entfernung, Weichheit und Ausbreitung genau einstellen können. Klicken wir mit der rechten Maustaste auf ein Element, können wir es darüber auch einfach kopieren, löschen, sperren, ausblenden, fixieren, gruppieren oder auch in den Vorder- oder Hintergrund schieben. Wir finden jetzt oben in der Mitte des Menüs auch noch praktische Funktionen zum Anordnen der Elemente auf unserer aktuellen Seite. Hier können wir auch, wie im Eigenschaftsfenster, Elemente an der Seite oder an anderen Elementen ausrichten. Unter Arrange können wir Objekte auch nach vorne oder hinten schieben, was für die Überlappung von Elementen relevant ist. Haben wir mehrere Elemente ausgewählt, können wir sie auch als Gruppe zusammen fügen, womit wir sie einfach immer zusammen auswählen können und verschieben. Dadurch können wir die einzelnen Objekte immer noch einzeln bearbeiten, wenn wir in die Gruppe klicken. Wir können auch die Gruppe wieder auflösen oder das ausgewählte Element sperren. Unter dem Seitenfenster, haben wir auf der rechten Seite auch noch unseren Ebenenbereich, wo wir alle Elemente sehen, welche wir auf unserer aktuellen Seite platziert haben. Jedes Element hat hier seine eigene Ebene und das, was hier ganz oben liegt, ist auch im Vordergrund der Seite zu sehen. Per Drag-and-Drop können wir hier die Ebenen auch verschieben um die Elemente noch einfacher in den Vorder- oder Hintergrund schieben zu können. Wir sehen hier am Symbol immer um was für eine Elementart es sich handelt und danach natürlich den Namen, welche wir durch doppeltes Tippen auch ändern können. Haben wir Elemente gruppiert, werden diese in Ordner angezeigt, was den Ebenenbereich noch übersichtlicher machen. Wir können aber auch am oberen rechten Rand den Bereich über die Suche immer durchsuchen. Fahren wir mit der Maus über eine Ebene, können wir sie auch direkt sperren, ausblenden oder Animationen auf diese anwenden. Das Ebenenfenster ist ein praktisches Tool um den Überblick nicht zu verlieren.