Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Workshop

Mobile First Design
• 
"

@angistudio #mobilefirst
Foto: www.flickr.com/photos/timo/11153618374/

16-01-2014

angi...
Bron: http://www.successfulworkplace.org/2013/02/11/marketer-dont-be-a-mobile-dinosaur/

angi studio
Bronnen:
https://i.ytimg.com/vi/ffRlDG4VshM/0.jpg
http://www.ngomonginggris.com/2013/06/eating-makan.html
https://www.yout...
Bron: http://www.flickr.com/photos/yourdon/3564918558/in/photostream/

angi studio
angi studio
2009
Interaction design
@angistudio

angi studio
2009
Interaction design
@angistudio

angi studio
2011
Interaction design
@angistudio

angi studio
2013
Interaction design
@angistudio

Scenario 1
Bestaande klant
E-mail uitnodiging n.a.v 5 jaar klant
Na inlog > Mijn ICS
...
Waarom Mobile First
Aan de slag
Mobile first voor jouw site

angi studio
Waarom Mobile First
Aan de slag
Mobile first voor jouw site

angi studio
Mobile First (2011)
by Luke Wroblewski

Mobiele context =
hét uitgangspunt voor ontwerp
Start met mobiel ontwerp

angi stu...
angi studio
Waarom Mobile first

Bereik meer mensen
77% van de wereldbevolking heeft een
mobiel apparaat en dat groeit hard

"

angi st...
Bereik meer mensen
Mobiel groeit veel harder dan desktop: nu 1,4 miljard gebruikers

79% gebruikt hun mobiel om goederen e...
Gebruik in Nederland
Gemiddeld
(nov. 2013)

4,3 mobiel apparaat per persoon ±9 per huishouden

Bron: http://www.marketingf...
Gebruik in Nederland
Nederland staat op nr. 1 in tabletgebruik Europa

Bron: http://www.marketingfacts.nl/images/research/...
Update jan 2013

Aantal Smartphones is over PC’s heen!

Bron: http://www.gfk.com/nl/news-and-events/press-room/press-relea...
angi studio
Waarom Mobile first
Mobiel biedt nieuwe mogelijkheden
door gebruik te maken van mobiele
technologieën zoals locatie, foto, ...
Waterpas
Bron: http://gizmodo.com/the-iphone-5s-motion-sensors-are-totally-screwed-up-1440286727

angi studio
Nieuwe mogelijkheden

Panorama

angi studio
Bron: http://www.stepbystep.com/how-to-use-bump-between-an-iphone-and-android-23111/

angi studio
Nieuwe mogelijkheden

Facetime

Navigatie

Kompa
s

angi studio
Nieuwe mogelijkheden

Siri

angi studio
Bron: http://www.flickr.com/photos/moon-goddess/2724685945/sizes/o/

angi studio
Bron:: http://72dpi.nl/projects/marktplaats/

angi studio
Bron: http://72dpi.nl/projects/marktplaats/

angi studio
Waarom Mobile first
Mobiel dwingt je te

focussen op de kern
van de zaak
"

angi studio
Focus

angi studio
angi studio
Focus

angi studio
angi studio
Focus op toptaken…

Bron: http://www.lukew.com/ff/entry.asp?1117

angi studio
Focus op content…

angi studio
Focus

36
Bron: http://xkcd.com/773/

angi studio
Focus

Mobile

37
Bron: http://xkcd.com/773/

angi studio
Bron: http://www.flickr.com/photos/earlysound/4490601295

angi studio
angi studio
Bron: http://static.lukew.com/MobileFirst_LukeW.pdf

angi studio
•  60 keer per dag
•  Elke 15 minuten
•  Gem. 2 uur en 41 uur

angi studio
angi studio
Context is bij mobiel
zeer belangrijk

angi studio
Waarom Mobile First
Aan de slag
Mobile first voor jouw site

angi studio
Aan de slag met ggdhaaglanden.nl
1 – Wie gebruikt de website
Wie is de gebruiker & Waarom op de site

2 – Behoeften
Welke ...
Aan de slag met ggdhaaglanden.nl
✔– Vooronderzoek
1 – Wie gebruikt de website
Wie is de gebruiker & Waarom op de site

2 –...
De case: Gemeentelijke Gezondheidsdienst

ggdhaaglanden.nl
Bewaakt, beschermt en bevordert de gezondheid

angi studio
1. Wie gebruikt de website
Wie is de gebruiker
•  Hij of zij, leeftijd, opleidingsniveau
•  Beroep
•  Andere relevante det...
Persona’s van Angi Studio

Reiziger

Moeder

Medewerker
Dak- en thuislozenloket

Directeur
basisschool

Huisarts

