Uitwerken van de tours card component

[zainablfz]

Het uitwerken van de tours card component op de WOGO website. Hierbij maak ik verschillende variaties (8) met behulp van de morphological chart. Aan de hand hiervan werk ik hier een paar van uit in Figma.

Wat er moet gebeuren:

• [x] Maken van een morphological chart met de 8 mogelijke variaties
• [x] Een paar van deze variaties in detail uitwerken in Figma.
• [ ] Een breakdown schets maken van deze uitgewerkte variaties
• [ ] Het component bouwen in Sveltekit aan de hand van de web standaarden: responsiveness, accessibility, performance & progressive enhancement.
• [ ] Het component testen op: responsiveness, accessibility, performance, progressive enhancement & user test

[zainablfz]

Ontwerpen

Morphological Chart

Ik heb verschillende variaties gemaakt aan de hand van de morphological chart. Dit ziet er zo uit:

Variaties

Variatie 1

Variatie 2

Variatie 3

Variatie 4

Variatie 5

Variatie 6

Variatie 7

Variatie 8

[zainablfz]

Uitwerken in Figma

Ik heb 3 variaties uitgewerkt in Figma:

[zainablfz]

Visuele Hierarchie & Typografie

Naar aanleiding van het college Typografie in web design heb ik de font-size veranderd in mijn design. Verder heb ik ook getest bij andere studenten die een ander project heeft. Hier was de volgorde waarin ik de gebruiker wil sturen deels kloppend. Ik heb als feedback verwerkt om het bovenste stukje met de locatie en prijs de background-color te veranderen, maar ook de tekstkleur van de buttons.