How to Design for Mobile

696 views

Published on

The session gives a short overview of the evolution of mobile UI and focuses on new challenges around designing rich applications for smaller screens as well as having a user centric design approach. It outlines the design process and showcases some personal work examples. The talk is directed to everyone who wants to get an insight in a mobile design approach.

Published in: Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
696
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

How to Design for Mobile

  1. 1. HOW TODESIGN FORMOBILEAngela Naegele, GGM Berlin, Sept 14, 2012
  2. 2. MOBILE = DESIGN FOR SMALL SCREENSAngela Naegele, GGM Berlin, Sept 14, 2012
  3. 3. The Evolution of the Mobile Phone Keyle Bean, Mobile Evolution http://www.kylebean.co.ukAngela Naegele, GGM Berlin, Sept 14, 2012
  4. 4. 5 Way Navigation +2 Established Standard Nokia 7650 Navigation Buttons, The Symbian Dev Zone, http://www.wirelessdevnet.com/Angela Naegele, GGM Berlin, Sept 14, 2012
  5. 5. iPhone The Start Of Modern Mobile Design The Evolution of Cell Phone, iPhone 2G http://www.webdesignerdepot.comAngela Naegele, GGM Berlin, Sept 14, 2012
  6. 6. WHAT IS NEXT?Angela Naegele, GGM Berlin, Sept 14, 2012
  7. 7. Playful Approaches Clear App Clear iOS Application, review on http://www.appsafari.com/notes/18518/clear/Angela Naegele, GGM Berlin, Sept 14, 2012
  8. 8. WHY IS MOBILEIMPORTANT?Angela Naegele, GGM Berlin, Sept 14, 2012
  9. 9. Picture Nokia, Stephan Scheunig CONTEXT USER CONTENT Angela Naegele, GGM Berlin, Sept 14, 2012
  10. 10. User-centered Design Approach Jesse James Garrett, The Elements of User Experience http://www.jjg.net/elements/pdf/elements_ch02.pdfAngela Naegele, GGM Berlin, Sept 14, 2012
  11. 11. 1. STRUCTURE: MOBILE INFORMATION ARCHITECTUREAngela Naegele, GGM Berlin, Sept 14, 2012
  12. 12. Limit opportunities. Keep it simple. temp13rec.Angela Naegele, GGM Berlin, Sept 14, 2012 http://www.flickr.com/photos/rehvonwald/3050285057/
  13. 13. 1st WAGON NEWS – URBAN NEWSPAPER SHARINGAngela Naegele, GGM Berlin, Sept 14, 2012
  14. 14. Product DefinitionAngela Naegele, GGM Berlin, Sept 14, 2012
  15. 15. IA is a bird eye‘s view.Own Projectin cooperation with Michael BeckUrban Newpaper Sharing AppAngela Naegele, GGM Berlin, Sept 14, 2012
  16. 16. 2. SKELETON: WIREFRAMES & USER FLOWSAngela Naegele, GGM Berlin, Sept 14, 2012
  17. 17. Wireframes How Are Structure & Priorities?Own Projectin cooperation with Michael BeckUrban Newpaper Sharing App T-Mobile 8:35 PM Service Name Sueddeutsche Zeitung angeboten von Angela, vor 30 Sek S7 Warschauer Str nach S7 Alexanderplatz Noch wie neu. Frankfurter Allgemeine Zeitung angeboten von Damian, vor 1 Min U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz Berliner Morgenpost angeboten von Martin, vor 2 Min U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz Financial Times Deutschland angeboten von Michi, vor 4 Min U2 Stadtmitte nach U2 Eberswalder Straße Toller Artikel über Jogi Löw. Liste Filter ProfilAngela Naegele, GGM Berlin, Sept 14, 2012
  18. 18. User Flows How Does It Behave?Own Projectin cooperation with Michael BeckUrban Newpaper Sharing App T-Mobile 8:35 PM T-Mobile 8:35 PM T-Mobile 8:35 PM T-Mobile 8:35 PM Service Name Angebot aufgeben Angebot veröffentlichen Gespeicherte Angebote Von S Schönhauser Allee Sueddeutsche Zeitung Von S Schönhauser Allee nach S Warschauer Straße angeboten von Angela, vor 30 Sek S7 Warschauer Str nach S7 Alexanderplatz nach S Warschauer Straße Sueddeutsche Zeitung Noch wie neu. Sueddeutsche Zeitung Als Favorit gespeichert Kommentar hinzufügen Frankfurter Allgemeine Zeitung angeboten von Damian, vor 1 Min Von S Schönhauser Allee Angebot wurde U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz nach U Stadtmitte erfolgreich veröffentlicht. Berliner Morgenpost Sueddeutsche Zeitung angeboten von Martin, vor 2 Min Kommentar hinzufügen U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz Financial Times Deutschland angeboten von Michi, vor 4 Min U2 Stadtmitte nach U2 Eberswalder Straße Toller Artikel über Jogi Löw. Neues Angebot erstellen Angebot veröffentlichen Liste Filter Profil USE CASE USE CASE “As a user I want to make an offer “As a user I want to save favorite to sell my newspaper.“ routes to complete my task faster.“Angela Naegele, GGM Berlin, Sept 14, 2012
  19. 19. 3. SURFACE: VISUAL DESIGNAngela Naegele, GGM Berlin, Sept 14, 2012
  20. 20. Who Do You Want To Be?einfach, schnell, gebraucht, zuverlässig, solide, seriös,unterstützend, informativ, evolutionär, innovativ, live,fortschrittlich, täglich, nicht verstaubt, intuitiv, relevant,haptisch, mobil, aktuell, jetzt, qualitativ hochwertigeInhalte, Austausch, News, Diskussion, zirkulieren, klar,dynamisch, wiederkehrend, persönlich, effektiv, flexibel,unterwegs, glaubwürdig, professionell Angela Naegele, GGM Berlin, Sept 14, 2012
  21. 21. What Are The Main Elements? dynamisch sachlich, emotional,zuverlässig evolutionär statischAngela Naegele, GGM Berlin, Sept 14, 2012
  22. 22. Use The Basic Design ElementsAngela Naegele, GGM Berlin, Sept 14, 2012
  23. 23. Coming Soon …Angela Naegele, GGM Berlin, Sept 14, 2012
  24. 24. Thank You! www.angela-naegele.deAngela Naegele, GGM Berlin, Sept 14, 2012

×