jeskepmed-blog

[jeskepmed-blog]

Eindopdracht - eindversie

Hier is mijn definitieve eindversie te zien van de schermen. Het geluid is hierbij gemonteerd. En de animatie van het guide character is wat aangepast. 

BRONVERMELDING (geïnspireerd op): hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, geraadpleegd op: 06/03/18, http://woohahfestival.com/

Tijger: Woo Hah, geraadpleegd op: 06/03/18, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM:

Geluid opkomen van het logo: https://freesound.org/people/Tomlija/sounds/175677/

Het opeten van het logo (bewerkt): https://freesound.org/people/niwki/sounds/162822/

Klikken op de buttons (algemeen): https://freesound.org/people/Splatez07/sounds/413690/

Een kick van een hiphop beat, gebruikt bij kiezen artiesten (bewerkt): https://freesound.org/people/kaonaya/sounds/131336/

Hiphop sound op de achtergrond: https://freesound.org/people/JSC2011/sounds/360344/

Swipen naar beneden in het scherm: https://freesound.org/people/Nightflame/sounds/422494/

[jeskepmed-blog]

Geluiden 3

Geluiden in schermen

Een kick van een hiphop beat. Deze is te horen wanneer de aller eerste button opkomt zetten (ja dat wil ik!). En wanneer het guide character het scherm aanraakt om een artiest te kiezen. Bij het aanraken heb ik het geluid iets zachter gemaakt. 

https://freesound.org/people/kaonaya/sounds/131336/

Hiphop sound op de achtergrond. Dit is de sound die te horen is op de achtergrond vanaf het moment dat de schermen te zien zijn met jouw favoriete artiesten. 

https://freesound.org/people/JSC2011/sounds/360344/

Swipen naar beneden in het scherm. Wanneer het guide character het scherm naar beneden swiped om naar beneden te scrollen is dit geluid te horen. Dit is om te laten zien dat de gebruiker in het scherm kan scrollen omdat er meerdere artiesten zijn dan er op dat moment te zien is in het scherm. 

https://freesound.org/people/Nightflame/sounds/422494/

Experimenten:

Verschijnen eerste button, ja dat wil ik. Dit is mijn tweede experiment voor het opkomen van de button. Het geluid hiervoor vond ik niet passen bij het thema en festival. Daarom ging ik opzoek naar een geluid dat meer met hiphop te maken had. Ik dacht dat het leuk was om dit geluid te gebruiken maar toen ik het eronder had staan vond ik het een te overdreven geluid. 

https://freesound.org/people/mamax/sounds/44346/

Hiphop beat. Uit deze beat had ik een stukje geknipt om te gebruiken voor het touchen. Wanneer het guide character een artiest kiest met zijn neus wilde ik een stukje beat laten horen, als touch. Maar dat klonk te overdreven. 

https://freesound.org/people/digitalvalues/sounds/149181/

Snuffelen. Ik dacht dat het leuk zou zijn om het guide character te laten snuffelen wanneer hij artiesten gaat kiezen. Maar toen ik het gemonteerd had vond ik het een overbodig geluid. Ik vind namelijk niet dat er geluiden toegevoegd moeten worden om stiltes op te vullen en dat idee kreeg ik hierbij wel. 

https://freesound.org/people/krnash/sounds/389803/

[jeskepmed-blog]

Tweede verbeterde versie (na tweede feedbackmoment)

Omdat de voice over niet past bij het concept ben ik over gegaan op plan 2. Ik laat steeds de tekst zien boven het guide character. Maar om de aandacht naar het stukje tekst te trekken laat ik de tekst een paar keer op en neer bewegen. Zo weet de gebruiker waar hij of zij als eerst naar toe moet kijken. Ook heb ik het guide character meer gebruikt in de schermen. Hij tikt bijvoorbeeld de artiesten aan, dit vind ik overigens nog niet soepel gaan. 

Ook heb ik bij het plannen met de blokken een animatie toegevoegd van een hand. Dit heb ik gedaan omdat dit het ‘lastigste’ onderdeel was van de schermen. Zo is het met een kleine animatie in een klap duidelijk voor de gebruiker wat hij of zij moet doen. 

Nu zal ik met een finishing touch de eindversie gaan maken. Daarbij ga ik nog kijken naar het geluid, het bewegen van het guide character en eventueel nog andere kleine dingen.

BRONVERMELDING (geïnspireerd op): hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, geraadpleegd op: 06/03/18, http://woohahfestival.com/

Tijger: Woo Hah, geraadpleegd op: 06/03/18, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM:

[jeskepmed-blog]

Experimenteren met geluid

Ik had het idee om een voice over te gebruiken voor mijn guide character en schermen. Daarom ben ik verschillende apps gaan downloaden om te kijken hoe deze voice overs effect hebben op mijn stem. Nadat ik 4 verschillende apps gedownload had en er steeds hetzelfde resultaat uit kwam, waar ik niet tevreden mee was, heb ik een ander plan bedacht dat te zien is in mijn volgende post. Dit is nog de beste voice over die uit de experimenten kwam en dit past totaal niet bij het concept. De dik gedrukte app, hieronder, is gebruikt voor de opname hierboven.

De apps die ik gebruikt heb voor mijn experimenten waren: 

Voice Changer, Creator, Player 

Voice Changer - Celebrity Emoji

Voice Changer Plus

Voice Changer Pitch

[jeskepmed-blog]

Eerste verbeterde versie (na tweede feedbackmoment) 

Ik ben aan de slag gegaan met mijn feedback en ik heb hierbij gekeken naar de hiërarchie in typografie en kleur. Dit heb ik toegepast op mijn schermen. 

Ook heb ik gekozen om een animatie te gebruiken voor de button. Deze speelt af na een bepaalde tijd om de aandacht van de gebruiker te trekken. Alle buttons heb ik dezelfde vormen gegeven. Dit was eerst nog niet het geval. 

Het guide character heb ik ook nog een beetje aangepast, de neus is veranderd van kleur. Dit heb ik gedaan omdat ik dit beter vond passen bij de kleuren.

Dit is een eerste verbeter slag voor mijn eindversie. Ik heb de tekstwolkjes weggehaald en wil iets anders gaan toevoegen waardoor het guide character de gebruiker door de schermen leid. Ik zit hierbij te denken aan een zelf ingesproken tekst met een voice over. 

BRONVERMELDING (geïnspireerd op): hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, geraadpleegd op: 06/03/18, http://woohahfestival.com/

Tijger: Woo Hah, geraadpleegd op: 06/03/18, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM:

[jeskepmed-blog]

Feedback

Als feedback kreeg ik: je schermen missen hiërarchie in typografie en kleur. Daar ben ik mee aan de slag gegaan. Zoals je in het eerste scherm ziet heb ik een kleine styleguide gemaakt met typografie, kleur en vormen. Met deze styleguide ben ik de schermen gaan ontwerpen. Ik begon met het scherm linksboven, toen rechtsboven, toen linksonder en het scherm dat rechtsonder staat is het uiteindelijke ontwerp geworden. Met de kleur oranje probeer ik steeds dingen uit te lichten. Zoals buttons of keuzes die de gebruiker maakt.   

[jeskepmed-blog]

Extra scherm

Als laatste scherm wil ik nog een eindoverzicht. Daar kan de gebruiker een overzicht met zijn of haar favoriete artiesten zien met het stage nummer/naam erbij. Ook kan de gebruiker op print drukken en dan heeft hij of zij het overzicht fysiek bij zich. Zo is de ideale festival dag gepland. 

[jeskepmed-blog]

Animeren button

