Eigen projecten

Presentatie voor de klas

Voor een klassikale opdracht van Guido moesten we een advertentie kiezen en analyseren. Ik koos de kerstreclame van HEMA en presenteerde mijn analyse aan de klas. Tijdens mijn presentatie legde ik uit wat het concept van de reclame is, waarom ik juist deze reclame heb gekozen en waarom deze volgens mij goed werkt.

Maak designs met je volledige naam

Van Bram kregen wij de opdracht om verschillende typografieën te verkennen door onze volledige naam in diverse lettertypes uit te proberen.

Voor de eerste typografie-oefening heb ik gekozen voor een zakelijke stijl. Het doel was om een clean en strak ontwerp neer te zetten, passend bij een zakelijk verslag. Door mijn naam linksboven, onder elkaar te positioneren, creëerde ik een rustige en moderne uitstraling. Ik heb gebruikgemaakt van een variatie binnen de Serif-typografie om het geheel een iets klassiekere toon te geven en te voorkomen dat het té modern zou worden.

Bij het ontwerp met het zwarte en roze logo heb ik gespeeld met typografieën die sterk op elkaar lijken, maar subtiele verschillen tonen. Door gebruik te maken van zowel een zwarte als roze achtergrond ontstond een interessant contrast. Het logo op de zwarte achtergrond is beter leesbaar en oogt rustiger. Op de roze achtergrond komt de typografie minder goed tot zijn recht en is het van een afstand slecht leesbaar. In combinatie met de bloemen en kleurgebruik zorgt dit ontwerp voor een zeer zoete, bijna sprookjesachtige uitstraling.

Daarna wilde ik mijn naam op een speelse manier weergeven. Hierbij heb ik bewust gekozen voor het gebruik van contrasten, onder andere door complementaire kleuren toe te passen (geel en blauw). De typografie bestaat uit ronde, speels gevormde letters die niet volledig recht staan, om een luchtige sfeer op te roepen. Mijn naam is schuin van linksboven naar rechtsonder gepositioneerd, wat bijdraagt aan de speelsheid. Ook heb ik ronde vormen toegevoegd om het geheel visueel sterker te maken. Mijn inspiratie hiervoor haalde ik uit de vrolijke sfeer van een ballenbak en het Carnaval Festival van de Efteling.

Daarna wilde ik een zakelijk ontwerp maken, vergelijkbaar met wat je op de voorkant van een verslag zou kunnen gebruiken, eventueel met een logo erbij. Om wat afwisseling te creëren, besloot ik te experimenteren met een rustigere sfeer en een natuurlijk gevoel. Hiervoor koos ik een typografie die lijkt alsof de letters in hout zijn gesneden, wat bijdraagt aan een organische uitstraling.

Om opnieuw te spelen met contrast en complementaire kleuren, heb ik gekozen voor een combinatie van fel oranje, geel en paars. Het gekozen lettertype is speels, maar tegelijkertijd rustiger, zodat het geheel niet te druk oogt. Mijn inspiratie voor dit ontwerp kwam van een rups uit een kinderboek — iets dat tegelijkertijd vriendelijk, natuurlijk en een beetje fantasierijk aanvoelt.

Daarna vond ik een typografie die doet denken aan bamboe. Deze vorm gaf mij de inspiratie om er iets speels van te maken. Om de aandacht op mijn naam te houden, heb ik gekozen voor een rustige achtergrond en slechts in twee hoeken bladeren toegevoegd als decoratie.

Tot slot wilde ik spelen met de betekenis van mijn naam. In mijn achternaam zit het woord huizen, wat mij aan het denken zette. Als ik een ander beroep zou kiezen dat aansluit op mijn naam, dan zou dat bijvoorbeeld makelaar kunnen zijn. Daarom heb ik het woord huizen in mijn naam extra benadrukt door het oranje te maken — een kleur die ook terugkomt in de afbeelding. Zo ontstaat er een subtiele, visuele link tussen naam, functie en ontwerp.

Opdracht maak een website na (kruidvat)

Er is van Frank uit een opdracht gegeven om te oefenen met CSS Grid door een zelfgekozen website na te maken. Ik heb ervoor gekozen om de website van Kruidvat na te maken, omdat deze uitdagend genoeg was voor mijn niveau. Ik had namelijk weinig tot geen voorkennis van Grid.

