Wireframe- & Mockup-Tools: So präsentierst du deine Website-Konzepte

Ein Mockup-Tool ist grundsätzlich nicht nur für die Hilfe bei der Konzeption gedacht, sondern stellt ein gutes Mittel dar, welches eigenen Unternehmenskunden Pläne und Ideen besser verdeutlichen soll. Die ersten Entwürfe zeichnest du in der Regel mit Stift auf Papier. Anschließend wird der Editor am Computer eingesetzt und du übernimmst die Entwürfe und speicherst sie digital ab. Oft spielen Programme wie Firework oder Photoshop bei der Entwicklung eine wichtige Rolle. Allerdings gestaltet sich mit solchen Grafikprogrammen die manuelle Übernahme der schriftlichen Entwürfe eher ineffizient. Daher sollen bei diesem Schritt solche Tools wie Mockup oder Wireframe helfen, dir die Arbeit zu erleichtern. Du sparst dadurch nicht nur die wertvolle Zeit, sondern bringst das gesamte Entwicklungsstadium voran.

Mockup-Tool – Balsamiq

Bei dem Tool Balsamiq handelt es sich um das bekannteste Prototyping-Tool auf dem Markt. Die große Auswahl an Basiselementen ist entscheidend für dich als Nutzer. Es gibt verschiedene Navigationselemente wie Formulare, Video- und Bildbereiche. Die Navigationselemente lassen sich per Drag-and-Drop auf die notwendige Fläche platzieren und erstellen somit ein Wireframe. Dir ist es auch möglich, eine Formatierung der Module z. B. nach der Größe oder Farbe vorzunehmen. Darüber hinaus kannst du ganz individuellen Module selbst erstellen und gestalten. Schritt für Schritt arbeitest du dich vor, bis ein professionelles Wireframe erstellt ist.

Die Kommentarfunktion zeigt sich als sehr praktisch. Dir steht es frei, jederzeit Erklärungen in Form von Kommentaren hinzuzufügen. Anschießend lesen die Kunden die Erklärungen durch und bekommen somit Hilfe, wenn irgendwelche Entwicklungsschritte nicht ganz nachvollziehbar sind. Balsamiq genießt den Ruf, ein Tool mit einer benutzerfreundlichen Oberfläche und einer verständlichen Kategorisierung der einzelnen Menüpunkten zu sein.

Das Design wirkt sehr ansprechend und wie von Hand gezeichnet. Es gibt keine überflüssigen Details, die dich verwirren und zu rastlosen Blicken führen. Dieser Aspekt ist besonders in dem frühen Entwicklungsstadium wichtig, damit du nicht mit dem Tool überfordert bist und eine Zeit mit dem „langen Kennenlernen“ der Software verschwendest.

Der Entwickler Balsamiq Studios hat in seinem Angebot zwei verschiedene Versionen von der Software. Die eine Version trägt den Namen Mockup und ist als Download für die Systeme von Mac, Windows und Linux verfügbar. Außerdem gibt es eine Webapp, die den Namen MyBalsamiq trägt. Nachdem sich du dich registriert hast, bekommst du eine Nutzungsdauer von 30 Tagen kostenlos zur Verfügung gestellt. Nach den 30 Tagen wird eine Lizenzgebühr fällig, die sich nach der Anzahl der Nutzer richtet. Entscheidest du dich für die Nutzung der Webapplikation, kannst du gleichzeitig in der Basisversion drei aktive Projekte betreiben.

Mockup-Tool – Axure

Bei der Software Axure stehen dir umfangreiche Möglichkeiten zur Verfügung, was das Erstellen von einfachen Wireframes aber auch detailreichen Prototypen betrifft. Dank des enorm großen Funktionsumfangs wird das Programm eher von Profis als von Einsteigern verwendet. Daher sollten alle Einsteiger und Interessenten mit einer Eingewöhnungsphase beginnen, um mit dieser Software effizient arbeiten zu können. Der erste Überblick ist deshalb besonders für dich als Einsteiger wichtig.

Das Tool liefert dir sehr viele vorgefertigte Elemente, die du einzeln nach deinem Wunsch konfigurieren kannst. Außerdem kannst du ganz einfache Aktionen einbauen wie z. B. Flyout-Navigation, Tooltipps oder Lightboxen. Deshalb bietet „Axure“ auch eine sehr gute Alternative zum altbekannten Prototypen Click Dummy, den viele in der früheren Zeit, als ein Usability-Test genutzt haben. Natürlich ist Axure auch mit der Kommentarfunktion sowie Fußnoten und Erklärungsfeldern ausgestattet. Die letzten beiden lassen sich hervorragend als CSV- oder PDF-Formate exportieren. Auf diese Weise wird die ideale Basis für Konzeptpapiere geschaffen. Ferner kannst du zusammen mit den anderen Nutzern an einem Projekt in einer Teamarbeit arbeiten. Die Änderungen der anderen User können nicht während der Arbeit überschrieben werden, das ermöglicht ein zeitgleiches Arbeiten mit mehreren Personen an einem Projekt.

Axure steht ebenfalls mit einer 30-tägigen kostenlosen Testversion als Download zur Verfügung. Die Pro-, Enterprise- und Team-Version musst du kaufen. Für Studenten gibt es einen sehr großen Vorteil, denn diese nutzen das Tool völlig uneingeschränkt und kostenfrei.

Mockup-Tool – Pencil

Bei dem Tool Pencil handelt es sich um eine komplett kostenfreie Desktopversion. Alles, was du für das Erstellen von professionellen Mockups benötigst, sind in diesem Programm enthalten und das überrascht, da „Pencil“ ein lizenzfreies Tool ist. Du kannst dich an sehr vielen Vorlagen erfreuen, die du anpassen und nach deinen Wünschen verbessern kannst. Über 300 vorgefertigte Formen sind in diesem Tool enthalten – das ist sogar deutlich mehr als in einigen kostenpflichtigen Tools. Sollte Bedarf nach noch mehr Vorlagen bestehen, ist es Möglich von der Webseite des Entwicklers, weitere kostenlose Vorlagen runterzuladen. Außerdem fällt das Bearbeiten von Ablaufschemata und Diagrammen direkt in dem Programmfenster deutlich leichter.

Der große Funktionsumfang stört keineswegs die übersichtliche Benutzeroberfläche und so kommen auch Neueinsteiger mit Pencil zurecht. Darüber hinaus gibt es den praktischen Drag-and-Drop-Editor und einen intuitiven Aufbau. Diese beiden Aspekte ermöglichen jedem Anfänger ein schnelles Einsteigen und bringen ein schnelles Verständnis für das Programm. Dir steht die Möglichkeit zur Verfügung, mehrere Seiten anzulegen und miteinander zu verlinken. Auf diese Weise werden die Funktionen an der künftigen Seite verlinkt und bildet die Nutzungsabläufe nach.

Ein sehr großer Vorteil von Pencil ist, dass es ein kostenfreies Open-Source-Tool ist. Allerdings kommen Zweifel auf, ob du zukünftig auch mit Updates rechnen kannst. Hierfür gibt es momentan keine Garantie. Dies lässt sich von der Webseite des Entwicklers ableiten. Seit 2013 kam kein einziges Update raus und das lässt doch etwas an dem Programm zweifeln. Schließlich ist es heutzutage üblich, dass jede noch so kleine App regelmäßig ein Update erhält. Trotzdem kann Pencil durchaus genutzt werden und gilt als ein sehr gutes Tool besonders für Einsteiger, die sich auf dem Gebiet Wireframe versuchen möchten.