t3n News Design

Prototyping: Diese Tools helfen euch bei euren Projekten

Prototyping: Diese Tools helfen euch bei euren Projekten

In diesem Artikel wollen wir euch einige Prototyping-Tools zeigen, mit deren Hilfe ihr euren Workflow als Webworker optimieren könnt. Von Stift und Papier bis hin zu Framworks wie Skeleton oder Pure.

Prototyping: Diese Tools helfen euch bei euren Projekten

Prototyping-Prozess. (Foto: leisa / flickr.com, Lizenz: CC-BY-SA )

Wir alle haben tagtäglich mit dem Internet, zumindest aber mit dem Web zu tun – sei es als Designer oder als Entwickler. In diesem Artikel zeige ich euch einen Auszug meiner beliebtesten Tools für das Prototyping in Webprojekten.

Gedanken sortieren

„Mindmapping“ mit Mindmeister. (Foto: Rob Enslin / flickr.com, Lizenz: CC-BY)

Um die Informations-Architektur beziehungsweise den Aufbau von Projekten und deren Abhängigkeiten festhalten zu können, setze ich oft auf MindNode Pro. Die Einfachheit des Tools (Plugin für Google Chrome) macht es für mich zum idealen Begleiter – besonders durch die vorhandene Dropbox-Funktion, mit der ich Skizzen mit anderen Team-Mitgliedern schnell teilen kann.

Als Alternative setze ich auch gerne MindMeister ein, da ich das Tool mit Google Chrome benutzen und ganz bequem mittels Google Drive auf meine Mindmaps zugreifen kann. Für Windows-Nutzer kann ich noch Visio von Microsoft, Justinmind oder auch Balsamiq empfehlen. Hier findet ihr noch mehr Mind-Mapping-Tools.

Weitere Tools:

Ganz analog: Der Stift

Ganz egal ob vertikaler oder horizontaler Prototyp: Erste Ideen halte ich mit Stift auf Papier fest. Ich bin vor einiger Zeit von Moleskine auf das „Dot-Grid-Buch“ umgestiegen, weil mir im klassischen Moleskine die Orientierungspunkte fehlten und mir das Dot-Grid-Buch zudem mehr Platz bietet. Paradoxerweise benutze ich sehr selten Bleistifte, so zwinge ich mich, einen Gedanken zu Ende zu bringen, bevor ich ihn skizziere. Mit Bleistiften unterliege ich aber oft der Versuchung, schon während des Denkvorgangs mit der Skizze zu beginnen – was dann in unschönen Ergebnissen endet.

Dabei setze ich auf den „Pilot Juice Gel Ink Pen“ mit 0,38 Millimetern und den „Zebra Sharbo X LT3“. Wobei ich, trotz der Gefahr des Verschmierens, nicht mehr auf „Ink-Pens“ verzichten will, da mir es leichter fällt, damit zu konstruieren – der Pilot-Stift schreibt einfach „flüssiger“. Der Zebra ermöglicht mir eine gewisse Flexibilität durch die Möglichkeit der Auswahl von drei unterschiedlichen Minen. Außerdem ist er extrem leicht und liegt darüber hinaus sehr gut in der Hand.

Für mich sind Stift und Papier einfach die schnellste Form, um Grundideen aus meinem Kopf zu transportieren, bevor ich sie in andere Medien übertrage.

Weitere Tools:

Omnigraffle

Ob User-Flow-Diagramm, Wireframe oder Sitemap – mit Omnigraffle kein Problem. Gerade die Möglichkeit, die mächtige Applikation durch Templates und „Stencils“ zu erweitern, spart mir oft wertvolle Zeit im Prototyping-Prozess. Jedoch steht Omnigraffle meiner Meinung nach nicht unbedingt für eine flache Lernkurve – Ungeübte brauchen deshalb etwas Geduld und Erfahrung. Aber wenn ich meine Skizzen digitalisieren muss, dann ist Omnigraffle meine erste Wahl.

Post-Its

Ja, richtig gehört: Post-Its. Wenn es darum geht, Gedanken festzuhalten oder sie von einem Paper-Prototyp zum Beispiel auf ein User-Flow-Diagramm zu kleben, um Zusammenhänge deutlicher zu machen, dann sind Post-Its meine erste Wahl im Prototyping-Prozess. Dabei liebe ich die Einfachheit und den physischen Akt, ein Post-It frei bewegen zu können oder anderen im Team die Möglichkeit zu geben, meine Ideen zu bewegen. Ich würde mir nur manchmal einen besseren Klebstoff für die Rückseite wünschen.

Weitere Tools:

Farbe im Prototyping

Beim Prototyping setze ich persönlich auf das Vektoren-Tool Sketch. Es wurde für das Interface-Design konzipiert und hat sich durchaus als Alternative zu Adobes Photoshop und Illustrator etablieren können – wobei Sketch durch seine Einfachheit und auch durch den Preis besticht. Für das von Web-Projekten setze ich Sketch insofern sehr gerne ein, weil ich die Attribute einzelner Elemente direkt als CSS-Klasse kopieren kann – besonders praktisch bei Farbverläufen.

HTML-Frameworks für Prototyping

Paper-Prototyping: Eine JavaScript Slideshow. (Foto: adactio / flickr.com, Lizenz: CC-BY)

Um meine Visualisierung in konkreten Code umsetzen zu können, setze ich auf Skeleton oder Pure – eben nicht auf Bootstrap oder Foundation, da ich diese Frameworks im Prototyping-Prozess als zu „einengend“ empfinde und ich mehr Zeit mit dem Löschen von schon definierter Formatierung verbringe, als mit dem eigentlichen Prozess der Prototypen-Entwicklung.

Obwohl ich es liebe, meine Prototypen direkt selbst zu generieren, gibt es Kollegen, die Tools wie Axure bevorzugen – die für „Prototyping“-Zwecke durchaus ausreichend sind.

Usability-Evaluierung

Zum Abschluss setze ich auf Remote-Usability-Testing mit Silverback, das es mir ermöglicht, meine Prototypen unkompliziert und schnell evaluieren zu lassen. So kann ich von zielgruppenrelevanten Personen Feedback beziehen und diese Erkenntnisse in die nächste Iteration einfließen lassen. Leider gibt es Silverback nur auf Mac-Systemen, was eine Zusammenarbeit mit Windows-Systemen massiv erschwert. Behelfsmäßig könnt ihr aber zum Beispiel auch auf Skype und Screen-Capture-Software (zum Beispiel Camtasia) zurückgreifen.

Da sich die Tester zu Hause befinden, könnt ihr den Nachteil einer zu sterilen und eventuell unnatürlichen Testumgebung zum Beispiel beim „Thinking Aloud“ sogar etwas verringern.

Weitere Tools:

Ich hoffe ich konnte euch ein paar Tipps geben, die ihr in euren nächsten Projekten anwenden könnt.

Setzt ihr auf Prototyping bei euren Projekten? Und wenn ja: Welche Tools nutzt ihr?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Lenin am 11.01.2014 (12:01 Uhr)

    Pencil!!!

    http://pencil.evolus.vn/

    Für fast jede gui - schnell und einfach - ruhig mal antesten.

    Antworten Teilen
  2. von Walther am 11.01.2014 (13:53 Uhr)

    Es ist immer sinnvoll alles und sofort in das Netz/in die Cloud zu setzen. Schon die ersten Ideen sollte man unbedingt bei Dropbox und anderen Online-Diensten ablegen.

    Antworten Teilen
  3. von Poblocki am 11.01.2014 (14:43 Uhr)

    Website Stencil find ich genial :D

    Antworten Teilen
  4. von Hans-Helge am 11.01.2014 (22:35 Uhr)

    Vielleicht für alle Studenten ein Tipp. Als Student mit einem Schnitt besser als 3.0 bekommt man Axure kostenlos ;) Hat bei mir ohne Probleme geklappt, da ich es für die Uni mal brauchte.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Prototyping
Prototyping auf dem iPhone wird noch besser: Marvel stellt neue App-Version vor [Update]
Prototyping auf dem iPhone wird noch besser: Marvel stellt neue App-Version vor [Update]

Die Prototyping-App Marvel steht in einer neuen Version für iOS im App-Store bereit. Mit dabei ist erstmals auch Canvas, ein Rapid-Design-Tool zur Erstellung interaktiver Prototypen direkt auf dem … » weiterlesen

Kostenfreies Prototyping-Tool von Facebook: Das steckt hinter Origami Studio
Kostenfreies Prototyping-Tool von Facebook: Das steckt hinter Origami Studio

Mit Origami Studio will Facebook noch dieses Jahr ein kostenfreies Prototyping-Tool für OS X veröffentlichen. Wir verraten euch, welche Vorteile sich App-Designer davon erhoffen können. » weiterlesen

Hardware-Prototyping: Tinylab bringt alles mit, was ihr braucht
Hardware-Prototyping: Tinylab bringt alles mit, was ihr braucht

Von Buttons bis hin zu LEDs und Bluetooth: Das Arduino-kompatible Tinylab bringt alles möglichen Komponenten mit. Dank der Open-Source-Hardware soll Prototyping noch einfacher werden. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?