Om te beginnen heb ik me georiënteerd door online documentatie en tutorials over Grid te lezen. Daarna heb ik geoefend met Grid Garden. Samen met Jennifer heb ik ook kort de Grid-layout van YouTube nagemaakt. Vervolgens ben ik zelfstandig aan de slag gegaan met het namaken van de Kruidvat-website. Tijdens dit proces heb ik geleerd wat Grid precies inhoudt. Ik weet nu hoe je rijen en kolommen op verschillende manieren kunt definiëren, zoals met 1fr, 10%, of 10px, en dat je zelfs met negatieve waarden kunt werken. Ook ontdekte ik dat je met grid-template: rows / columns; snel structuur kunt aanbrengen in je code. De Kruidvat-layout was een extra uitdaging, omdat deze niet werkt met een standaard 3x3 raster zoals YouTube, maar een meer complexe structuur heeft. Hierdoor moest ik goed nadenken over de indeling en puzzelen tot het goed zat. Wanneer ik vastliep, heb ik gebruik gemaakt van de inspectiefunctie van de browser om te zien hoe de originele website was opgebouwd.

Tot slot heb ik Git gebruikt voor versiebeheer, zodat ik overzicht hield over mijn voortgang en gemakkelijk terug kon naar eerdere versies.

Inspiratie

Resultaat

Als ik meer tijd heb dan zou ik de site nog mooier aankleden met een navbar, footer, padding, images, en de juiste lettertypes. Maar voor nu is mijn prioriteit om te oefenen met Grid.

Bronnen

Maak een chaotische JavaScript website

Frank heeft opdracht gegeven om te oefenen met verschillende Javascript functies zodat je de basis leert van Javascript. De opdracht was om minimaal vijf verschillende animaties te maken. Hoe chaotischer, hoe beter.

Ik had nog niet eerder met Javascript gewerkt dus dit was erg leerzaam. Ik ben begonnen met brainstormen over wat voor soorten animaties ik wilde maken. Vervolgens heb ik met behulp van AI de animaties werkelijkheid gemaakt. Hierbij heb ik bewust niet simpelweg code overgenomen, maar de tijd genomen om te begrijpen wat de code doet en waarom. Voor mij is het erg belangrijk dat ik niet blind kopieer, maar daadwerkelijk leer hoe JavaScript werkt.

Bronnen

The playground 20 maart

Ik ben op 20 maart naar ‘The playground’ gegaan. Hier heb ik Ted talks gevolgd van meerdere artiesten en heb ik op de vloer rond gekeken naar wat er door verschillende artiesten is gemaakt, wat er achter zit en hoe je verschillende onderwerpen aanpakt.

Feefall's Tedtalk

Ze legde uit hoe zij haar tekeningen begint en de inspiratie hierachter. Hoe je volgers betrekt en hoe je kan spelen met emoties. Ook benadrukte ze hoe het belangrijk (maar moeilijk) het is om je eigen stijl te vinden, en dat je goed je onderzoek moet doen naar wanneer je bepaalde tekeningen maakt die gebaseerd zijn op informatie. In haar geval maakte ze tekeningen van cellen waar een celorganel verkeerd was aangegeven wat voor backlash zorgde. Daarnaast vertelde ze ook over kleurencontrast en de 60-30-10 regel voor kleurgebruik. Hierbij wordt voor 60% gebruik gemaakt van de hoofdkleur, 30% procent met een secundaire kleur en 10% met accentkleuren.

Gesprek met een artiest

Ik bij de individuele artiesten langs gegaan om te kijken wat ze gemaakt hebben en hoe hun te werk zijn gegaan. Daarna heeft iemand mijn portret op een digitale tablet getekend. Dit deed hij ook bij andere leden van onze groep, waarbij hij advies gaf over hoe je het beste te werk kan gaan met tekenen.

Nomada's Tedtalk

Om 13.00 begon de Ted talk van Nomada studio over hun game Neva. Ze legde uit hoe hun game Neva in vier jaar tijd is ontwikkeld en welke keuzes ze in het ontwerp proces heeft gemaakt.

Ze begonnen met designs te maken van scenes, waar ze verschillende seizoenen en momenten van de dag lieten zien. Daarna hebben ze verschillende assets gemaakt, dit zijn items die de game ‘aankleden’. Vergeleken met andere games heeft Nomada ervoor gekozen om veel verschillende assets te maken zodat er geen repetitie plaats vind zoals bij andere games het geval is, bijvoorbeeld Mario

Wat ik heb geleerd

Ik heb bij Feefall geleerd wat het betekent om een artiest te zijn. Het gaat niet alleen om tekenen en kunst maken maar ook research doen. Wat zit er allemaal qua onderzoek achter een design. Handige tips zoals de 60-30-10 regel, waar je inspiratie vandaan kan halen en hoe je interactie krijgt met je publiek doormiddel van challenges. Van de artiest die portretten tekende heb ik geleerd over hoe je een tekentablet gebruikt, regels voor hoe je goed portretten kan tekenen zoals waar je accentueert, de hoek van waaruit je tekent en hoe je verder kan oefenen. Bij Neva heb ik geleerd over wat het proces is bij het maken van een game, wat voor verschillende mensen betrokken zijn bij het maken van de game, hoe ze zich onderscheiden van de rest en hoe lang het kan duren voordat een game af is. Al met al was het een interessante, leerzame en vooral leuke dag.

