Top

Moqups gehört ebenfalls zu den bekannteren Vertretern unter den Mockup-Tools. Bei Moqups handelt es sich um eine reine Web-Anwendung. Eine Desktop-Variante wirst du vergeblich suchen.

Das gute an Moqups ist, dass du sofort nachdem Aufruf der Website loslegen kannst. Das Tool startet nämlich sofort in der Arbeitsumgebung, die sehr übersichtlich aufgebaut ist. Auf der rechten Seite findest du z.B. die vorgefertigten Schablonen, die du per Drag & Drop auf die Zeichenfläche befördern kannst.

Oberhalb der Zeichenfläche und den Schablonen, befindet sich das Menü und eine Reihe von Einstellungsmöglichkeiten. Über diese Einstellungen kannst du z.B. die Positionierung der Schablonen anpassen oder die Reihenfolge der Elemente bestimmen.

Positiv ist mir die Möglichkeit aufgefallen, mehrere Seiten zu erstellen und diese über Links miteinander zu verbinden. So kannst du dir in Windeseile einen ersten funktionionsfähigen Klickdummy deiner Website erstellen.

Genauso wie Balsamiq, hat aber auch das Mockup-Tool Moqups, seine Nachteile in der kostenlosen Version. Diese fallen nicht ganz so graffierend ins Gewicht, erschweren die Arbeit mit dem Tool trotzdem erheblich. Das ist aber auch nicht unbedingt verwunderlich. Moqups wird nämlich in 3 Bezahlvarianten angeboten, für die du dich entscheiden kannst, wenn dir das Tool gefällt.

Erst wenn du dich für eine kostenpflichtige Version entschieden hast, kannst du den vollen Funktionsumfang nutzen. Vorher kannst deine Mockups nicht speichern oder auch nicht als PDF-, PNG- oder JPG-Datei exportieren. Das ist natürlich nicht berauschend, aber wenn du deine Arbeiten in einer Sitzung abschließen kannst, dann gibt es ja immer noch die Screenshot-Funktion, um deine Ergebnisse für Präsentationen zu sichern 😉

3. Mockingbird

3. Mockingbirdh: 690px" class="wp-caption aligncenter">Mein persönlicher Favorit unter den Mockup-Tools: Mockingbird

Mein persönlicher Favorit unter den Mockup-Tools: Mockingbird

Mockingbird ist mein bisheriger Favorit unter den Mockup-Tools. Nicht nur weil es sich hier um eine Web-Applikation handelt und ich mir kein lokales Programm installieren muss, sondern auch weil es alles bietet was ich zur Erstellung guter Mockups brauche.

Bei Mockingbird kannst du z.B. aus über 90 vorgefertigten Elementen wählen. Diese sind in sinnvolle Kategorien unterteilt, so dass du dich nicht tot suchen musst. Und wenn dir das nicht reichen sollte, bietet das Tool auch eine Suchfunktion zum schnellen Auffinden der gesuchten Elemente an.

Genauso wie bei Moqups, kannst du auch hier mehrere Seiten deiner Website als Mockup erstellen. Leider fehlt die Option die einzelnen Webseiten miteinander über Links zu verbinden. Das ist für mich aber nicht weiter schlimm, weil das Tool noch ein weiteres tolles Feature besitzt, welches für den späteren Prozess der Website Erstellung sehr zeitsparend ist.

Über die Zeichenfläche kannst du nämlich ein Grid-System legen, an dem du alle Elemente ausrichten kannst. Grid-Systeme werden bei vielen modernen Websites eingesetzt und wenn du dies bereits bei deinem Mockup verwendest, dann sparst du dir bei der späteren Umsetzung des Layouts viel Zeit.

Leider ist kaum ein kostenloses Mockup-Tool perfekt und so gibt es auch an Mockingbird etwas auszusetzen. Denn auch hier gibt es wieder kostenpflichtige Bezahlvarianten und wie kann man am effektivsten die User dazu bringen Geld auszugeben? Natürlich, indem man sie ihre Arbeit nicht speichern oder exportieren lässt.

Insgesamt ist es aber ein sehr gutes Mockup-Tool und wenn du mehr über die Erstellung von Mockups mittels Mockingbird erfahren möchtest, dann habe ich hier einen wunderbaren Artikel für dich:

