Drücke die Tasten ◄ ► für weitere Artikel  

Fünf Mockup-Tools kurz vorgestellt: Wireframes erstellen leicht gemacht

Aus dem
t3n Magazin Nr. 18

12/2009 - 02/2010

Wireframes helfen dabei, Websites schon während der Konzeptionsphase zu visualisieren. Wer dabei nicht auf Papier und Stift zurückgreifen mag, kann sich einer ganzen Reihe nützlicher Tools bedienen, die einen bei der Visualisierung zudem mit hilfreichen Funktionen unterstützen.

Balsamiq (Mac/Windows)

dms 7f297a88adb3104bdc430c3c093a9466
Balsamiq setzt auf Elemente, die wie handgezeichnet aussehen.

Balsamiq Mockup [1] ist eine in Adobe Flex geschriebene Anwendung zur Erstellung von Skizzen und Wireframes. Die Erstellung von Wireframes mit Balsamiq Mockup ist sehr intuitiv und geht leicht von der Hand. Der Funktionsumfang ist überschaubar und gut auf die Erstellung von Skizzen abgestimmt. Balsamiq eignet sich sehr gut, um Wireframes schnell und einfach in eine digitale Version zu bringen. Die mitgelieferten Schablonen sehen wie von Hand gezeichnete Skizzen aus. Das ist hilfreich, da zu realitätsnahe Wireframes oft als Designvorschlag missinterpretiert werden.

Auf der Balsamiq-Website kann man das Tool kostenlos testen und einzelne Wireframes als PNG-Datei (mit Copyright-Hinweis) herunterladen. Wer Balsamiq Mockup regelmäßig einsetzt, sollte zur kostenpflichtigen Desktopversion greifen. Eine gehostete Version ist in Planung. Außerdem lässt sich Balsamiq Mockup in externe Wiki- und Projektmanagement-Tools wie Confluence, JIRA oder XWiki integrieren, da es auf XML-Daten basiert.

Omnigraffle Pro 5 (Mac)

dms 5b1fbfd0daf5718c2a996b31bc2deb2d
Für Omnigraffle stehen im Netz zahlreiche Schablonen zum kostenlosen Download bereit, mit denen sich die Software erweitern lässt.

