Wondershare Mockitt (Tutorial): Einfach Prototypen und XD Design erstellen

Erstelle einfach Design-Prototypen für deine nächste App, Webseite oder Software mit Mockitt von Wondershare. Was damit alles möglich ist und wie alles funktioniert, erkläre ich dir in diesem Einsteiger Grundkurs ausführlich.

Als Erstes gebe ich dir einen Überblick, wo du Mockitt alles verwenden kannst, wie viel es kostet und wie du es einrichtest. Anschließend schauen wir uns im Detail an, wie wir ein Projekt erstellen und generell verwalten können, sowie den Programmaufbau an sich, um schnell die Logik dahinter zu verstehen, damit wir besser eigenständig damit arbeiten können. Dann nehmen wir die Screens und wie wir Elemente erstellen und verwalten können mit den Werkzeugen genau unter die Lupe. Auch das Verwenden von Texten, Bilder, Widgets, globalen Master-Elementen und Icons schauen wir uns an, sowie das verlinken und animieren unserer Designs. Abschließend gehen wir auch darauf ein, wie wir unser fertiges Design in der Vorschau testen, mit anderen teilen, sowie exportieren und speichern können.

Installation & Preis

Bevor wir durchstarten, Mockitt ist keine Anwendung mit der man Apps, Webseiten oder Co. programmieren kann. Mockitt ist ein Designtool, zum Erstellen von UX Designs und Prototypen, welche später Programmierern als Vorlage dienen kann, um die Seite wirklich umzusetzen. Wir können Mockitt grundsätzlich im Web über die offizielle Webseite verwenden, oder als Programm auf unserem Windows, Mac oder Ubuntu System. Auf der offiziellen Webseite kommen wir direkt zum Download oder der Web-Anwendungen. Um es grundsätzlich verwenden zu können, benötigen wir ein kostenloses Konto bei Wondershare, welches wir am oberen rechten Rand erstellen oder uns in ein bestehendes Einloggen müssen. Das müssen wir auch, falls wir das Programm heruntergeladen und das erste Mal gestartet haben. Der Vorteil an dem Account ist zudem, dass wir so immer auf allen Geräten, wo wir uns mit diesem anmelden, auf unsere Projekte zugreifen können, da sie cloudbasiert gespeichert werden. Grundsätzlich können wir Mockitt kostenlos verwenden, was super ist um ein Gefühl für das Programm zu bekommen, ob wir damit langfristig arbeiten wollen. In der kostenlosen Version, welche wir direkt nach der Account-Anmeldung haben, können wir bis zu 3 Projekte erstellen mit jeweils maximal 10 Screens und einen Assets-Speicherplatz von 100MB. Außerdem können wir nur alleine an den Projekten arbeiten. Neben der kostenlosen Version gibt es dann noch eine Personal und Enterprise Version. Die Personal-Version für 99$ pro Jahr oder 9,99$ pro Monat ist für Einzelpersonen gedacht, die mehr Projekte & Co. alleine erstellen möchten. Hier haben wir nämlich keine Limitierung mehr bei der Projektanzahl und können bis zu 500 Screens pro Projekt erstellen und erhalten einen Assets-Speicher von 2GB. Außerdem können wir alle unsere Screens als PNG oder interaktive HTML Seite exportieren, sowie auf tausende Premium Vorlagen zugreifen. Bei der Enterprise Version, welche man nur jährlich für 159$ pro Person erhält, kann man mit mehreren Personen zusammenarbeiten, wenn jeder ein eigenes Enterprise Abo hat. Hier haben wir auch unlimitierte Projekte, sowie bis zu 3000 Screens pro Projekt, 2GB Assets pro Person und Zugriff auf alle Templates und Teamfunktionen, wie Kommentare, Zusammenarbeiten, Versionsverlauf und Nutzerverwaltung. In der Beschreibung habe ich dir die offizielle Seite nochmal verlinkt, wo du alle Preisvariationen auch nochmal im Vergleich genau anschauen kannst und über meinen Link erhältst du auch nochmal einen besonderen Rabatt, also check den gerne mal aus. Das Abo kann einfach mit PayPal, Kreditkarte oder GiroPay bezahlt werden. Als Student bekommst du auch nochmal 50% Rabatt, Link dazu hier. Du kannst dein Abo später immer über deinen Account am oberen rechten Rand verwalten, wo du es kündigen oder ändern kannst, falls du das möchtest. Man muss vorab noch erwähnen, dass Programm ist aktuell nur in englischer Sprache verfügbar, aber mit diesem Tutorial solltest du es auch verstehen, falls du nur Deutsch kannst. Zum Zeitpunkt wo du diesen Artikel liest, kann es aber auch gut sein, dass es inzwischen eine deutsche Übersetzung gibt, also nicht wundern, wenn bei mir alles auf Englisch ist.

Stand: 06.06.2022

Erste Schritte (Workspace verwalten)

Doch wie können wir jetzt auf das Programm zugreifen? Dafür einfach auf der offiziellen Webseite auf Workspace klicken, was angezeigt wird, wenn wir uns mit unserem Account am rechten Rand angemeldet haben. So können wir es einfach im Web verwenden. Haben wir die Anwendung als Programm auf unserem PC installiert, können wir es einfach immer darüber starten und verwenden nach dem wir uns beim ersten Mal mit unserem Account angemeldet haben. Ich zeige dir jetzt alles in der Windows-PC-Version aber die ist äquivalent zur Mac oder Web-Version. Öffnen wir die Anwendung befinden wir uns als Start in unserem Workspace. Hier sehen wir direkt alle unsere Projekte und können diese verwalten. Im Hauptfenster sehen wir alle unsere Projekte und erstellten Ordner. Am oberen rechten Rand können wir diese nach ihrem Erstellungsdatum, letzten Update oder Namen sortieren, sowie nach bestimmten Formaten filtern und zwischen einer Listen- oder Kachelübersicht wechseln. Bei der Listenansicht sehen wir direkt auf einen Blick neben dem Namen und Cover, auch wie viele Screens wir im Projekt haben und wann wir es das letzte Mal bearbeitet haben. In der Kachelansicht sehen wir nur den Namen und das Format direkt. Fahren wir hier mit der Maus drüber, können wir uns das Projekt direkt im Vorschaumodus anschauen, sowie in der Mitte weiterbearbeiten oder über die drei Punkte das Projekt in einem neuen Ordner öffnen sowie alle Projektdetails aufrufen, wo wir direkt alle Screens in einer Übersicht sehen und neue Screens sowie Icons hinzufügen könnten. Hier kann man dann auch direkt die Vorschau am oberen rechten Rand starten, das Projekt teilen oder seine Grundeinstellungen nachträglich bearbeiten, sowie das ganze Projekt an sich. Über die drei Punkte können wir das Projekt auch zu unseren Favoriten hinzufügen, welche wir am linken Rand in einem eigenen Bereich alleine anschauen können. Wir können das Projekt auch Teilen oder archivieren, was praktisch ist, wenn wir unser Projekt abgeschlossen oder abgebrochen haben aber nicht endgültig löschen möchten. Dann wird das Projekt in einen eigenen Bereich am oberen Rand verschoben und nicht mehr in der allgemeinen Projektübersicht angezeigt. Des Weiteren können wir ein Projekt auch umbenennen, in Ordner verschieben, kopieren, je nach Plan auch in verschiedenen Formaten exportieren oder komplett löschen. Alle gelöschten Projekte finden wir am unteren linken Rand im Papierkorb, wo sie erst nach 30 Tagen automatisch endgültig gelöscht oder manuell direkt gelöscht werden können. Hier kannst du sie aber auch wiederherstellen, falls du etwas versehentlich gelöscht haben solltest. Unter dem Papierkorb im Menü, können wir auch unser Abo verwalten oder Upgraden sowie direkt zum Kundendienst kommen, falls wir Probleme mit dem Programm haben sollten. Im oberen linken Menü können wir dann auch einfach auf unsere zuletzt verwendeten Projekte zugreifen, sowie ganz oben auch ein neues Projekt erstellen, sowie auch Ordner, in welcher wir unsere Projekte auf der Startseite sortieren können. Mit einem Rechtsklick auf einen Ordner, können wir diesen, samt seiner beinhalteten Projekte archivieren, seine Farbe ändern, umbenennen oder löschen. Haben wir viele Projekte ist die Suche am oberen rechten Rand auch praktisch, wo wir nach einem Projekt suchen können. Daneben haben wir auch den Benachrichtigungsbereich, wo wir über Veränderungen oder Kommentaren, von bspw. Teammitgliedern informiert werden. Ganz rechts können wir auch unseren angemeldeten Account verwalten, wo wir auch unser Abo nachträglich verwalten können und das nächste Zahldatum, sowie Rechnungen finden, sowie unser Profil, was für Teammitglieder sichtbar ist, verwalten. Wir finden auf der Startseite jetzt noch ganz oben ein Menü, wo wir zwischen unserem persönlichen Bereich, mit unseren eigenen Projekten, auch in den Enterprise Bereich für Teamprojekte wechseln können, falls wir auch einen Enterprise Plan haben. Unter Ressourcen im Menü finden wir auch Projekte von anderen, welche sie bereitstellen bzw. Vorlagen welche wir ggf. als Inspiration verwenden können. Erstellen wir jetzt ein neues Projekt am oberen linken Rand, müssen wir als Erstes einen Namen eingeben, sowie den Gerätetyp, für welchen wir das Design erstellen wollen. Hier können wir auch einen individuellen anhand von der Pixelbreite und Höhe einstellen. Später im Projekt können wir auch mit unterschiedlichen Formaten arbeiten. Oben am Rand können wir auch neben einem komplett leeren Projekt auch das Projekt anhand einer Vorlage erstellen, welche uns von Mockitt bereitgestellt werden. Ich zeige dir jetzt alles anhand einer Vorlage, da es so verständlicher ist, die gleichen Sachen sind aber auch immer mit einem leeren Projekt möglich. Jetzt einfach nur noch auf “Erstellen” klicken und wir sind direkt im Programm.

