Projecten

iPet (werktitel)

maandag 15 juli, 2013
ekman, flowchart, maslow, processen

Om inzicht te krijgen in de verschillende processen die binnen het product spelen, is er gebruik gemaakt van een flowchart. De processen rondom activiteiten en het verzorgen van de avatar werd zo inzichtelijk gemaakt. Ook werd de relatie tussen de theorie van Maslow en de emoties van Ekman inzichtelijk voor het maken van een koppeling naar niveau’s.

autisme, ontwerpen voor autisme, persona's

Om een eenzijdig en concreet beeld te krijgen van de doelgroep voor iedereen die betrokken was bij het project, werd er gebruik gemaakt van fictieve personen. Ook wel bekend als persona’s. Deze persona’s heb ik geschreven aan de hand van het doelgroep onderzoek wat ik heb uitgevoerd voor iPet. Je kunt hier deze persona’s hier downloaden en gebruiken voor je eigen project(en).

Axure RP Pro, wireframes

Voor het concretiseren en ontwerpen van een interface, is er gebruik gemaakt van wireframes. De wireframes zijn uitgewerkt in Axure RP Pro en vervolgens omschreven in een document om verdere specificaties nader te kunnen aanduiden.

ProjectiPet is een gameful ontwerp voortgekomen uit onderzoek naar de behoeften van jongeren met autisme. Ik heb onder andere onderzoek gedaan naar de behoeften van de doelgroep in verhouding tot ontwerp richtlijnen voor mensen zonder autisme. Ook heb ik interviews uitgevoerd om te achterhalen waar behoefte aan was op het gebied van leefomstandigheden. Op basis van deze resultaten, heb ik verschillende conclusies getrokken en vervolgens oplossingen in de vorm van een drietal gameful concepten beschreven. iPet was een van deze concepten.

iPet combineert structuur met emotie, door de agenda of het schema van de gebruiker interactief te maken door geplande activiteiten van te voren spelenderwijs te laten simuleren voor de gebruiker. Op deze manier raakt de gebruiker bekend met de activiteit, de routine en de emoties die zich kunnen afspelen rondom de activiteit.

De gebruiker verzorgt een avatar, door volgens zijn of haar planning activiteiten te simuleren met de avatar, voordat de gebruiker de activiteit zelf moet uitvoeren. De avatar is een representatie van de status van de uitgevoerde activiteiten, die worden bepaald aan de hand van een waardering per niveau van de piramide van Maslow.

Dit project heb ik uitgevoerd als mijn afstudeerproject uit naam van mijn eigen bedrijf Careful Design. Ik heb met dit project mijn opleiding afgerond met een 8.

DoelEen digitale oplossing om ondersteuning te kunnen bieden bij het leren herkennen van en reageren op emoties én het structureren en nakomen van planning.

DoelgroepJongeren met een vorm van autisme (Syndroom van Asperger, Klassiek Autisme en PDD-NOS), tussen de 0 en 21 jaar met een IQ van minimaal 70.

Terug naar top

Imagonal

vrijdag 15 maart, 2013
code, CSS, fotografie, HTML, Javascript, PHP, programmeren, responsive design

Het ontwerp van deze website is gedaan met behulp van Adobe Illustrator CS4, om vervolgens omgebouwd te worden in Dreamweaver naar een website. Voor de website zelf is gebruik gemaakt van HTML, CSS, Javascript en PHP.

CSS, mobiele website, mobile design, responsive design

De opdrachtgeefster wilde een responsive design voor haar website, zodat haar foto’s ook op mobiele apparaten te bekijken zouden zijn. Het ontwerp is daarom gemaakt voor smartphones, tablets en desktops. Met behulp van CSS media queries is het responsive design toegepast.

ProjectVoor dit project werd mij gevraagd een website te ontwerpen en ontwikkelen voor een fotografe die nog niet veel werk had om te tonen, maar wel graag al haar website gevuld wilde hebben. Om deze reden heb ik gekozen om zowel de tekst als de foto's op dezelfde pagina te tonen. Er kan een selectie van foto's getoond worden in het groot in de slider/banner op de pagina van de categorie, met verder op de pagina meer foto's die niet continue aanwezig zijn op de pagina.

