Volgend jaar begint de (halve) minor Exclusive Design. Wat jullie hebben gedaan bij het vak Human Centered Design gaan andere studenten dan tien weken lang doen. Ze gaan tien weken lang prototypes maken voor echte mensen met echte beperkingen.
Voor deze minor is een goede website nodig.
Het concept is als volgt: de website moet de bezoeker een indruk geven van hoe het is om het web te bezoeken met beperkingen. Terwijl het tegelijkertijd natuurlijk wel informatief is. Én toegankelijk.
Het is de bedoeling dat er in de toekomst ook werk uit de minor op komt te staan. Dat is er nu nog niet, dus wordt er in eerste instantie werk uit andere minoren getoond wat aansluit bij de minor. De projecten die jullie bij het vak HCD hebben gedaan bijvoorbeeld.
De volledige debrief is te vinden op deze Notion pagina.
- Overviewpagina met korte introductie
- Detailpagina met standaard informatie minor
- Benoemen halve minor
- Passende stijl toepassen
- Showcase studentenwerk
- 2 lagen om te ervaren hoe het is om een beperking te hebben
- Maken in 11ty
- Nonsense toevoegen
- Meerdere lagen om te ervaren hoe het is om een beperking te hebben
- Meerdere beperkingen ervaren + optie aan/uit zetten
- Verbeterde ervaring voor mensen met beperking
- Website customizen met font, kleur, etc.
- Randomizer
- Website ziet er elke keer anders uit als je hem bezoekt
Binnen dit project werken we met 11ty, dit is een simpele statische site generator. De map _site bevat alle bestanden die client side worden ingeladen en gegenereert zodra de server is opgestart. Dit kan met npm run watch of nmp run start. De map _includesbevat de template van de verschillende pagina's en partials die we inladen in de templates. Dit zijn HTML en Nunjucks bestanden. 11ty werkt samen met .md bestanden, hiermee worden verschillende webpagina's aangemaakt. In de public map staan de bestanden waarin wij binnen het project het meeste werken, dat is de CSS, JavaScript en afbeeldingen die we binnen de website gebruiken. Binnen het project zijn we vooral veel gefocust op de CSS, waarmee we experimenteren met zowel de gehele styling als de opmaak van de teksten.
Voordat we van start kunnen gaan, zullen we de repository moeten clonen.
Dit kan worden gedaan door de volgende regel in de terminal te typen:
git clone https://github.com/lisaoude/exclusive-design/
Als volgende zullen we de dependencies moeten installeren
npm install
Vervolgens starten we de server op.
Dit kan worden gedaan door de volgende regel in de terminal te typen:
npm run start
of als je aanpassingen maakt en meteen wilt dat de server opnieuw opstart:
npm run watch
We zijn er bijna! We hoeven alleen nog naar de localhost in de browser te navigeren.
http://localhost:8080/
Deze repository is gelicentieerd als MIT by © Sanne Duinker & Lisa Oude Elferink, 2021
We hebben de package 11ty gebruikt voor de opbouw van dit project.
11ty is een static site generator. In ons geval gebruiken wij 11ty om van de .md bestanden pagina's te maken. Vervolgens gebruiken wij Nunjucks om templates en template partials aan te maken waar de content uit de HTML bestanden in wordt geplaatst.