Aufbau von Mockitt (Oberfläche)

Bevor wir uns die einzelnen Funktionen genau anschauen, gebe ich dir erstmal einen Überblick, wie das Programm an sich aufgebaut ist und wo was zu finden ist. So verstehst du direkt was damit alles möglich ist und du kannst so schneller eigenständig mit dem Programm arbeiten, da du weißt, wo alles genau ist. Befinden wir uns im Projekt sehen wir direkt in der Mitte unseren aktuell ausgewählten Screen. Die verschiedenen Screens, also Seiten in unserem Prototyp können wir am linken Rand oberhalb auswählen und verwalten. Hier können wir diese auch in Ordner sortieren, um den Überblick nicht zu verlieren, was bspw. praktisch ist, wenn wir ein Design für unterschiedliche Gerättypen erstellen. Unter den Screens sehen wir dann auch die Ebenen vom aktuell ausgewählten Screen, also alle Elemente, welche wir zu der Seite hinzugefügt haben. Wenn wir schon über das Hinzufügen von Elementen reden, können wir das bspw. über die Werkzeuge am ganz linken Rand machen, wo wir über ein Texttool Texte einfach hinzufügen können, sowie Rechtecke, Kreise, Linien, Bilder oder Links darunter. Am ganz unteren linken Rand, finden wir auch noch einen Papierkorb, wo alle gelöschten Screens drin sind, falls wir welche entfernt haben. Noch mehr Elemente können wir jetzt am rechten Rand hinzufügen, wo wir über das kleine schwebende Menü auf Widgets zugreifen können. Hier haben wir eine große Auswahl an Basic-Elementen, welche man einfach hinzufügen kann, wo wir auch Vorlagen zu den gängigen Systemen erhalten, was unsere Prototypen noch realistischer machen kann. Wir können hier auch unsere eigenen Widgets erstellen, auf welche wir hier zugreifen können, um bspw. Designs von bestimmten Elementen einfach öfters und global verwenden zu können. Darunter haben wir auch eine Icon-Bibliothek, wo wir auf viele Symbole zugreifen können und ganz oben können wir auch den Zustand der aktuellen Seite einstellen, was für das Animieren der Seite später noch interessant ist. Am ganz rechten Rand haben wir jetzt noch das Eigenschaften-Fenster, hier können wir also Einstellungen zu aktuell ausgewählten Elementen auf der Seite machen, oder zu dem Screen an sich, falls wir nichts ausgewählt haben. Hier haben wir auch einen zweiten Event-Bereich, womit man auch Animationen erstellen kann. Zu guter Letzt haben wir jetzt ganz oben noch ein Generelles Menü wo wir ganz links unseren Projektnamen sehen und über den Pfeil zurück in unser Workspace kommen. Rechts daneben können wir unser aktuelles Projekt auch speichern, sowie die letzten Schritte rückgängig machen oder wiederholen. Außerdem Strg oder Cmd Taste am Mac machen.Wenn du noch mehr praktische Tastenkürzel zum Programm kennenlernen willst, womit du noch produktiver in Mockitt arbeiten kannst, dann schau doch mal auf meinem Instagram-Profil @simontutorial vorbei. Dort erhältst du zu allen meinen Tutorials kostenlose Bonus-Inhalte. In der Mitte am oberen Menü haben wir dann noch Werkzeuge zum Anordnen, Gruppieren und sperren von Elementen auf dem aktuellen Screen. Am rechten Rand können wir dann auch auf die Library zugreifen, wo wir alle unsere hochgeladenen bzw. verwendeten Bilder und erstellten Widgets übersichtlich finden, sowie die Grundelemente von Mockitt selber, welche wir auch verwenden können. Neben der Bibliothek können wir auch auf ältere Versionen vom Projekt zugreifen, was nur im Team geht und da auch am meisten Sinn macht, um Veränderungen von anderen besser nachvollziehen oder revidieren zu können. Daneben können wir dann noch unser Projekt exportieren oder über einen Link teilen. Ganz rechts, haben wir auch den Vorschau-Modus, wo wir unser eigenes Design testen können. Über die drei Punkte, kommen wir noch zu den Einstellungen, wo wir zwischen unterschiedlichen Layouts der Anwendung wechseln können, also wie die Funktionen angeordnet sind. Ich verwende hier die empfohlene Version, sowie nutze das Standard-Blau als Akzentfarbe und erstellte Links können wir nicht anzeigen, so wie nur eingefärbt oder mit zusätzlicher Linie. Hier ist es auch Sinnvoll den Drag-and-drop-Modus aktiv zu haben, was das Platzieren von Elementen natürlicher macht.

Screens verwalten

Um generell ein Design erstellen zu können, brauchen wir sogenannte Screens, also Bildschirme oder Seiten, auf welchen wir das Design erstellen. Diese Screens sind auf eine Größe festgelegt, was unseren Computer, Handy oder Tabletbildschirmen entspricht. So designt man seine Prototypen schon in der richtigen Größe und hat eine realistische Darstellung. Bei der Projekterstellung haben wir ja schon eine Größe eingestellt, welche uns als Screen automatisch im Projekt angezeigt wird. Wir können alle Screens am linken Rand verwalten und zwischen diesen wechseln, um sie im Zentrum des Programms anzuzeigen und bearbeiten zu können. Wir können hier die Screens auch per Drag-and-Drop neu sortieren und auch Unterseiten erstellen, wenn wir einen Screen auf den anderen schieben. Wir können auch Ordner am oberen linken Rand erstellen, um unsere Screens zu sortieren. Diese Ordner können wir auch als Unterseite erstellen, also wir haben hier wirklich viel Freiheit was das sortieren der Screens angeht. Fahren wir mit der Maus über einen Screen, können wir über seine drei Punkte, können wir direkt eine neue Unterseite oder Unterordner erstellen, sowie den aktuellen Screen einfach duplizieren oder in ein anderes Projekt verschieben, wo wir auch nur eine Kopie verschieben können, sodass der Screen auch im aktuellen Projekt erhalten bleibt. Schließlich können wir hier den Screen auch löschen, welchen wir dann im Papierkorb am unteren linken Rand verwalten können und ihn ggf. wiederherstellen können, bevor er endgültig gelöscht wurde. Am oberen rechten Rand können wir auch nach einem Screen direkt suchen, sowie alle Unterseiten aus- oder einblenden, sowie in eine Kachelansicht wechseln, wo wir auch eine Vorschau der Screens sehen, aber keine Hierarchien mehr haben. Da find ich persönlich die Listenansicht, wesentlich übersichtlicher. Über das Plus am oberen linken Rand, können wir auch einen neuen Screen einfach erstellen, welcher dann direkt ausgewählt wird und im Standardformat unseres Projektes ist. Durch doppeltes Tippen auf seinen Namen können wir diesen auch ändern und wir finden jetzt im rechten Eigenschaftsfenster noch Optionen zum Screen an sich. Hier können wir die Abmessung manuell an genauen Pixeln oder anhand der Standard-Formatvorlagen ändern. Darunter können wir dann auch die generelle Hintergrundfarbe der Seite festlegen und die Transparenz der Hintergrundfarbe. Bei Fixed Slider können wir einen Bereich auf dem Screen von oben oder unten festlegen, was auch über das Symbol im Hauptfenster links an unserem Screen visuell geht, welcher beim Scrollen der Seite fixiert bleibt und nicht verschwindet. Generell einen Scrolleffect bei einer Seite erhalten wir erst, wenn wir im Hauptfenster den Screen nach unten hin erweitern. Wir erhalten dann eine gestrichelte Linie, welche uns den Bereich anzeigt, welcher beim Öffnen der Seite sichtbar ist und alles, was darunter ist, kann dann über das Scrollen erreicht werden. Am rechten Rand können wir zu unserem Projekt auch noch alle Verlinkungen, welche wir zu anderen Screens erstellt haben verwalten, sowie auch zwischen den Screen-States wechseln und die Animationen. Diese drei Sachen schauen wir uns später im passenden Kontext noch genauer an.

Elemente erstellen, verwalten & anordnen (Werkzeuge)

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.

Texte & Bilder erstellen & verwalten

Schauen wir uns jetzt an, wie wir Texte auf einer Seite erstellen können, sowie mit Bildern arbeiten. Haben wir das Textwerkzeug mit der Taste T ausgewählt, können wir einfach auf die Seite klicken, um automatisch einen freien Beispieltext zu erhalten, wo wir einfach durch tippen unseren eigenen Text schreiben können. Wir haben aber auch die Möglichkeit mit dem Textwerkzeug ein Fenster aufzuziehen, in welchem wir dann einen Text schreiben können. Dieses bietet sich für lange Texte an, da man damit besser kontrollieren kann, in welchem Bereich der Text geschrieben wird, da er durch den Rahmen begrenzt wird. Wir bei anderen Elementen auch, können wir den Text auch drehen, um bspw. vertikale Schrift zu haben und durch doppeltes Tippen auf den Text, können wir ihn nachträglich auch immer nochmal bearbeiten. Im Eigenschaftenfenster haben wir dann wieder viele Grundfunktionen, welche wir uns im vorhrigen Kapitel bei Objekten schon angeschaut haben, aber hier haben wir auch einen speziellen Textbereich. Dort können wir die Schriftart, Schriftfarbe, Schriftgröße und Stärke einstellen. Auch die Ausrichtung des Textes innerhalb seines Rahmens kann man hier festlegen, sowie die Buchstaben- und Zeilenabstände. Über das Zahnrad können wir auch kursiven, fetten, durchgestrichenen oder unterstrichenen Text erstellen, sowie auch nachträglich festlegen, ob man einen freien Text oder Textrahmen beim Element haben möchte. Neben Texten können wir aber natürlich auch Bilder zu unserem Design einfügen, was einfach durch Drag-and-drop aus dem Dateiexplorer geht. Die Bilder dürfen nicht größer als 2MB sein, um sie in dein Design zu laden, was gut für deinen Cloud-Assets Speicher von Mockitt ist und die Ladezeit der Bilder verschnellert, da sie in der Cloud gespeichert werden. Weißt du das du an einer Stelle ein Bild einfügen willst, aber noch nicht weißt, was für eins genau. Dann kannst du einfach aus der Werkzeugleiste ein Image Viewer erstellen, also ein Platzhalter. Hier haben wir dann ein graues Bild, welches wir transformieren und bearbeiten können, wie jedes andere Element auch. Wir finden in den Eigenschaften dann einen eigenen Punkt für das Bild, wo wir den Platzhalter oder das bestehende Bild einfach mit einem neuen oder bereits in unsere Bibliothek geladenen Bildern ersetzen können. So kann man Bilder auch einfach austauschen nachträglich, ohne ein komplett neues Element erstellen zu müssen. Unter der Bildauswahl, können wir das Bild auch zuschneiden, um nur einen bestimmten Bereich des Bildes anzuzeigen. Ist der anzuzeigende Bereich größer als das Element, können wir bspw. für die weißen Stellen auch eine Hintergrundfarbe in den Einstellungen festlegen.

