Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & 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

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

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.

Es gibt zwei Arten von Wireframes: statische und dynamische. Ein statisches Wireframe beinhaltet nur ein grundlegendes Raster, in dem Inhalt und Design 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.

Finde einen Job, den du liebst zum Thema JavaScript, Java

2 Reaktionen
mauwi
mauwi

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

Antworten
Jessy Kösterke

Danke für den Tipp! Schade... Aber vielleicht findest du ja ein neues unter den Tools.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen