Van persona s en scenario s naar wireframes. Lay-out met grid

Maat: px
Weergave met pagina beginnen:

Download "Van persona s en scenario s naar wireframes. Lay-out met grid"

Transcriptie

1 Interaction Design Van persona s en scenario s naar wireframes Lay-out met grid Louis Klomp LHJ.Klomp@windesheim.nl X8.10 / X7.96 Tel ( ) 9908

2 Wat gaan we doen deze week? Persona s Scenario s Conceptueel Model Doelgroep Behoeftes Wireframe Requirements

3 Wat zijn de behoeftes? Voor het vaststellen van specificaties, eisen en wensen eerst nagaan wat de behoeftes van de gebruikers zijn Kijk naar bestaande activiteiten: hun context welke informatie ze nodig hebben? met wie wordt samengewerkt bij de activiteiten? waarom worden ze nu zo uitgevoerd?...

4 Behoeftes van je persona Persona s Doelgroep Behoeftes

5 Wat zijn requirements? Globale specificaties, eisen en wensen Ook wel Programma van Eisen (PvE) genoemd Verschillende soorten

6 Je moet er mee kunnen bellen

7 Wie heeft er toegang tot welke data?

8 Waar staat de interface?

9 Gebruikers, wie zijn het? Kenmerken: vaardigheden, achtergrond, houding tegenover computers Systeemgebruik: naief, expert, frequent, incidenteel naief: stapsgewijs (bij de hand nemen), vereenvoudigde, duidelijke informatie expert: flexibiliteit, snelle toegankelijkheid, krachtigheid frequent: short cuts incidenteel: heldere instructies, bv. menu-paden

10 Gebruiksvriendelijk?

11 Usability O.a: Effectiviteit, Leerbaarheid, Efficiëntie, Snelheid van gebruik, Flexibiliteit, Tevredenheid

12 Soorten requirements Functionele requirements Data requirements Contextuele requirements Gebruikers Usability

13 Requirements en scenario s Persona s Scenario s Conceptueel Model Doelgroep Behoeftes Requirements

14 Hoe past alles in elkaar? Scenario s welke informatie-uitwisseling (tussen gebruiker en product) is nodig om met die objecten te kunnen doen wat de gebruiker wil doen Conceptueel model wat zijn de begrippen, objecten waarmee gewerkt wordt

15 Hoe past alles in elkaar? Scenario s welke informatie-uitwisseling (tussen gebruiker en product) is nodig om met die objecten te kunnen doen wat de gebruiker wil doen Conceptueel model wat zijn de begrippen, objecten waarmee gewerkt wordt

16 Hoe past alles in elkaar? Scenario s welke informatie-uitwisseling (tussen gebruiker en product) is nodig om met die objecten te kunnen doen wat de gebruiker wil doen Conceptueel model wat zijn de begrippen, objecten waarmee gewerkt wordt

17 Schermontwerp Conceptueel Model Functies over schermen verdelen Scenario s en conceptueel model als startpunt Voor elke stap een apart scherm? Te veel simpele schermen frustreren Houd informatie beschikbaar

18 Van scenario naar schermen Per scenario vaststellen: Conceptueel Model Frequentie snel bereikbare functies, efficientie, snel corrigeerbaar Belang zeer goede feedback, gevoel van zekerheid, effectiviteit belangrijke volgordes structuur, hoofdmenu, diepere lagen, sprongen tussen menu s, links prioriteit van usability en user experience requirements

19 Hoe ga je van je scenario naar een conceptueel model? Elk scenario is pad door de interface structuur Trek lijnen tussen de regels van je scenario waar het verhaal overgaat naar een nieuw scherm Markeer de werkwoorden en zelfstandignaamwoorden Bepaal voor elk scherm de getoonde informatie en de bedieningselementen Teken een stroomdiagram van de schermen en hun onderlinge verbanden

20

21

22

23 Interface-structuur Conceptueel Model Per scherm: welke informatie (welke objecten) moeten er getoond worden? inhoudelijke objecten (uit je conceptuele model) navigatie-objecten (om te bewegen door de structuur; bijvoorbeeld back ) Van waar kun je naar waar?

24 Hoe ontwerp je een interfacestructuur? Conceptueel Model je op w el k sc he r m? H oe ve el fu nc tie s/i nf or m ati e pe r1 sc he r W at ko mt op w el ke pl ek? ( W ire fr a mi ng ) 2

25 Hoe ontwerp je een interfacestructuur? Conceptueel Model Beginnen vanuit scenario s Ieder scenario moet een pad worden door die interface structuur Begin met een structuur te tekenen of te leggen met kaartjes (Post-Its). Scenario s doorspelen (eerst zelf, later met gebruikers: prototyping)

26 Wireframing Persona s Scenario s Conceptueel Model Doelgroep Behoeftes Wireframe Requirements

27 Wireframing Wireframe je op w el k sc he r m? H oe ve el fu nc tie s/i nf or m ati e pe r1 sc he r W at ko mt op w el ke pl ek? ( W ire fr a mi ng ) 2

28 Wireframing of wireframing? Wireframe

29

30 Interaction Design Ontwerpen met een Grid

31

32

33

34 Waarom een grid? Proportionele en overzichtelijke indeling Relationeel en systematisch denken tijdens het designen Betere controle over het design De bezoeker zal de website aangenamer ervaren en makkelijker kunnen lezen.

35 Gridbreedte Ontwerpen voor 1024x768 (januari 2012) Kleiner dan 1024: Tussen 1024 en 1440: Groter dan 1680: 2,1% 76,5% 21,4% 1024 scrollbar = +/_ 1007pixels 960 is deelbaar door 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.

36 12 Kolommen

37 2x6, 3x4

38 Tip Maak de gutter (de geul tussen 2 kolommen) een oneven aantal pixels breed, dan kun je een evt. lijn precies in het midden plaatsen Voor een breedte van 960 pixels en 12 kolommen kom je uit op Kolom + geul = 80 pixels Stel geul = 17 pixels kolom = 63 pixels 4 Kolommen = = 303 pixels Enz.

