Mockup-Tools: Skizzen und Wireframes erstellen

Mockup-Tools: Skizzen und Wireframes erstellen

Lesezeichen setzen

In vielen Bereichen kann man Aufgaben vollständig an jemanden auslagern, der auf die Ausführung spezialisiert ist. Bei der eigenen Internetpräsenz aber ist es wichtig, dass sie von Anmutung über Farbgestaltung bis Inhalt perfekt zu dir und deinem Angebot passt.

Sobald du eine Website für dein Business oder ein Produkt, eine Dienstleistung in Auftrag gibst, wirst du mit der Herausforderung konfrontiert, dem Webdesigner oder der Agentur deine Wünsche verständlich mitzuteilen, damit dieser sie auf technische und sinnvolle Umsetzbarkeit prüft und ihr gemeinsam ein Ergebnis erzielt, das erfolgreich online gehen kann.

Die optische und konzeptionelle Gestaltung bzw. die Absprache bis zu diesem Ergebnis wird durch Mockup-Tools erleichtert, die bei der Erstellung eines anklickbaren Entwurfs helfen – man kann den Prototyp in der Software so lange schieben und verändern, bis alles für alle passt.

Du kannst beispielsweise mit einem Tool wie Balsamiq Mockup die Version für den Browser nutzen, um deine eigenen Vorstellungen dem Webdesigner zeigen, damit Ihr gemeinsam daran weiterarbeiten könnt.

Änderungen an einer Website sind nicht trivial

Eine bereits bestehende Website „mal eben“ zu ändern ist nämlich nicht trivial und deswegen baut man auch nicht einfach drauflos, um später beliebig anzupassen.

Wo ein Webdesign-Laie nur spontan ein Kästchen verschoben und eine Breite verändert haben möchte, können für den dazugehörigen Webentwickler gleich mehrere Stunden anfallen, bis sämtliche Details für die Ausgabe auf allen Endgeräte angepasst sind.

Beliebig oft lässt sich so etwas nicht wiederholen, wenn der Aufwand noch Sinn machen soll, deswegen geht man auch anders vor: Um aufwändiges Vor und Zurück zu vermeiden, arbeitet man auch in kleineren Projekten mit Freigabestufen und erstellt erst ein Konzept für Strukturen und Navigation, dann einen Design-Entwurf.

Flexibler und leistungsfähiger als ein Grafikprogramm für Skizzen

Diesen Prototypen für das Screendesign könnte man zwar auch in einem Grafikprogramm erstellen und viele Ideen beginnen auch tatsächlich so.

Damit lässt sich aber eine Navigation mit mehreren Ebenen nur schlecht darstellen, man kann nichts anklicken, keine Notizen unterbringen, nicht mit anderen zusammenarbeiten daran und so weiter.

Größere Änderungen sind in einer Grafik-Software außerdem naturgemäß sehr umständlich und oft muss man von vorn anfangen, weil sich die Vorstellungen und Gestaltungsideen während dieser Phase weiterentwickeln, zusätzliche Funktionen abgedeckt werden müssen und sich die Grafik nicht so einfach umbauen lässt.

Die Visualisierung einer entstehenden Website erarbeitet man also zunächst im Mockup-Tool, um den Prototyp dann später als Grundlage für die Entwicklung zu nutzen.

Das bereits genannten Balsamiq Mockup kann in einer kostenlosen Demo-Version im Browser genutzt werden. Ein weiteres Tool für Wireframing und Mockupts ist das Open Source Programm Pencil Project. Mockup und Wireframing Tools gibt es in allen Größen und Preisklassen.

Ob ein statischer „Wireframe“ für die vereinfachte Darstellung des Seitenkonzepts ohne Design, ein klickbarer Prototyp oder gleich ein Mockup mit allen Elementen, die später auf die Site gehören werden:

Arbeiten mit Mockup-Tools macht Spaß, spart Zeit, verhindert Missverständnisse, verbessert die Ergebnisse und erhöht die Produktivität.

Wenn dich dein Webdesigner also fragt, wie deine Vorstellungen für die Umsetzungen des Projekts aussehen, zeigst du ihm nächstes Mal einfach deine Ideen, statt sie langwierig zu erläutern.

Über den Autor
Carola Heine
Up to date: Trends und Online Navigation

Beitrag kommentieren