Sanne 't Hooft | Microinteracties - GiovanniKaaijk/weekly-nerd-1920 GitHub Wiki

Sanne 't Hooft

Sanne is zelf een docent op de Hogeschool van Amsterdam, Sanne houdt er van om te experimenteren met CSS. Hij vindt het ook leuk om samen met de eerstejaars waar hij les aan geeft, aan ideeën te werken. Hij liet tijdens zijn presentatie ontwerpen zien (klik hier) die ik zelf niet snel had kunnen bedenken, erg creatief en inspirerend.

Micro-interacties

Sanne gaf een les over micro-interacties. Hij legde uit dat je alleen een micro-interactie moet gebruiken als dat is wat de gebruiker wil, niet als de designer het wil. Het is bij het maken van een micro-interactie erg belangrijk dat je de behoefte van de gebruiker goed snapt. Hij gaf ook een voorbeeld om hier inspiratie voor op te doen.

Vaak wordt er snel gedacht aan Javascript wanneer iemand een micro-interactie gaat maken. Sanne liet zien dat je met het gebruik van CSS variabelen en een minimaal beetje Javascript hetzelfde ontwerp veel meer geoptimaliseerd kon maken. Wanneer deze carousel met puur Javascript gemaakt zou zijn, zou het veel zwaarder zijn voor de browser om alles te laden.

Het voorbeeld dat hij hierbij gebruikte was een carousel: alt

Om deze carousel te maken heeft hij eerst geschetst hoe het er uit moest komen te zien. Daarna heeft hij berekend hoe groot de straal moet zijn voor de elementen. Via CSS perspective heeft hij vervolgens een 3d effect gecreëerd. Het eindresultaat is bijna enkel gemaakt via CSS, samen met de calc functie en een minimaal beetje Javascript.