Mockplus: Schnell und einfach Mockups für Desktop- und Mobilgeräte erstellen

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Komplexe Benutzeroberflächen für Websites oder Anwendungen müssen gut durchdacht und intuitiv bedienbar sein. Bevor es an die eigentliche Gestaltung geht, ist es üblich, das Aussehen und die Bedienung per Mockups festzulegen. Mit Mockplus erstellst du interaktive Mockups mit wenigen Klicks und testet diese auch auf Mobilgeräten.

mockplus

Mockplus für Windows und Apple herunterladen

Auch wenn der Trend ja weg von klassischen Anwendungen hin zu Webanwendungen geht, ist Mockplus als klassische Applikation für Windows- und Apple-Systeme erhältlich. Hast du Mockplus installiert und dich kostenlos registriert, startest du mit deinem ersten Projekt. Dazu wählst du zunächst aus, welche Art von Mockup du erstellen möchtest. Zur Auswahl stehen dir Smartphones, Tablets und Desktopgeräte sowie Websites und Whiteboards. Je nach Auswahl erhältst du eine entsprechend angepasste Arbeitsfläche.

mockplus_neu
Neues Projekt anlegen

Als Nächstes entscheidest du dich für einen Stil für dein Mockup. Während der Wireframe-Stil auf geometrisch reduzierte Formen setzt, kommt der Sketch-Stil mit einer eher handgezeichneten Optik daher. Du kannst jederzeit zwischen den beiden Stilen wechseln.

mockplus_stil
Auswahl zwischen Wireframe- und Sketch-Stil

Klassische Inhalts- und Bedienelemente platzieren

Ist deine Arbeitsfläche soweit vorbereitet, kannst du anfangen, dein Mockup zu konzipieren und gestalten. Mockplus stellt dir dazu eine Vielzahl verschiedener Komponenten zur Verfügung, die du ganz bequem mit der Maus auf deine Arbeitsfläche ziehst. So gibt es klassische Buttons, Text- und Bildelemente sowie Formularfelder, die du frei platzierst und skalierst.

Darüber hinaus sind in sechs Kategorien weitere Komponenten vorhanden, die gängige Bedienoberflächen und Inhalte simulieren. So gibt es zum Beispiel Popup-Menüs, Hinweisfenster, Scrollbars, Tabs und auch Bilderkarussels. Jede Komponente hat ihre eigenen Eigenschaften. So gibst du Texte ein oder importierst Bilder, wie es beim Bilderkarussel möglich ist.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

mockplus_oberflaeche
Platzierte Komponenten im Sketch-Stil auf der Zeichenföäche

Textfelder werden im Übrigen mit Blindtext ausgestattet, sodass du auch ohne eigene Texteingabe arbeiten kannst, wenn ein eigener Text nicht notwendig oder einfach noch nicht fertig ist.

Insgesamt stehen dir an die 200 Komponenten zur Verfügung. Es gibt kaum etwas, wofür Mockplus nicht eine Komponente vorgesehen hat.

In der Vorschau kannst du dann nicht nur das Aussehen deines Mockups prüfen, sondern auch die Bedienung. So sind die Menüs und andere interaktive Elemente wie das Bilderkarussel oder Tabs bedienbar.

Interaktionen festlegen

Damit deine Benutzeroberfläche auch im Mockup funktioniert, gibt es die Möglichkeit, Schaltflächen und andere Elemente mit Interaktionen zu belegen. Mit „OnClick“, „OnLongClick“ und „OnLoad“ stehen dir drei Ereignisse zur Verfügung, die eine Interaktion auslösen.

mockplus_interaktion
Einfache Interaktionen anlegen

Neben der Auswahl der Interaktion musst du noch ein Ziel angeben. Hierbei handelt es sich um eine interaktive Komponente auf der Zeichenfläche, die per Interaktion eingeblendet oder per Animation verändert wird. So besteht die Möglichkeit, eine Komponente aus dem nicht sichtbaren Bereich der Seite hineinzubewegen, zu vergrößern oder zu drehen.

Das Ziel für deine Interaktion wählst du entweder aus einer Liste aller auf der Seite platzierten Elemente aus oder verknüpfst es einfach per Drag-&-Drop. Fährst du mit der Maus über eine Schaltfläche mit einer Interaktion, wird das verknüpfte Element hervorgehoben, sodass du nicht den Überblick darüber verlierst, welche Schaltflächen mit welchen Komponenten interagieren.

Je nach Auswahl stehen dir verschiedene Eigenschaften zur Verfügung, mit denen du die Form der Animation beeinflusst. So legst du beispielsweise die Geschwindigkeit fest, mit der die Animation laufen soll.

Dank der Interaktionen öffnest du beispielsweise per Klick auf eine Schaltfläche ein Menü oder eine Sidebar.

Seiten anlegen und verlinken

Selten beschränkt sich eine Website oder Anwendungen auf eine Seite. Meist sind unterschiedliche Bereiche auf mehrere Seiten unterteilt. Auch mit Mockplus legst du für ein Projekt beliebig viele Seiten an und füllst sie mit Inhalt.

