/web-typography-21-22

🎓 Web Typography · 2021-2022 · Curriculum and Syllabus

Primary LanguageCSSMIT LicenseMIT

Voorbereiding

Ik ben begonnen aan de opdracht door eerst te noteren watvoor geluiden er worden afgespeeld en wanneer deze te horen zijn in het fragment. Hiervan heb ik een overzicht gemaakt en ben daarna bij elk geluid gaan nadenken en noteren wat en hoe ik kan vormgeven om de geluiden/sfeer na te bootsen.

Nadat ik dit voor mijzelf duidelijk had gemaakt, ben ik mijn werkomgeving/codeert omgeving gaan opnieuw gaan inrichten om het voor mijzelf overzichtelijker te maken. Daarna ben ik de iframe eruit gaan halen, ik vond namelijk mooier om zelf een video er in te zetten, omdat je dan die YouTube rotzooi niet hebt. En daarnaast is de resolutie van de video op deze manier ook hoger, omdat ik de film zelf ben gaan bijsnijden om de benodigde fragmenten te krijgen.

Nadat ik helder had wat ik wou gaan doen, ben ik begonnen met coderen.

Sounds

Sound 0 heb ik vormgegeven, door goed naar de hoge en lage tonen te luisteren van het geluid. Ik heb namelijk een witte gloed achter de video geplaatst, die met het geluid mee beweegt en groter/kleiner wordt. Dit bootste naar mijn mening erg goed het geluid.

Bij sound 1 (alarm) had ik al een leuk idee, ik vond de rode gloed en trillen van de video er goed bij passen. Vervolgens ben ik sound 2 (politie alarm) gaan vormgeven, dit geluid liet mij denken aan de zwaailichten van een politieauto. Dus heb ik de kleur rood en blauw op de achtergrond van de video heen en weer laten gaan. Het geluid bij sound 3/4, 6 en 8 klonk voor mij als een grote, metalen mechanische deur die langzaam open ging. Dus dit heb ik vormgegeven door 2 blokken van elkaar af te laten animeren.

Sound0

Sound 9 was een erg irritante geluid verschillende tonen te horen waren. Ik had al gelijk het idee om ruis toe te voegen over het hele beeld, om de piep na te bootsen. De piep werd met de tijd steeds harder, hierbij heb ik gekozen om de video langzaam groter te maken, waardoor ook de ruis meer/groter wordt. Ook heb ik het beeld laten trillen om het beeld vervelender te maken om naar te kijken. Hierop kreeg ik de feedback dat het nog vervelender kon, dus toen ben ik een "invert" filter gaan toepassen en deze wordt steeds erger namate de video duurt. Bij de beoordeling had ik dit vervangen door een andere filter, maar heb deze later weer terug gedaan, omdat de andere filter toch sterker over kwam.

Wanneer het vervelende geluid weg is, gaat alles stijling er af, omdat het beeld weer neutraal is (Hiervoor heb ik wel een nieuwe class/sound toegevoegd, namelijk sound 10).

Sound9

Sound 11 gaf mij een beetje hetzelfde gevoel als bij sound 10, alleen met een extra geluid erdoorheen. Namelijk een soort zweefachtige geluidje die heen en weer ging, doordat het steeds harder en zachter werd. Deze geluid heb ik proberen over te brengen door op de achtergrond een gradient heen en weer te laten gaan met verschillende kleuren. De piep en andere vervelende geluid die er tussen zat, heb ik weer vormgegeven net als in sound 10. Ruis, video trilt en wordt groter.

Ook hier om alle stijling van de video af te halen heb ik een extra sound toegevoegd, namelijk sound 12.

Sound11

Typografie

Voor alle typografie heb ik het Brenner font gebruikt. Omdat het Brenner-family super breed is, heb ik verschillende stijen gebruikt voor de uitspraken van "het syteem" en "Officer K". Het systeem heeft een robot stem, ik vond de mono-type font hierbij het best passen, dat gaf mij het meest robot-achtige gevoelens in de family. Ook als je kijkt naar andere robot stemen in films, is het vaak een mono-type font. Voor Officer K heb ik gekozen voor de normaalste font-style, aangezien het in vergelijking met het systeem een natuurlijkere/normalere stem is.

Ook heb ik ervoor gekozen om aan de voorzijde van de uitspraken, neer te zetten wie er aan het spreken is, ik vond dit erg handig en veelzeggend voor de video. Want in het begin is het niet duidelijk wie er aan het spreken is. Nadat bekend wordt, welke stem waarbij hoort, heb ik "System" en "Officer K" vervangen door de letter "S" en "K".

