Repository navigation
Creative coding spike
Ontwerp en maak creatieve oplossingen voor de interface.
Deze deeltaak hoort bij sprint 17 User Needs. Dit is een deeltaak die je in totaal drie keer individueel uitvoert. Bij de sprintplanning wordt de opdracht uitgelegd.
Deze deeltaak hoort bij de leertaak:
Je leert hoe je met CSS en client-side JS creatieve oplossing voor de interface kan ontwerpen en maken.
Je gaat werken op een manier die in scrum een programming spike wordt genoemd. Een spike is een taak gericht op het beantwoorden van een vraag of het verzamelen van informatie. In plaats van het produceren van een verzendbaar product. Bij sommige taken kan niet goed ingeschat worden tot het ontwikkelteam daadwerkelijk wat werk verricht om een technische vraag of ontwerpprobleem op te lossen. De oplossing is dan om een zogenaamde 'spike' te creëren.
Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional. - Wikipedia
Voor de opdracht van de opdrachtgever ontwerp en maak je creatieve oplossingen voor de interface. Nu de website statisch gegenereerd wordt kun je al je skills inzetten om de interface te verrijken. De bedoeling is dat je gebruikers "oooh" en "aaaah" roepen en niet meer kunnen stoppen met klikken! Of Scrollen! Of gooien!
Elke week ontwerp en maak je een creatieve oplossing, welke je op vrijdag gaat testen. Deze sprint ga je in drie spikes, 3 experimenten ontwerpen en maken.
- Kies of bedenk in overleg met jouw team een experiment om te gaan maken, gebruik hiervoor de (FDND Conceptroulette)[https://conceptroulette.fdnd.nl/]
- Maak een branch voor jouw experiment en kies daarvoor een goede naam (dus niet: branch-experiment1-justus)
- Maak een tijdsinschatting en schiet issues in voor je taken (lees even verder)
- Doe vooronderzoek en bepaal de elementen van jouw stijl. Gebruik screenshots of Pinterest om een verzameling te maken. Neem een collage op in de betreffende issue.
- Schets een wireflow voor jouw concept, gebruik eventueel de morphologische kaart. Bedenk welke interacties, animaties en geluidsondersteuning je nodig hebt. Neem jouw schetsen op in de betreffende issue.
- Maak een breakdown schets waarin je onderzoekt hoe je jouw concept met HTML, CSS en Javascript kunt implementeren.
- Bespreek jouw schets met teamgenoten of docenten. Neem ook jouw breakdown schets op in de betreffende issue.
- Implementeer jouw concept in HTML/CSS/JS en Sveltekit. Beschrijf in de betreffende issue hoe je de belangrijkste dingen voor elkaar krijgt.
- Test uitvoerig op RAP/PE principes en beschrijf verschillen in performance in de betreffende issue.
- Voer een pull-request uit waarin je de belangrijkste zaken uit bovenstaande issues opneemt. (nb. voer het PR nog niet door!)
- Publiceer jouw project via Vercel of Netlify naast de bestaande site (je selecteert dan jouw aparte branch).
- Laat je concept testen door de tribe bij een user-test tijdens de Design & Code review! Neem opmerkingen op in het pull-request. Voer opgedane inzichten door en voeg die als commits toe aan het pull-request.
- Bespreek tenslotte met je team welke functionaliteit overgenomen wordt in de code-base. Sluit de andere pull-requests maar verwijder niet de branches!
- GSAP en Threlte.xyz
- Aan de hand van conceptroulette.fdnd.nl
- CSS features die maximaal 6 maanden oud zijn
- Aan de hand van conceptroulette.fdnd.nl
- In lijn met de huisstijl van de opdrachtgever, vrij in techniek
Deze opdracht is done als je (in totaal 3x):
- Je hebt een creative-coding experiment ontworpen en gemaakt in een aparte branch van jouw teamproject
- Je hebt je proces gedocumenteerd in issues, commits en pull-requests
- Je hebt in de Readme van de leertaak de experimenten toegelicht