JSON-file

Frank gaf ons de opdracht om gebruik te maken van een JSON-bestand. Het doel hiervan was om informatie van een server op te halen en deze dynamisch weer te geven op een webpagina. Ik heb hiervoor een gratis online oefenserver gevonden die willekeurige kattenfeitjes aanbiedt. Deze feitjes heb ik succesvol geïmporteerd en weergegeven op mijn eigen webpagina.

In het begin vond ik het erg lastig om te begrijpen wat een JSON-bestand precies is, wat het doel ervan is en hoe je het correct toepast. Ik heb hierbij veel hulp gevraagd aan klasgenoten, GitHub Copilot en natuurlijk aan Frank. Door dit proces heb ik geleerd wat JSON is en hoe je het kunt gebruiken, al vind ik het nog steeds een uitdagend onderdeel. Ik zou hier in de toekomst graag nog meer mee oefenen om mijn begrip te verdiepen. Daarnaast heb ik opnieuw gewerkt met JSON tijdens de workshop over Progressive Web Apps (PWA), waar ik ook informatie via een JSON-bestand in mijn portfolio heb verwerkt.

Bronnen

Github copilot

Make stairs workshop

Voor een workshop van Maikel hebben wij een animatie gemaakt van een trap die verschijnt, waarbij de treden één voor één naar binnen schuiven terwijl er audio afspeelt. Daarnaast hebben wij de muis veranderd in een fakkel die in het trappengat licht weerkaatst en een knisperend geluid maakt.

Het was erg leerzaam om beter te leren omgaan met HTML, CSS en JS, terwijl je ook iets leuks maakt. Het was een afwisseling tussen bekende en nieuwe informatie. Het enige lastige was dat, op het moment dat je ergens een fout maakt in de code en de uitleg verder gaat, je dit tijdens de uitleg probeert op te lossen. Daarna hadden wij een korte pauze waarin ik om hulp heb gevraagd. Een volgende keer wil ik eerder om hulp vragen, zodat ik niet het risico loop om achter de feiten aan te lopen. Bij het tweede deel van de workshop waren er maar vijf andere leerlingen aanwezig, waardoor ik meer vragen kon stellen.

Workshop PWA verwerkt in portfolio

Van Maikel kregen wij een workshop over hoe je een PWA (Progressive Web App) maakt. Vooraf wist ik nog niet wat een PWA was. We hebben hiervoor een hulpwebsite gebruikt die de basiscodes gaf. Bij onze webapp hebben we ook een functie toegevoegd waarmee je je huidige locatie kunt oproepen. In deze PWA heb ik opnieuw een JSON-bestand gebruikt. Dit vond ik fijn, omdat dit na de vorige workshop nog wat onduidelijk was. Daarom was dit een goede oefening. Na de workshop heb ik ook een PWA gemaakt voor mijn portfolio. Hierdoor kun je mijn portfolio downloaden en ook offline bekijken. Ik vind het leuk en leerzaam dat ik iets wat ik tijdens een workshop heb gedaan, ook kan toepassen op mijn huidige project.

Bronnen

Responsive website

Ik heb een workshop van Maikel gevolgd waarin hij uitlegde hoe je een responsive website maakt. Ik had al een beetje voorkennis over hoe je een responsive website maakt, maar het was mij nog niet gelukt om een volledige website te maken die op elk formaat goed werkt. Het was erg interessant om de theorie erbij te krijgen en daarna samen met live coding mee te kijken en mee te werken. Hierdoor begrijp je eerst wat erachter zit, voordat je het zelf toepast.

Ik heb een workshop van Maikel gevolgd waarin hij uitlegde hoe je een responsive website maakt. Ik had al een beetje voorkennis over hoe je een responsive website maakt, maar het was mij nog niet gelukt om een volledige website te maken die op elk formaat goed werkt. Het was erg interessant om de theorie erbij te krijgen en daarna samen met live coding mee te kijken en mee te werken. Hierdoor begrijp je eerst wat erachter zit, voordat je het zelf toepast.

Workshop flipbook

Tijdens de workshop van Mikael heb ik een flipbook gemaakt. Vooraf had ik geen idee hoe we dit zouden realiseren, maar het was een interessante ervaring. Door het proces heb ik geleerd dat wanneer je iets wilt maken, het helpt om je dit eerst voor te stellen in het echte leven: Als ik dit zou maken, wat zou er in het echte leven moeten gebeuren? Vanuit deze gedachte werk je verder, stap voor stap.

In de workshop hebben we de basis gelegd, en ik wil dit in de toekomst graag verder oppakken en uitwerken. Ik zie mogelijkheden om mijn creatieve ideeën verder te ontwikkelen. Dit project daagt mij uit om nieuwe stappen te zetten en mijn vaardigheden te blijven verbeteren.