Het product is ontwikkeld op basis van een Wordpress template, met bijbehorende custom posts voor foto's en de slider. De template is uitgerust met een photoviewer die ook responsive is en met gebaren werkt op de apparaten die dit ondersteunen. Zo kun je op je iPhone door de foto's heen swipen in plaats van tappen. Het script kun je hier downloaden en gebruiken voor je eigen projecten.

DoelOntwerp en ontwikkel een website voor een beginnende fotografe, die op dit moment nog bezig is met het opbouwen van een portfolio.

DoelgroepDe opdrachtgeefster wilde zich vooral richten op zakelijke klanten en dan met name groepsfotografie.

Terug naar top

TEDxYouth@Amsterdam (2013)

vrijdag 1 maart, 2013
custom post types, responsive design, wordpress

Voor het nieuwe jaar moest er een nieuwe website komen die eenvoudiger te gebruiken was dan de website van 2012. Daarom heb ik het ontwerp gedaan op basis van de opgedane ervaringen van het afgelopen jaar. Voor de eenvoud werd er gebruik gemaakt van WordPress en werd er voor elk soort object een apart post type gemaakt in WordPress. Zo hoefde geen van de gebruikers met HTML of code aan de slag om bijvoorbeeld een teamlid toe te voegen en volstond het invullen van een formulier. De website is ook responsive ontworpen en gebouwd, zodat hij op mobiele apparaten ook zo goed mogelijk uit de verf komt.

ProjectNa het afgelopen jaar vooral een adviserende rol te hebben gehad bij het communicatieteam, heb ik tot halverwege het jaar de rol gehad van teamcaptain en een professionaliseringsslag in de organisatie van TEDxYouth@Amsterdam doorgevoerd als projectleiding. Door de organisatie in verschillende teams in te delen en de werkzaamheden per team inzichtelijk te maken, konden de verantwoordelijkheden bij de teams blijven zonder dat hierbij teamleiders van andere teams gemoeid waren. Voor het inzichtelijk krijgen van alle taken per team, heb ik op basis van mijn ervaring met andere evenementen een lijst gevormd met taken.

Ik heb diverse documenten geschreven, een nieuwe website ontworpen en gebouwd met een nieuwsbrief allemaal in dezelfde stijl. De website is ingericht met Wordpress als back-end, met het gebruik van 'custom post types' voor onder andere partners, media en teamleden. De nieuwsbrief is opgebouwd met HTML en inline css volgens de richtlijnen voor een dynamische template van MailChimp.

Afhankelijk van het soort informatie wat er getoond moet worden op een pagina, wordt de weergave van het object aangepast. Zo worden een video en een foto in een geheel blok getoond en wordt tekst maar voor een deel getoond. Op deze manier blijft de content overzichtelijk. De website zelf heeft een algemene uitstraling die vooral tot zijn recht komt door content die aansluit bij het gevoel van TEDxYouth@Amsterdam. De tekeningen van Kim Ravers worden op deze website ook in de content getoond.

DoelOntwerp en ontwikkel digitale producten die de TEDx boodschap communiceren en bruikbaar zijn voor meerdere jaren, door de producten niet te specifiek te maken voor het komende evenement.

DoelgroepJongeren van 12 tot en met 18, in heel Nederland, met een interesse in ondernemerschap.

Terug naar top

Contact Administratie Tool voor TEDxYouth@Amsterdam

woensdag 24 oktober, 2012
contact administratie, CSS, HTML, PHP

Met de tool was het mogelijk om contacten toe te voegen, te bewerken en te verwijderen. Daarnaast was er een uitgebreide zoekfunctionaliteit toegespitst op het vinden van contacten aan de hand van details. De back-end van de tool is ontwikkeld in PHP en de front-end in HTML, CSS en Javascript.

ProjectVanwege de groeiende behoefte om informatie inzichtelijk te hebben over bezoekers, partners en relaties, werd mij gevraagd een tool te ontwikkelen waarin deze contacten konden worden beheerd. Met deze tool kunnen contacten worden toegevoegd, met allerlei informatie over de persoon zelf, contact informatie, informatie met betrekking tot eerdere partnering, bezoek van evenementen en meer.

Met behulp van deze tool werd het vinden van een specifiek contact binnen de organisatie een stuk eenvoudiger. Daarnaast maakte mijn tool het mogelijk om contacten te exporteren naar een mailinglijst die direct te importeren was in MailChimp of CampaignMonitor.

