Microinteracties en CSS

Inleiding

11 maart 2020 - Sanne t Hoofd is docent op de HvA. Hij vertelde over CSS en wat je er allemaal mee kon doen. Als voorbeeld liet Sanne werkt zien van eerstejaars, die geëxperimenteerd hadden met CSS. Ik vond het super knap en leuk om te zien wat de studenten gemaakt hadden! Een aantal werken zijn hier te zien:

• https://www.sinds1971.nl/spelenmetcss/2019-feb/jenny/index.html
• https://www.sinds1971.nl/spelenmetcss/2019-feb/amy/index.html

Voor het maken van een goede website is het om goed te bedenken wat de gebruiker wil. Hierdoor kun je een passende interactie creëren. Sanne vindt dat elke micro interactie geoptimaliseerd kan worden, dit is naar het idee van Dan Saffer. Drie definities van microinteracties:

1. A signature moment in a digital product
2. A product based around one micro-interaction
3. People see interaction with a digital product as a series of micro-interactions.

Ben&Jerry's

In de propedeuse hebben we een opdracht gemaakt voor Ben &Jerry's. Sanne heeft dit uitgewerkt tot een werkend prototype. Erg mooi om te zien! Ik vroeg of dit met CSS gebouwd was. Sanne heeft het programma Dreamweaver gebruikt. Ik kende dit nog niet, het schrijft automatisch HTML en CSS bij je ontwerp.

Carousel

Sanne liet nog een voorbeeld zien van hoe hij een caroussel had gemaakt met CSS. Eerst heeft hij geschetst hoe het er uit moest komen te zien. Daarna berekende hij hoe groot de cirkel zou worden en de hoek waarin de elementen zijn uitgelijnd. Met perspective kan je zorgen voor een 3d effect. Ik vond het indrukwekkend dat dit met alleen CSS te maken is. Een klein stukje JS is toegevoegd om te werken met input van de buttons.