Omnigraffle Pro 5 [2] eignet sich besonders gut, um schnell Wireframes, Prozessdiagramme oder Sitemaps zu erstellen. Hilfreich dabei ist, ähnlich wie in Photoshop, die Möglichkeit, Ebenen zu verwenden. So lassen sich gemeinsame Ebenen und Master-Ebenen anlegen, um den Wireframes eine gewisse Konsistenz zu geben. Ein weiterer Vorteil von Omnigraffle ist das einfache Einbinden von Schablonen. Auf diese Weise lassen sich die Wireframes problemlos an die eigene Corporate-Identity anpassen. Im Internet findet man umfangreiche Sammlungen mit den verschiedensten Schablonen, zum Beispiel für Facebook- oder iPhone-Apps, Ajax-Elemente, Werbebanner-Formate oder Elemente von Social-Media-Websites (eine gute Quelle ist http://graffletopia.com/).

Um interaktive Prototypen zu erstellen, lassen sich Elemente mit Interaktionen belegen. Diese werden beim PDF-Export übernommen. Die so erstellten Klickpfade geben einen Eindruck der späteren Funktion, sind allerdings kein Ersatz für einen HTML-Prototypen.

Axure (Windows)

dms ec31ed5b01eea8390bccfe13bfa65e0c
Axure kann einzelne Bereiche einer Website (gelb markiert) mit HTML- und JavaScript-Aktionen belegen, um klickfähige Prototypen zu erstellen.

Im Gegensatz zu Omnigraffle verfügt Axure [3] über umfangreiche Möglichkeiten, um Prototypen zu erstellen. Die in den Wireframes eingesetzten Elemente lassen sich mit einfachen HTML- und JavaScript-Aktionen belegen. Nach dem Export hat man einen funktionstüchtigen Prototypen, der sich hervorragend dazu eignet, einen Eindruck der späteren Webseite zu geben. Auch für Nutzertests während der Konzeptphase sind solche Prototypen eine gute Alternative zu komplett programmierten Klickdummies.

Darüber hinaus verfügt Axure über eine Funktion, Fußnoten und Erklärungen einzufügen, mit deren Hilfe man direkt aus Axure heraus Konzeptdokumente im Word-Format exportieren kann. Auch in Axure ist es möglich, benutzerdefinierte Schablonen und Mastervorlagen einzubinden. Ein Hinweis für alle Mac-User: Axure für den Mac befindet sich zurzeit in der Entwicklung [4].

Autor:
110 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
30 Antworten
  1. von Webdesign: Fünf Mockup-Tools kurz vorge… am 15.04.2010 (08:46Uhr)

    [...] hilfreichen Funktionen unterstützen. Unser Artikel aus t3n Magazin Nr. 18 stellt fünf davon vor. Der Beitrag ist jetzt kostenlos im Heftarchiv verfügbar. Zudem kann man t3n Nr. 18 für 9,80 Euro versandkostenfrei in unserem Shop bestellen. [...]

  2. von Steffen am 15.04.2010 (08:54Uhr)

    Axure gibt's in einer Beta auch für den Mac >> http://www.axureformac.com/
    Ist aktuell kostenlos, und wird auch weiterentwickelt.

  3. von Christian Hartmann am 15.04.2010 (09:03Uhr)

    Axure gibt es mittlerweile auch für MAC OS X. Besonders interessant ist bei Axure das "Good Student Program" - als Student erhält man kostenlos eine (Pro)Lizenz.

    In eurer Vorstellungsrunde fehlt definitiv Hotgloo (http://www.hotgloo.com) - aus meiner Sicht eines der aktuell besten Online-Wireframe-Tools auf dem Markt. Hotgloo stammt übrigens aus Hamburg und wurde von Wolf, Hannes und Michi umgesetzt. Mehr Infos gibt es hier: http://www.hotgloo.com/about

  4. von Björn am 15.04.2010 (09:04Uhr)

    Axure für Mac ist seit Anfang April bereits final lanciert und nicht mehr länger nur als Beta verfügbar. Windows-Lizenzen können sogar übernommen werden.

  5. von babs am 15.04.2010 (09:05Uhr)

    Iplotz fehlt hier - ebenso ein geniale Tool!

  6. von Wäschekorb am 15.04.2010 (13:33Uhr)

    das ist mir ganz neu - obercool - vielen dank

  7. von Ulrich am 16.04.2010 (17:33Uhr)

    Ich nutze, seit dem ich im Heft den Artikel gelesen habe, Balsamiq und bin sehr zufrieden. Selten so eine einfach und intuitiv bedienbare Software erlebt.

  8. von Linkdump for 16. April 2010 Links synaps… am 17.04.2010 (09:05Uhr)

    [...] Fünf Mockup-Tools kurz vorgestellt: Wireframes erstellen leicht gemacht » t3n Magazin – (Tags: Wireframe Webdesign dev ) [...]

  9. von gpermant am 28.10.2010 (18:30Uhr)

    In der Zusammenfassung wird "Azure" genannt, statt "Axure".
    Azure ist was anderes von Microsoft.

  10. von Adobe Photoshop CS5 für Webdesigner | D… am 03.11.2010 (11:47Uhr)

    [...] Empfehlung aussprechen sollte. Ich habe noch nie eine Webanwendung als Bleistiftskizze angelegt. Mockup-Tools sind komfortable Alternativen hierzu. Ich denke, das kann jeder halten wie er [...]

  11. von Adobe Photoshop CS5 für Webdesigner | D… am 03.11.2010 (11:47Uhr)

    [...] Empfehlung aussprechen sollte. Ich habe noch nie eine Webanwendung als Bleistiftskizze angelegt. Mockup-Tools sind komfortable Alternativen hierzu. Ich denke, das kann jeder halten wie er [...]

  12. von Balsamiq Mockups – Scribbles auf e… am 01.07.2011 (17:49Uhr)

    [...] nicht einseitig eine Lobeshymne auf balsamiq zu singen gibt es hier ein ganz schönen Vergleich von fünf Mockup Tools auf [...]

  13. von Sascha El-Khatib am 05.09.2011 (22:41Uhr)

    Wir nutzen Balsamiq für die MOCKUPS (exzellent!) und Flash Catalyst CS5 für WIREFRAMES (ebenfalls sehr empfehlenswert!).

    Mit beiden Tools haben wir unseren Workflow deutlich Zeit- und vor allem Qualitätsoptimiert.

    Mit Balsamiq lassen sich sehr schnell sehr ansprechende, abstrakte Ideen, Ablaufpläne skizzieren. Catalyst verarbeitet dann unsere Photoshop/Illustrator-Layouts inkl. Layer ein/aus, wodurch sich in minutenschnelle funktionelle Wireframes erstellen lassen - mit oder ohne Animation.

  14. von jswebschmiede am 02.11.2011 (14:28Uhr)

    Hallo,
    gibt es da auch Freeware Tools oder open source Varianten? Geld will ich für so was nicht bezahlen.

  15. von jenifa23 am 16.11.2011 (07:15Uhr)

    http://www.CleverGeldMachen.de - Zuhause Geld verdienen! Monatlich bis zu 3.000€ sind ohne Probleme möglich! Ansehen LOHNT sich! Liebe Grüße

  16. von Idea-Management am 07.12.2011 (18:43Uhr)

    Idea-Management: Liebe Dani und Jenifa23 schöne NoFollows habt ihr da gesetzt ;-)

    Axure hab ich leider keinen Single n Free Account gefunden.
    Bei HotGloo gibt's das. Werd ich ausprobieren.
    Balsamiq sieht sehr nett aus.

    Gruß Eric

  17. von Stefan Lange am 10.12.2011 (11:42Uhr)

    Werft mal einen Blick auf ProtoShare - das ist sicherlich auch einen Test wert!

  18. von kdueber am 30.12.2011 (17:04Uhr)

    "Um interaktive Prototypen zu erstellen, lassen sich Elemente mit Interaktionen belegen. Diese werden beim PDF-Export übernommen. Die so erstellten Klickpfade geben einen Eindruck der späteren Funktion, sind allerdings kein Ersatz für einen HTML-Prototypen."


    Auch nach langem Suchen habe ich noch keine Möglichkeit gefunden, wie ich ein PDF-Export mache in dem dann die vorher definierten Aktionen sichtbar sind. Es wird jeweils nur die Arbeitsfläche angezeigt, nicht aber die darunter liegenen und verlinkten Ebenen.
    Bitte um Rat!

    Dank & Gruß!

  19. von kdueber am 30.12.2011 (17:14Uhr)

    Sorry! Vergessen!

    Es geht um OmniGraffle 5 Pro

  20. von am 21.02.2012 (19:27Uhr)

    [...] [...]

  21. von maus am 07.03.2012 (13:25Uhr)

    hier kommt die maus!

  22. von Leetweb am 22.04.2012 (10:55Uhr)

    Ich finde Balsamiq mit Abstand am besten! :)

  23. von Frederik am 08.06.2012 (11:40Uhr)

    Vielen Dank für die Liste. Kann balsamiq nur empfehlen, super Tool.

  24. von Marcin Treder am 29.06.2012 (10:00Uhr)

    Hi German friends!

    Awesome article. Wireframes, mockups and prototypes are important part of the UX design process. I worked for several years as UX Designer and UX Manager and currently I run UXPin (http://uxpin.com) - first dedicated UX Design tool on the market. Let say with you UXPin you'll stop wasting time on inefficient communication in the design process. You'll be able not only to create wireframes, prototypes, mockups and even convert paper prototypes into digital wireframes, you'll be able to put all of that into the context of your design story.

    Have a look on the video: http://youtu.be/A6aGep7eFDs

  25. von mediabase am 16.10.2012 (10:41Uhr)

    Wir verwenden Axure - ist nicht schlecht aber manchmal wird nicht alles gespeichert ;-(

  26. von bert.skinner.777 am 08.05.2013 (18:04Uhr)

    ich finde ja das in letzter zeit die namen der "kommentatoren" sehr komisch sind

  27. von manni65929 am 15.06.2013 (12:16Uhr)

    Das Firefox Add-On "Pencil" ist leider schon seit FF 12.0 (gemäß Einträgen in den Bewertungen auf Firefox) nicht mehr kompatibel mit FF. Ich selbst habe FF 21.0 und kann es nicht mehr installieren. Das nur zur Info :D

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Mockup
8 geniale Mockup-Tools, um deine App in Szene zu setzen
8 geniale Mockup-Tools, um deine App in Szene zu setzen

Ein richtig gutes App-Design ist für Startups, Coder und Designer viel wert – es mit schicken Produkt-Screenshots überzeugend in Szene zu setzen, aber noch viel mehr. Wir stellen die acht besten.. ... » weiterlesen

Neues iOS 7-Konzept: Safari-Redesign und Dashboard-Impulse [Video]
Neues iOS 7-Konzept: Safari-Redesign und Dashboard-Impulse [Video]

Mohamed Kerroudj hat ein neues Mockup, welches einen visionären Ausblick auf iOS 7 wagt, veröffentlicht. Darin spielt er mit einem Safari-Redesign und setzt neue Dashboard-Impulse. Sehenswert! » weiterlesen

MockUPhone: Freigestellte Mockups für dein Projekt
MockUPhone: Freigestellte Mockups für dein Projekt

Mit MockUPhone erstellst du aus Screenshots deiner Web-Projekte Device-Mockups für die spätere Präsentation. Wir verraten dir, was MockUPhone anders macht als andere Tools. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen