Die besten Mock-up- und Wireframe-Tools

In der frühen Kon­zep­ti­ons­pha­se von Web­pro­jek­ten sind Mock-ups und Wire­frames wertvolle Methoden, um erste Kon­zept­ideen zu Papier zu bringen. Denn schon vor der ei­gent­li­chen tech­ni­schen Umsetzung helfen die beiden Pro­to­ty­p­ing-Methoden, Ideen und Gedanken visuell dar­zu­stel­len. Dabei entstehen erste Skizzen und Entwürfe, die Vorformen des künftigen Projekts dar­stel­len und den Ent­wick­lungs­pro­zess vor­an­brin­gen.

Mock-ups und Wire­frames dienen nicht nur als Hilfe bei der Kon­zep­ti­on, sie sind auch ein gutes Mittel, um seinen Kunden die eigenen Ideen und Pläne besser zu ver­an­schau­li­chen. Meist entstehen erste Entwürfe mit Stift und Papier oder einem ent­spre­chen­den Editor am PC. Auch Gra­fik­pro­gram­me wie Photoshop oder Fireworks setzt man häufig ein, wobei gerade hierbei die manuelle Umsetzung meist nicht die ef­fi­zi­en­tes­te ist. Hier helfen spezielle Wireframe- oder Mock-up-Tools.

Über die Grund­la­gen von Mock-ups und Wire­frames können Sie sich in unserem Ratgeber in­for­mie­ren. Worin un­ter­schei­den sich nun die beiden Pro­to­ty­p­ing-Methoden?

Bei Wire­frames liegt der Schwer­punkt meist auf dem so­ge­nann­ten User Ex­pe­ri­ence Design – die optimale Nut­zer­er­fah­rung steht also im Mit­tel­punkt. Mithilfe eines Wire­frames entsteht eine skiz­zen­ähn­li­che Be­schrei­bung des Projekts mit Dar­stel­lung von Funk­tio­nen und Layout. Es geht hier vor allem um eine erste Über­prü­fung des Konzepts und dessen Um­setz­bar­keit.

Im Prinzip stellt ein Mock-up den nächsten Schritt dar, denn es baut auf der Struktur des Wire­frames auf. Al­ler­dings kommt der De­si­gnaspekt ins Spiel: Farbe, Ty­po­gra­fie, Bilder und Gra­fik­ele­men­te zeigen das vor­läu­fi­ge Design der geplanten Web­an­wen­dung. Ein Mock-up ist de­tail­lier­ter als ein Wireframe, aber noch längst keine finale Version. Dennoch ist es gerade bei Kun­den­ge­sprä­chen ein prak­ti­scher Weg, das künftige „Look and Feel“ der Website wie­der­zu­ge­ben.

Die im Anschluss vor­ge­stell­ten Pro­to­ty­p­ing-Tools eignen sich je nach Schwer­punkt für Wire­frames, Mock-ups oder beide.

Balsamiq ist eines der be­kann­tes­ten Pro­to­ty­p­ing-Tools auf dem Markt mit Fokus auf Wire­f­raming. Nutzer pro­fi­tie­ren von einer großen Auswahl an Ba­sis­ele­men­ten. Zusammen mit Na­vi­ga­ti­ons­ele­men­ten, Bild- und Vi­deobe­rei­chen, For­mu­la­ren und vielen weiteren bewegt man diese per Drag-and-Drop auf der Zei­chen­flä­che und erstellt sein Wireframe. Auch eine For­ma­tie­rung (Farbe, Größe) der Module ist möglich, außerdem kann jeder Nutzer seine eigenen Module erstellen. Schritt für Schritt entsteht so ein pro­fes­sio­nel­les Wireframe. Mithilfe der prak­ti­schen Kom­men­tar­funk­ti­on ergänzt man die einzelnen Elemente um Er­klä­run­gen. Balsamiq gilt allgemein als einfach zu bedienen und punktet mit einer über­sicht­li­chen Ober­flä­che und ver­ständ­li­cher Ka­te­go­ri­sie­rung der einzelnen Elemente. Es gibt jedoch kaum eine Mög­lich­keit, In­ter­ak­tio­nen im Prototyp ein­zu­bau­en. Immerhin kann man mehrere Tabs mit­ein­an­der verlinken. Das schlichte Design von Balsamiq wirkt wie von Hand ge­zeich­net. Es entsteht eine gute Übersicht ohne über­flüs­si­ge Details und damit eine bestens geeignete Lösung für frühe Ent­wick­lungs­pha­sen. Die Ent­wick­ler­fir­ma Balsamiq Studios bietet zwei Versionen des Wire­f­raming-Tools: eine Desktop-Anwendung namens „Mockups 3“ zum Download für Windows, Mac und Linux und eine cloud­ba­sier­te Web­ap­pli­ka­ti­on „my­Bal­sa­miq“. Nach Re­gis­trie­rung steht Nutzern zunächst für 30 Tage ein kos­ten­frei­er Test-Account zur Verfügung, danach werden Li­zenz­ge­büh­ren fällig, die je nach Anzahl der Nutzer und Projekte steigen. Wer seine Wire­frames nur online in der Web-App erstellen will, kann in der Ba­sis­ver­si­on 3 aktive Projekte betreiben. Eine kos­ten­lo­se De­mo­ver­si­on finden Sie hier.

Das Tool Axure eignet sich sowohl zum Erstellen von simplen Wire­frames als auch von de­tail­rei­chen Pro­to­ty­pen. Mit einem sehr großen Funk­ti­ons­um­fang zählt Axure eher zu den Profi-Website-Mock-up-Tools. Als Ein­stei­ger sollte man einige Ein­ar­bei­tungs­zeit einplanen, bis man alle Funk­tio­nen durch­schaut und sich einen aus­rei­chen­den Überblick ver­schafft hat. Das Mock-up-Tool bietet eine große Auswahl an vor­ge­fer­tig­ten Elementen, die alle in­di­vi­du­ell kon­fi­gu­rier­bar sind. Es gibt außerdem die Mög­lich­keit, einfache Aktionen ein­zu­bau­en, z. B. Tooltipps, eine Flyout-Na­vi­ga­ti­on oder Light­bo­xen. Damit ist Axure eine gute Al­ter­na­ti­ve zum so­ge­nann­ten Click-Dummy, den man vor allem für frühe Usability-Tests einsetzt. Axure verfügt nicht nur über eine Kom­men­tar­funk­ti­on, alle Er­klä­run­gen und Fußnoten kann man später einfach als CSV oder PDF ex­por­tie­ren, womit man die ideale Basis für Kon­zept­pa­pie­re bekommt. Außerdem ist über das Tool Team­ar­beit möglich: Mehrere Nutzer können so zeit­gleich an einem Mock-up arbeiten, ohne Än­de­run­gen Anderer zu über­schrei­ben. Auch bei Axure steht eine 30-tägige kos­ten­freie Test­ver­si­on zur Verfügung. Kos­ten­pflich­ti­ge Angebote gibt es in der Pro-, Team- und En­ter­pri­se-Version. Für Studenten ist die Nutzung von Axure kostenlos.

Das Mock-up-Tool Pencil ist ein Open-Source-Projekt und die einzig komplett kos­ten­lo­se Desk­top­ver­si­on in unserer Liste. Obwohl das Programm li­zenz­frei genutzt werden kann, sind alle wichtigen Funk­tio­nen verfügbar, die man zum Erstellen eines pro­fes­sio­nel­len Mock-ups benötigt. Auch bei Pencil gibt es eine riesige Auswahl an Vorlagen. Insgesamt findet man über 300 vor­ge­fer­tig­te Formen – mehr, als die anderen vor­ge­stell­ten Pro­to­ty­p­ing-Tools bieten. Auf der Website der Ent­wick­ler stehen bei Bedarf noch weitere zur Verfügung. Neben vieler Formen, Diagramm-Elemente und vek­tor­ba­sier­ten Clipart-Icons gibt es die Mög­lich­keit, Diagramme und Ab­lauf­sche­ma­ta direkt im Pro­gramm­fens­ter zu erstellen. Trotz des großen Funk­ti­ons­um­fangs finden Nutzer sich in der über­sicht­li­chen Be­dien­ober­flä­che schnell zurecht. Der intuitive Aufbau und ein prak­ti­scher Drag-and-Drop-Editor erlauben einen schnellen Einstieg. Indem man mehrere Seiten anlegt und mit­ein­an­der verlinkt, bildet man Funk­tio­nen der künftigen Seite sowie simple Nut­zungs­ab­läu­fe nach. Als Open-Source-Tool ist Pencil zwar kos­ten­frei, eine zu­ver­läs­sig kon­ti­nu­ier­li­che Wei­ter­ent­wick­lung ist jedoch nicht ga­ran­tiert. Auf der Website zeigt sich Sta­gna­ti­on in den letzten Jahren, seit 2013 gibt es keine Updates bzw. neue Versionen mehr. Trotz dieses Nachteils und der weniger guten Do­ku­men­ta­ti­on bleibt Pencil eine gute Al­ter­na­ti­ve zu kos­ten­pflich­ti­gen Mock-up- und Wire­f­raming-Tools. Die kos­ten­lo­se Desktop-Anwendung ist für Windows, Mac und Linux verfügbar, zu­sätz­lich gibt es eine Browser-Extension für Mozilla Firefox.