Widgets, Masters & Icons

Das Praktische an Mockitt ist, dass wir hier auch viele vorgefertigte Elementgruppen haben, welche hier Widgets genannt werden. Wir finden diese über das Menü am oberen rechten Rand und können hier einfach auf alle Widgets zugreifen und diese per Drag-and-Drop auf unseren Screen ziehen und so ein neues Element erstellen, was wir dann individuell einstellen können. Da finden wir auch praktische Elemente wie Tabellen, Schaltflächen, Dropdown-Menüs, Slideshows oder Karten. Hierbei handelt es sich sogar um eigene Elementtypen, wo wir dann spezielle Einstellungen am rechten Rand machen können. Hier finden wir auch viele Systemdesigns, welche wir einfach einfügen, aber leider nicht wirklich individualisieren können. Über “Mehr Resourcen” am unteren Rand kommen wir auch in die öffentliche Community, wo wir einfach auf tausende Elementen von anderen Nutzern zugreifen können, um uns von dort auch einfach Designs oder Widgets herunterzuladen um sie dann in unserem Projekt verwenden zu können. Wir haben aber auch die Möglichkeit unsere eigenen Widgets zu erstellen, in dem wir einfach mehrere Elemente gruppieren und mit einem Rechtsklick zu unseren Widgets hinzufügen können. Hier müssen wir dann einen Namen und Gruppe in unseren Widgets festlegen, für das Element. Im eigenen Menüpunkt können wir dann auf alle unsere eigenen Widgets zugreifen und diese genauso einfach im Projekt importieren, um sie zu verwenden. Wenn wir so ein Widget erstellen und darüber erneut importieren, hängt es nicht mit dem originalen Zusammen, also ist quasi einfach eine Designvorlage. Wollen wir jetzt aber globale Elemente erstellen, welche alle miteinander verbunden sind und wenn wir eines ändern, sich alle ändern, müssen wir sogenannte Masters erstellen, was genau gleich wie bei den Widgets funktioniert. Hier haben wir dann im Menü auch einen eigenen Bereich, wo wir das Element erneut platzieren können. Bearbeiten wir dann ein Element, kommen wir in einen neuen Modus, wo die Veränderung dann auf alle Elemente im Projekt angewendet werden, wenn wir es hier ändern. Über einen Rechtsklick können wir auch die Verbindung bei einem einzelnen Element zum Master aufheben, um das bspw. individuell bearbeiten zu können und nicht im Zusammenhang mit den anderen. Neben den Widgets und Masters finden wir dann noch Icons, also Symbole, welche wir einfach auswählen und zu unserer Seite hinzufügen können. Die sind alle vektorbasiert und können über die Eigenschaften auch einfach in ihre Farbe, Rand und Co. bearbeitet werden, wie andere Elemente auch. Im Icon-Fenster können wir oberhalb auch einfach nach einem Icon suchen, sowie unten auch direkt die Farbe und Größe für das Importieren von dem neuen Icon einstellen. In einem zweiten Fenster sehen wir hier auch unsere zuletzt verwendeten Icons direkt, was uns dabei hilft verwendete Icons einfach wieder zu finden. Über unsere Bibliothek am untern rechten Rand, können wir auch alle unsere Widgets, Icons, sowie selbst hochgeladene Bilder und erstellte Widgets verwalten, durchsuchen, mit Tags ausstatten und am unteren linken Rand sehen wir auch den verfügbaren Speicherplatz welchen wir für das Projekt noch haben.

Animieren & Verlinken (Prototypen)

