Download - Rapid prototyping 03 mrt 2016 screen
Datum: 3 maart 2016 Spreker: Marnix Bras
Webinar Rapid Prototyping
Inhoudsopgave
Is design een truc?
What is… What if… What wows… What works !
Prototyping tools
Samenvatting
Vragen en meer informatie
Evaluatie
Marnix Bras
uitvinder
architectuur
design
user experience
Is design een truc
Is design een truc
User Experience design
Hier gaat design thinking over in het verzinnen van de oplossing
• onderzoek
• brainstorm
• schetsen
• storyboard
• persona’s (doelgroep)
• draadmodellen
• usability testen
Design is een methode
Geen black magic
Maar eenvoudige
stappen
Ontwar de knoop
What is
> Research
What if
> Concepting
What wows
> Prototyping
What works
> testing
What is
Elke goede website of app begint met een research:
• wat is het probleem dat ik wil oplossen?
• wat is de ervaring die de bezoeker met krijgen
• is er data?
• observeer en beschrijf
• verzamel gerelateerde ideeën
• bepaal je publiek
What if
Verbeelding leidt tot concepten
• Brainstormen
• Schetsen
• Wireframing
Brainstorm
Brainstorms
• elk goed idee krijgt ruimte door eerst 9 andere toe te laten
• visualiseer
• associeer
• http://personalexcellence.co/blog/brainstorming-techniques/
Lotus Blossom
Meer tips o.a. op :
• http://personalexcellence.co/blog/brainstorming-techniques/
Schetsen
Verbeeld ideeën
• gebruik geen gum
• gebruik lekker stevige lijnen
• gebruik slechts enkele kleuren
• maak meerdere varianten
Schetsen
Gebruik mock-ups als kader
• Maar laat je niet inkaderen
• Maak ook schetsen van de app of website in gebruik
Wireframing
Draadmodellen
• pen en papier
• paper prototyping
• low-fi
• uitwerking
• klikmodel
Wireframing (2)
Pen en papier
• van schets naar draadmodel
• gebruik templates
• pas op voor details
Wireframing (3)
Paper prototyping
• Knip en plak de losse design elementen
• Schuif en animeer
• Test het op een gebruiker
Wireframing (4)
Low fi
• Balsamique
• Powerpoint
• Indesign
Wireframing (5)
Uitwerking:
• grafisch design
• “kleur” de elementen in
• let op Gestalt principes
• volg de webstandaarden (of juist niet)
• gebruik mentale modellen
Wireframing (5)
Uitwerking:
• grafisch design
• “kleur” de elementen in
• let op Gestalt principes
• volg de webstandaarden (of juist niet)
• gebruik mentale modellen
Wireframing (6)
Klikmodel
• interactief wireframe
• wel of geen detaillering
• tools:
• Balsamique
• Axure
• Invision
• Mockflow
• Adobe Comp
• Codepen (html)
What wows
Kijk naar de wow-factor
• bouwen
• aanscherpen
• evalueren
What works
Verbeelding leidt tot concepten
• experimenteren
• testen
• implementeren
What works (2)
Implementeren
• AB test
• Pilot
Tools
Wireframing
• Balsamique
• Axure
• Visio
• Omnigraffle
• Invision app
• HTML (bijv met codepen)
• Pen en papier
• http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
Samenvatting
Is design een truc? > een methode
What is… > research, data, observatie, doelgroep
What if… > Brainstormen, Schetsen, Wireframing
What wows… > bouwen, aanscherpen, evalueren
What works ! > experimenteren, testen, implementeren
Prototyping tools > voor en nadelen
Vragen en meer informatie
Vragen van deelnemers
Meer informatie:
Marnix Bras
Senior User Experience Design Consultant
Capgemini Netherlands | Utrecht
www.capgemini.com/dcx
www.linkedin.com/in/marnixbras
Evaluatie
Dank voor deelname aan dit webinar.
Er staat in het tabblad een evaluatie voor u klaar. Wij zouden het erg waarderen als u ons uw feedback geeft door deze 4 korte vragen in te vullen.