Rapid Prototyping für Websites mit pidoco

Im Artikel „Meine Webdesign-Apps“ habe ich pidoco als eines meiner täglichen Werkzeuge bereits genannt. Heute möchte ich es ein klein wenig ausführlicher vorstellen.

Was ist Rapid Prototyping?

Der Begriff „Rapid Prototyping“ kommt ursprünglich aus dem industriellen Bereich und man versteht darunter die schnelle Herstellung von Musterbauteilen und Modellen auf Basis von Konstruktionsdaten (Wikipedia). In den letzten Jahren hat sich das Prototyping auch bei der Entwicklung von GUIs für Software und Websites durchgesetzt und ist heute kaum noch weg zu denken. Im Bereich des Webdesigns bedeutet Prototyping, im Rahmen der Konzeption einer Website ohne großen Programmieraufwand Wireframes oder Mock-ups – also Skelette oder Grundgerüste –  zu erstellen. Im besten Fall sind diese Wireframes dynamisch und erlauben bereits die Navigation innerhalb verknüpfter Seiten.

Warum nutze ich es?

Ich nutze bei der Konzeption von Websites Wireframes aus mehreren Gründen. Zum einen ist es einfacher, schneller und effizienter, nach dem Baukastenprinzip ein Layout mit pidoco zu entwerfen als mit Photoshop oder gar mit einem einfachen HTML-Grundgerüst. Ich kann schnell viele Seiten anlegen und miteinander verlinken, mit den Grundelementen bestücken und verschiedene Varianten testen. Ich muss mir zu diesem Zeitpunkt noch keine Gedanken um das grafische Design oder den HMTL-Code der Website machen und kann mich zu 100% auf die Struktur und das Layout der Website konzetrieren. Zum anderen kann ich dem Kunden in einem sehr frühen Stadium bereits ein „Gefühl“ für seine Website vermitteln und ihn aktiv in die Gestaltung einbinden. Er kann die Seitenstruktur und die Anordnung der Elemente prüfen und testen bereits  und über Menüs und Links durch die verschiedenen Bereiche navigieren. Je nach Komplexität der Prototyping Software kann der Kunde meine Änderungen in seinem Browser in Echtzeit nachvollziehen und Feedback unmittelbar einbringen.  Nachdem so gemeinsam die Struktur und das Layout der Website erarbeitet wurde, kann nun zügig das grafische Design auf Basis des fertigen Layouts erstellt werden. Hierfür kommen nun natürlich die üblichen Grafikprogramme (Photoshop, Illustrator etc.) zum Einsatz.

Wie sieht es aus?

Nachfolgend zeige und kommentiere ich einige Screenshots eines Prototyps für das Projekt „frechverlag – www.weihnachtssterne-basteln.de“.

Es können beliebig viele Seiten angelegt und miteinander verlinkt werden.
Im Editor können per Drag & Drop Elemente angelegt werden. Empfehlenswert ist die Verwendung von Ebenen (Layers) um verschiedene Varianten zu testen und wiederkehrendene Elemente nicht mehrfach zu erfassen.
Im Editor können per Drag & Drop Elemente angelegt werden. Empfehlenswert ist die Verwendung von Ebenen (Layers) um verschiedene Varianten zu testen und wiederkehrendene Elemente nicht mehrfach zu erfassen.
Im Browser kann das Wireframe wie eine normale Website bedient werden. Alle Links sind klickbar und führen auf weitere Seiten.

Neben pidoco gibt es natürlich noch eine Reihe weiterer Prototyping Tools, wie z.B. HotGloo oder Balsamiq. Diese habe ich jedoch nicht ausführlich getestet und kann sie daher hier nicht bewerten. Ich habe mich für pidoco entschieden, weil ich gern ein inländisches Unternehmen unterstützen möchte und mich das Supportangebot und die Konditionen ansprechen. Und weil ich bereits nach wenigen Minuten des Testens von der Leistungsfähigkeit und dem Spaßfaktor von pidoco begeistert war. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind mit * markiert.

Bitte verwende Pastie, Pastebin oder Gist, um größere Code-Schnipsel in deinem Kommentar zu veröffentlichen.

*