Haben wir jetzt unser Design erstellt, ist es natürlich auch ein wichtiger Teil beim Prototypen, dieses interaktiv zu machen, also die Seiten miteinander zu verlinken oder Animationen, welche durch verschiedene Sachen ausgelöst werden zu erstellen. Weil wenn wir jetzt verschiedene Seiten erstellen haben in unserem Projekt, wollen wir ja bspw. im Menü auch einfach in der Vorschau zu der anderen Seite springen. Wir finden bei jedem Element einen kleinen Blitz am linken Rand, wenn wir es ausgewählt haben. Ziehen wir diesen Blitz jetzt auf eine Seite, aus unserem Seitenfenster am linken Rand, wir das Element mit der neuen Seite verlinkt. Also klicken wir dann in der Vorschau auf das Element, werden wir auf die ausgewählte Seite weitergeleitet. Wir sehen die Verbindung auch immer erneut, wenn wir das Element auswählen und können über die Schere, die Verbindung auch wieder entfernen. Haben wir eine Verbindung erstellt, finden wir im Eigenschaftsfenster jetzt auch automatisch erstelltes Element. Hier können wir genau festlegen, was passieren sollen. Einmal haben wir hier den Auslöser, also ob die Aktion durch Klicken, Wischen, Halten, Schütteln, Maus drüberfahren oder Rechtsklick auf das Element ausgelöst wird. Darunter können wir die Aktion das festlegen, also ob man bspw. auf eine andere Seite weitergeleitet werden sollen oder den Screen oder Widget State verändern möchte, gleich noch mehr dazu. Haben wir Seitenwechsel ausgewählt, können wir hier dann auch nachträglich die verlinkte Seite ändern, sowie ihren State und ob wir einen Übergang hinzufügen möchten und wie lang dieser dauert und wann er gestartet wird. Über den Papierkorb am oberen rechten Rand des Events können wir auch dieses wieder entfernen und ganz oben auch ein neues erstellen. Über die Werkzeugleiste können wir auch einen Element-unabhängigen Link erstellen, wo wir einfach einen unsichtbaren Bereich auf der Seite aufziehen können, wo wir dann einen Trigger, wie bei einem Element erstellen können. Jetzt haben wir auch noch die sogenannten Screen- und Widgets-States, welche wir am rechten oberen Rand auch aufrufen können. Damit können wir jetzt seitenübergreifende oder widgetbasierte Animationen erstellen, indem wir verschiedene Darstellungen unserer Seite erstellen, was die einzelnen Screens sind. Wollen wir auf dieser Seite bspw. die Smartphones erscheinen lassen, machen wir einen State, wo die Smartphones da sind und dann erstellen wir einen neuen State, auf welchen wir die Smartphones auf dem Screen löschen oder verschieben. Gehen wir dann in die Event-Einstellungen der Seite an sich, welche wir aufrufen können, wenn wir den Titel auswählen, können wir dort jetzt ein Event erstellen, was auch zeitbasiert ausgelöst werden kann und wo wir dann festlegen können, dass von dem einen Screen State zum anderen gewechselt werden soll. Hier haben wir dann einen Magic Move, der es uns ermöglicht bspw. wenn wir ein Element verschoben haben, die Verschiebung animiert wird. So kann man einfach mit verschiedenen Stadien unsere Seite, Animationen erstellen, welche durch das Wechseln durch diese mit zeitbasierten Auslösern funktioniert. Dieses Prinzip kann man jetzt auch 1:1 auf Widgets anwenden, wo wir in ihren Eigenschaften verschiedene Stadien erstellen können, welche dann innerhalb des Widgets durch Events ausgelöst werden können. Hier ist das coole, dass es wirklich nur im Bereich des Widgets passiert. Also wenn wir das Element in einem weiteren State bspw. außerhalb des Widgets platzieren, wird es durch einen Magic Move bspw. als Schnittmaske im Widgetbereich eingeblendet, was einen schönen Effekt hat.

Vorschau & Freigeben

