Pandjes in de plantjes

De opdracht

Ontwerp een mobiele website voor een klein duurzaam initiatief in Amsterdam, als onderdeel van het platform De Lieve Groene Stad. Het doel van de website is om het verhaal van het initiatief op een persoonlijke en authentieke manier te vertellen, vanuit de rol van een influencer. Deze website moet uitgewerkt worden tot een werkend HTML/CSS-protoype. Dit is het eerste project waar ik aan gewerkt heb voor mijn opleiding.

Informatie

  • Leerjaar: 1

  • Periode: November 2024

  • Duur: 3 weken

  • Programma's: Illustrator, Visual Studio Code

  • Focus: UI Design, Visual Design, Front-end development

Het Resultaat

Voor project De Lieve Groene Stad ben ik aan de slag gegaan met een mobiele website waarin groene gevels centraal staan: Pandjes in de Plantjes. Ik ben er namelijk van overtuigd dat een drukke stad als Amsterdam wel wat extra groen kan gebruiken. Groene gevels zijn hier de oplossing voor! Op de website vind je meer informatie over groene gevels, lees je over de voordelen en nadelen, en krijg je tot slot een stappenplan waarmee je zelf aan de slag kunt met het maken van een groene gevel.

Hoe ben ik te werk gegaan?

De onderzoeksfase

In de onderzoeksfase heb ik inspiratie opgedaan door de stad in te gaan, foto's te maken en onderzoek te doen naar kleine duurzame initiatieven in Amsterdam. Daarbij viel het mij op dat ik veel foto's had gemaakt van planten en begroeiing op gebouwen, vooral op typisch Amsterdamse panden. Vanuit hier is het idee ontstaan om te focussen op groene gevels.

De conceptualisatiefase

Vervolgens ben ik gaan schetsen en heb ik meerdere ideeën uitgewerkt. Op basis van feedback van docenten en klasgenoten heb ik één concept gekozen en verder uitgewerkt. In deze fase ben ik ook gaan experimenteren met kleuren, composities en vormen, waardoor het concept voor de website steeds meer vorm en een eigen uitstraling kreeg.

De ontwerpfase

In de ontwerpfase heb ik het concept verder uitgewerkt tot een volledige website en ben ik aan de slag gegaan met het coderen. Ik werkte de schermen verder uit met tekst, illustraties en iconen. Dit was de eerste keer dat ik Illustrator gebruikte om mijn eigen illustraties en iconen te maken. Vervolgens heb ik meerdere iteraties verwerkt en het ontwerp verbeterd op basis van nieuwe feedback. Tot slot heb ik de puntjes op de i gezet en afgerond, waardoor ik een werkende website had met mijn eigen ontwerp!