Erfolgsrezepte für Startups und Gründer

Mock­up-Tools & Wire­frames: unver­zicht­ba­re Hel­fer für eine per­fek­te Präsentation

Design­ent­wick­lung etwa für eure Web­site kos­ten viel Geld und Zeit. Um schnel­ler in der Zusam­men­ar­beit mit Desi­gnern und Pro­gram­mie­rern vor­an zu kom­men, hel­fen Mock­up-Tools, mit denen ihr über­sicht­li­che Wire­frames erstel­len könnt. Mit den klei­nen Hel­fer­lein könnt ihr aber auch groß­ar­ti­ge Prä­sen­ta­tio­nen erstel­len. Wir haben euch die span­nends­ten Mock­up-Tools her­aus­ge­sucht – unse­re Lis­te 2017.

Was ist ein Mockup-Tool?

Design­spe­zia­lis­ten nut­zen die Tools seit lan­ger Zeit. Sie erlau­ben eine schnel­le wie unkom­pli­zier­te Zusam­men­stel­lung von Web­de­signs für alle rele­van­ten Bereiche:

  • Web­sei­te
  • Pres­se­kit
  • Apps

Mit nur weni­gen Klicks ist das Lay­out „skiz­ziert“ und die ein­zel­nen Berei­che las­sen sich mit den Wunsch­in­hal­ten fül­len. Das Resul­tat ist ein „Wire­frame“ (ein Gerüst), dass die Grund­vor­stel­lun­gen des Desi­gners per­fekt widerspiegelt.

Nun haben aber auch Design-Kun­den die Vor­tei­le der Tools für sich ent­deckt. Denn woll­te man in der Ver­gan­gen­heit digi­ta­le Pro­duk­te gestal­ten, dann war der Kom­mu­ni­ka­ti­ons­weg oft auf­wen­dig. In Bespre­chun­gen wer­den Mood-Boards gezeigt und ein lan­ger E-Mail-Ver­kehr dis­ku­tiert die kor­rek­te Benen­nung der gewünsch­ten Far­be. Die Anord­nung von Menü­leis­ten, die gewünsch­te Schrift­art oder die Grö­ße des Logos – jede Design­ent­schei­dung wird in meh­re­ren Kor­rek­tur­schlei­fen wie­der und wie­der angepasst.

Mit einem Mock­up-Tool kann ein Groß­teil die­ses Dra­mas von Anfang an besei­tigt wer­den. Denn wenn sich die Kun­den eine Home­page gestal­ten las­sen, freu­en sich kun­den­ori­en­tier­te Weg­de­si­gner dar­über, mit einer kon­kre­ten Vor­la­ge (dem Wire­frame oder Mock­up) arbei­ten zu kön­nen. Anhand einer durch den Kun­den zusam­men­ge­stell­ten Design-Visi­on lässt sich im Hand­um­dre­hen erken­nen, wohin die Rei­se gehen soll. Desi­gner kön­nen die Mög­lich­kei­ten und Gren­zen erör­tern und ein gemein­sa­mer Nen­ner ist schnell gefun­den. Die­ses Vor­ge­hen schont nicht nur die Ner­ven. Es spart auch jede Men­ge Zeit und damit jede Men­ge Geld.

Grün­der­rat:

Auch im Rah­men einer Fir­men­vor­stel­lung, zum Bei­spiel für die Inves­to­ren­su­che, sind die Mock­up-Tools eine güns­ti­ge Alter­na­ti­ve. Die eige­ne Idee lässt sich kos­ten­güns­tig visua­li­sie­ren und mög­li­che Inves­to­ren haben ein hoch­wer­ti­ges Pro­dukt vorliegen.

Wie wer­den die Mock­up-Tools benutzt?

Abhän­gig vom Anbie­ter sind die Tools ganz unter­schied­lich auf­ge­baut. Aller­dings han­delt es sich meis­tens um Drag-&-Drop-Produkte. Vor­ge­fer­tig­te Bau­stei­ne (But­tons, For­mu­lar­fel­der, etc) las­sen sich zusam­men­fü­gen und indi­vi­du­ell mit eige­nen Gra­fi­ken anpas­sen. In weni­gen Schrit­ten ist das Scribb­le, bzw. die Design-Vor­la­ge für die eige­ne Home­page oder den App-Home­screen geschaffen.

3 Top kos­ten­lo­se Mock­up-Tools für coo­le Wireframes

Die prak­ti­schen Tools ste­hen sowohl kos­ten­los als auch kos­ten­pflich­tig zur Ver­fü­gung. Eini­ge der kos­ten­lo­sen Tools bie­ten dabei eine exzel­len­te Nut­zungs­viel­falt, stel­len die fer­ti­gen Mock­ups aber nur in einer gerin­gen Auf­lö­sung zur Ver­fü­gung. Möch­te man einen hoch­wer­ti­gen Druck erstel­len, ist es dann doch not­wen­dig, in die Tasche zu grei­fen. Daher ist hier bei der Wahl Vor­sicht gebo­ten. Im Fol­gen­den drei kos­ten­lo­se Mock­up-Tools, die auf der gan­zen Linie über­zeu­gen können.

Bal­sa­miq Mock­ups – Der bekann­te Klas­si­ker fürs „Hap­py Wireframing“

Wer in Sachen Mock­up-Tools unter­wegs ist, der kommt an den Bal­sa­miq Mock­ups nicht vor­bei. Das Tool steht sowohl als brow­ser­ba­sier­te Ver­si­on bereit als auch in der Form einer Desktop-Anwendung.

Die Voll­ver­sio­nen las­sen sich bei­de für 30 Tage kos­ten­los tes­ten. Hin­zu kommt eine Demo­ver­si­on, die kom­plett kos­ten­frei zur Ver­fü­gung steht. Ein Vor­teil die­ser Ver­si­on ist es, dass sie ohne eine Regis­trie­rung funk­tio­niert. Die Ver­si­on ist auf der Web­sei­te ver­linkt und kann per Maus­klick gestar­tet wer­den. Selbst in der redu­zier­ten Aus­füh­rung haben Bal­sa­miq Mock­ups dabei, die eine Viel­zahl von fer­ti­gen Bau­stei­nen zu bie­ten. In meh­re­ren Kate­go­ri­en unter­teilt, las­sen sich die­se über das Drop-&-Drag-Prinzip plat­zie­ren. Anschlie­ßend ist eine indi­vi­du­el­le Kon­fi­gu­ra­ti­on möglich.

Der Nach­teil der Ver­si­on ist die Kurz­le­big­keit von den Demo-Tem­pla­tes. Denn alle paar Minu­ten lädt sich die Sei­te neu und die aktu­el­le Vor­la­ge ver­schwin­det ins digi­ta­le Nir­va­na. Wer schnell ist, der kann per Screen­shot sei­ne eige­nen Ide­en fix fest­hal­ten. Ansons­ten ist die kos­ten­lo­se Test­ver­si­on für 30 Tage eine tol­le Hil­fe für ein ein­ma­li­ges Projekt.

Demo/Testversion: kos­ten­los aber mit ein­ge­schränk­ter Funk­tio­na­li­tät, Test­ver­si­on 30 Tage
Kos­ten: Sin­gle User 89 US Dollar
Web: bal​sa​miq​.com

Mocking­bird – Eine enor­me Auswahl

Gleich zu Beginn sei gesagt, dass die web­ba­sier­te Ver­si­on von Mocking­bird es nicht zulässt, die ange­fer­tig­ten Mock­ups auf dem Rech­ner zu spei­chern oder zu expor­tie­ren. Dies limi­tiert die Nut­zung für Prä­sen­ta­tio­nen – macht das Tool aber nicht weni­ger hilf­reich für die Vor­ar­beit. Denn auch hier ist ein Screen­shot die ret­ten­de Lösung – aus­rei­chend, um dem Desi­gner eine Idee von der geplan­ten Web­sei­te zu vermitteln.

Das Tool bie­tet in der web­ba­sier­ten Ver­si­on mehr als 90 indi­vi­du­el­le Bau­tei­le. Die­se sind in prak­ti­sche Kate­go­ri­en unter­teilt und las­sen sich über Schlag­wor­te fil­tern. Es ist mög­lich, gleich meh­re­re Sei­ten als Mock­up zu erstel­len. Sehr gut also, um ein kom­plet­tes Pro­jekt zu pla­nen. Es ist nicht mög­lich, die ein­zel­nen Sei­ten unter­ein­an­der zu ver­lin­ken. Für die kos­ten­lo­se Nut­zung ist dies aller­dings eher wenig interessant.

Ein ech­ter Vor­teil ist die Nut­zung eines Grid-Sys­tems. Dies wird über die Bear­bei­tungs­flä­che gelegt und es ist mög­lich, die indi­vi­du­el­len Bestand­tei­le danach aus­zu­rich­ten. Arbei­tet der Web­de­si­gner eben­falls mit einem Grid-Sys­tem, und vie­le von ihnen machen genau das, lässt sich die Vor­la­ge umso leich­ter in die ech­te Ver­si­on umsetzen.

Demo/Testversion: kos­ten­los aber mit ein­ge­schränk­ter Funktionalität
Kos­ten: 3 Pro­jek­te pro Monat für 12 US Dol­lar monat­lich bis unli­mi­tiert für 85 US Dol­lar monatlich
Web: gomocking​bird​.com

Lum­zy – Mock­up-Tool mit gro­ßem Funktionsumfang

Lum­zy ist eben­falls eine web­ba­sier­te Anwen­dung. Das Tool kann auf den ers­ten Blick mit einem gro­ßen Funk­ti­ons­um­fang über­zeu­gen. Dabei sind hier nicht nur unzäh­li­ge, vor­ge­fer­tig­te Bau­stei­ne zu fin­den, die in prak­ti­schen Kate­go­ri­en vor­sor­tiert sind. Auch die Voll­text­su­che ist sehr hilf­reich. Ein­zel­ne Ele­men­te las­sen sich schnell aus­fin­dig machen, auch in kom­ple­xen Mockups.

Das Tool kann außer­dem mit einem kos­ten­lo­sen Daten­ex­port punk­ten. Die fer­ti­gen Mock­ups kön­nen sowohl als PDF als auch im PNG-For­mat abge­spei­chert wer­den. Inner­halb des Tools las­sen sich die ein­zel­nen Sei­ten unter­ein­an­der ver­lin­ken – beson­ders hilf­reich für eine pro­fes­sio­nel­le Vor­stel­lung der geplan­ten Live-Ver­si­on. Per Knopf­druck wird das Mock­up in eine Druck­ver­si­on umge­wan­delt, die sich auf eine Viel­zahl von For­ma­ten anpas­sen lässt.

Ein Nach­teil der Lum­zy-Soft­ware ist die feh­len­de Spei­cher­mög­lich­keit. Es ist also not­wen­dig, die aktu­el­le Ver­si­on in einer Sit­zung fer­tig­zu­stel­len – oder zumin­dest den Brow­ser nicht zu schlie­ßen. Eine Beson­der­heit des Tools ist es, dass es kei­ne rei­ne Kauf­ver­si­on gibt. Aller­dings kann man einen soge­nann­ten Token erwer­ben, der dann dafür genutzt wer­den kann, die Sei­te frei von Wer­be­po­pups zu hal­ten. Mit einem Token bleibt die Sei­te 12 Stun­den frei von ner­vi­gen Werbeeinblendungen.

Demo/Testversion: keine
Kos­ten: 26 US Cent pro Token
Web: lum​zy​.com

Wei­te­re Mock­up-Tools in der Übersicht

Moqups

Sys­tem: rei­nes Web-Tool
Demo/Testversion: mit ein­ge­schränk­ter Funktionalität
Kos­ten: ab 13 $ pro 10 Projekte
Web: https://​app​.moqups​.com

wire​frame​.cc

Sys­tem: sehr mini­ma­lis­ti­sches Web-Tool
Demo/Testversion: nur kos­ten­lo­se Vari­an­te vorhanden
Kos­ten: keine
Web:  https://​wire​frame​.cc/

Frame Box

Sys­tem: sehr mini­ma­lis­ti­sches Web-Tool
Demo/Testversion: nur kos­ten­lo­se Vari­an­te vorhanden
Kos­ten: keine
Web: http://​frame​box​.org/

Pla­ceit

Sys­tem: umfang­rei­ches Web-Tool mit sehr vie­len Möglichkeiten
Demo/Testversion: kos­ten­los, aller­dings mit gerin­ger Bildauflösung
Kos­ten: 29 bis 199 $ pro Monat
Web: https://​pla​ceit​.net/

Place​.to

Sys­tem: umfang­rei­ches Web-Tool mit sehr vie­len Möglichkeiten
Demo/Testversion: kos­ten­los, aller­dings mit gerin­ger Bildauflösung
Kos­ten: ab 9 $ für 10 Credits
Web: https://​place​.to

Axu­re

Sys­tem: auf Win­dows & MAC zur Instal­la­ti­on, sehr umfang­rei­ches Tool
Demo/Testversion: 30 Tage Testversion
Kos­ten: ab 289 $
Web: https://​www​.axu​re​.com/

Bit­te bewer­te die­sen Artikel:

Kommentare
X