Semester 3 PT II

Sprint 16: Don’t Repeat Yourself, over Component Libraries en Quality Assurance.

Sprint 17: User Needs, over Creative Coding

Sprint 18: Release Candidate, over Continuous Integrations

11 November

Week Planning

Tijd beter indelen, waar leg je de focus op? Wat heeft prioriteit?

60% Taak Component Library 20% Iloveweb 10% mentor 10% Js Fundamentals

I Love Web

digital garden uitbreiden met experimenten enz.

Component Library

Wat is een component library?

Eigenlijk gewoon een mapje waar componenten in staan. Wanneer het er meer worden, wil je hier structuur in aanbrengen. Tijdens deze sprint gaan we ontdekken hoe je dit kan doen.

Een verzameling vooraf gemaakte, geteste, en goed gedocumenteerde UI-componenten die envoudig kunnen worden hergebruikt in de User Interface van een product.

Het zorgt er voor dat het product een consistente uitstraling heeft en bevordert efficientie en schaalbaarheid.

Met component bibliotheken kunnen ontwerpers en ontwikkelaars snel nieuwe functies en pagina’s toevoegen, terwijl de algehele ontwerpconsistentie en kwaliteit behouden blijft.

DUS: het bevordert de consistentie als je veel componenten gebruikt.

Hoe kan je dit structureren?

Sveltekit Component Library

Elke $lib is in principe een component library.

NPM Package Component Library

Als NPM package uploaden en gebruiken met npm install “naam”. Zoals de FDND component library! Zo krijg je het als dependencies in het project. Kan handig zijn, maar moet je wel de package versie updaten als er een nieuwe versie is. En het importeren van componenten is iets anders, die moet je uit de package halen.

Dit mag als je wilt, vooral voor tech savvy teams. Hoeft niet.

Leertaak: DRY component Library

zie taak

RAP/PE websites: responsive, accessible, performant, progressive enhancement

volgens Justus is dit een slay :)

Deeltaak: component building block

zie deeltaak

Vrijdag een component af - volledig uitgewerkt. Dus: niet al te groot, zodat alles volleidg is.

Morphological Charts

?

Opdracht

Identificeer jouw componenten

Analyseer jullie website en identificeer componenten die niet te complex zijn, maar ook niet te eenvoudig zijn.

Zorg voor interactie. Formulieren, tabbed content, carrousel, zoeken/filteren, navigatie, favorieten, comments

Morphological Chart

Morphological charts are used in product design and are useful to come up with unexpected alternatives for complex designs.

Benodigdheden:

• Wil om veel varianten van een app te bedenken
• Een systematishe manier van werken
• Een vel A3 papier en tekenmaterialen
• Een analyse van onderdelen van je component

Maak minstens acht variaties voor jouw component. zoek variaties door een goede morphological chart te maken.

Werk de verschillende versies van je component uit in figma.

Chart

Ik heb besloten om nog een keer goed te kijken naar het navigatie menu. Dit kan nog veel beter als component gemaakt worden.

12 November

Morphological Chart voor navigatie

Componenten

Header

• Desktop versie: uitgeklapt menu
• Mobile verise: ingeklapt menu met button

13 November

Typografie in Web Design

Verschillende woorden die bij de vibe van het project passen op een rij zetten, cijfers, leestekens, etc, en testen met verschillende fonts. Ook testen met zwart op wit, en wit op zwart. Of andere kleur combi’s die je wilt gebruiken. Variabele fonts gebruiken.

“Web Design is 95% typography”

Micro-typography:

• characters
• spacing
• font-kerning
• font-variation-settings
• letter- en word-spacing

Macro-typography:

• Format
• Serif/sans-serif
• Hierarchie
• Columns
• Word-break

CSS

font: shorthand voor allerlei font properties

cssfontstack.com: checken welke fonts op welke devices/browsers standaard beschikbaar zijn. Handig bij het kiezen van een fallback!

Variable Fonts

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a seperate font file for every width, weight, or style.

variablefonts.io: spelen met variable fonts

Waar bestaat een font uit?

Wakamifondue: wat kan mijn font doen? laat zien wat voor axis je font heeft. Als je iets aanpast, krijg je hier ook de CSS code voor. Made by Roel Nieskens.

Opdracht: animeer met variable fonts!

Check op wakamifondue wat je font kan.

Visual Hierarchy

• Grootte
• Witruimte
• Positie op scherm
• Animatie
• Kleur contrast

The inverted pyramid of writing

• Belangrijkste informatie
• Belangrijke details
• Achtegrond informatie

![[Scherm­afbeelding 2024-11-13 om 14.27.10.png]]

Modular Scale

Modular Scale: more meaningful typography. Modular scale gebruiken om font-sizes aan te passen, zo word het meer een geheel in plaats van random sizes.

Typescale kan hierbij helpen!

Resources

Articles

1. Container Queries - Josh Comau
2. Atomic Design
3. Modular Scale: more meaningful typography

Links

1. Leertaak
2. Deeltaak
3. variablefonts.io: spelen met variable fonts
4. cssfontstack.com: checken welke fonts op welke devices/browsers standaard beschikbaar zijn. Handig bij het kiezen van een fallback!
5. Wakamifondue: what can my font do?
6. Typescale: font sizes bepalen en scalen