Das Pro­to­ty­p­ing-Tool Mo­cking­bird ist ebenfalls eine reine Web­ap­pli­ka­ti­on und kommt ganz ohne lokale In­stal­la­ti­on aus. Es ist ein ideales Programm zum Einstieg, doch auch für Fort­ge­schrit­te­ne zum Erstellen von Mock-ups geeignet. Zum Start wählt der Nutzer aus vor­ge­fer­tig­ten Elementen die passenden aus und schiebt sie im Editor ganz einfach per Drag-and-Drop an die richtige Stelle. Insgesamt hat man die Wahl aus 90 ver­schie­de­nen Modulen und Bau­stei­nen. Mo­cking­bird überzeugt ebenfalls durch einen sinn­vol­len Aufbau und eine gute, nach­voll­zieh­ba­re Ka­te­go­ri­sie­rung. Zu­sätz­lich gibt es eine prak­ti­sche Such­funk­ti­on. Der Nutzer kann mehrere Seiten erstellen, deren Ver­bin­dung bzw. Ver­lin­kung ist al­ler­dings nicht möglich. Ein be­son­de­res Feature des Mock-up-Tools: Mo­cking­bird erlaubt den Einsatz eines so­ge­nann­ten Grid-Systems, das man über alle er­stell­ten Seiten legt. Grid-Systeme werden bei fast allen modernen Websites ein­ge­setzt. Be­rück­sich­tigt man das Raster schon in einer frühen Phase, bringt das bei der späteren Aus­ar­bei­tung des Layouts er­heb­li­che Zeit­er­spar­nis. Mo­cking­bird steht in einer kos­ten­lo­sen Version zur Verfügung. Doch ähnlich wie bei Moqups sind viele wichtige Features, z. B. Speichern und Export, erst in der kos­ten­pflich­ti­gen Version zu­gäng­lich. Das Ba­sis­pa­ket be­inhal­tet 3 Projekte.

Wireframe.cc ist ein ver­gleichs­wei­se mi­ni­ma­lis­ti­sches Tool zum Erstellen von soliden, klaren Wire­frames. Den Nutzer erwartet im Vergleich zu den anderen Wire­f­raming-Tools in unserer Liste ein ab­ge­speck­ter Funk­ti­ons­um­fang. Wireframe.cc ist für einen schnellen und un­kom­pli­zier­ten Einstieg dafür umso besser geeignet. In relativ kurzer Zeit sind klare, fo­kus­sier­te Layouts erstellt, und das ohne eine große Auswahl an vor­ge­fer­tig­ten Elementen. Bei Wireframe.cc zieht der Nutzer ganz einfach mit der Maus ein Fenster in der ge­wünsch­ten Größe und Form auf. Im er­schei­nen­den Drop-down-Menü wählt er den passenden Element-Typ, z. B. Slider, Textfeld oder Bild­ele­ment. Dank der Mög­lich­keit, zwischen ver­schie­de­nen Sei­ten­grö­ßen zu wählen, erstellt man entweder Frames für Desktop- oder mobile Endgeräte. Das Wireframe-Tool nimmt User während der Er­stel­lung mehr oder weniger an die Hand. Auch bei der Anpassung der Elemente wählt man aus einer Liste passender Optionen, die das Tool vor­schlägt. Durch die begrenzte Palette an Funk­tio­nen und Ge­stal­tungs­mög­lich­kei­ten rückt bei Wireframe.cc die Funk­tio­na­li­tät einer Seite in den Vor­der­grund. Der Fokus liegt auf der ei­gent­li­chen Idee, von der nichts Unnötiges ablenken soll. Das Teilen und Kom­men­tie­ren im Team geht zum einfach von­stat­ten. Die er­stell­ten Wire­frames haben eine URL und können ge­spei­chert und ver­schickt werden.

Das Pro­to­ty­p­ing-Tool steht in der Ba­sis­ver­si­on kostenlos zur Verfügung. In der Pre­mi­um­ver­si­on gibt es noch einige Zu­satz­fea­tures zu In­ter­ak­ti­on, Protokoll, Ar­beits­ver­läu­fen und dem ob­li­ga­to­ri­schen Export, der wie bei den anderen auf­ge­lis­te­ten Tools erst nach Bezahlung möglich ist. Die Testphase beträgt 7 Tage, die Pa­ket­prei­se steigen mit Nut­zer­an­zahl und be­nö­tig­ten Ka­pa­zi­tä­ten.

Um nicht unnötig viel Zeit mit der Ent­wick­lung und manuellen Umsetzung eines Entwurfs zu ver­brin­gen, lohnt sich der Einsatz von Wireframe- und Mock-up-Tools. Sie sorgen in allen Ent­wick­lungs­sta­di­en für ef­fi­zi­en­te­res Arbeiten. Nicht nur ist der erste Entwurf schneller aus­ge­ar­bei­tet, man hat auch später mehr Mög­lich­kei­ten, (Kunden-)Feedback direkt um­zu­set­zen. Nicht zuletzt sorgt ein pro­fes­sio­nel­les Pro­to­ty­p­ing-Tool für eine bessere Dar­stel­lung kon­zep­tio­nel­ler Aspekte, Inhalte und Funk­tio­nen, bevor es an die ge­stal­te­ri­schen Elemente geht. Gerade wer in einem Team arbeitet, pro­fi­tiert von den zahl­rei­chen Features der vor­ge­stell­ten Tools.