16 November 2024 ‐ Ontwerpen Hoofdpagina - DivaniNL/i-love-web GitHub Wiki

Design Day - 16 november 2024

Vandaag heb ik de hoofdpagina ontworpen. Voorbereidingen hiervoor vonden al plaats tijdens de Sprint Planning (Analysefase) Ik heb een aantal zaken aangepast ten opzichte van de oude hoofdpagina

Dingen aangepast t.o.v. oude Homepagina (Desktop)

  • Groene shape toegevoegd
    (Net zoals op de artikel detailpagina's uit Sprint 2 en 3)
  • Rubriek kopjes rood in plaats van zwart
  • Geen rand tussen titel van artikel en metatekst
    (Net zoals op de artikel detailpagina's uit Sprint 2 en 3)
  • Donatiebox toegevoegd
    (Net zoals op de artikel detailpagina's uit Sprint 2 en 3)
  • Datum in blokje geplaatst
    Net zoals bij het uitgelichte artikel op de oude homepagina, vond ik het mooi om dit overal, bij elk artikel dus, te doen.
  • Auteursnamen met '&'-teken:
    Bij twee auteurs heb ik ervoor gekozen om een "&" te gebruiken in plaats van "en".
    Dit bespaart één karakter, waardoor langere namen makkelijker passen.

Ik ben op deze manier te werk gegaan:

Werkwijze

  • Wireframe gemaakt op het whiteboard met het team tijdens de sprintplanning. (analysefase)
  • Een volledige screenshot gemaakt van de homepagina met GoFullPage.
  • Het Figma-bestand geopend van de door de klant aangeleverde artikelpagina.
  • De nieuwe homepagina naast deze artikelpagina en een foto van de wireframe gehouden om te vergelijken.

Ik heb, naast mij gehouden te hebben aan de wireframe, nog wat geexperimenteerd met alternatieve versies

Experimenten voor de Homepagina (desktop)

  • @media-prefers-contrast kleuren:
    Ik heb een versie van de homepagina gemaakt die rekening houdt met contrastvoorkeuren van gebruikers.

  • Eerste artikel in groene stijl en verplaatste vorm:
    Een versie gemaakt waarbij het eerste artikel een groene stijl heeft en de groene vorm iets verplaatst is.

Experimenten voor de Homepagina (mobiel)

  • @media-prefers-contrast kleuren:
    Ik heb een versie van de homepagina gemaakt die rekening houdt met contrastvoorkeuren van gebruikers.

  • Primaire kleur gegeven aan de ronde vorm bovenaan:
    Een versie gemaakt waarbij de vorm bovenaan in de pagina de primaire kleur bevat in plaats van zwart.

Wat heb ik geleerd?

  • Alt + H:
    Hiermee kun je een item horizontaal centreren binnen het parent-element.
    Dit heb ik gebruikt om de zwarte blokjes rechtsonderin de artikelen uit te lijnen, waarin datums staan.