search home list

iOS 7 App Prototyping

Wie die Mondlandung im Jahr 1969 haben wir am 10. Juni dieses Jahres die Vorstellung von iOS 7 gespannt mitverfolgt, denn wir stecken gerade mitten im Konzeptionsprozess für eine iOS App, die dann unter dem neuen Betriebsystem laufen wird.

Schritt 1: Sketching

Da wir bis dahin nicht wussten, wie genau iOS 7 aussehen wird haben wir in der ersten Phase, beim Sketching, auf die alten iOS 6 Stile zurückgegriffen und in Omni Graffle die ersten Screens entworfen.

iOSApp Sketching Screenshot

Schritt 2: Prototyping

Die für dieses Thema interessantere Designphase war aber das Prototyping. Hierfür stehen einem für iOS Apps viele Möglichkeiten offen, beispielsweise mit dem Quartz Composer von Apple zu designen. Nach reiflichen Überlegungen haben wir uns dann aber dafür entschieden den Prototyp mit HTML, CSS und JavaScript zu entwickeln.

Grundlage für unseren Prototypen war das Framework Ratchet, das die notwendigsten UI Komponenten von iOS mitliefert. Auch mit im Paket ist ein JavaScript, das die einzelnen HTML Dateien miteinander verbindet und das auf solch elegante Weise, dass es sich anfühlt wie eine native App.

Für alle SASS Fans gibt es von Stephen Way eine Compass Version von Ratchet.

Da Ratchet natürlich noch im iOS 6 Stil geliefert wurde, mussten wir alle Komponenten an das Design von iOS7 anpassen. Dazu haben wir uns durch die neuen iOS Human Interface Guidelines und den iOS 7 Transition Guide (Verfügbar mit einem Apple Developer Account) gearbeitet. Zusätzlich dazu haben wir weitere Komponenten, die wir eigens für unsere App konzipiert hatten, und nicht Standard unter iOS sind, eingefügt. Im Zuge dieses Prozesse haben wir gleich vieles vom normalen Box Model auf Flexbox umgebaut. Zu den Erfahrungen mit Flexbox folgt demnächst ein eigener Blogbeitrag.

iOSApp Prototyp

Vorteile

Nachteile

Fazit

Diese Form des Prototyping eignet sich hervorragend um einzelne UI Komponenten zu testen aber auch um ganze Szenarien damit abzubilden.

Show all articles

What do you think?