Ähnlich wie bei den Interaktion erstellst du Verlinkungen zu anderen Seiten und legst auf Wunsch einen animierten Übergang zu der Seite fest. So wählst du aus verschiedenen Slide-Animationen aus, welche die ausgewählte Seite aus einer Richtung ins Display animieren. Auch eine Fade-Animation ist möglich.

mockplus_seite
Seiten verlinken und animierte Übergänge festlegen

Für jede Seite kannst du im Übrigen einen eigenen Seitenstil festlegen. So weist du eine Hintergrundfarbe zu sowie eine Schriftart und -größe. Schriftart und -größe werden auf alle Elemente, die auf der jeweiligen Seite platziert sind, angewendet. So änderst du also im Handumdrehen das Aussehen der gesamten Seite, ohne die Komponenten einzeln bearbeiten zu müssen.

Auf Wunsch wirkt sich die Stilanpassung auch auf alle anderen Seiten deines Mockups aus.

400 Icons für Benutzeroberflächen

Es gibt kaum eine Benutzeroberfläche, die nicht ohne den Einsatz von aussagekräftigen Icons auskommt. Auch hier hat Mockplus vorgesorgt und bietet dir 400 Icons an, die du einfach in deine Projekte einbinden kannst.

mockplus_icons
Aus 400 Icons auswählen – im Wireframe- und Sketch-Stil vorhanden

So gibt es Emoticons, einfache geometrische Formen, Pfeile sowie Bearbeitungssymbole unter anderem zum Kopieren, Ausschneiden, Bearbeiten und Löschen. Icons setzt du ähnlich ein wie Schaltflächen. Du kannst also auch ihnen eine Interaktion zuweisen.

Nutzt du Mockplus in der kostenlosen Variante, stehen dir allerdings nicht alle Icons zur Verfügung.

Vorschau und Test auf Mobilgeräten

Vom Bearbeitungsmodus wechselst du jederzeit ganz bequem in die Vorschau. In dieser testest du deine Interaktionen und Links zu anderen Seiten. Erstellst du ein Mockup für ein Mobilgerät, erscheint ein Apple- oder Androidgerät zur Veranschaulichung um dein Mockup. So erhältst du einen guten Eindruck, wie dein Mockup tatsächlich auf dem entsprechenden Gerät aussieht.

Für die richtige Smartphone- oder Tableterfahrung gibt dir Mockplus zudem die Möglichkeit, dein Mockup auch auf einem realen Mobilgerät zu testen. Dazu musst du dir die Android- oder iOS-App von Mockplus auf einem entsprechenden Smartphone oder Tablet installieren.

Während du die iOS-App im Apple Store erhältst, wird dir die Android-App als Download angeboten. Du musst diese also manuell auf deinem Mobilgerät installieren.

mockplus_vorschau
Bedienbare Vorschau deines Mockups

In der Desktopanwendung wählst du nun die Vorschau für Mobilgerät aus und erhältst einen QR-Code, den du mit der Android- oder iOS-App einscannst. Anschließend erscheint dein Mockup-Projekt auf deinem Smartphone oder Tablet.

Cloud-Anbindung in der Pro-Version

Neben der kostenlosen Version gibt es Mockplus auch in einer kostenpflichtigen Variante. Diese ermöglicht es dir, Projekte in einer Cloud zu speichern, so dass du jederzeit Zugriff auf diese hast.

Außerdem stehen dir weitere Icons sowie eine Export- und Druckfunktion zur Verfügung. Die Pro-Version mit all diesen Features kostet 20 US-Dollar im Monat, 79 US-Dollar im Halbjahr oder 119 US-Dollar im Jahr.

Fazit

Mockplus besticht durch seine einfache Bedienung. Dank vieler vorgefertigter Komponenten baust du dir ohne Programmierkenntnisse schnell ein Mockup zusammen. Interaktionen und Animationen fügst du ebenso schnell hinzu und testest diese in einer Vorschau.

Die Anbindung an Mobilgeräte funktioniert mit der eigenen iOS- und Android-App ebenso schnell und unkompliziert. Gerade bei der Mockup-Erstellung geht es darum, schnelle Ergebnisse zu finden, die sich sehr schnell testen und im Zweifel wieder verwerfen lassen. Mockplus ermöglicht dir mit seinen zahlreichen Features genau das.

Es eignet sich sowohl für App-Entwickler als auch auf Webdesigner und -entwickler, die komplexe, aber einfach zu bedienende Benutzeroberflächen gestalten wollen.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Arno
Gast

Die Anwendung ist in ihrer Pro-Version nicht zu empfehlen, weil sie nur über ein Abo benutzbar ist. Dadurch unterstützt man den unerträglichen Trend der Software-Industrie, Lizenzen ausschließlich über Abonnements an den Nutzer zu bringen.

Dieter Petereit
Dr. Web

Dank meines CC-Abos zahle ich keinen Cent mehr als zuvor mit den Jahresupdates, komme aber viel schneller an neue Funktionen. Und dank meines Office365-Abos zahle ich für MS-Produkte nur noch einen Bruchteil des vorherigen Kurses. Ich verstehe daher nicht, was daran unsäglich sein soll. Viel mehr: Weiter so!

wpDiscuz