Voor de langslopende persoon die "Fuck off" zegt tegen Officer K heb ik de tekst groter gemaakt dan de andere teksten en een rode kleur gegeven. Hiermee wil ik laten zien dat de persoon het op een boze toon zegt. Ook heb gekozen om de tekst italic te maken en een font met schreven te gebruiken, deze samenhang geeft de tekst een "niet nette" uitstraling. Ook is deze tekst makkelijk te onderscheiden tussen de andere teksten.

Aanpassingen a.d.h.v. feedback bij de beoordeling

  • Na sound 4, wanneer "Officer K" aan het lopen was in de gang, had ik het beeld op en neer laten bewegen. Na de beoordeling heb ik dit er uit gehaald, omdat ik als feedback kreeg dat het niet veel toevoegde aan het geluid/beeld, ik was daar wel mee eens.

  • Het stukje waar er Fuck Off gezegd wordt heb ik aangepast. De vormgeving kwam over alsof dit geschreeuwd werd tegen Officer K., maar het wordt meer erg boos gefluisterd, en hier was ik wel mee eens. Wat ik gedaan heb is de de tekst veel kleiner gemaakt, maar nog wel nog iets groter dan de andere tekst. Dit maakt het al wat minder schreeuwerig. Ook heb ik de tekst gepositioneerd bij de persoon die het zegt, zodat het duidelijker is wie het zegt, dat was eerder niet echt duidelijk.

  • Ik heb door de golf in de tekst geprobeerd om de toon fluisterend te laten overkomen, maar nog wel met boze intenties door de font en de kleur hetzelfde te houden.

  • Ook heb ik bij de 2 bovenstaande punten, de video, waneer het beeld naar Officer K. gaat kort donker gemaakt, om het beeld te creeeren dat het bij hem wel hard aankwam.

  • Sound 9 oftwel het geluid dat steeds irritanter werd. Het bijhorende beeld was al sterk/irritant, maar heb na de feedback nog ietsjes aangepast. De trilling die ik had in het beeld, wordt nu met de opkomende/hogere pieptuin erger. Dus het beeld gaat langzaam sneller trillen.

  • Ook heb ik aangepast in Sound 9 aangepast de achtergrond gelijk zwart wordt en video gelijk kleiner wordt wanneer de pieptoon weg is, dit was eerder minder smooth.

De grootste verandering zit in het 2e fragement, oftwel bij sound 11. Ik kreeg van meerdere mensen de feedback dat het trillen prima was, maar niet super veel paste bij het geluid, dus dat heb ik toen er uitgehaald. De gradient op de achtergrond, was wel erg goed heb ik meerdere keren gehoord, dit paste goed bij het geluid. Alleen deze gradient ging niet echt op de tempo van het geluid, dus heb ik de tempo aangepast. Ook heb de kleuren aangepast naar donkerdere kleuren, omdat dit paste bij het donkere/zweverige gevoel bij het fragment. De voorgaande kleuren waren licht en zouden vrolijk kunnen overkomen, en dit is bij dit fragment uiteraard niet het geval. Om het beeld echt over te laten komen, ben ik meer met de tempo van het geluid gaan doen, zo wordt het formaat aangepast op de tonen die er te horen zijn. Met de intensiteit van het geluid wordt dus het beeld groter, waarbij tegelijkertijd de contrast ook wordt aangepast met de intesiteit. Dit is om de druk en grimmige sfeer na te bootsen.

Ik heb ook een tril-animatie toegevoegd, wanneer er een melding binnenkomt en de vrouw naar het scherm kijkt. Dit maakt het duidelijker wat er gebeurd, ondanks je geen geluid hebt.

Tot slot heb ik deze read-me gevuld, met bijhorende beargumentatie.

Sound11 aangepast

Iteraties

Ik moet eerlijk zeggen dat het lang duurde om tot dit resultaat te komen, ik heb het een beetje onderschat om een goed idee te bedenken. Ik heb hiervoor meerdere iteraties gedaan. 1 van de iteraties was dat ik net als bij sound 0, middels de glow op de achterkant van de video het geluid ging nabootsen. Deze glow werd steeds groter en kleiner op het geluid, en veranderde van kleur (regenboog gradient) gedurende het fragement van sound 11. Ook had ik een idee om de video heen en weer te laten bewegen om de tempo van het zweverige geluid na te bootsen, en de video groter en kleiner te maken op de toonhoogte. Maar beide ideeen, zijn het toch niet geworden. Met de feedback die ik heb gekregen ben ik uiteindelijk bij mijn 3e idee uit gekomen. Hierbij een video, van de 2e iteratie.