I-love-web
- Wat is een morphological chart en waar gebruik je die voor?
- Hoe geef je een custom propertie een juiste naam/ benaming?
- Waarom schrijf je custom properties in de
:root? Dit kan ook in debody tag
👩🎓 Wat ik heb geleerd:
- Workshop over Component as a Building Block gehad
- Met groepje gekeken naar welke componenten erzijn
- Component gekozen > Zie issue
- Component analyseren > Analyseren issue
👩🎓 Wat ik heb geleerd:
- Aan mijn Morphological Chart gewerkt
-
👩🎓 Wat ik heb geleerd: Hoe je meer info kunt vinden over de font die je gebruikt en hoe je die kunt animeren
- Mentor voor de eerstejaars geweest, ik heb ze geholpen met custom properties, linken van stylesheets en de algemene structuur/benaming.
-
- Workshop typografie in Web design
Bron fonts uitzoeken: wakamaifondue.com
👩🎓 Wat ik heb geleerd:
- Ik heb een ontwerp gemaakt in Figma over de morphologische kaart > Zie issue ontwerpen
Een verzameling vooraf gemaakte, geteste en goed gedocumenteerde UI-componenten die eenvoudig kunnen worden gebruikt ub de gebruikersinterface van een product
Quality Assurance!
- Hoe zet je een project online via Netlify en Svelte?
- Hoe weet je wat voor structuut je wilt toepassen in je project?
- Hoe kan ik chaos bedwingen in mijn code?
👩🎓 Wat ik heb geleerd: Hoe je verschillende design methodes kunt toepassen in je component
- Workshop Advanced Component Concepts > Aantekeningen
- Atomic Design Methode toegepast aan component > Zie issue
📅 Ma 18 november
Svelte 5 > What’s new in svelte 5
- Doe super netjes want je wilt niet slechte dingen herhalen 👍
- DRY
Afspraken (conventies) te maken over
- Naamgeving van componenten
- Naamgeving van Variaties en componenten
- Naamgeving van Properties binnen componenten
- Metanaamgeving: componenten, patronen etc.
- Indeling $lib folder
- Geneste componenten
- Variaties op componenten
- Samengestelde componenten
- Een volledige pagina, met verschillende sections die bestaan uit componenten.
- Inputs: knoppen, formulieren
- Display: tabellen, grafieken
- Navigation: navigatie, menu’s. Breadcrumbs, skip-to-content
- Structural: Layout elementen die structuur bieden, grids / containers
- Bricks: Kleine niet herbruikbare stukjes, icoon of tekstblok
- Blocks: Herbruikbare basis componenten, een knop of een afbeelding
- Assemblages: Gecombineerde componenten met een specifieke functie, formulier of een kaart
- Constructions: Complexe pagina-secties of templates, dashboard
- Atoms: label, input, button
- Molecules: groep atomen bij elkaar, zoekformulier met een label, input en button
- Organism: groep moleculen die samen een sectie van je website vormen, een header balk met een zoekformulier
- Templates: een groep organismen die samen een paginatype vormen, een overzichtspagina of detailpagina
- Pages: ingevuld template met inhoud 
- Presentational components: UI-specifieke, stalles componenten die bepalen hoe data getoond wordt (bijvoorbeeld een img)
- Container component: Componenten die de presentational components van data voorzien en hun gedrag bepalen
- Compositions: Combinatie van containers en presentational components die specifieke pagina-secties vormen.
- Wat is de law van gestalte
- Hoe pas je proximity law toe in jouw ontwerp
- Hoe kun je miscommunicatie voorkomen?
👩🎓 Wat ik heb geleerd: Wat Law van Gestalte is
- Ik ben mentor geweest voor de eerste jaar, ik heb met ze meegedaan met de opdracht Gestalt wetten onderzoeken. Ik heb de wet Proximity Law onderzocht. Nawal deed Similarity en Reyhan deed Common Region. Na dat we het hebben onderzocht hebben we het aan elkaar gepresenteerd en uitgelegd hoe je dit in je ontwerp kunt toepassen.
Ik ben gaan kijken hoe ik Proximty Law kan toepassen in bieb in bloei, ik ben gaan kijken naar het formulier, door white space en groepering heb ik het geprobeerd duidelijker te maken voor de gebruiker.
- Aantekeningen Proximity Law
- Ik ben samen met Rutger bezig geweest met een nieuwe Harry ontwerpen > Zie schetsen
👩🎓 Wat ik heb geleerd: Hoe ik zelf een ontwerp maak en dit dan koppel als
svgen kananimeren
- Verder gewerkt aan Harry en gekoppeld aan de code samen met Rutger
- We hebben uitgezocht welke code we nog nodig hebben en wat we gaan opschonen, omdat we een ander ontwerp
svghebben- Hiervoor hebben we geschetst om duidelijkheid te krijgen
👩🎓 Wat ik heb geleerd: Dat de opdrachtgever niet alles communiceert dus handig om dit zelf wel te doen als ik iets maak
- Sprint review met de opdrachtgever gehad > Zie issue
- We moesten alles gaan mergen naar de main Git van bieb in bloei, dit hebben we met ons groepje gedaan
- Zie pullrequest Rutger's git
- Zie pullrequest Nazneen's git
👩🎓 Wat ik heb geleerd: Dat ik vaker mijn i love web moet updaten, soms vergeet ik dit en is niet handig
- Kort gesprek gehad met potentiële stage, nu heb ik dinsdag telefonisch gesprek/ introductie
- Bewijslast gekeken naar wat ik heb en wat ik in portflow kan zetten
📅 25 november | Mentor
Presenteer aan elkaar hoe je de wet kan gebruiken voor web design.
-
Relatie met objecten die dicht bij staan > Zie Google zoek resultaten
-
Proximity = nabijheid
-
Proximity helpt gebruikers informatie sneller en efficiënter te begrijpen en te organiseren.
-
White space
-
Heading text dichterbij tekst dan de spacing er tussen
-
Formulier: Related fields together > daardoor kun je beter scannen en makkelijker er doorheen
-
Far-away items: Word vaker overheen gekeken (tunnel vision)
-
Gerelateerde items dichtbij en white space gebruiken > Visual Design ++
-
Groeperingen visueel duidelijk maken > bruikbaarheid vergroot, doordat gebruikers snel alleen die UI-elementen kunnen vinden
Grids of ObjectsLists of Text- S
hape and Space Dependencies Full Bleed Elements: Layout structuur geven zodat het brein structuur snel kan waarnemen *Typography: Space between
