iOS-Apps für Designer
"when technology gets out of the way..."

Matthias Wenz
• Software Entwickler bei 1&1
• Java, große Web-Anwendungen, ...
• Web und Mobile
• "Consulting", freie Entwicklung
• Berufsfreier UX-Designer, Fotograf,
Mountainbiker

• Technisches Blabla
• Code-Rätsel, ...
• App Store Details, ...
... gibt's heute nicht.

Stattdessen
• Was sind Apps?
• Welche App-Typen gibt es?
• Was ist sinnvolles App-Design?
• Welche Werkzeuge gibt es?

Was ist denn eine App?

App
• Mobil
• Interaktiv / "Immersiv"
• Smartphones
• Tablets

Typen
• Kommunikation (Mail, SMS, IM)
• Web
• Tools
• Clients für bestehende Dienste
• Publikationen/Magazine/...
• Spiele

"Das ist doch nur
Spielerei."
oder?

Eine gute App...
• erfüllt einen Zweck sehr gut.
• ist intuitiv zu bedienen.
• bietet herausragendes Design.
• überrascht durch neue Ideen.

Design
• Nicht nur Beiwerk - essentielle Komponente
• UI → was der Benutzer sieht → das Produkt

"[...] the iPad becomes the app you're using.
[...] You're using the app, whatever it may be,
and while you're doing so, the iPad is that app.
Switch to another app and the iPad becomes
that app."
(Adam C. Engst http://tidbits.com/article/11152)

Design
for "Unique Devices"

iPhone
• "ultra-mobil"
• häufige, kurze Benutzung
• Multitouch
• kleiner Screen (3,5")

Design für iPhone
• Controls "fingergroß" machen
• Bedienung von unterwegs bedenken
• Textgröße
• Navigationshierarchie beachten
• Einstellungen merken
• Texteingabe vermeiden

iPad
• mobil (3G/WLAN)
• längere Nutzung
• Multitouch
• großer Screen (9,7")

Design für iPad
• "Real World"-Metaphern
• Screen erlaubt komplexere Abläufe
• beide Orientations berücksichtigen

Wie macht man eine App?

Die Idee
oder
"Das gibt es doch schon!"

Und?
• Keine Lösung ist für jeden optimal.
• Auch nicht die von Apple.
• Wie viele "Todo-Apps" gibt es im App Store?

Die Idee greifen

Die Idee greifen
Application Definition Statement:
• Definiert die komplette App.
• 1-2 Sätze
• Grundfeature, Nutzergruppe, ...

Werkzeuge

Wireframing
http://www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

GUI Framework
http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/
http://www.teehanlax.com/blog/ipad-gui-psd-version-2/

Also...
• Was sind Apps?
• Design in Apps
• Unterschiede iPhone/iPad
• Werkzeuge

Zu guter letzt

Animation
• animare → "Leben einhauchen"
• "Lebendiger Charakter" der Apps
• Überall in iOS zu finden
• Sinnvolles Maß beachten!

Mehr?
iOS Human Interface Guidelines
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/
iOS Application Programming Guide
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/

Noch mehr?
www.bowstreet.de
→ Blog
→ diese Präsentation
@bowstreetde