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.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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.
Inhaltsverzeichnis
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.
Personal
Järhliches Abo- Unlimitierte Projekte
- 500 Screens pro Projekt
- 2GB Asset-Speicher
- 1 Person
Enterprise
Järhliches Abo- Unlimitierte Projekte
- 3000 Screens pro Projekt
- 2GB Asset-Speicher/Person
- 1+ Personen
- Team-Funktionen
- Besserer Support
Erste Schritte (Workspace verwalten)
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)
Texte & Bilder erstellen & verwalten
Widgets, Masters & Icons
Animieren & Verlinken (Prototypen)
Vorschau & Freigeben
Exportieren & Speichern
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.