Ik heb de workshop Playful Figma van Wes gevolgd. Het was de bedoeling om binnen 1,5 uur 3 verschillende variaties te maken hetzelfde ontwerp. Zie hier mijn werk: https://www.figma.com/design/SLPSLjvW63V9go8FCGWmI9/playful-figma-workshop?node-id=0-1&t=MfO5NdmZR3YZayz9-1

Als feedback kreeg ik om bij bv het eerste ontwerp één kleur te kiezen voor hightlights. Bij het tweede ontwerp is er te weinig contrast tussen de call to action knop en de paarse tekst.

Aan de hand van de les van maandag, was ik nieuwsgierig naar het gebruik van custom properties i.c.m. een stylesheet. Voorheen zag ik dit vooral terug in de :root, maar ik las dat dit juist niet liever niet gedaan wordt, maar dat custom properties beter verder in de DOM kunnen staan. Ik heb daarom wat onderzoek gedaan aan de hand van deze sites:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
• https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/
• https://css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/
• https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/

Zie hieronder mijn aantekeningen:

Op basis van deze informatie, heb ik één van de voorbeelden gemaakt in mijn i love web omgeving, om beter bekend te worden met custom properties.

Zie hier het resultaat: https://julia-stevens.github.io/i-love-web/experimenten/customProperties.html

In HTML kan je meerdere classes koppelen

<ul class="icon-list checkbox-list"></ul>

En deze in CSS stylen aan de hand van custom properties

.checkbox-list {
    --icon: var(--checkbox);
    --icon-color: cadetblue;
}

.icon-list li::before {
    content: var(--icon);
    color: var(--icon-color);
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    float: left; 
    margin-left: -1.5em;
}

Op basis van de feedback van de opdrachtgever vanuit de sprint review(sprint 3), heb ik nieuwe schetsen gemaakt voor de radiozenders. Zie onderstaande afbeeldingen.

Tijdens de vakantie heb ik een nieuw ontwerp gemaakt voor mijn I love web omgeving. Dit wordt een 9-delige grid weergave van verschillende collages die ik heb gemaakt. Ik wil uiteindelijk dat bij het hoveren over een afbeelding er nieuw informatie tevoorschijn komt, en bv experimenteren te zien zijn. Voor nu richt ik me op het visuele gedeelte.

Zie hier het ontwerp in Figma: https://www.figma.com/design/otb3AD4m9dY7Uv1wDWN2yO/i-love-web?node-id=0-1&t=OnPg9NzJG7vT65Pj-1

Zie hier de website: https://julia-stevens.github.io/i-love-web/i-love-web/iloveweb.html

Zie hier de update van vandaag: