Ontwerpen - tom-2810/your-tribe-profile-card GitHub Wiki

✍️ Schetsen

Om op layout ideeën te komen ben ik gaan schetsen. Tijdens het schetsen op papier had ik een beetje moeite om te ontwerpen, maar heb er uiteindelijk meerdere gemaakt.

Dit was mijn eerste schets en wist daarom nog niet zo goed wat voor UI ik wilde toepassen, laat staan met de User Experience in gedachte.

Daarna probeerde ik wat meer informatie duidelijk te maken door middel van kleuren (contrast) en afbeeldingen. Ook voegde ik een icoontje toe, die aangeeft dat het kaartje kan draaien.

Dit werkte ik verder uit door wat html elementen aan te duiden. En wat duidelijker te schetsen.

💡 Nieuw idee

Na wat twijfelen kwam ik tot de conclusie dat ik helemaal niet tevreden was met deze ontwerpen. De UI vond ik niet mooi en ik zag de UX er ook niet echt op vooruit gaan. Dus heb ik het even helemaal anders aangepakt. De volgende schets en digitaal ontwerp was het resultaat. Ook heb ik mijn inspiratie hieronder toegevoegd voor dit ontwerp.

✨ Inspiratie!

Inspiratie uit een Formula 1 spel:

🎨 Digitaal ontwerp

Ik had het idee dat dit ontwerp mij verder bracht en had het een beetje uitgewerkt in HTML en CSS. De informatie die ik wilde tonen kwam alleen nog niet zo goed tot zijn recht. Dus liet ik mij inspireren door een ontwerp die ik op Dribbble tegenkwam. Een dashboard-achtige pagina. Eerst toon ik weer de schets op papier, Figma ontwerp, maar daarna ook al in de browser (nog niet helemaal af).

Het is misschien opgevallen dat ik de verhouding voor een mobiel apparaat aan hou. Hiervoor heb ik bewust gekozen, zodat ik het later gemakkelijk naar een desktop variant kan omzetten. Dit maakt het design responsive. Analyseren