Posts tagged "wireframe"

iPhone App Sketchbook

iPhone App Sketchbook

Bevor man überhaupt schon nur eine Zeile Code in Xcode ein gibt, sollte man schon ganz genau den Funktionsumfang und die Führung durch die zu erstellende Applikation kennen!

Die Ideen, bzw. welche Funktionen die App ausführen kann, schreibt man am besten auf ein grosses Blattpapier oder besser ein Whiteboard. Schreibt alle Ideen auf was die App machen kann. Wirklich alle Idee, auch total abwegige… Einfach alles was Euch einfällt. Erst später wird dann selektiert welche Funktionen tatsächlich in das Programm kommen und was man vielleicht für eine Pro-Version, oder ein Update aufbewahren möchte.

Ein weiterer wichtiger Schritt kommt jetzt. Jetzt werden so genannte Wireframes erstellt. In Wireframes wird skizzenhaft aufgezeichnet welche Elemente wo angeordnet werden und wie der Ablauf der Benutzer durch die Applikation statt findet. Im Filmgeschäft nennt man sowas auch Storyboard, was man bei der Entwicklung von Websites und Applikationen aber genau so brauchen kann.

Damit die Skizzen ein bisschen schöner daher kommen und einfacher erstellt werden können gibt es bereits einige Hilfsmittel. Beispielsweise eine Schablone oder eben der oben abgebildete Skizzenblock AppSketchbook.

Das AppSketchbook bietet die Möglichkeiten Ideen sofort zu skizzieren und hat Platz für 600 Skizzen in der Original iPhone-Grösse. Für 17 US-Dollar kann man nicht viel sagen.

Wireframe für iPhone App zeichnen

iphone-schablone

Im Webdesign zeichnet, oder erstellt man, vor dem Code schreiben ein Wireframe. Von Hand macht man ein paar Skizzen welche Elemente auf der Website wo angeordnet werden und wie das Design ungefähr aussehen könnte. Wer zeichnerisch nicht so begabt ist, der kann auch nützliche Tools verwenden, wie beispielsweise iPlotz. Ich persönlich bevorzuge aber die Zeichnungen von Hand. Ohne Computer und Strom kann man jederzeit, bei jeder Sonneneinstrahlung ein paar Ideen auf Papier bringen.

Die Firma Design Commission hat das auch schon erkannt und im letzten Jahr eine Schablone für das Webdesign veröffentlicht: Das DC Website Stencil Kit. Passend dazu gab es einen Block mit vorgedruckten Webbrowser-Fenster in welche man nun das Webdesign zeichnen konnte.

Die Design Commission hat das selbe Bedürfnis nun auch für die iPhone Entwickler entdeckt: Das iPhone Stencil Kit. Seit ein paar Wochen kann man die Design-Schablone bei DC bestellen. Allerdings wurde das Design-Büro derart überhäuft mit Bestellungen, dass sie Hilfe holen und die Käufer mit einer Lieferverzögerung vertrösten mussten.

Die knapp 17 US-Dollar teure Schablone enthält die typischen Bedienelemente von iPhone-Applikationen. Navigationsschaltflächen, Suche, Eingabefelder, Icons, Lautstärkeregler, und viele weitere Elemente sind in der Schablone untergebracht. Somit können Ideen nicht nur schnell zu Papier gebracht werden, sie sehen dann auch noch schön aus für eine Präsentation beim Kunden. Natürlich lassen sich die Skizzen dann mit etwas Farbe und und ein paar Betonungen veredeln.

Jetzt fehlt eigentlich nur noch die zündende Idee für eine noch nicht vorhandene, oder bessere iPhone Applikation…
Übrigens, passende Papiervorlagen kann man kostenlos bei Design Commission runter laden.