🎙️

User Needs

Sprint 16

Inhoudsopgave

  • Repositories
  • Week 1
    • Component Library
    • RAP/PE-Websites
    • Quality Assurance
    • Don’t Repeat Yourself
    • Morfologische Kaart
    • CSS Weekly
    • Typografie en Fonts
  • Week 2
    • Mentor dag week 4
    • Component Libary 2
    • Functional layering
    • Svelte 5
    • Responsive to the user

Repositories

Week 1 | 11 t/m 15 november

Tijdens deze eerste week ligt de focus op het opzetten van een solide basis voor het project door structuur en consistentie aan te brengen in de code en ontwerpbenadering. Hierbij worden de volgende stappen genomen:

Component Library

Een component library is een verzameling van vooraf gemaakte, geteste, en goed gedocumenteerde UI-componenten die herbruikbaar zijn in de gebruikersinterface van een product. Dit zorgt ervoor dat het product een consistente uitstraling en gebruikerservaring heeft, en bevordert daarnaast efficiëntie en schaalbaarheid. Het gebruik van component libraries stelt ontwerpers en ontwikkelaars in staat om snel nieuwe functies en pagina's toe te voegen, terwijl de algehele ontwerp consistentie en kwaliteit behouden blijft.

RAP/PE-Websites

De websites moeten voldoen aan de volgende richtlijnen:

  • Responsive: Geschikt voor verschillende schermformaten.
  • Accessible: Toegankelijk voor alle gebruikers, inclusief die met beperkingen.
  • Performance: Optimaal presterend met korte laadtijden.
  • Progressive Enhancement: Basisfunctionaliteit is gegarandeerd, met verbeteringen voor moderne browsers.

Quality Assurance

Door deze aanpak wordt de kwaliteit van de UI-componenten gewaarborgd, wat leidt tot een duurzame en stabiele gebruikerservaring.

Don’t Repeat Yourself (DRY)

Vermijd dubbele of overbodige code, om de leesbaarheid en onderhoudbaarheid van het project te verbeteren.

Morfologische Kaart

Een morfologische kaart is een ontwerp tool waarmee je systematisch verschillende oplossingen voor een complex probleem kunt verkennen. Het proces werkt als volgt:

  • Definieer functies: Bepaal de belangrijkste functies of aspecten van het ontwerp.
  • Bedenk varianten: Voor elke functie maak je een lijst met mogelijke oplossingen.
  • Vul de matrix: Plaats de functies als kolommen en de varianten als rijen in een tabel.
  • Combineer en evalueer: Door verschillende varianten te combineren, ontstaan ontwerpopties die je vervolgens beoordeelt op basis van criteria als kosten en haalbaarheid.

CSS Weekly

Justus raadde ons aan om ons te abonneren op de nieuwsbrief van CSS Weekly. Deze gerenommeerde nieuwsbrief biedt wekelijks waardevolle inzichten en zorgt ervoor dat je altijd up-to-date blijft met de nieuwste ontwikkelingen op het gebied van CSS.

Typografie en Fonts

Zet de fonts die je wilt gebruiken naast elkaar en vergelijk met de woorden voor je website. Probeer ook wit-op-zwart en zwart-op-wit uit. Typografie is 95% van webdesign.

Micro-Typografie

  • Tracking en glyph-width: (kerning, font-variation-settings)
  • Protrusion en hangende leestekens: (margin kerning)
  • Ruimte per woord aanpassen: meer of minder ruimte tussen woorden
  • Chunks maken door spatiëring: (word-spacing, letter-spacing)

Macro-Typografie

  • Formaat: Basisdimensies voor tekst (font, line-height)
  • Grid: Kolommen en hun verhouding (typegrootte, columns, hyphens)
  • Hiërarchie: Structuur van verschillende lettergroottes en opmaak (headings)

Variable Fonts

Visuele Hiërarchie

  • Opbouwen door o.a.:
    • Grootte
    • Positie
    • Witruimte
    • Kleur/contrast
    • Animatie
  • Inverted Pyramid: 3 niveaus van hiërarchie
    • Belangrijkste info
    • Belangrijke details
    • Achtergrondinformatie

Modular Scale

  • Volgorde van betekenisvolle getallen (bijv. de gulden snede: vermenigvuldigen/delen door 1,618).

Week 2 | 18 t/m 22 november

Mentor dag week 4

De studenten kregen de opdracht om hun eigen font te maken en te importeren in hun website. Ik heb sebastiaan geholpen om het font te importeren in zijn code met gebruik van fontface daarna had hij wat vragen over mijn folder structuur en heb ik mijn structuur hem aangeleerd. Daarnaast keken Mikiyas en een andere student ook mee en hebben zij er ook wat van geleerd.

Component libary 2

Een verzameling van herbruikbare en generieke componenten die je aan je project kunt toevoegen

Het gebruik van een libary

  • Versnelt ontwikkeling - kans op fouten groter
  • Zorgt voor consistentie - alles ziet er zelfde uit
  • En vergroot onderhoudbaarheid - vergroot de chaos

Chaos bedwingen door

  • Naam geving comp
  • Naam geven van variaties
  • Naam geveing van property
  • Metabaamgeving com
  • Indeling van lib

Metanaamgeving

Hiërarchische benadering ook het over bepaalde soorten comp the hebben

Je kunt je mappen indelen op verschillende manieren:

  • Page-section-component
  • Functional layering
  • LEGO
  • Atomic design
  • Presenter-Container

Functional layering

  • Inputs
    • Knoppen
    • Kaartjes
  • Display
    • Tabellen
    • Grafieken
  • Navigatie
    • Headings
    • Footer
    • Menus
  • Structuur
    • Grids
    • Containers

Svelte 5

New features: Runes, $props & Snippets

Responsive to the user

Instellingen van een gebruiker. Zoals bijvoorbeeld darkmode en motion. De anatomie van een meadia query:

  • Aanroep van de media query
  • Media types
  • Media features
  • De conditie waaraan voldaan moet worden

Responsive to the container

Gebruik container queries met Media queries voor een smooth flow.

Responsive to the form factor

Je hebt nu ook vouwbare schermen hiermee kun je ook rekening houden door bijvoorbeeld @media (spanning: ) te gebruiken.