Visual Design minor
Wat houd het in?
De verdiepende minor Visual Design & Front-end Development bestond uit 4 blokken waarbij ik zelfstandig aan 4 eigen leerdoelen heb gewerkt. 1 keer per week was er een bijeenkomst met de docenten en andere studenten om de voortgang te bespreken en feedback te vragen.
​
Ik heb het eerste blok gewerkt aan Typografie, het tweede blok aan Digitale Illustratie, het derde blok aan Micro Interactie en het vierde blok was een groepsopdracht om alle leerdoelen van 4 studenten op 1 website te laten zien.
Typografie (blok 1) en Digitale Illustratie (blok 2)
Het eerste blok bestond uit het leren gebruiken van typografie om een pagina aantrekkelijk te maken. Dit wilde ik doen voor 4 verschillende doelgroepen. Ik heb hiervoor gebruik gemaakt van InVision om mijn inspiratie neer te zetten en Figma om de de pagina's te maken.
Elke doelgroep heeft andere eisen, dus dat was de uitdaging. Ik heb alleen tekst, kleur en vormen gebruikt om dit te doen. In het begin heb ik voornamelijk geëxperimenteerd, om zoveel mogelijk ideeën op te doen en uit te proberen. De besten heb ik later voorgelegd aan de doelgroepen om hun input te krijgen.
​
Het tweede blok wilde ik leren om realistisch digitaal te illustreren. Ik heb dit gedaan in Adobe Illustrator, omdat ik hier matige ervaring in heb en dit op deze manier ook kon verbeteren.
Door het tijdslimiet heb ik 2 technieken gekozen, namelijk licht/schaduw en perspectief. Voor beide technieken heb ik meerdere gereedschappen uitgeprobeerd om er uiteindelijk van elk 1 te kiezen die ik heb gebruikt in de eindillustratie.
Hieronder staat een kleine selectie van het proces en de resultaten van blok 1 en blok 2. (Blok 3 en 4 volgen hieronder.)
Typografie - De inspiratie van typografie die ik met deskresearch heb gevonden
Typografie - Experimenten van titels, paragrafen en gesproken tekst
Typografie - Eindpagina's voor de verschillende doelgroepen
Digitale Illustratie - Licht en schaduw technieken uitproberen met Adobe Illustrator en persoonlijke voorkeur keizen
Digitale Illustratie - De techniek voor perspectief in Adobe Illustrator gebruiken en beheersen
Digitale Illustratie - De eindillustratie met de toegepaste technieken voor licht/donker en perspectief
Micro Interacties (blok 3)
Animaties en interacties zijn mij steeds meer gaan fascineren. Door kleine interacties toe te voegen aan een pagina, wordt het interessanter en bewegelijker wat de aandacht van de gebruiker kan trekken. Daarom heb ik voor een leerdoel gekozen waar ik dit kan leren.
​
Het leerdoel bestond uit het leren maken van micro interacties en om deze toe te voegen aan een mobiele website. Daarvoor heb ik eerst een herontwerp gemaakt waar ik deze interacties aan toe kan voegen. Na 5 weken wilde ik een prototype hebben in ProtoPie van een verbeterde dierenwebshop.nl met micro interacties.
​
Na veel iteratie, uitproberen, feedback en wat frustraties ben ik onwijs blij met het resultaat en ik hoop dat ik in de toekomst meer met micro interacties te zal werken.
De oude, huidige homepagina van de gekozen website
Styleguide voor de verbeterde website
Herontwerp van de nieuwe homepagina waar vervolgens micro interacties aan toe zijn gevoegd
Groepsopdracht (blok 4)
Het laatste blok heb ik samen met een team van 4 een website in elkaar gezet waar al onze leerdoel opstaan. Ieder van ons heeft een andere specialisatie en ik heb de UI en interactie van de gehele website, met input van mijn teamleden, mogen neerzetten. In dit blok heb ik dan ook geleerd te communiceren in een multidisciplinair team en met de developer. Ik ben heel blij met het eindresultaat en met de samenwerking.
Eerste wireframes start- en homepagina
Eerste wireframes planeet- en detailpagina
De eind mockups voor de desktop. Ik heb ook de mockups voor de mobiele versie gemaakt
Dit zijn de post-its met alle feedback naar de developer van ons groepje zodat alles eruit zou zien er werken zoals ik had bedacht
De uiteindelijke styletile voornamelijk met de gebruikte kleuren en lettertypes
Terugblik
In elk blok heb ik veel geleerd. Van het leren om de inhoud van content visueel te maken tot het leren communiceren met mijn team en met de developer.
In het laatste blok ben voornamelijk bezig geweest om de UI en deels UX van de website op te zetten en ik vond het heel erg leuk om dit in een multidisciplinair team gedaan te hebben. Het was interessant om te zien hoe we gaandeweg beter gingen samen werken en hoewel we allemaal ons eigen werk hadden, hielden we elkaar vaak op de hoogte en vroegen we feedback. Dit heeft ervoor gezorgd dat we allemaal input hebben gehad en tevreden zijn met het uiteindelijke resultaat.