Wir können unser Design jetzt auch immer in einer Vorschau anschauen, umzusehen, wie es final aussieht und mit diesem interagieren zu können, um die Benutzererfahrung zu testen. Wir können im Programm einfach am oberen rechten Rand in den Vorschaumodus, wechseln, wo wir unseren aktuellen Screen, dann groß sehen. Am linken Rand können wir auch einfach zwischen den Seiten wechseln und haben auch ein kleines Menü, wo wir manuell auf die verschiedenen Screen Sates zugreifen können, sowie sticky-Elemente aktivieren oder deaktivieren. Auf der Vorschau selber können wir uns dann frei bewegen und auch auf Links klicken, um auf die anderen Screens zu kommen oder Events auszulösen. Klicken wir ins Leere, können wir auch alle Verlinkungen kurz highlighten, umzusehen, womit man aktuell interagieren kann. Oben in der Mitte, können wir neben dem Vorschau-Modus auch in einen Handoff-Modus wechseln, welcher für Programmierer sinnvoll ist, welche den Protoypen in eine echte Seite umwandeln wollen. Hier können sie nämlich alle Elemente anklicken, um direkt ihre Positionen in Pixeln zu sehen und am rechten Rand alle ihre Einstellungen, wo du auch einfach das CSS und alles andere kopieren kannst. Als Letztes haben wir noch einen Kommentarmodus, wo man einfach durch Klicken auf eine Stelle in der Vorschau ein Kommentar an dieser hinzufügen kann, welche dann andere auch sehen und mit diesen interagieren können. Das ist für Feedbackschleifen bspw. super praktisch. Damit andere das Projekt auch sehen können, kann man es am oberen rechten Rand jetzt auch über einen Link teilen. Hier können wir auch festlegen, ob man nur mit einem Passwort, die Vorschau öffnen kann, sowie ob das schreiben von Kommentaren überhaupt möglich ist, sowie in welchem Modus und welche Screens in der Vorschau angezeigt werden sollen. Wir können auch direkt ein iframe erstellen, um die Vorschau in eine HTML Seite einzubinden. Über Publish Work können wir unser Projekt auch einfach in der Mockitt-Community teilen, welche andere dann downloaden und verwenden können. Über das Teilen können andere nur auf die Vorschau zugreifen, wenn ihr gemeinsam an einem Prototyp im Programm arbeiten wollt, müsst ihr ein Enterprise Abo haben und euer Projekt über den Enterprise-Workspace teilen. Klicken wir beim Teilen auf Reset, beim Link, wird der bestehende Link ungültig und keiner kann mehr darüber auf eure Vorschau zugreifen. Das ist praktisch, wenn du eine Vorschau wieder löschen möchtest. Im Vorschaumodus am ganz rechten oberen Rand, können wir unser Projekt auch im Vollbild anschauen, um von nichts abgelenkt zu werden und über den Pfeil am rechten Rand, kommen wir wieder zurück in unseren Bearbeitungsmodus.

Exportieren & Speichern

Wir können abschließend auch unser Projekt am oberen rechten Rand exportieren, wo wir es einmal als HTML5 Datei ausgeben können, um es offline auf unserem Gerät als Vorschau zu verwenden. Darunter können wir es auch als Android APK, um es als App verwenden zu können, exportieren. Das geht aber nur mit einem Enterprise Abo. Schließlich kann man den aktuell ausgewählten Screen auch als PNG Bild in seinen verschiedenen States exportieren oder alle Screens aus dem Projekt direkt als PNG Dateien. Hier können wir ganz unten auch festlegen, ob die Qualität der Screens 1:1 oder doppelt so groß sein sollte, als wir im Projekt damit gearbeitet haben. Neben dem Exportieren ist es auch immer wichtig, unser Projekt als Projektdatei in Mockitt zu sichern, damit wir es später immer weiterbearbeiten können. Das passiert generell zwischendurch immer automatisch aber wir können am oberen linken Rand, neben dem Projektnamen auch unser Projekt zu jedem Zeitpunkt zwischen speichern. So geht sicher nichts mehr verloren.

Jetzt weißt du wie du einfach Prototypen mit Mockitt erstellen kannst. Über diesen Link kannst du direkt durchstarten mit einem besonderen Rabatt von mir. Falls du auch wissen willst wie das Konkurrenzprodukt Adobe XD oder Figma funktioniert, schau gerne auf meinem Kanal vorbei, dort findest du hunderte Tutorials zu vielen verschiedenen Apps und Software-Anwendungen. Über das Bewerten und Teilen des Tutorials freue ich mich immer sehr. Falls du noch Fragen oder Feedback haben solltest, kannst du dieses gerne in den Kommentaren hinterlassen, bis zum nächsten Mal.