{"id":1287,"date":"2016-10-13T10:20:12","date_gmt":"2016-10-13T08:20:12","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1287"},"modified":"2025-03-25T11:44:20","modified_gmt":"2025-03-25T10:44:20","slug":"wireframes-mockups-prototypen","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/wireframes-mockups-prototypen\/","title":{"rendered":"Wireframes, Mockups und Prototypen \u2013 Welche Tools helfen weiter?"},"content":{"rendered":"

Wireframes, Mockups und Prototypen sind Begriffe, die h\u00e4ufig synonym verwendet werden. Das ist ziemlich verwirrend, denn man wei\u00df nicht, in welchem Stadium die Entwicklung einer Idee befindet. Handelt es sich hier um eine erste Skizze? Ist der Prototyp klickbar? Interaktiv? Dies sind Fragen, die sich durch eine eindeutige Verwendung der Begriffe kl\u00e4ren lassen. Wir erkl\u00e4ren, was sich hinter jedem Begriff verbirgt und stellen hilfreiche Tools vor.<\/p>\n

<\/p>\n

Wie unterscheiden sich Wireframes, Mockups und Prototypen?<\/h2>\n

In einem Blog Post f\u00fcr Designmodo schreibt Marcin Treder<\/a>:<\/p>\n

\u201cConfusing wireframes with prototypes is like assuming that an architectural blueprint (a detailed plan of a building-to-be) and a display house, are the same thing.\u201d<\/p><\/blockquote>\n

Wireframes, Mockups und Prototypen bezeichnen die Entwicklung von Ideen in verschiedenen Stadien.<\/p>\n

\"website-mockups-prototypes-tips\"<\/p>\n

Wireframe<\/b>: Ein Wireframe ist die erste, statische Repr\u00e4sentation eines Modells. Wireframes k\u00f6nnen hilfreich sein, wenn es darum geht, schnell Ideen zu skizzieren. Wireframes sind eine grundlegende, visuelle Repr\u00e4sentation des Designs. Aber bereits hier sollten alle Ideen des fertigen Produkts anskizziert sein. Andererseits geht es darum, sich nicht zu sehr auf alle Details zu fokussieren.<\/p>\n

Bei Wireframes geht es vornehmlich um das Konzept, das man am Wireframe gemeinsam mit Kollegen erarbeiten kann.<\/p>\n

Wireframes eignen sich zur Dokumentation und Zusammenarbeit.<\/p>\n

Mockups<\/b> sind statische Design-Repr\u00e4sentationen. Das bedeutet, Mockups k\u00f6nnen zwar so aussehen wie fertige Produkte oder Prototypen, allerdings sind sie nicht interaktiv und nicht klickbar. Es handelt sich vielmehr um grafische Repr\u00e4sentationen. Dies kann hilfreich sein, um z. B. Investoren ein Bild zu vermitteln, wie das fertige Produkt aussehen kann.<\/p>\n

Ein Prototyp<\/b> kommt dem fertigen Produkt bereits sehr nahe. Hier k\u00f6nnen Prozesse simuliert werden und User Interaktion kann getestet werden. Meistens sieht der Prototyp dem fertigen Produkt sehr \u00e4hnlich.<\/p>\n

Prototypen eignen sich hervorragend, um User Feedback einzuholen und das Produkt von Beta Testern testen zu lassen.<\/p>\n

Wie k\u00f6nnen Sie sich f\u00fcr ein Tool entscheiden?<\/h2>\n

Wenn Sie neue Tools ausprobieren, geht es auch immer um die Frage: Lohnt sich der Zeitaufwand, sich in neue Tools einzuarbeiten f\u00fcr das, was ich daf\u00fcr bekomme. Wielange brauche ich, um mich in ein neues Tools einzuarbeiten? Und wie schnell schaffe ich es dann tats\u00e4chlich einen Prototypen zu entwickeln?<\/p>\n

Bevor Sie sich f\u00fcr ein neues Tool entscheiden, werden Sie vermutlich folgenden Dinge \u00fcberlegen:<\/p>\n

    \n
  1. Eignet sich das Tool f\u00fcr die Erstellung von Prototypen und Landing Pages<\/a> f\u00fcr Website, Desktop oder mobile Apps? F\u00fcr welches Projekt ben\u00f6tige ich das Tool konkret?<\/li>\n
  2. Wollen Sie Wireframes, Mockups oder Prototypen entwickeln und welche Anforderungen an ein Tool ergeben sich daraus?<\/li>\n
  3. Welche Features f\u00fcr die Zusammenarbeit mit anderen Entwicklern oder Designern gibt es?<\/li>\n
  4. Wie lange dauert es, sich in das Tool einzuarbeiten?<\/li>\n
  5. Wie teuer ist das Tool und lohnt sich das f\u00fcr mich?<\/li>\n<\/ol>\n

    Im Folgenden m\u00f6chte ich Ihnen nun einige Tools vorstellen.<\/p>\n

    Welche Tools gibt es f\u00fcr Wireframes, Mockup und Prototypen?<\/h2>\n

    Balsamiq Mockup f\u00fcr einfache Wireframes<\/h3>\n

    Balsamiq Mockup ist ein Tool, mit dem Sie einfache Wireframes erstellen k\u00f6nnen. Es ist so einfach, wie Dinge auf einem Blatt Papier zu skizzieren. Damit ist dieses Tool besonders f\u00fcr Einsteiger zu empfehlen und ben\u00f6tigt nicht viel Einarbeitungszeit. Wireframes lassen sich in relativ kurzer Zeit designen.<\/p>\n

    \"Balsamiq\"<\/p>\n

    https:\/\/balsamiq.com\/<\/a><\/p>\n

    Mockplus f\u00fcr low-fi Mockups<\/h3>\n

    Mit Mockplus lassen sich einfache Mockups f\u00fcr mobile und Desktop Apps erstellen. Das Programm ist einfach und ohne Programmierkenntnisse anzuwenden. Einfaches Drop & Drag macht dies m\u00f6glich. Herauszuheben sind hier auch die bereits vor-designten Elemente wie Popup-Men\u00fc, Sliding Drawer und ein Bilder-Karusell.<\/p>\n

    Mockplus erlaubt die wirklich schnelle und einfache Erstellung von Mockups mit einfachen Mitteln.<\/p>\n

    \"Mockplus\"<\/p>\n

    http:\/\/www.mockplus.com\/<\/a><\/p>\n

    Marvelapp f\u00fcr Mockups<\/h3>\n

    Marvelapp ist eine gro\u00dfartige M\u00f6glichkeit, um an Wireframes zusammenzuarbeiten. Aber nat\u00fcrlich k\u00f6nnen Sie damit auch interaktive Prototypen von Websites und mobilen Anwendungen erstellen. Dazu laden Sie einfach ihre psd, png, jpg oder gifs hoch. Auch Skizzen auf Papier oder Fotos werden hier in klickbare Prototypen verwandelt.<\/p>\n

    In der kostenlosen Version k\u00f6nnen Sie bis zu 3 Projekte erstellen.<\/p>\n

    \"Marvelapp\"<\/p>\n

    https:\/\/marvelapp.com<\/a><\/p>\n

    Invision f\u00fcr high-fi Mockups<\/h3>\n

    Wir bei Usersnap sind gro\u00dfe Fans von Invision. Es ist eines der beliebtesten Prototyping- und Design-Tools f\u00fcr UX Designer. Mit Invision k\u00f6nnen Sie Ihre Prototypen in interaktive Prototypen verwandeln. Dazu k\u00f6nnen Sie Ihre Projekte im psd oder png-Format hochladen und statische Screens mit Gesten und Animationen in klickbare Prototypen verwandeln. Invision kann mit Creative Cloud, Dropbox oder Google Drive problemlos synchronisiert werden. Sie k\u00f6nnen auch vorhergehende Versionen einfach wiederherstellen.<\/p>\n

    \"invisionapp\"<\/p>\n

    Wir m\u00f6gen besonders die Kommentar- und Annotationsfunktionen, die es erlauben schnell und einfach Feedback zu geben. Invision ist am besten f\u00fcr high-fi Mockups geeignet.<\/p>\n

    https:\/\/www.invisionapp.com\/#<\/a><\/p>\n

    Axure RP Pro<\/h3>\n

    Axure RP Pro ist ein bekanntes Prototyping-Tool. Unter UX Designern ist es eines der beliebtesten L\u00f6sungen, da es \u00fcber umfassende Funktionen verf\u00fcgt: interaktive Prototypen k\u00f6nnen hier ebenso designt werden wie click-through Wireframes. User Flows und Sitemaps k\u00f6nnen simuliert werden. Dieses Programm ben\u00f6tigt etwas mehr Einarbeitungszeit und ist nicht empfohlen f\u00fcr mobile Prototypen. Es besitzt aber umfangreiche Funktionen wie z. B. die Erstellung von Master Pages und die Verwendung von vor-designten Elementen. Eine Investition, die sich f\u00fcr UX-Designer auf jeden Fall lohnt.<\/p>\n

    \"axure\"<\/p>\n

    http:\/\/www.axure.com\/<\/a><\/p>\n

    Fazit.<\/h2>\n

    Je nachdem, ob Sie Wireframes, Mockups oder high-fi Prototypen designen wollen, kann es verschiedene Tools geben, die besser als andere geeignet sind. Ich hoffe, der Blog Post und die hier vorgestellten Tools haben Ihnen weitergeholfen.<\/p>\n

    Usersnap ist ein Bug Tracking und Screenshot-Tool f\u00fcr jedes Webprojekt. Erhalten Sie sofort Feedback von Ihren Website-Besuchern. Jetzt kostenlos testen!<\/em><\/p>\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Wireframes, Mockups und Prototypen sind Begriffe, die h\u00e4ufig synonym verwendet werden. Das ist ziemlich verwirrend, denn man wei\u00df nicht, in welchem Stadium die Entwicklung einer Idee befindet. Handelt es sich hier um eine erste Skizze? Ist der Prototyp klickbar? Interaktiv? Dies sind Fragen, die sich durch eine eindeutige Verwendung der Begriffe kl\u00e4ren lassen. Wir erkl\u00e4ren, […]<\/p>\n","protected":false},"author":2,"featured_media":1296,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1287"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1287\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1296"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}