Ich beschäftige mich gerade wieder mal mit dem Entwurf einer Webseite. An vorderster Stelle steht hierbei wie immer die Frage, welche Prozesse der User am ehesten durchlaufen will/soll und wie diese Prozesse am effektivsten gestaltet werden können.
Üblicherweise habe ich mich in der Vergangenheit mit Papier und Bleistift hingesetzt, viele Screens gemalt, mich mit Kollegen abgestimmt, User befragt, neu gemalt, wieder befragt… Papier hat halt den Nachteil, dass es im Nachhinein nicht wirklich gut editierbar ist, auch nicht bei Verwendung von Bleisitft & Radiergummi. Bei Änderungen bedeutet das in aller Regel: Neuzeichnen. Und damit unnötige Arbeit.
Mockups am Computer zu entwerfen war für mich bisher wenig inspirierend. Klar, man kann das Pixelwerkzeug seiner Wahl schnappen und Texte, Bereiche etc. auf die Arbeitsfläche werfen, aber irgendwie dauerte mir dieser Prozess im Vergleich zur Bleistift/Papier-Kombi immer zu lange, das Ergebnis war weniger akurat und vor allem eben zu technisch, wenig inspirierend.
Doch dann habe ich meine Rettung gefunden: Balsamiq Mockups.
Ein simples aber feines Tool, dass es einem auf einfache Weise ermöglich sich auf die schnelle Mockups zusammenzuklicken. Aus eine Bibliothek von 60 Items wählt zieht man sich die Elemente auf seine Arbeitsfläche, die man braucht. Das sind z.B. Browserfenster, Buttons, Navigationselemente, Charts, Dialoge, Formularelemnte usw.
Beim Skalieren sind die einzelnen Elemente teilweise recht intelligent, so skalieren sie nicht immer 1:1 sondern beim Skalieren eines Browserfensters bleibt der obere Teil mit den Navigationselementen, Adresszeile etc. immer gliech hoch, das Suchfeld oben rechts immer rechtsbündig gleich breit.
Auf den Zeichenblock gezogene und positionierte Elemente können gruppiert und so einfacher positionert, verändert und kopiert werden.
Die Ergebnisse sehen dann nach wenigen Minuten Arbeit z.B. wie folgt aus:
Natürlich lässt sich alles speichern, elektronisch verteilen und weiterbearbeiten/ändern. Wesentliche Vorteile gegenüber Papier & Bleistift.
Für mich sieht’s passend aus, ich werde mal damit arbeiten.