angi stu...
Voor de workshop houden we

Reiziger

Moeder

Medewerker
Dak- en thuislozenloket

Directeur
basisschool

Huisarts

angi st...
Reiziger – Scenario
Waarom en hoe op de site?

Hans woont in Delft en gaat binnenkort 1,5
maand rondreizen in Thailand, Vi...
2. Behoeften
Waar heeft Hans behoefte aan
•  Welke informatie
•  Wat wil hij kunnen doen
•  Wat heeft focus…

angi studio
3. Schetsen
Maak een schets, een prototype, van
de pagina waar Hans terecht komt

Wat ziet Hans op deze pagina,
wat kan hi...
Schetsen

Bron: www.rachelhinman.com/

angi studio
http://www.flickr.com/photos/anthonyarmendariz/4448219641

angi studio
De beste manier
om mobiel te ontwerpen is

direct en vaak
prototypen
angi studio
Tips
›  Denk aan ruimte
Een link of knop moet makkelijk aanklikbaar zijn met je duim/vinger

›  Leesbaarheid
Teksten kunne...
Hang jullie uitwerking op

58

angi studio
angi studio
Schetsen laten zien

angi studio
angi studio
Onze vertaling ggdhaaglanden.nl

angi studio
Reizigersvaccina,es

Ambulance

Burger
Professional

I&H

RSSG
Epidemiologie

Medische	
  Milieukunde
SMA

Informa,eloket	...
Bezoekers komen via
…en starten vaak niet op home

Ggdzhw.nl

69 % Google verkeer

Denhaag.nl/ggd

±80 % Google

angi stud...
Schermresolutie daklozen

angi studio
Dal in de avonduren en het weekend, piek tijdens de werktijden.
We hebben te maken met veel professionals hier.

angi stud...
angi studio
Van
Ik weet niet
wat OGGZ
betekent,
Milieu en
Gezondheid…is
dit voor mij?

Naar
Natuurlijk, ook
SOA en bezorgd
over kinder...
Hoe heeft Mobile First ons geholpen

angi studio
Focus op de taak
en duidelijke next steps

angi studio
angi studio
Mobile menu, focus op de toptaken

angi studio
angi studio
Wat betekent Mobile First voor
jouw desktop site?

angi studio
Voorbeelden sites beïnvloed door mobile
•  Rijksmuseum.nl – museum beleving online
•  9292.nl – een reisplanner
•  Medium....
angi studio
9292.nl

angi studio
angi studio
Mobile first tips
Focus, focus, focus..
1. Niet alles hoeft op één pagina, durf weg te laten
2. Geef ruimte om te ademen, g...
Vervolg-Workshop Responsive Design
Donderdag 20 maart van 15 tot 17 uur
• 
• 
• 
• 
• 
• 

Fluid grids en fluid layout
Flex...
Prochain SlideShare
Chargement dans…5
×

Workshop Mobile First Design in 3 stappen

1 047 vues

Publié le

Bij veel bedrijven komt de mobiele versie van een website of applicatie pas na de desktop versie, bij Angi Studio doen we de twee vaak tegelijk met responsive design.
Maar volgens Luke Wroblewski gaat dat niet ver genoeg. Hij heeft ‘Mobile First Design’ bedacht, een filosofie die benadrukt dat de mobiele context het uitgangspunt zijn wanneer je een online service of product ontwerpt.
Daarmee richt je je op de toekomst en kun je focus creëren, dat zorgt ook voor een betere desktop-versie.

Maar wat is Mobile First Design?
In deze 2 uur workshop zetten we samen met deelnemers in een mobile-first ontwerp neer.
Je leert denken vanuit een gebruikersperspectief en je inleven in een relevant gebruiksscenario. Deze workshop helpt je beter focus te creëren, niet alleen in het mobiele ontwerp, maar ook voor de desktop site.

Publié dans : Design
  • Soyez le premier à commenter

