ONTWERPEN VAN INTERACTIEVE PRODUCTEN

Maat: px

Weergave met pagina beginnen:

Download "ONTWERPEN VAN INTERACTIEVE PRODUCTEN"

Sandra de Koning
8 jaren geleden
Aantal bezoeken:

1 ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten

2 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

Ochtend: OH 113 Middag: HT 900 dinsdag 30 september hele dag

3 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

selecteren van geschikte tools voor het bouwen van de simulatie Kennismaking

4 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

Welke taken worden uitgevoerd Dynamische vs statische test Niveau van realisme

5 ONTWERP: LAYOUT Ook van prototype/demo maak je een ontwerp! Schetsen Opzet voor layout Flowchart, paper prototype ONTWERPEN VAN INTERACTIEVE PRODUCTEN

6 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

ondersteund): Balsamiq Mockups, Mockingbird, InVision,

7 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

com Licentie beschikbaar op aanvraag via docent Trial

8 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

9 AXURE ONTWERPEN VAN INTERACTIEVE PRODUCTEN

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).

10 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

Javascript+JQuery geeft goede animatiemogelijkheden.

11 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

12 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

lastig Leercurve programmeren Action Script Animatie-focus sluit niet zo aan bij product applicaties

13 HTML LAYOUT: DIV ELEMENTEN DENK IN BLOKKEN <div> <div> </div> <div> </div> <div><! onder </div> --> </div> <div> </div> </div> <div><! onder --> </div> </div> ONTWERPEN VAN INTERACTIEVE PRODUCTEN

14 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> </div> <div><! onder --> </div> </div> learnlayout.com ONTWERPEN VAN INTERACTIEVE PRODUCTEN

height: 300px; HTML: <div> <div><!-- boven --> </div> <div><!

15 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:  <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

HTML: PROGRAMMEREN INTERACTIE JAVASCRIPT/JQUERY <div class="knoppen"> <button id="b1"></button> </div> Programma: event <div id="hoofdtekst">welkom bij IO bank,...</div> $('.

16 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

..</div> $('.knoppen button').click(function() { id=$(this).

17 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

Welke taken worden uitgevoerd Dynamische vs statische test Niveau van realisme Gewenste

18 DEMO S EN HANDLEIDINGEN: VANSLOOTEN.COM/OVIP

Vergelijkbare documenten

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.