Eerder heb ik gezegd dat er meer met de buttons gedaan kan worden. Wanneer de bezoeker hier overheen hovert wil ik dat er een korte animatie plaatsvind met de button. Daarom ben ik gaan kijken welke opties voor het scherm een leuke optie zijn. Deze zijn daar uitgekomen. Ik vind persoonlijk het wiebelen van de button een erg sterke optie. Het lijkt daarbij net of de button op de beat bounced en dat past goed bij het festival. 

[jeskepmed-blog]

Animatie in combinatie met geluid

[jeskepmed-blog]

Geluid 2

Voor het kiezen van de artiesten heb ik gekozen voor een zacht touch geluid. Dit is namelijk een kleine verandering in het scherm. De artiest wordt geselecteerd en het stukje van hem wordt blauw.

https://freesound.org/people/Lord_vor_Edocsil/sounds/203309/

De tekstwolkjes veranderen na een bepaalde tijd. Om de gebruiker hier op te attenderen heb ik een geluid toegevoegd bij de overgang hiervan. Het is een soort swipe geluid die de tekst, die in het tekstwolkje stond, weg ‘swiped’. Vervolgens verschijnt er een nieuwe tekst voor de gebruiker.

https://freesound.org/people/michimuc2/sounds/195937/

Ook heb ik een klein swipe geluid toegevoegd bij het naar beneden scrollen in de artiesten lijst. Dit gebeurt letterlijk.

https://freesound.org/people/ParadoxTheSock/sounds/412595/

[jeskepmed-blog]

Intro + hoofdschermen

Ik heb er voor gekozen om de hoofdschermen simpel en overzichtelijk te houden. De guide-character leid de bezoekers door het scherm met de tekstwolkjes. Overigens wil ik de guide-character nog meer betrekken bij het linker gedeelte van het scherm. Hoe ik dat wil doen ga ik nog over brainstormen.

Ik heb nog geen geluid onder de hoofdschermen gezet dat is mijn volgende stap. Ook ben ik nog niet helemaal tevreden over het geluid bij het opkomen van het logo. En ik vind dat er nog meer met de knoppen ‘gespeeld’ kan worden. Wanneer de gebruiker erover heen hovert wil ik dat de knop iets gaat doen.

BRONVERMELDING (geïnspireerd op): hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, geraadpleegd op: 06/03/18, http://woohahfestival.com/

Tijger: Woo Hah, geraadpleegd op: 06/03/18, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM:

[jeskepmed-blog]

2e versie intro

Dis mijn tweede versie van mijn interface die de bezoeker gebruikt voor zijn of haar ideale festival dag. Ik heb hierin de vernieuwde guide-character toegevoegd. Ook heb ik het geluid vervangen wanneer het logo van Woo Hah verschijnt. 

Geluid opkomen van het logo: het geluid past beter bij de animatie, het is meer één. 

https://freesound.org/people/Tomlija/sounds/175677/

BRONVERMELDING (geïnspireerd op): hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, geraadpleegd op: 06/03/18, http://woohahfestival.com/

Tijger: Woo Hah, geraadpleegd op: 06/03/18, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM:

[jeskepmed-blog]

GUIDE-CHARACTER

Als feedback kreeg ik: Probeer meer zelf te ontwerpen, je gebruikt nu heel veel bronnen en die combineer je tot iets, maar er blijft weinig over wat je echt zelf hebt gemaakt. Geef de tijger iets mee waardoor ie uniek wordt, iets van jezelf en waarmee het ook duidelijker wordt dat het echt een guide-character is speciaal voor dit onderdeel. 

De tijger heb ik nu opnieuw ontworpen (ik was namelijk het Illustrator bestand kwijt geraakt). Nu ben ik uit de losse hand en met eigen vormen gaan ontwerpen. Ook heb ik de tijger iets unieks gegeven. Namelijk een bandana die bij de hip hop industrie past. En ook door veel artiesten gedragen wordt. Dit zorgt ervoor dat de guide-character meer bij het onderdeel past waar hij de bezoekers doorheen leid. 

Geïnspireerd op, bronnen:

