Das könnte dich auch interessieren

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

Design

Prototyping: Diese Tools helfen euch bei euren Projekten

    Prototyping: Diese Tools helfen euch bei euren Projekten

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

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.

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 Prototyping 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?

Finde einen Job, den du liebst zum Thema Prototyping

Alle Jobs zum Thema Prototyping
4 Reaktionen
Hans-Helge
Hans-Helge

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

Poblocki
Poblocki

Website Stencil find ich genial :D

Antworten

Walther
Walther

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

Lenin
Lenin

Pencil!!!

http://pencil.evolus.vn/

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

Antworten

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

Abbrechen