ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten
WORKSHOP INTERACTIEF PROTOTYPE BOUWEN 2 dagen: dinsdag 23 september Ochtend: OH 113 Middag: HT 900
Ontwerp Keuze tool/techniek
dinsdag 30 september hele dag OH 111
Maken layout Programmeren interactie
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
2
DOEL WORKSHOP Introductie van software tools die gebruikt kunnen worden voor het maken van een GUI / interactieve product simulatie Hulp bij plan van aanpak en selecteren van geschikte tools voor het bouwen van de simulatie Kennismaking gebruik HTML Ondersteuning bij het bouwen
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
3
ONTWERP: PLAN VAN AANPAK
Denk na over werkwijze en geschiktheid tool
Wat moet er getest worden? Wat moet gedemonstreerd worden? Aan wie? Welke taken worden uitgevoerd Dynamische vs statische test Niveau van realisme Gewenste interactie & animatie Grafische presentatie
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
4
ONTWERP: LAYOUT
Ook van prototype/demo maak je een ontwerp!
Schetsen Opzet voor layout Flowchart, paper prototype
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
5
KIES EEN TOOL
Axure Basis editor Adobe Dreamweaver Adobe Muse Adobe Flash
HTML
Browser, tablet, telefoon
Andere tools (niet ondersteund): Balsamiq Mockups, Mockingbird, InVision, Justinmind, Solidify, SketchFlow ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
6
AXURE axure.com Flexibel, geschikt voor prototypen en bouwen apps en websites
Licentie beschikbaar op aanvraag via docent
Kan complexe interacties aan
Trial licentie 30 dagen
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
7
AXURE axure.com Licentie beschikbaar op aanvraag via docent
Eenvoudig en snel te leren Uitvoer HTML: Geschikt voor plaatsen op website
Verder uitwerken (buiten Axure om) mogelijk
axure.com/learn ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
8
AXURE
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
9
HTML Adobe CC bundle student-licentie bij Surfspot.nl €132
Tools: ‘Met de hand’: editor + browser ‘Grafisch’: Adobe Muse Beide: Adobe Dreamweaver Voor/nadelen: Huidige standaard voor web en apps Leerdoel voor Website Design (2e kwartiel).
Javascript+JQuery geeft goede animatiemogelijkheden. Mogelijkheid door ontwikkelen naar doel-applicatie ▼ Tijdintensief om interface op te zetten/aan te passen. ▼ Zelf code schrijven (of zoeken).
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
10
HTML: EDITORS
Notepad++: goede editor met syntax-highlighting, HTML preview (via plugin) Brackets.io: Editor van Adobe met ingebouwde live preview
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
11
FLASH Adobe Flash Professional CC Onderdeel Creative Cloud Bundle
Voor/nadelen Veel vrijheid in animaties
Library met basis interactie en elementen Veel mogelijk met basis code Dynamisch bewerkbaar prototype
▼ Is verouderd product ▼ Tijdlijn gebaseerd: daar omheen werken is lastig ▼ Leercurve programmeren Action Script ▼ Animatie-focus sluit niet zo aan bij product applicaties
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
22-9-2014
12
HTML LAYOUT: DIV ELEMENTEN DENK IN BLOKKEN
