t3n News Design

Wireframe bis Prototype: Die besten 5 Tools für dein nächstes Webdesign im Vergleich

Wireframe bis Prototype: Die besten 5 Tools für dein nächstes Webdesign im Vergleich

Um sich nicht direkt auf das Design zu stürzen, wird häufig erst mal ein grundlegendes Konzept für die Struktur der Website entwickelt. Ein Wireframe entsteht vor der eigentlichen Entwicklungsphase und beinhaltet zum Beispiel Inhaltsbereiche, Navigationselemente, Menüleisten und vieles mehr.

Wireframe bis Prototype: Die besten 5 Tools für dein nächstes Webdesign im Vergleich

(Foto: marksdk / flickr.com, Lizenz: CC-BY-SA )

Es gibt zwei Arten von Wireframes: statische und dynamische. Ein statisches Wireframe beinhaltet nur ein grundlegendes Raster, in dem Inhalt und noch keine Rolle spielen. Ein dynamisches Wireframe geht schon fast ins Prototyping über: Die Ideen sind weiter ausgereift und beinhalten Interaktionen sowie Animationen. Wir haben euch die Fünf – unserer Meinung nach – besten Tools rausgesucht.

Wenn du mehr über die Vorgehensweise und Unterschiede zwischen Wireframe und Prototyping wissen willst, solltest du diesen Artikel nicht verpassen oder in unserem Magazin Nr. 32 nachblättern.

1. UXPin

Mit wenigen Klicks vom Wireframe zum fertigen Prototype. (Screenshot: uxpin.com)
Mit wenigen Klicks vom Wireframe zum fertigen Prototypen. (Screenshot: uxpin.com)

UXPin ist definitiv mehr als nur ein Wireframe-Tool, denn du kannst damit einen voll interaktiven Prototypen erstellen. UXPin bietet dir eine Auswahl von über hundert UI Elementen und Vorlagen. Und wenn nichts dabei sein sollte, fügst du einfach deine eigenen hinzu.

Über die Echtzeit-Zusammenarbeit kannst du nicht nur mit mehreren Teilnehmern am gleichen Design arbeiten, sondern auch deine Arbeit präsentieren oder teilen, ohne dass ein Account erforderlich ist.

Starten kannst du für sieben Tage kostenlos, danach geht es preislich bei 19 US-Dollar für Freelancer oder kleine Unternehmen los. Die empfohlene Pro-Version kostet 29 US-Dollar und beinhaltet zum Beispiel den Import von Photoshop und Sketch. Falls du noch mehr Funktionen benötigst, kannst du auf Pro+ oder Enterprise erweitern.

2. Craft Plugin

Einfaches Hinzufügen von Content aus Web oder eigenen Fotos in Sketch. (Screenshot: labs.invisionapp.com/craft)
Einfaches Hinzufügen von Content aus Web oder eigenen Fotos in Sketch. (Screenshot: labs.invisionapp.com/craft)

Craft ist ein Plugin für Photoshop und Sketch. Das Entwerfen eines Wireframes an sich passiert also in einem der beiden Programme. Um mehr als nur einen Wireframe zu bauen, bietet dir Craft die Möglichkeit, Inhalte auf einfache Art und Weise zu importieren. Das Craft Plugin steht kostenlos zum Download bereit.

3. Balsamiq

(Screenshot: balsamiq.com)
(Screenshot: balsamiq.com)

Balsamiq ist eines der bekanntesten Tools und konzentriert sich auf reines Wireframing. Vom Design ist es eher schlicht gehalten und erinnert an eine klassische Handzeichnung. Es gibt eine große Auswahl an Elementen, die einfach per Drag&Drop eingefügt werden. Leider sind keine Interaktionen möglich, es gibt aber die Möglichkeit mehrere Tabs miteinander zu verlinken.

Die Einzelbenutzer-Lizenz geht bei 89 US-Dollar los. Der Preis der Volume-Lizenz richtet sich nach den Benutzern.

4. Axure

Mit Axure einfache Mock-ups erstellen. (Screenshot: google.de/axure)
Shopsystem Mock-up? Mit Axure einfach gemacht. (Screenshot: google.de/axure)

Axure kann als reines Wireframe-Tool genutzt werden oder auch als Prototype-Tool. Axure verfügt über eine große Auswahl an UI-Elementen. Mit der Axure-Pro-Version kannst du Kommentare und Erklärungen später als Word-Dokument exportieren und hast somit den perfekten Leitfaden zu deinem Konzept. Erstellte Wireframes lassen sich als HTML- und CSS-Datei exportieren und deine Arbeit kannst du per Link direkt an deinen Kunden schicken.

Axure bringt einen großen Funktionsumfang mit, daher sollte genug Einarbeitungszeit eingeplant werden, sonst kann Axure schnell unübersichtlich werden. Wer Axure testen will, kann mit der 30-Tage-Testversion beginnen. Danach gibt es die Standard-Version für 289 US-Dollar und die Pro-Version für 589 US-Dollar.

5. wireframe.cc

Wireframe.cc bietet eine große Auswahl an UI Elementen. (Screenshot: wireframe.cc)
Wireframe.cc bietet eine große Auswahl an UI Elementen. (Screenshot: wireframe.cc)

Mit der freien Version von wireframe.cc kannst du einfach simple Mock-ups erstellen und durch Teilen des Links deine Arbeit präsentieren und kommentieren lassen. Die Premium-Version hat Einiges mehr zu bieten. Interaktionen, Protokoll Verläufe und der Export als PDF oder PNG sind nur einige Features. Auch wireframe.css bietet dir Zusammenarbeit mit deinem ganzen Team.

Die 7-Tage-Testversion gibt es kostenlos. Mit 99 US-Dollar im Jahr und einem Benutzer startet das "Solo-Paket" und endet mit 990 US-Dollar pro Jahr mit unbegrenzter Benutzeranzahl. Alle Preise sind auch monatlich verfügbar.

 

Für den perfekten Workflow von Beginn an, empfehlen wir Moodboards – hier der passende Artikel.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von mauwi am 11.02.2016 (14:37 Uhr)

    Für Studenten gibt es Axure übrigens kostenlos! Allerdings bin ich mit dem Tool nicht war geworden.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Design
Design von der Stange: Ist Webdesign tot?
Design von der Stange: Ist Webdesign tot?

Das Web ist langweilig geworden, Design ist austauschbar, neue Ideen sind schwerer zu finden als die Nadel im Heuhaufen – sagen die einen. Das Web wird stetig besser und Designer machen einen … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Ist responsives Design besser für SEO?
Ist responsives Design besser für SEO?

Es gibt Aussagen, die verselbstständigen sich so schnell, dass sie bald nicht mehr hinterfragt werden. „Responsives Design ist besser für SEO“ ist eine davon. Wir schauen genauer hin. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?