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.