Workshop Mobile First Design in 3 stappen

  1. 1. Workshop Mobile First Design •  " @angistudio #mobilefirst Foto: www.flickr.com/photos/timo/11153618374/ 16-01-2014 angi studio angi studio
  2. 2. Bron: http://www.successfulworkplace.org/2013/02/11/marketer-dont-be-a-mobile-dinosaur/ angi studio
  3. 3. Bronnen: https://i.ytimg.com/vi/ffRlDG4VshM/0.jpg http://www.ngomonginggris.com/2013/06/eating-makan.html https://www.youtube.com/watch?v=j8lScHO2mM0&list=TLsdfBz7huEN9RTnkVl7OmEtoYC-7nFclS angi studio
  4. 4. Bron: http://www.flickr.com/photos/yourdon/3564918558/in/photostream/ angi studio
  5. 5. angi studio
  6. 6. 2009 Interaction design @angistudio angi studio
  7. 7. 2009 Interaction design @angistudio angi studio
  8. 8. 2011 Interaction design @angistudio angi studio
  9. 9. 2013 Interaction design @angistudio Scenario 1 Bestaande klant E-mail uitnodiging n.a.v 5 jaar klant Na inlog > Mijn ICS angi studio
  10. 10. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
  11. 11. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
  12. 12. Mobile First (2011) by Luke Wroblewski Mobiele context = hét uitgangspunt voor ontwerp Start met mobiel ontwerp angi studio
  13. 13. angi studio
  14. 14. Waarom Mobile first Bereik meer mensen 77% van de wereldbevolking heeft een mobiel apparaat en dat groeit hard " angi studio
  15. 15. Bereik meer mensen Mobiel groeit veel harder dan desktop: nu 1,4 miljard gebruikers 79% gebruikt hun mobiel om goederen en diensten aan te schaffen Bron: http://static.lukew.com/ MobileFirst_LukeW.pdf " angi studio
  16. 16. Gebruik in Nederland Gemiddeld (nov. 2013) 4,3 mobiel apparaat per persoon ±9 per huishouden Bron: http://www.marketingfacts.nl/images/research/deloitte-nl-global-mobile-consumer-survey.pdf angi studio
  17. 17. Gebruik in Nederland Nederland staat op nr. 1 in tabletgebruik Europa Bron: http://www.marketingfacts.nl/images/research/deloitte-nl-global-mobile-consumer-survey.pdf (nov. 2013) angi studio
  18. 18. Update jan 2013 Aantal Smartphones is over PC’s heen! Bron: http://www.gfk.com/nl/news-and-events/press-room/press-releases/paginas/aantal-smartphones-hoger-dan-aantal-computers.aspx angi studio
  19. 19. angi studio
  20. 20. Waarom Mobile first Mobiel biedt nieuwe mogelijkheden door gebruik te maken van mobiele technologieën zoals locatie, foto, audio, touch " " angi studio
  21. 21. Waterpas Bron: http://gizmodo.com/the-iphone-5s-motion-sensors-are-totally-screwed-up-1440286727 angi studio
  22. 22. Nieuwe mogelijkheden Panorama angi studio
  23. 23. Bron: http://www.stepbystep.com/how-to-use-bump-between-an-iphone-and-android-23111/ angi studio
  24. 24. Nieuwe mogelijkheden Facetime Navigatie Kompa s angi studio
  25. 25. Nieuwe mogelijkheden Siri angi studio
  26. 26. Bron: http://www.flickr.com/photos/moon-goddess/2724685945/sizes/o/ angi studio
  27. 27. Bron:: http://72dpi.nl/projects/marktplaats/ angi studio
  28. 28. Bron: http://72dpi.nl/projects/marktplaats/ angi studio
  29. 29. Waarom Mobile first Mobiel dwingt je te focussen op de kern van de zaak " angi studio
  30. 30. Focus angi studio
  31. 31. angi studio
  32. 32. Focus angi studio
  33. 33. angi studio
  34. 34. Focus op toptaken… Bron: http://www.lukew.com/ff/entry.asp?1117 angi studio
  35. 35. Focus op content… angi studio
  36. 36. Focus 36 Bron: http://xkcd.com/773/ angi studio
  37. 37. Focus Mobile 37 Bron: http://xkcd.com/773/ angi studio
  38. 38. Bron: http://www.flickr.com/photos/earlysound/4490601295 angi studio
  39. 39. angi studio
  40. 40. Bron: http://static.lukew.com/MobileFirst_LukeW.pdf angi studio
  41. 41. •  60 keer per dag •  Elke 15 minuten •  Gem. 2 uur en 41 uur angi studio
  42. 42. angi studio
  43. 43. Context is bij mobiel zeer belangrijk angi studio
  44. 44. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
  45. 45. Aan de slag met ggdhaaglanden.nl 1 – Wie gebruikt de website Wie is de gebruiker & Waarom op de site 2 – Behoeften Welke informatiebehoeften en elementen 3 – Schetsen Prototypen: hoe ziet het er uit angi studio
  46. 46. Aan de slag met ggdhaaglanden.nl ✔– Vooronderzoek 1 – Wie gebruikt de website Wie is de gebruiker & Waarom op de site 2 – Behoeften Welke informatiebehoeften en elementen 3 – Schetsen Prototypen: hoe ziet het er uit angi studio
  47. 47. De case: Gemeentelijke Gezondheidsdienst ggdhaaglanden.nl Bewaakt, beschermt en bevordert de gezondheid angi studio
  48. 48. 1. Wie gebruikt de website Wie is de gebruiker •  Hij of zij, leeftijd, opleidingsniveau •  Beroep •  Andere relevante details Waarom – Scenario •  Waarom komt deze persoon op de GGD site, hoe? •  Met welke vraag, welk doel? " angi studio
  49. 49. Persona’s van Angi Studio Reiziger Moeder Medewerker Dak- en thuislozenloket Directeur basisschool Huisarts angi studio
  50. 50. Voor de workshop houden we Reiziger Moeder Medewerker Dak- en thuislozenloket Directeur basisschool Huisarts angi studio
  51. 51. Reiziger – Scenario Waarom en hoe op de site? Hans woont in Delft en gaat binnenkort 1,5 maand rondreizen in Thailand, Vietnam en Malaysia. Via e-mail wordt hij door het reisbureau herinnerd aan de benodigde vaccinaties voor tropische bestemmingen. Hij zit in de trein en via zijn mobiel zoekt hij op ‘reisvaccinatie’ in Google. Hij wil snel een afspraak maken. angi studio
  52. 52. 2. Behoeften Waar heeft Hans behoefte aan •  Welke informatie •  Wat wil hij kunnen doen •  Wat heeft focus… angi studio
  53. 53. 3. Schetsen Maak een schets, een prototype, van de pagina waar Hans terecht komt Wat ziet Hans op deze pagina, wat kan hij er doen? angi studio
  54. 54. Schetsen Bron: www.rachelhinman.com/ angi studio
  55. 55. http://www.flickr.com/photos/anthonyarmendariz/4448219641 angi studio
  56. 56. De beste manier om mobiel te ontwerpen is direct en vaak prototypen angi studio
  57. 57. Tips ›  Denk aan ruimte Een link of knop moet makkelijk aanklikbaar zijn met je duim/vinger ›  Leesbaarheid Teksten kunnen niet te klein zijn ›  Wat heeft nadruk Dingen die je direct naar voren wilt hebben, geef dat aan via bijv. arcering of vetter maken of geef het extra ruimte. ›  Gebruik echte teksten Probeer in ieder geval kopjes en labels te benoemen " 57 angi studio
  58. 58. Hang jullie uitwerking op 58 angi studio
  59. 59. angi studio
  60. 60. Schetsen laten zien angi studio
  61. 61. angi studio
  62. 62. Onze vertaling ggdhaaglanden.nl angi studio
  63. 63. Reizigersvaccina,es Ambulance Burger Professional I&H RSSG Epidemiologie Medische  Milieukunde SMA Informa,eloket  dak-­‐   en  thuislozen Inspec,e  Kinderopvang Gezondheidsonderzoek Forensische   geneeskunde OGGZ Technische  hygiënezorg angi studio
  64. 64. Bezoekers komen via …en starten vaak niet op home Ggdzhw.nl 69 % Google verkeer Denhaag.nl/ggd ±80 % Google angi studio
  65. 65. Schermresolutie daklozen angi studio
  66. 66. Dal in de avonduren en het weekend, piek tijdens de werktijden. We hebben te maken met veel professionals hier. angi studio
  67. 67. angi studio
  68. 68. Van Ik weet niet wat OGGZ betekent, Milieu en Gezondheid…is dit voor mij? Naar Natuurlijk, ook SOA en bezorgd over kindermishandeling… ja, belangrijk! angi studio
  69. 69. Hoe heeft Mobile First ons geholpen angi studio
  70. 70. Focus op de taak en duidelijke next steps angi studio
  71. 71. angi studio
  72. 72. Mobile menu, focus op de toptaken angi studio
  73. 73. angi studio
  74. 74. Wat betekent Mobile First voor jouw desktop site? angi studio
  75. 75. Voorbeelden sites beïnvloed door mobile •  Rijksmuseum.nl – museum beleving online •  9292.nl – een reisplanner •  Medium.com –een optimale leeservaring angi studio
  76. 76. angi studio
  77. 77. 9292.nl angi studio
  78. 78. angi studio
  79. 79. Mobile first tips Focus, focus, focus.. 1. Niet alles hoeft op één pagina, durf weg te laten 2. Geef ruimte om te ademen, groot is goed 3. Maak het extra waardevol en relevant voor de gebruiker angi studio
  80. 80. Vervolg-Workshop Responsive Design Donderdag 20 maart van 15 tot 17 uur •  •  •  •  •  •  Fluid grids en fluid layout Flexibele afbeeldingen good practices Media queries wat kun je beinvloeden Ontwerpen voor verschillende input typen Responsive content Responsive typografie en responsive kleur" Invite-only event. angi studio

×