http://www.thestanleychowprintshop.com/product/tupac geraadpleegd op 06/03/18

https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM: geraadpleegd op 06/03/18

[jeskepmed-blog]

1e versie animatie met interactieve elementen 

Dis mijn eerste versie van mijn interface die de bezoeker gebruikt voor zijn of haar ideale festival dag. Het helpt de gebruiker met plannen. In de volgende versie zal ik de hele interface werkend maken. Zoals in het storyboard omschreven staat. Dit de geanimeerde versie van een openingsscherm (het logo met de vraag), met daarna een hoofdmenu (selecteren van artiesten), met een guide-character (de tijger die de gebruiker door de interface leid), met interactieve elementen (de buttons die van kleur veranderen) en met als laatst bijpassende geluiden. 

BRONVERMELDING: hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, 19-02-2018, http://woohahfestival.com/

Ik heb de tijger afbeelding gebruikt om over te trekken (het is wel eigenwerk), ‘Gebaseerd op’ + hyperlink naar het betreffende werk: Woo Hah, 19-02-2018, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM:

[jeskepmed-blog]

Geluid

Voor mijn animatie/interface heb ik geluiden gekozen die de beweging/handelingen sterker maken. Bij ieder geluid zal ik kort een uitleg geven waarom ik voor deze heb gekozen. 

- Opkomen van het logo: het logo is een kenmerk van het festival. Het komt in het scherm gewaaid, daarom heb ik ervoor gekozen om een windvlaag te gebruiken. 

https://freesound.org/people/michimuc2/sounds/195937/

- Het opeten van het logo: de guide-character begint het logo op te eten om vervolgens naar het openingsscherm te gaan. Vandaar de eet geluiden. Ik heb het geluidsfragment geknipt en geplakt zodat het beter past bij de beelden.

https://freesound.org/people/niwki/sounds/162822/

- Opkomen button 1: Wanneer de gebruiker niet op deze button klikt zal hij/zij niet verder kunnen in de interface. Het is dus van belang dat met dit geluid de button extra benadrukking krijgt. 

https://freesound.org/people/InspectorJ/sounds/403018/

- Klikken op de buttons (algemeen): Wanneer er op de blauwe button geklikt wordt zal dit geluid volgen. Het is een klein en subtiel geluid dat de gebruiker verteld dat hij/zij een stap verder gaat in de interface.

https://freesound.org/people/Splatez07/sounds/413690/

[jeskepmed-blog]

Hoofdscherm

In het hoofdscherm (0:13) gaat de Woo Hah tijger met de festival bezoeker zijn/haar favoriete artiesten selecteren. (De stappen die hierna komen zijn te zien in het storyboard die ik eerder heb geplaatst)

BRONVERMELDING: hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, 19-02-2018, http://woohahfestival.com/

Ik heb de tijger afbeelding gebruikt om over te trekken (het is wel eigenwerk), ‘Gebaseerd op’ + hyperlink naar het betreffende werk: Woo Hah, 19-02-2018, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM:

[jeskepmed-blog]

Openingsscherm

Na de animatie komt de hoofdvraag tevoorschijn. Wanneer de gebruiker over ja dat wil ik met de muis beweegt verkleurt de knop. Dit is ook zo bij de site van Woo Hah, dat heb ik dus doorgevoerd in mijn animatie. 

BRONVERMELDING: hyperlink naar het betreffende werk: het logo van Woo Hah in de animatie: Woo Hah, 19-02-2018, http://woohahfestival.com/

Ik heb de tijger afbeelding gebruikt om over te trekken (het is wel eigenwerk), ‘Gebaseerd op’ + hyperlink naar het betreffende werk: Woo Hah, 19-02-2018, https://www.google.nl/search?q=woo+hah&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiXwe2o7bLZAhWCL1AKHcSMCZ4Q_AUICigB&biw=1280&bih=703&dpr=2#imgrc=O4yHnPg-qY_soM: