ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten
WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend: OH 113 Middag: HT 900 dinsdag 30 september hele dag OH 111 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 Flexibel, geschikt voor prototypen en bouwen apps en websites Kan complexe interacties aan axure.com Licentie beschikbaar op aanvraag via docent Trial licentie 30 dagen ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 7
AXURE Eenvoudig en snel te leren Uitvoer HTML: Geschikt voor plaatsen op website Verder uitwerken (buiten Axure om) mogelijk axure.com Licentie beschikbaar op aanvraag via docent axure.com/learn ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 8
AXURE ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 9
HTML 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). Adobe CC bundle student-licentie bij Surfspot.nl 132 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 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 Adobe Flash Professional CC Onderdeel Creative Cloud Bundle ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 12
HTML LAYOUT: DIV ELEMENTEN DENK IN BLOKKEN <div> <div><!-- boven --> </div> <div> </div> <div><! onder </div> --> </div> <div> </div> </div> <div><! onder --> </div> </div> ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 13
HTML LAYOUT: DIV ELEMENTEN DENK IN BLOKKEN Stijl: width: 300px; /* vaste breedte */ margin: 10px auto; /* centreren */ height: 300px; width: 100%; height: 300px; HTML: <div> <div><!-- boven --> </div> <div><! onder --> </div> </div> learnlayout.com ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 14
HTML: STATISCHE INTERFACE Na layout: blokken vullen met elementen Elementen positioneren Elementen afwerken (kleur, stijl) Stijl: button { border-radius: 5px; /* ronde hoeken */ background-color: grey; /* grijze kleur */ border: 2px solid grey; /* dunne grijze rand */ } HTML: <!-- 4 knoppen in een lijst --> <ul> <li><button>knop</button></li> <li><button>knop</button></li> <li><button>knop</button></li> <li><button>knop</button></li> </ul> ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 15
HTML: PROGRAMMEREN INTERACTIE JAVASCRIPT/JQUERY <div class="knoppen"> <button id="b1"></button> </div> Programma: event <div id="hoofdtekst">welkom bij IO bank,...</div> $('.knoppen button').click(function() { id=$(this).attr('id'); $('#hoofdtekst').html("je klikte op knop "+id); }); Selector ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 16
AAN DE SLAG 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 Volg tutorial op vanslooten.com/ovip Bouw eigen prototype ONTWERPEN VAN INTERACTIEVE PRODUCTEN 22-9-2014 17
DEMO S EN HANDLEIDINGEN: VANSLOOTEN.COM/OVIP