39 Baseline grid De baseline grid wordt gebruikt om verticale harmonie te brengen in de teksten. De onderkant van elke regel tekst samenvalt met de horizontale lijnen bepaald door de lineheight van de tekst. Ideaal is een lineheight die 150% is van de tekstgrootte. Stel je gebruikt een font met een standaard tekstgrootte van 12px. Vermenigvuldig die 12 met 1.5 en je krijgt een lineheight van 18px die tevens jou baseline grid bepaalt.

40

41

42

43

44 Opdracht week 4 Studie-app voor een tablet Bepaal (en beargumenteer) per categorie de requirements Stel per scenario het belang en de frequentie vast. Verdeel de scenario s in schermen Bepaal per scherm de inhoudelijke en de navigatie elementen Maak een flowchart Maak een wireframe ontwerp van de schermen

45 Woensdag vanaf 14:30 uur Intekenlijst bij X8.10

Card sorting Sitemap Use case. Wireframes Schermontwerpen Stijlgids. Niet in les gedaan! Via je einddocument. Verkennen. Genereren.

Card sorting Sitemap Use case. Wireframes Schermontwerpen Stijlgids. Niet in les gedaan! Via je einddocument. Verkennen. Genereren. Hoorcollege 4 Verkennen Genereren Evalueren Communiceren Card sorting Sitemap Use case Wireframes Schermontwerpen Stijlgids Niet in les gedaan! Via je einddocument Schermontwerpen Pauze Stijlgids Feedback

Nadere informatie

onderzoek ontwerp realisatie implementatie

onderzoek ontwerp realisatie implementatie Usability testing onderzoek ontwerp realisatie implementatie onderzoek concept ontwerpen prototype realisatie & specificatie onderzoek ontwerp realisatie implementatie vandaag onderzoek ontwerp realisatie

Nadere informatie

Screen Design Puntgave Pixels

Screen Design Puntgave Pixels Screen Design Puntgave Pixels Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design Jasper Schelling j.a.schelling@hr.nl docent.cmd.hro.nl/scjas Welkom! Dit kwartaal

Nadere informatie

Usability & Interface Design

Usability & Interface Design Usability & Interface Design Marco Corrò Usability & Interface Design Interface Design = de vormgeving van de grafische gebruikersinterface van een website Usability = Extent to which a product can be

Nadere informatie

Functioneel ontwerp. Navigatie

Functioneel ontwerp. Navigatie Functioneel ontwerp Het functioneel ontwerp bestaat uit de volgende onderdelen: 1. Navigatie 2. Lijst van alle pagina s 3. Paginaontwerp 4. Formulierontwerp 5. Grafisch ontwerp Navigatie Navigatie wordt

Nadere informatie

Web Usability. Byte seminar, 23 november 2007. Door: Gwyneth Ouwehand

Web Usability. Byte seminar, 23 november 2007. Door: Gwyneth Ouwehand Web Usability Byte seminar, 23 november 2007 Door: Gwyneth Ouwehand Introductie Student Informatiekunde Universiteit Utrecht Mensen Organisaties Computers Communicatie Bezig met afstudeerproject over kenniselicitatie

Nadere informatie

Metaforen, Gestalt en Gebruiksonderzoek

Metaforen, Gestalt en Gebruiksonderzoek Interaction Design Metaforen, Gestalt en Gebruiksonderzoek Louis Klomp LHJ.Klomp@windesheim.nl X8.10 / X7.96 Tel (088-469) 9908 Interaction Design Metaforen in interface design Enkele voorbeelden een relatie

Nadere informatie

Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders

Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders Responsive Design Werkwijze en aanlevering Responsive Design Mach3Builders Introductie Door de explosieve stijging van het aantal soorten devices waarop websites bekeken kan worden, is het ontwerpen van

Nadere informatie

DFI Models & Processes Herkansingsklas 1 (V207) Nienke Griffioen 500621715 [REDESIGN RTL GEMIST.NL DFI OPDRACHT]

DFI Models & Processes Herkansingsklas 1 (V207) Nienke Griffioen 500621715 [REDESIGN RTL GEMIST.NL DFI OPDRACHT] 2013 DFI Models & Processes Herkansingsklas 1 (V207) Nienke Griffioen 500621715 [REDESIGN RTL GEMIST.NL DFI OPDRACHT] Inhoudsopgave DFI opdracht 1: redesign RTL Gemist pag. 3 Opdracht omschrijving Pag.

Nadere informatie

Gebruiksvriendelijkheid. Introductie. Onderwerpen 23-11-2007. Student Informatiekunde Universiteit Utrecht. Webdesigner Piozum

Gebruiksvriendelijkheid. Introductie. Onderwerpen 23-11-2007. Student Informatiekunde Universiteit Utrecht. Webdesigner Piozum Gebruiksvriendelijkheid Byte seminar, 23 november 2007 Door: Gwyneth Ouwehand Introductie Student Informatiekunde Universiteit Utrecht Mensen Organisaties Computers Communicatie Webdesigner Piozum Onderwerpen

Nadere informatie

Persona s en Scenario s

Persona s en Scenario s Interaction Design Persona s en Scenario s Louis Klomp LHJ.Klomp@windesheim.nl X8.10 / X7.96 Tel (088-469) 9908 Wat is een persona? Archetype van een gebruiker, ofwel een karakterisering van een bepaald

Nadere informatie

Plan van aanpak, 17 september 2014

Plan van aanpak, 17 september 2014 Plan van aanpak, 17 september 2014 DEP WORKS B.V. / DEP WORKS office & management support / DEP WORKS MEET&GREET Marnick de Groot Milan van der Maaten Luuk Roordink Afdeling: Marketing & Communicatie Contactpersonen:

Nadere informatie

Stappenplan. De ontwikkeling van een interface doorloopt bij Studio Wolf vier stappen. Deze stappen verduidelijken de weg naar het eindresultaat.

Stappenplan. De ontwikkeling van een interface doorloopt bij Studio Wolf vier stappen. Deze stappen verduidelijken de weg naar het eindresultaat. Stappenplan Een interface is in principe alles wat de communicatie tussen de gebruiker en de computer bepaalt of vorm geeft. Het is het deel van de website of webapplicatie dat de interactie met de gebruiker

Nadere informatie

DE EERSTE STAP NAAR EEN ONVERGETELIJKE GEBRUIKERSERVARING

DE EERSTE STAP NAAR EEN ONVERGETELIJKE GEBRUIKERSERVARING UX SCAN DE EERSTE STAP NAAR EEN ONVERGETELIJKE GEBRUIKERSERVARING Onze user experience designers controleren met behulp van de User Experience Scan of uw online software niet alleen functioneel, maar ook

Nadere informatie

Gedaan: Logo Communicatie middel(en) Inrichtingsplan. Nog te doen: - Website - Balie - Promotie item

Gedaan: Logo Communicatie middel(en) Inrichtingsplan. Nog te doen: - Website - Balie - Promotie item Briefing Website Gedaan: Logo Communicatie middel(en) Inrichtingsplan Nog te doen: - Website - Balie - Promotie item Website > vormgeving Website > techniek Wat maak je? Je maakt een website voor restaurant

Nadere informatie

In dit document vatten we de belangrijkste wijzigingen van november 2012 en januari 2013 samen.

In dit document vatten we de belangrijkste wijzigingen van november 2012 en januari 2013 samen. Nieuwe Versie Prezi 6 januari 2013 Online presentatietool Prezi heeft begin deze maand weer een aantal vernieuwingen doorgevoerd. Na de nieuwe interface die november 2012 al werd gelanceerd, waarbij de

Nadere informatie

Verslag Pencil, Photoshop & InDesign

Verslag Pencil, Photoshop & InDesign Verslag Pencil, Photoshop & InDesign Naam: Rob Dekker Studentnummer: 11020067 Vak: MMIO Datum: 07-02-2016 Pencil Bij het ontwerpen van drie verschillende voorstellen voor mijn portfoliosite heb ik gebruik

Nadere informatie

ANOUK ROUMANS TO CODE OR NOT TO CODE.

ANOUK ROUMANS TO CODE OR NOT TO CODE. ANOUK ROUMANS ANOUK ROUMANS TO CODE OR NOT TO CODE. 00 HOOFDVRAAG 00 HOOFDVRAAG Is het relevant voor een UX-designer om development kennis te hebben op gebied van apps? 00 INHOUDSOPGAVE 00 INHOUDSOPGAVE

Nadere informatie

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR WELKOM AGENDA Introductie Korte algemene inleiding Usability Usability voor mobiele apparaten Vragen - afsluiting INTRODUCTIE Peter Kassenaar;

Nadere informatie

1.1 DE OPDRACHT IN HET KORT

1.1 DE OPDRACHT IN HET KORT Opdracht 03: een formulier ontwerpen Versie voor studenten v5.0 2010.04.28 James M. Boekbinder Skype: jboekbinder3641 E-mail: james.boekbinder@gmail.com Blog: http://www.razormind.info/infoconstructor

Nadere informatie

Van concept naar een klikbaar prototype

Van concept naar een klikbaar prototype UXkids case study: Van concept naar een klikbaar prototype Keywords: Koninklijke Bibliotheek, Website, Prototype, User tests, Usability, UX, Kinderen 9-12 jaar. Als onderdeel van het netwerk van openbare

Nadere informatie

XHTML. een website bouwen. Vergelijk met: een huis bouwen. Dadelijk de stenen metselen, of. Hoe begin je er aan? Wat is stap 1?

XHTML. een website bouwen. Vergelijk met: een huis bouwen. Dadelijk de stenen metselen, of. Hoe begin je er aan? Wat is stap 1? 1010110101110001010 een website bouwen Vergelijk met: een huis bouwen. Dadelijk de stenen metselen, of eerst? Hoe begin je er aan? Wat is stap 1? 1010110101110001010 een website bouwen Ik heb een concept.

Nadere informatie

INTERACTION DESIGN (IxD) STICHTING INFORMATICA-ACTIEF: PIETER VORSTENBOSCH, PAUL BERGERVOET

INTERACTION DESIGN (IxD) STICHTING INFORMATICA-ACTIEF: PIETER VORSTENBOSCH, PAUL BERGERVOET INTERACTION DESIGN (IxD) STICHTING INFORMATICA-ACTIEF: PIETER VORSTENBOSCH, PAUL BERGERVOET INHOUD VAN DE WORKSHOP Overzicht van de cursus (10 minuten) Ervaren van Interaction Design (IxD) met behulp van

Nadere informatie

User Centered Design en CRO. Gastcollege Windesheim Marlies Wilms Floet

User Centered Design en CRO. Gastcollege Windesheim Marlies Wilms Floet User Centered Design en CRO Gastcollege Windesheim Marlies Wilms Floet Even voorstellen Economische psychologie Internationaal kwalitatief marktonderzoek E-commerce manager travel Online consumentengedrag

Nadere informatie

Richtlijnen Portfolio. Hedwig Klamer 30 september 2015 Project Portfolio Corné van Delft

Richtlijnen Portfolio. Hedwig Klamer 30 september 2015 Project Portfolio Corné van Delft Richtlijnen Portfolio Hedwig Klamer 30 september 2015 Project Portfolio Corné van Delft 1 Requirements Om er achter te komen wat de handigste structuur is voor mijn website moet ik eerst kijken naar wie

Nadere informatie

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

V.V. WILHELMUS HUISSTIJLHANDBOEK. Naam: Marco Remmerswaal Studentnummer: 12048569 Vak: Visual Communication Lerares: Noortje van Eekeren Versie 1.

V.V. WILHELMUS HUISSTIJLHANDBOEK. Naam: Marco Remmerswaal Studentnummer: 12048569 Vak: Visual Communication Lerares: Noortje van Eekeren Versie 1. HUISSTIJLHANDBOEK V.V. WILHELMUS Naam: Marco Remmerswaal Studentnummer: 12048569 Vak: Visual Communication Lerares: Noortje van Eekeren Versie 1.00 1 / 10 Inhoudsopgave Grid 3 Typografie 4 Kleurgebruik

Nadere informatie

Het definitieve prototype van Foliostory zal op basis van een usability test getest worden.

Het definitieve prototype van Foliostory zal op basis van een usability test getest worden. Testplan prototype Het definitieve prototype van Foliostory zal op basis van een usability test getest worden. Hierbij wordt een happy flow scenario aan de respondenten voorgelegd met daarin taken die

Nadere informatie

Concept document Kitesurf Spot Elyse Teerink November 15, 2012. Conceptdocument Informatie Architectuur

Concept document Kitesurf Spot Elyse Teerink November 15, 2012. Conceptdocument Informatie Architectuur Conceptdocument Informatie Architectuur Elyse Teerink 500604947 Herkanser Y. Westplat HVA 15/11/2012 1 Inhoudsopgave Inleiding De doelgroep De opdracht In gesprek met kitesurfers Account en inloggen Automatisch

Nadere informatie

Usability & Ontwerp processen. Les 4

Usability & Ontwerp processen. Les 4 Usability & Ontwerp processen Les 4 Wat gaan we doen? Wat hebben we de vorige keer geleerd? Wat gaan we vandaag doen? Theorie - hoorcollege Oefening - lesopdracht Herhaling - samenvatting theorie Wat hebben

Nadere informatie

Projectdossier. Datum: 13-02-2013 Versie: 1.0 Projectgroep: CMD-C-3.02. Naam: Alexander van der Kooij Student nr: 12027766. S.C.

Projectdossier. Datum: 13-02-2013 Versie: 1.0 Projectgroep: CMD-C-3.02. Naam: Alexander van der Kooij Student nr: 12027766. S.C. Projectdossier Datum: 13-02-2013 Versie: 1.0 Projectgroep: CMD-C-3.02 Naam: Alexander van der Kooij Student nr: 12027766 Docent: S.C. Hallenga-Brink Inhoudsopgave: Richtlijnen:... 3 Eisen:... 3 MoSCoW...

Nadere informatie

TDI V2 Social objects design patterns voor creators. Marije ten Brink Interaction design week 2 (36)

TDI V2 Social objects design patterns voor creators. Marije ten Brink Interaction design week 2 (36) TDI V2 Social objects design patterns voor creators Marije ten Brink Interaction design week 2 (36) Vorige week ʻZoekenʼ is één van de meest ingrijpende innovaties van onze tijd. Zoeken is een conversatie:

Nadere informatie

Een gebruiksvriendelijk dashboard voor leerlingen en docenten

Een gebruiksvriendelijk dashboard voor leerlingen en docenten UXkids case study: Een gebruiksvriendelijk dashboard voor leerlingen en docenten Keywords: Muiswerk, Oefensoftware, User tests, Focusgroepen, Usability, UX, Leerlingen 13-15 jaar, Docenten. Het onderwijslandschap

Nadere informatie

Quick start handleiding versie 1.0

Quick start handleiding versie 1.0 Quick start handleiding versie.0 Inleiding Beste gebruiker, Via dit document lopen we door de basis onderdelen van je eigen Mijn Kroost control panel. Dit control panel vormt de basis voor het gebruik

Nadere informatie

T I P S I N V U L L I N G E N H O O G T E T E G E N P R E S T A T I E S B O M +

T I P S I N V U L L I N G E N H O O G T E T E G E N P R E S T A T I E S B O M + T I P S I N V U L L I N G E N H O O G T E T E G E N P R E S T A T I E S B O M + A a n l e i d i n g I n d e St a t e nc o m m i s si e v o or R ui m t e e n G r o e n ( n u g e n o em d d e St at e n c

Nadere informatie

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR WELKOM AGENDA Introductie Korte algemene inleiding Usability Usability voor mobiele apparaten Vragen - afsluiting INTRODUCTIE Peter Kassenaar;

Nadere informatie

F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E )

F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E ) F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E ) Datum: 29-09-2010 Auteur: Dairo Bosschart Versie: 1.0 Document: Functioneel_ontwerp (vision versie).docx

Nadere informatie

Succesvol websites bouwen vanuit een concept

Succesvol websites bouwen vanuit een concept Succesvol websites bouwen vanuit een concept Docent: Ruben Olislagers 1 Internetstrategie Begin met een gedegen plan 2 User Centered Design Ontwerpen vanuit de wensen en behoeften van de doelgroep Wie

Nadere informatie

Applicaties ontwerpen voor ios en Android

Applicaties ontwerpen voor ios en Android Ontwikkelen van Apps voor ios en Android Applicaties ontwerpen voor ios en Android 2.1 Inleiding Zowel Apple als Google heeft een paar tips gegeven bij het maken van een ontwerp voor een applicatie voor

Nadere informatie

Design rationale document. Rabobank.com

Design rationale document. Rabobank.com Design rationale document Rabobank.com Inhoudsopgave 3 4 5 14 Inleiding Design values Algemene rationale Styleguide 2 Inleiding In dit document zijn de ontwerpuitgangspunten vastgelegd voor de vernieuwde

Nadere informatie

Groepsopdracht 2. Zuilen voor in het Rijksmuseum

Groepsopdracht 2. Zuilen voor in het Rijksmuseum Groepsopdracht 2 Zuilen voor in het Rijksmuseum Interactie ontwerper: Andrea Pineda Calderon (10590501) Grafisch ontwerper: Abe Sweep (11039469) Technisch ontwerper: Dennis Wiersma (11035099) Facilitator:

Nadere informatie

Eindproduct André van de Polder Charlotte Cozijn Rob Duits Sander Kuik Klas ROOD

Eindproduct André van de Polder Charlotte Cozijn Rob Duits Sander Kuik Klas ROOD Eindproduct van de Polder Cozijn Duits Kuik Klas ROOD van de Polder - Cozijn - Duits - Kuik 1 Inhoud What s new...03 Schermverloopdiagram...04 Functionaliteit...05 Grafisch...05 Copy (tone of voice)...06

Nadere informatie

TOETS HTM22 >HTM22 MEDIAVORMGEVEN INTERACTIEF MEDIADESIGN INTERACTIVE. Naam student:... Studenten nummer:... URL waar mijn werk te vinden is:

TOETS HTM22 >HTM22 MEDIAVORMGEVEN INTERACTIEF MEDIADESIGN INTERACTIVE. Naam student:... Studenten nummer:... URL waar mijn werk te vinden is: Naam student:... Studenten nummer:... URL waar mijn werk te vinden is:...glr-imd.nl/... >HTM22 MEDIAVORMGEVEN INTERACTIEF MEDIADESIGN INTERACTIVE TOETS HTM22 TOETS HTM22 2014 Download eindtoets-bestanden.zip

Nadere informatie

afdruk: 26 november 2015 blz. 1

afdruk: 26 november 2015 blz. 1 afdruk: 26 november 2015 blz. 1 Usability design for Uniface developers Intro Intro Waarnemen De Baas OK Controls Foutje Vormgeving Platform, hardware Mentaal model Taak, 80/20-regel Na afloop: Hebt u

Nadere informatie

Het ideale font voor programmeurs

Het ideale font voor programmeurs Het ideale font voor programmeurs Hogeschool Utrecht Communicatie & Media Design Auteur: Benjamin van Bienen (1576750) Docent: Dick Swart Specialisatie: Visual design seminar 2014-B Menig programmeur leest

Nadere informatie

Visual design. Naam: Rob Dekker. Studentnummer: Vak: MMIO

Visual design. Naam: Rob Dekker. Studentnummer: Vak: MMIO Visual design Naam: Rob Dekker Studentnummer: 11020067 Vak: MMIO Datum: 02-03-2016 Wireframes desktop Maak visual designs van een homepage en product pagina van een sportmerk. Werk deze uit voor gebruik

Nadere informatie

Uw website gebruiksvriendelijk, vindbaar en toegankelijk

Uw website gebruiksvriendelijk, vindbaar en toegankelijk Uw website gebruiksvriendelijk, vindbaar en toegankelijk! Training PGOsupport!! 14 april 2014! Jaap van de Putte Programma 10.00-12.30 Kennismaking Usability / Findability / Accessibility 13.15-16.30 Van

Nadere informatie

Dennis Wagenaar 19-03-10 v 1.1

Dennis Wagenaar 19-03-10 v 1.1 Analyserapport Save Energy Leiden Dennis Wagenaar 19-03-10 v 1.1 Inhoudsopgave Inleiding...3 1. Huidige situatie...4 2. Doelgroep...4 3. Concurrentie analyse...5 4. Prototype...6 5. Usecase diagrammen...7

Nadere informatie

3DValue Automatiseren en beheren van assemblage-instructies

3DValue Automatiseren en beheren van assemblage-instructies 3DValue Automatiseren en beheren van assemblage-instructies Probleemstelling De oplossing voor bekende problemen bij technisch communiceren Traditionele problemen: Slechte beheersbaarheid van instructies

Nadere informatie

Stagebedrijf: Zwiers communicatiebureau Corporate- en Arbeidsmarktcommunicatie. Opdrachtgever: De RIBW KAM Regionale instelling Beschermt Wonen

Stagebedrijf: Zwiers communicatiebureau Corporate- en Arbeidsmarktcommunicatie. Opdrachtgever: De RIBW KAM Regionale instelling Beschermt Wonen Stagebedrijf: Zwiers communicatiebureau Corporate- en Arbeidsmarktcommunicatie Opdrachtgever: De RIBW KAM Regionale instelling Beschermt Wonen ww w.erikjanbrugman.nl/weblog - Doelgroeponderzoek. - Interviews.

Nadere informatie

1.0 Inleiding Testplan Testdoelen Navigatie Lay-out en prioriteit Interactie

1.0 Inleiding Testplan Testdoelen Navigatie Lay-out en prioriteit Interactie Inhoudsopgave 1.0 Inleiding 3 2.0 Testplan 4 2.1 Testdoelen 4 2.1.1 Navigatie 4 2.1.2 Lay-out en prioriteit 4 2.1.3 Interactie 4 2.1.4 Content 4 2.1.5 Formulieren en foutafhandeling 5 2.1.6 Snelheid 5

Nadere informatie

De boom staat op de berg Door Kim Wagemans

De boom staat op de berg Door Kim Wagemans De boom staat op de berg Door Kim Wagemans Doelgroep Deze lessuggesties zijn geschreven voor laaggeschoolde anderstaligen, richtgraad 1.1. (vanaf module 2). Werk bij voorkeur met kleine groepen (acht cursisten),

Nadere informatie

Product Backlog. Als gebruiker wil ik een foto van mijzelf kunnen maken, omdat ik foto s wil laten zien aan andere mensen.

Product Backlog. Als gebruiker wil ik een foto van mijzelf kunnen maken, omdat ik foto s wil laten zien aan andere mensen. Product Backlog MUST HAVE Als gebruiker wil ik een foto van mijzelf kunnen maken, omdat ik foto s wil laten zien aan andere mensen. Als gebruiker wil ik dat mijn foto automatisch versierd wordt aan de

Nadere informatie

WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES

WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES WHITEPAPER RESPONSIVE WEBSITES Wat is een Responsive website? Voordelen van een Responsive website? Hoe start je met een Responsive website? INTRODUCTIE Met het downloaden van deze whitepaper kunnen we

Nadere informatie

CMDIAD2Q4 INTERACTION DESIGN. Corine Vuijk 0800337 CMD4b

CMDIAD2Q4 INTERACTION DESIGN. Corine Vuijk 0800337 CMD4b CMDIAD2Q4 INTERACTION DESIGN Corine Vuijk 0800337 CMD4b DEELOPDRACHT 1: CONCEPTONTWIKKELING Beschrijf het concept van jouw WBJ app op basis van bovenstaande opdrachtomschrijving.maak duidelijk waarom reizigers,

Nadere informatie

Hoe ga ik dit verwerken? (Begrip maken) Dit volume is goed, dit moet ik zo houden.

Hoe ga ik dit verwerken? (Begrip maken) Dit volume is goed, dit moet ik zo houden. Wie Citaat feedback Wat? (Interpreteren) Hoe ga ik dit verwerken? (Begrip maken) Wat & waarom? (Vervolg vraag) Goed volume in je stem. Het volume van mijn stem is zodanig dat de informatie goed te horen

Nadere informatie

Ontwerpdocument. Maarten Kolthof. NHL Hogeschool Opleiding Communication & Multimedia Design Ontwerpdocument - Maarten Kolthof

Ontwerpdocument. Maarten Kolthof. NHL Hogeschool Opleiding Communication & Multimedia Design Ontwerpdocument - Maarten Kolthof Ontwerpdocument Maarten Kolthof NHL Hogeschool Opleiding Communication & Multimedia Design Ontwerpdocument - Maarten Kolthof Inhoud Algemeen ontwerp 3 Icoon en kleurgebruik Animatie technieken ios 7 kenmerken

Nadere informatie

S a m e nw e r k i n g e n s t r u c t u r e l e f o r m a t i e e x t e r n e v e i l i g h e id E i n d r a p p o r t a g e

S a m e nw e r k i n g e n s t r u c t u r e l e f o r m a t i e e x t e r n e v e i l i g h e id E i n d r a p p o r t a g e S a m e nw e r k i n g e n s t r u c t u r e l e f o r m a t i e e x t e r n e v e i l i g h e id E i n d r a p p o r t a g e P r o v i n c i e L i m b u r g 23 april 2 0 0 7 D e f i n i t i ef r a p p

Nadere informatie

Screen Design Grids. Jasper Schelling j.a.schelling@hr.nl docent.cmd.hro.nl/scjas

Screen Design Grids. Jasper Schelling j.a.schelling@hr.nl docent.cmd.hro.nl/scjas Screen Design Grids Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design Jasper Schelling j.a.schelling@hr.nl docent.cmd.hro.nl/scjas Vorige week, het Screen

Nadere informatie

Hang je Little Big Detail op de muur.

Hang je Little Big Detail op de muur. Hang je Little Big Detail op de muur. Hang je Little Big Detail op de muur. Best-of-the-best Little Big Detail Opdracht: Plak je stippen op het beste Little Big Details (en bedenk waarom je je stippen

Nadere informatie

Deze week: - Bespreken 2 websites - kleur - MBTI - Opdracht wat moet er voor volgende week af zijn?

Deze week: - Bespreken 2 websites - kleur - MBTI - Opdracht wat moet er voor volgende week af zijn? Deze week: - Bespreken 2 websites - kleur - MBTI - Opdracht wat moet er voor volgende week af zijn? Vormgeving in relatie tot verschillende doelgroepen Hoe kun je mensen groeperen? oefening [ met z n

Nadere informatie

Courbois Software. Extra categoriën toevoegen aan de WebWinkel

Courbois Software. Extra categoriën toevoegen aan de WebWinkel Courbois Software Extra categoriën toevoegen aan de WebWinkel De editor handleiding is altijd te vinden op de volgende locatie : http://editor.cs-webdesign.nl 2012 Courbois Software Beuningen Fazantlaan

Nadere informatie

Toelichting release notes. 9 oktober 2014

Toelichting release notes. 9 oktober 2014 Toelichting release notes 9 oktober 2014 2 Toelichting release notes 9 oktober 2014 Inleiding release notes Deze week ontvangen jullie compacte release notes waarin heel wat zichtbare en gebruiksvriendelijke

Nadere informatie

Bepaling toezichtvorm gemeente Stein

Bepaling toezichtvorm gemeente Stein Bepaling toezichtvorm 2008-2011 gemeente Stein F i n a n c i e e l v e r d i e p i n g s o n d e r z o e k P r o v i n c i e L i m b u r g, juni 2 0 0 8 V e r d i e p i n g s o n d e r z o e k S t e i

Nadere informatie

Test-plan 2 Project Portfolio

Test-plan 2 Project Portfolio Test-plan 2 Project Portfolio Naam Klas Erik de Beurs G&I A 1 Inhoudsopgave Introductie 2 Doel van de test 3 Tijdsplanning 3 Betrokkenen 3 Test locatie 5 Strategie 4 Data 6 Testscenario 6 Benodigdheden

Nadere informatie

Opdracht Vodafone Interface De opdracht houdt in dat we een sales statistieken tool herontwerpen voor telecom provider Vodafone. Dit doen we door een

Opdracht Vodafone Interface De opdracht houdt in dat we een sales statistieken tool herontwerpen voor telecom provider Vodafone. Dit doen we door een Screen Design Naam: Maarten van Domburg Studentnummer: 0864421 Klas: CMD2A Docent: Bart Nederveen Opdracht: Screen Design Opdracht 2 Vodafone Interface Opdracht Vodafone Interface De opdracht houdt in

Nadere informatie

Dinsdag. Observingday

Dinsdag. Observingday Dinsdag Observingday Warm-Up Change your Kleding Freek Communicatie Management @ Hogeschool Utrecht Minor Co-Design Studio @ Hogeschool Utrecht Design Thinking @ HPI D-school Berlin Design Thinking My

Nadere informatie

Eindeloze mogelijkheden met het zoekscherm van GroenGelinkt

Eindeloze mogelijkheden met het zoekscherm van GroenGelinkt Eindeloze mogelijkheden met het zoekscherm van GroenGelinkt Steeds meer organisaties maken gebruik van het GroenGelinkt zoekscherm. Bezoekers van jouw website vinden snel en gemakkelijk een passende activiteit

Nadere informatie

H O E D U U R I S L I M B U R G?

H O E D U U R I S L I M B U R G? H O E D U U R I S L I M B U R G? N AD E R E I N F O R M A T I E S T A T E N C O M M I S S I E S OV E R O N D E R AN D E R E A F V A L S T O F F E N H E F F I N G E N I N L I M B U R G 1 6 a u g u s t u

Nadere informatie

Philips E-motion. Protoyping/Interactieontwerp. Kwartaal 1 jaar 3. Inhoud Onderzoek Schetsen Mockups Wireframes Flowcharts

Philips E-motion. Protoyping/Interactieontwerp. Kwartaal 1 jaar 3. Inhoud Onderzoek Schetsen Mockups Wireframes Flowcharts Protoyping/Interactieontwerp Philips E-motion Kwartaal 1 jaar 3 Inhoud Onderzoek Schetsen Mockups Wireframes Flowcharts Maarten de Splenter COHORT0506 000119739 Onderzoek Bij het ontwikkelen van de E-motion

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

Mobile UX Design met Keynote

Mobile UX Design met Keynote Wireframe Mockup Requirements Clickable Prototype UXD Present Mobile UX Design met Keynote Zorg ervoor dat keynote is geïnstalleerd op je laptop. Agenda Voorstelronde Waarom is prototypen belangrijk De

Nadere informatie

Min-height en min-width

Min-height en min-width Oefening 15.5 Min-height en min-width Maak op van uw een webpagina s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint

Nadere informatie

Hieronder leggen we je uit wat je moet doen om mee te doen aan Digibattle. En om te winnen. Lees het dus goed door.

Hieronder leggen we je uit wat je moet doen om mee te doen aan Digibattle. En om te winnen. Lees het dus goed door. DIGIBATTLE - UITLEG PLAN Hieronder leggen we je uit wat je moet doen om mee te doen aan Digibattle. En om te winnen. Lees het dus goed door. I. Een app bouwens is teamwork Je kunt alleen aan DigiBattle

Nadere informatie

Handleiding CMS. Auteur: J. Bijl Coldfusion Consultant

Handleiding CMS. Auteur: J. Bijl Coldfusion Consultant Handleiding CMS Auteur: J. Bijl Coldfusion Consultant Inhoudsopgave 1.0 Inleiding 3 2.0 Introductie CMS en websites 4 3.0 Inloggen in beheer 5 4.0 Dashboard 6 4.1 Bezoekers totalen 6 4.2 Bezoekers 7 4.3

Nadere informatie

Informatie Architectuur

Informatie Architectuur Informatie Architectuur D-reizen.nl ziet een toename van klanten in de leeftijd tot 19 jaar die door heel het jaar online vakanties boeken. Deze vakanties zijn vaak een combinatie aanbieding van vervoer

Nadere informatie

Research for Design Communication and Multimedia Design Amsterdam - Research for Design - B1 WC4 data-analyse & persona - September 2012

Research for Design Communication and Multimedia Design Amsterdam - Research for Design - B1 WC4 data-analyse & persona - September 2012 Research for Design Hoe is het gegaan? interviewen Communication and Multimedia Design Amsterdam - Research for Design- B1 HC1 introductie - 29 08 2011 wat gaan we doen vandaag? wat gaan we doen vandaag?

Nadere informatie

Foto s verkleinen en Foto s in elkaar over laten lopen

Foto s verkleinen en Foto s in elkaar over laten lopen Foto s verkleinen en Foto s in elkaar over laten lopen Een foto, ergens op uw computer Open een de map van bestanden voor de website, of maak deze eerst aan. Open de te gebruiken foto met het volgende

Nadere informatie

Inhoudsopgave 1. Opdrachtformulering Beschouwingsgebied Binnen de opdracht Buiten de opdracht

Inhoudsopgave 1. Opdrachtformulering Beschouwingsgebied Binnen de opdracht Buiten de opdracht Test rapport Dit document beschrijft de testopdracht voor het Nederlands Kampioenschap software testen 2017. De website Fructasys (Software Under Test SUT) is een totaal backoffice pakket waarmee je bestellingen

Nadere informatie

Test-Report 2. Groep. Namen en functies Erik de Beurs - Recruiter / Test Monitor / Tech Operator Channah Bosse - Recruiter / Data logger

Test-Report 2. Groep. Namen en functies Erik de Beurs - Recruiter / Test Monitor / Tech Operator Channah Bosse - Recruiter / Data logger Test-Report 2 Groep A Namen en functies Erik de Beurs - Recruiter / Test Monitor / Tech Operator Channah Bosse - Recruiter / Data logger Auteur Erik de Beurs Getest project Portfolio Channah Bosse 1 Inleiding

Nadere informatie

Plan van aanpak. Project WNF. CMD Neelke Laarakker Laura Hellegers

Plan van aanpak. Project WNF. CMD Neelke Laarakker Laura Hellegers Plan van aanpak NDD periode - B Maaike Janssen - 1598513 Marc Gooris - 1605893 CMD 2014-2015 Neelke Laarakker - 1602659 Laura Hellegers - 1603189 Inhoudsopgave Wie zijn wij Achtergrond Uitgangspunten Onderzoeksvragen

Nadere informatie

Einddocument project 3: Voor het goede doel!

Einddocument project 3: Voor het goede doel! Einddocument project 3: Voor het goede doel! Koen Beijer 500684088 V1-02 Roger Reuver Project 3 Inhoudsopgave: Fase 1: de opdracht Probleemsituatie 3 De doelgroep 3 Het evenement 3 Het goede doel 3 Probleemstelling

Nadere informatie

PROJECT EXPO PROJECTDOCUMENT

PROJECT EXPO PROJECTDOCUMENT PROJECT EXPO PROJECTDOCUMENT Auteur(s): Bas Aalders, Daryl Dekking, Dion Kruijswijk, Thomas de Luca, Tom Hoogeveen, Koen Veelenturf Schrijver Dion Kruijswijk, Koen Veelenturf Versie: 0.4 Status: Afronding

Nadere informatie

15 Interactie Ontwerpen

15 Interactie Ontwerpen 15 Interactie Ontwerpen Kenrick Fontijne 0909758 1A Inhoud Product backlog Sitemap Navigatie model Activity diagram Wireframes Content areas Styleguide Tone of voice Product Backlog MUST HAVE Als gebruiker

Nadere informatie

Project Portfolio Usability Testverslag. Test 1: Portfolio Thomas Meiborg

Project Portfolio Usability Testverslag. Test 1: Portfolio Thomas Meiborg Project Portfolio Usability Testverslag Test 1: Portfolio Thomas Meiborg Lennart Kuyvenhoven: Test Monitor & Recruiter Thomas Meiborg: Data Logger, Tech Monitor & Recruiter Klas GI1C 1 Inhoudsopgave Test

Nadere informatie

is front-end kennis relevant voor een UX designer

is front-end kennis relevant voor een UX designer In hoeverre is front-end kennis relevant voor een UX designer tijdens een designproces? Door: Wessel Grift Onderzoeksvraag In hoeverre is het hebben van front-end development kennis relevant voor een

Nadere informatie

Bepaling toezichtvorm gemeente Simpelveld

Bepaling toezichtvorm gemeente Simpelveld Bepaling toezichtvorm 2008-2011 gemeente Simpelveld F i n a n c i e e l v e r d i e p i n g s o n d e r z o e k P r o v i n c i e L i m b u r g, j u n i 2 0 0 8 V e r d i e p i n g s o n d e r z o e k

Nadere informatie

Graphics. Small Basic graphics 1/6

Graphics. Small Basic graphics 1/6 Small Basic graphics 1/6 Graphics Naast het werken met tekst kan je in Small Basic ook werken met grafische elementen: lijnen, vormen en kleuren. Hierbij gebruik je het grafische venster met de witte achtergrond.

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet

Nadere informatie

1. ONTWIKKEL EEN MOBIELE VERSIE

1. ONTWIKKEL EEN MOBIELE VERSIE 1. ONTWIKKEL EEN MOBIELE VERSIE Het is een misvatting om te denken dat een webshop die ontwikkeld is als desktopsite, ook goed werkt voor mobiele gebruikers. Integendeel, je moet de website optimaliseren

Nadere informatie

Usability. Les 3 jaar 2. Ontwerp doelstellingen en randvoorwaarden

Usability. Les 3 jaar 2. Ontwerp doelstellingen en randvoorwaarden Usability Les 3 jaar 2 Ontwerp doelstellingen en randvoorwaarden Wat gaan we doen? Herhaling vorige week ISO Definition of Usability (9241-11) Usability is the effectiveness, efficiency and satisfaction

Nadere informatie

Versie 2. Opdracht deel B 07-12-2014. Inhoud. Raoul Vos Hogeschool Leiden Studentnummer: 1088675

Versie 2. Opdracht deel B 07-12-2014. Inhoud. Raoul Vos Hogeschool Leiden Studentnummer: 1088675 Versie 2 07-12-2014 Opdracht deel B Inhoud Raoul Vos Hogeschool Leiden Studentnummer: 1088675 Inhoudsopgave: Inleiding:... 3 Opdracht deel A Analyse... 3 Opdracht deel B Inhoud... 3 Opdracht deel C Website...

Nadere informatie

styleguide Albert Slow Styleguide

styleguide Albert Slow Styleguide styleguide 1 Inleiding Albert Heijn wilde voor de ipad app Albert Slow een ontwerp dat echt aansprekend en wervend is zonder dat gebruiksvriendelijkheid en informatie voorziening in het gedrang zou komen.

Nadere informatie

Tips & Trucs ArchiCAD : Instellingen Kozijnstaat wijzigen (NL+)

Tips & Trucs ArchiCAD : Instellingen Kozijnstaat wijzigen (NL+) Tips & Trucs ArchiCAD 13 044: Instellingen Kozijnstaat wijzigen (NL+) Met ArchiCAD kunt u een volledig geautomatiseerde kozijnstaat maken, die naar eigen wens aanpasbaar is. Vanuit het model worden alle

Nadere informatie

Release notes Xerte Online Toolkits 3.5

Release notes Xerte Online Toolkits 3.5 Release notes Xerte Online Toolkits 3.5 Inleiding De release van Xerte Online Toolkits 3.5 brengt veel nieuwigheden en functionaliteit met zich mee. Daarnaast zijn er ook weer een flink aantal bugs opgelost.

Nadere informatie

Smart phone experience

Smart phone experience Silvy Alblas CMD - 0774079 Major: DesignThis! Smart phone experience WINTER, EXERCISE 2 1 dec 08 INHOUDSOPGAVE: 1. De opdracht beschrijving 2. Leerdoelen 3. Activiteiten, planning en deliverables 4. Risico

Nadere informatie

Webdesign Rapport 1. Frank Dedden ( ) 10 mei 2014

Webdesign Rapport 1. Frank Dedden ( ) 10 mei 2014 Webdesign Rapport 1 Frank Dedden (3705269) 10 mei 2014 Inhoudsopgave 1 Analyse 2 1.1 Overnachtingen..................................... 2 1.2 Bezienswaardigheden.................................. 2 1.3

Nadere informatie

Publishing & Printing Company B.V.

Publishing & Printing Company B.V. STAPPENPLAN WEBSITE Versie 1.3 Publishing & Printing Company B.V. Weth. Sangersstraat 38 (0)46-437 73 11 KVK 140.41959 6191 NA Beek web@pp-company.nl BTW NL 0085.52.861.B01 Algemene voorwaarden www.pp-company.nl

Nadere informatie