Werk een functionaliteit uit die je kunt bedienen met ‘click’ en nog een user interactie, zoals het toetsenbord, tab, dubbel click, swipe, long press, force touch, of iets anders … Werk je ontwerp uit in HTML, CSS en Javascript om te kunnen testen in een browser.
Werkwijze
Bedenk een functionaliteit die je op meerdere manieren kunt bedienen. Schets eerst hoe de functionaliteit er uit komt te zien. Maak daarna een breakdown-schets van hoe de verschillende elementen technisch moeten gaan werken…
Codeer de functionaliteit in HTML, CSS en JavaScript en test verschillende versies van je ontwerp in een browser.
Planning
- Les 3: Briefing opdracht 2 en beginnen met schetsen en coderen
- Les 4: Eerste versie testen
- Les 5: Oplevering en beoordeling
Voorbeeld functionaliteit die je kunt maken
- Carrousel met vakantiefoto’s: Een carousel met meerdere foto’s van een vakantie, die je kan bedienen met een button en met de pijltjes op het toetsenbord.
- Portfolio website met meerdere projecten en een biografie. Als je naar ‘beneden’ scrollt vult de betreffende section zich met informatie. Als je op tab klikt ga je ook naar de volgende section. Of als je ‘volgende’ roept …
- Settings panel op een foto-overzichtpagina: Instellingen zijn bijvoorbeeld de font-grootte, night vision en het aantal kolommen die naast elkaar worden getoond. Het bedienen van de instellingen moet met de muis en de sneltoetsen op het toetsenbord.
- Je mag ook een eigen idee uitwerken. Kom dan eerst even overleggen.
Criteria
- In de demo maak je gebruik van verschillende User Interface events.
- In de demo dien je rekening te houden met de interface design principles 04, 08 & 09 van Principles of User Interface Design.
- Je ontwerp is aantoonbaar getest en verbeterd. Verslaglegging en resultaat publiceren op Github.
Voeg ook je breakdown-schets toe, en beschrijf je eerste idee en technische opzet en hoe het uiteindelijk is geworden. Leg de code uit.
Resources
- Bekijk hier de lijst User Interface Events die je in javascript kunt gebruiken.
- Als je iets wil doen met scrollen, dan kun je het event ‘scroll’ gebruiken. Misschien kun je ook iets doen met de Intersection observer
- Als een onderdeel van je pagina in beeld moet verschijnen na een click, dan kun je iets doen met scrollIntoView.