Voortgangslogboek
Niet te lang hangen bij herdesignen, begin sneller met code bouwen!
Dit ben ik serieus gaan nemen door direct eerste PR te versturen: https://github.com/fdnd-agency/buurtcampus-oost/pull/45
Voortgang besproken en feedback verwerkt. Mariska was zeer tevreden met de vergelijking tussen oude en nieuwe ontwerpen.
Headers aantrekkelijker gemaakt, knopformaten aangepast en achtergrondkleur bij partners-sectie verwijderd. Sitemap en homepage presentatie: Mariska en Rosa waren zeer tevreden. Rosa bood aan om een logo te ontwerpen.
- Frequentie: Elke maandag, donderdag en vrijdag
Inleiding Ons project "Bieb in Bloei" is een samenwerking met Duneya en Ivar om een website te ontwikkelen voor Mariska, die zich richt op groene buurtprojecten. Mariska waardeerde het vorige ontwerp van de website, maar zag mogelijkheden voor verbeteringen om het beter af te stemmen op nieuwe projecten. Hieronder volgt een overzicht van onze voortgang en de taken die we hebben uitgevoerd.
-
15 april: Projectstart: Indeling werkzaamheden ontvangen en besloten om samen te werken aan de "plant swap" functionaliteit. Team canvas ingevuld voor heldere samenwerking.
-
18 april: Code refactor om componenten herbruikbaar te maken. Briefing met Mariska (gedocumenteerd in mijn wiki).
-
19 april: Projectboard aangemaakt en taken verdeeld. Eerste schetsen voor de homepage gemaakt en sitemap opgezet.
-
20 april: Website design in Figma ontwerp, kleurentesten en afstemming op Mariska's wensen.
-
21 april: Design review met Mariska: Kleine aanpassingen (gedocumenteerd in mijn wiki).
-
22 april: Design review met Cyd en Berat (gedetailleerd gedocumenteerd in mijn wiki).
-
26 april: Repository gekloond en eerste code geschreven en Timeline aangemaakt in projectboard.
-
6 mei: Navigatie menu mobile first met hamburger icon gemaakt.
-
13 mei: Hero slider werkend maken.
-
16 mei: Button componenten maken met drie varianten en Ivar is ons team komen versterken.
-
23 mei: Slider card responsive maken.
-
24 mei: Bugfixing - Vercel deploy.
-
27 mei: Buurtcampus component maken.
-
30 mei: Contact pagina maken met formulier.
-
31 mei: Page transition fixen.
Wat je hebt geleerd van Cyd's verhaal:
- Animaties kunnen beter: Veel animaties zijn saai en kunnen verbeterd worden door de Disney design principes toe te passen.
- Styleguide is belangrijk: Bij het maken van animaties is het handig om een styleguide te hebben en drie vragen te stellen: Is het herkenbaar? Is het bruikbaar? Is het mooi/fijn?
- Overleg met de klant: Bij het ontvangen van een opdracht is het belangrijk om met de klant te overleggen en eventueel aanpassingen te doen.
- Tips voor animaties: Oefening baart kunst, bij twijfel kies ease out, less is more, wees consistent, niet repetitief.
- Tools: Cyd werkt vooral met Wordpress, 3js en Gsap.
Wat je hebt geleerd over View Transitions API:
- Wat het is: Een manier om twee staten van de DOM (Document Object Model) gemakkelijk in elkaar over te laten lopen door snapshots te maken en deze te animeren.
- Hoe het werkt: De browser maakt screenshots en met de View Transition API kun je deze in elkaar laten overvloeien.
- Mogelijkheden: Je kunt animaties maken met kaarten, dark/light mode wijzigingen, en overgangen tussen pagina's met cirkels die groter worden.
- Toepassingen: De API is flexibel en kan worden gebruikt voor CSS grids, back button navigatie, en in de toekomst mogelijk ook voor multi-page apps.
Wat ik heb geleerd over het maken van progressive enhanced formulieren:
- Gebruik use:enhance: Deze SvelteKit-functie zorgt voor goede progressive enhancement in formulieren.
- Constraint validation: Gebruik constraint validation voor het stylen van foutmeldingen in formulieren.
- Form states (progressive disclosure): Een formulier dat meer uitklapt naarmate je meer informatie invult, kan de gebruikerservaring verbeteren.