Mockups erstellen und bessere Webseiten produzieren

4. Pencil

4. Pencilwp-caption aligncenter">Vielleicht mein neues Lieblings-Mockup-Tool: Pencil

Vielleicht mein neues Lieblings-Mockup-Tool: Pencil

Bei Pencil handelt es sich um die einzige kostenlose Desktop-Anwendung unter den hier vorgestellten Mockup-Tools. Es wird für Windows, Mac OS und Linux zum Download angeboten und eine Extension für den Browser Mozilla Firefox steht ebenfalls zur Verfügung. Die Firefox Extension konnte ich persönlich aber nicht zum Laufen überreden und habe mich deshalb auf die Desktop-Variante für Windows beschränkt.

Auf den ersten Blick fallen bei diesem Mockup-Tool die unzähligen Vorlagen auf. Ich habe sie mal überschlagen und bin auf über 300 vordefinierte Shapes gekommen. Damit ist Pencil der unangefochtene Spitzenreiter in dieser Kategorie. Sollte dir die Fülle an Vorlagen immer noch nicht ausreichen, kannst du dir weitere von der Homepage herunterladen.

Die Oberfläche von Pencil wirkt sehr aufgeräumt und alles ist an seinem vermuteten Platz. Oben findest du die Menüleiste mit generellen Einstellungsmöglichkeiten zum Mockup-Tool, daran schließt die Formatleiste an, über die du die Zeichenvorlagen nach deinen Wünschen formatieren kannst. Der Arbeitsbereich ist in eine Liste mit den Vorlagen und der Zeichenfläche aufgeteilt.

Die einzelnen Shapes/Vorlagen, gelangen per Drag & Drop auf die Zeichefläche. Dort kannst du sie dann nicht nur über die Formatleiste formatieren, sondern auch über ein aufrufbares Kontextmenü.

Pencil hält alle Features bereit, die man zur Erstellung eines guten Mockups benötigt:

Hier gibt es fast nichts, was es nicht gibt. Ein kleiner Wehrmutstropfen bleibt aber. Sowie es aussieht, wird das OpenSource Mockup-Tool nicht mehr weiterentwickelt. Der letzte Eintrag in der Release-Liste ist zumindest vom November 2013.

Ansonsten bin ich aber sehr positiv überrascht von Pencil und werde es auf jeden Fall weiter testen. Vielleicht löst es ja Mockingbird als mein bisherigen Favoriten unter den kostenlosen Mockup-Tools ab.

5. wireframe.cc

5. wireframe.ccef="http://www.webschmoeker.de/wp-content/uploads/2015/06/mockup-tools-wireframecc.jpg">Mit Wireframe|cc kann man schnelle Entwürfe einer Website erstellen

Mit Wireframe|cc kann man schnelle Entwürfe einer Website erstellen

Wireframe|cc ist ein sehr minimalistisches Tool, welches eher zur Erstellung von Wireframes gedacht ist. Nichts desto trotz hält es ebenfalls sehr gute Möglichkeiten für dich bereit, einen schnellen Entwurf deiner Website zu erstellen. Auch in der kostenlosen Variante.

Die Bedienung weicht von den bisher vorgestellten Mockup-Tools ab. Hast du das Tool aufgerufen, siehst du nur die Zeichenfläche und ein paar wenige Schaltflächen zum formatieren der gezeichneten Elemente. Damit du dich schnell mit der Bedienung vertraut machen kannst, kann ich dir nur empfehlen, die Demo anzuschauen. In dieser wird alles sehr schön erklärt.

Einen großen Pluspunkt bekommt die Speicherfunktion von wireframe|cc von mir. Diese ist auch in der kostenlosen Variante verfügbar und immer wenn du die URL zu deinem Wireframe aufrufst, kannst du deine Arbeit dort fortsetzen, wo du beim letzten Mal aufgehört hast.

Eine Export-Funktion und das Anlegen von mehreren Webseiten, wird erst in der Premium-Version freigeschaltet. Ein Grid-System kannst aber bereits in der kostenlosen Variante über die Zeichenfläche legen.

Alles in Allem ist es ein solides Tool für schnelle Entwürfe einer Website-Idee. Ob du mit den Funktionen der kostenlosen Variante zurecht kommst oder auf die kostenpflichtige Version umschwenkst, musst du im Endeffekt für dich selbst entscheiden.

6. Lumzy

Lumzy ist, wie sollte es anders sein, eine Web-Anwendung zur Erstellung von Website-Mockups. In der kostenlosen Version, ist es das Mockup-Tool mit dem größten Funktionsumfang als Web-Anwendung:

Das einzige große Feature was mir fehlt, ist die Speicherfunktion. Die Schaltfläche dafür wird zwar angezeigt, steht aber erst nach einer kostenlosen Registrierung zur Verfügung.

Eine kostenpflichtige Premium-Version, gibt es bei Lumzy nicht. Hier unterscheidet es sich deutlich von den anderen vorgestellten Mockup-Tools. Bei Lumzy kannst du dir nämlich sogenannte Tokens kaufen. Diese Tokens setzt du dann dafür ein, um die regelmäßig aufploppende Werbung zu unterdrücken. 1 Token reicht hier für 12 Stunden Werbefreiheit.

7. frame box

7. frame boxp-content/uploads/2015/06/mockup-tools-framebox.jpg">frame box gehört eher zu den spartanisch ausgestatteten Mockup-Tools

frame box gehört eher zu den spartanisch ausgestatteten Mockup-Tools

Beim Mockup-Tool frame box handelt es sich um eine cloud-basierte Web-Anwendung, bei der es bisher „nur“ eine kostenlose Variante gibt. Diese Variante wird nach eine Registrierung durch einige zusätzliche Features erweitert. Zum Beispiel kann man Links mit richtigen Zielen verknüpfen oder seine Mockups vor dem Zugriff anderer Nutzer schützen.

Die 14 vorgefertigten Schablonen stehen dir aber auch ohne eine Regristierung zur Verfügung. Genauso wie die Möglichkeit, deine Arbeit zu speichern und nach einer Pause fortzusetzen. Hierzu wird dir nach dem Speichern, ein Link zu deinem Mockup angezeigt, mit dem du es immer wieder aufrufen kannst.

Eine Möglichkeit mehrere Seiten in einem Projekt gleichzeitig anzulegen, habe ich nicht gefunden. Das ist schade, kommt aber vielleich in späteren Versionen. Das Mockup-Tool frame box befindet sich aktuell nämlich noch in der Beta-Phase und wird kräftig weiterentwickelt.

Stand heute, ist es ein sehr minimalistisches Tool, mit wenigen Vorlagen und Einstellmöglichkeiten. Trotzdem kannst du damit sicher anständige Ergebnisse erzielen.

Fazit zu den kostenlosen Mockup-Tools

Bisher habe ich zur Erstellung meiner Mockups immer Mockingbird verwendet. Bei

Fazit zu den kostenlosen Mockup-Tools

Pencil sehr positiv aufgefallen. Ich muss es noch intensiver Testen, aber vielleicht wird es ja mein neues Tool der Wahl.

Sehr gut gefällt mir auch noch die kostenlose Web-Anwendung Lumzy. Auch wenn man hier ständig von Werbeeinblendung unterbrochen wird, bietet es einen sehr guten Leistungsumfang. Auch in der kostenlosen Variante.

Welches Mockup-Tool mir hingegen gar nicht gefallen hat, ist Balsamiq. Dies liegt aber hauptsächlich daran, dass es keine vernünftige kostenlose Version gibt, die man anständig nutzen kann.

Welches ist dein Favorit unter den hier vorgestellten Mockup-Tools?

Kommentare

  1. Hallo. Toller Artikel, der beste über kostenlose Mockup-Tools! Vielleicht kannst Du auch noch MockFlow checken. Auch eine Feature-Vergleichstabelle wäre supi. *****

  2. Hi, gute Übersicht. Ich benutze lokal Balsamiq. Um die Mockups miteinander zu verlinken nutze ich Moqhub.com. Da lassen sich innerhalb des Mockups auch Kommentare setzen und die Mockups bzw. Prototypen kann man per Mail, Slack, FB und co zwecks Feedback teilen.

Trackbacks

Hinterlasse einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.