DoelOntwerp en ontwikkel een tool waarmee contacten van TEDxYouth@Amsterdam kunnen worden beheerd.

DoelgroepDe organisatie van TEDxYouth@Amsterdam bestaat uit mensen tussen de 18 en 50 jaar.

Terug naar top

TEDxYouth@Amsterdam (2012)

vrijdag 24 augustus, 2012
huisstijl, TEDx, TEDxYouth@Amsterdam, Vormgeving, website

Het ontwerpen van de website gebeurde op basis van wireframes die het communicatieteam al hadden verzorgd. Op deze manier hoefde alleen het uiterlijk van de website nog te worden verzorgd. De kleuren van de website, zijn gebaseerd op de huisstijl van TEDx waaraan elk evenement moet voldoen. Ook de lettertypes en afbeeldingen zijn gebruikt zoals beschreven staat in het huisstijl document van TEDx. De gebruikte tekeningen in de website en het ontwerp, komen van Kim Ravers. De website is uiteindelijk gebouwd door Toscani, waar ik vooral een adviserende rol bij had.

ProjectTEDxYouth@Amsterdam is een jaarlijks evenement, waar jongeren tussen de 12 en 18 jaar kennismaken met andere jongeren met een bijzonder verhaal. Dit evenement vindt elk jaar plaats in Amsterdam. TEDxAmsterdam is gericht op volwassenen en gaat verder daar waar TEDxYouth@Amsterdam stopt.

Bij het toetreden tot TEDxYouth@Amsterdam, zou ik mij vooral bezig houden met het bedenken en uitvoeren van de TEDx Experience door de omgeving van het evenement aan te kleden met een logo, posters, licht en audio en eventueel interactieve installaties. Omdat de lokatie van het evenement ons beperkte in het uitvoeren van deze Experience, heb ik veel taken van het communicatieteam overgenomen en producten gecreëerd. De teamcaptains van communicatie op dat moment, waren communicatief wel sterk, maar hadden minder kennis van social media, drukwerk en digitale media. Aanvullend op hun kennis, heb ik hen ingelicht en geadviseerd over deze onderwerpen en vervolgens de layout van de website gemaakt.

Voor het communicatieteam was het belangrijk dat het ontwerp informeel werd en er gebruik werd gemaakt van de tekeningen van Kim Ravers. Deze tekeningen heb ik dan ook doorgevoerd in alle ontwerpen voor zowel de digitale producten als het drukwerk. Zo zijn de badge en het t-shirt ontworpen in dezelfde stijl. Tijdens het evenement werden ook bonnen gebruikt voor de consumpties, welke ik ook heb ontworpen aansluitend bij de rest van de producten.

DoelZorgen dat minimaal 150 jongeren tussen de 12 en 18 jaar, voldoende interesse in TEDxYouth@Amsterdam ontwikkelen om het evenement te bezoeken.

DoelgroepJongeren tussen de 12 en 18 jaar, door heel Nederland met een interesse voor ondernemerschap.

Terug naar top

M&MJong30

zaterdag 21 april, 2012
Apple VoiceOver, document structuur, JAWS, prikkelarm, skiplink

Resulterend uit het onderzoek en het ontwerp voor mensen met een beperking, is een website gekomen die vanuit de kern ondersteunend is aan deze doelgroep. In de code is rekening gehouden met eventuele tools als JAWS of Apple VoiceOver die ondersteuning bieden aan de doelgroep. De intensiteit van de website is aanwezig in een prikkelrijke en een prikkelarme versie en de tekst op de website kan worden vergroot of verkleind.

doelgroep, doelgroep onderzoek, lichamelijke beperking, persona's, verstandelijke beperking

Om een concreet inzicht te kunnen creëren in de doelgroep, zijn er aan de hand van de onderzoeksresultaten persona’s gemaakt. Deze persona’s kunnen hier worden gedownload en kunnen worden gebruikt voor een eigen project.

informatie ontwerp, seo, taakanalyse, user needs

Om inzicht te krijgen in het proces voor het zoeken van begeleiding, is er gebruik gemaakt van een taakanalyse. Aan de hand van deze analyse, is er verder gekeken naar de content van de website om te bepalen welke informatie benodigd is. Op deze manier is de website vindbaar op basis van de informatie waarop wordt gezocht en die de gebruiker belangrijk acht.

ProjectTegen een minimale prijs, werd ik gevraagd een website te ontwerpen die Drempelvrij zou zijn voor mensen met een lichamelijke of verstandelijke beperking. Aan de hand van dit verzoek, is er een onderzoek gedaan naar de doelgroep. Vervolgens is er een ontwerp bedacht en gemaakt, om vervolgens over te kunnen gaan naar het bouwen van het product. Bij het bouwen van de website is er rekening gehouden met de structuur en opbouw van het HTML document, hierdoor blijft de website bruikbaar wanneer er geen Javascript of CSS kan worden gebruikt. Daarnaast is de website ook volledig te gebruiken met alleen het toetsenbord.

DoelMaak een website voor jongeren en ouders met kinderen met een lichamelijke of verstandelijke beperking tot en met 30 jaar, die op zoek zijn begeleiding voor thuis.

DoelgroepJongeren en ouders van jongeren met een lichamelijke of verstandelijke beperking tot en met 30 jaar.

Terug naar top

Jopenkerk

zondag 30 oktober, 2011
3D, 3D Studio Max, Jopenkerk, modelling, texturing

Het uiteindelijke resultaat is gerenderd met een standaard render engine van 3D Studio Max. Op de afbeelding is een 3D replica te zien van de Jopenkerk in zijn huidige vorm.

ProjectVoor dit project heb ik gebruik gemaakt van 3D Studio Max voor het maken van de modellen van de bar. Voor de textures op de modellen heb ik diverse foto's gemaakt van de bar, om vervolgens met behulp van Photoshop de juiste formaten te kunnen creëren. Om textures op de muren en bepaalde materialen diepte te geven, heb ik gebruik gemaakt van bump mapping.

DoelOntwerp en bouw een media uiting voor de Jopenkerk in het 3D.

DoelgroepMensen vanaf 18 jaar en ouder, met een liefde voor authentiek gebrouwen bier.

Terug naar top

Geen Gehoor

zondag 3 oktober, 2010
controllers, coöperatie, omgeving, samenwerking, team

Het was mogelijk om de simulatie met 6 mensen tegelijk te ervaren. De plekken waarop de spelers konden staan, waren gemarkeerd door een rood kruis. Voor elk team was daarnaast één controller beschikbaar, om op deze manier interactie met het spel te kunnen hebben.

Buzz, controllers, eenvoud, interactie, leercurve

Voor interactie met de simulatie, werd er gebruik gemaakt van de controllers van Buzz. Op deze manier werden er geen complexe handelingen verwacht en werd de leercurve voor het ervaren van de simulatie zo klein mogelijk gehouden.

competitie, simulatie

Bij het spelen van het spel, was het mogelijk voor meerdere teams om tegen elkaar te spelen door opdrachten sneller uit te voeren. Een team bestond uit één helper en één ‘doof’ persoon. Het dove persoon, maakte gebruik van een dempende koptelefoon, waardoor geluid werd gefilterd. Door tijdsdruk toe te voegen, werden de spelers gestimuleerd om creatief te zijn in het uitvoeren van de opdrachten.

B.J. Fogg, competitie, coöperatie, invloed, motivatie, psychologie, R.B. Cialdini, sociologie

Om de speler te motiveren het spel te spelen, heb ik gekozen voor het gebruik van sociale motivatie. Zo spelen zowel competitie, coöperatie als erkenning een grote rol tijdens de simulatie. Er zijn altijd 2 spelers nodig om het spel op coöperatieve wijze te kunnen spelen. Het competitie element wordt toegevoegd wanneer er meerdere teams tegen elkaar spelen.

ProjectVoor dit project waren we vrij om een interactieve tentoonstelling te bedenken, waarbij ik de focus wilde leggen op mensen met een auditieve beperking. Hiervoor bedacht ik een concept, waarmee mensen met normaal gehoor, kunnen ervaren hoe het is om doof te zijn. Het product was een simulatie van een reguliere dag, door filmpjes van bepaalde activiteiten te gebruiken en dit te combineren met bepaalde opdrachten. Voor deze opdrachten is in het normale leven een oplossing verzonnen die vaak ondersteund wordt door geluid wat bij de simulatie dus ontbrak.

DoelLaat mensen met normaal gehoor, beleven hoe het is om doof te zijn.

DoelgroepMensen tussen de 12 en 40 jaar met goed gehoor.

Terug naar top