Ontwerpen - RickVellingaa/your-tribe-squad-page GitHub Wiki

De design fase begon met het maken van 8 designs voor de squad page, met deze designs heb ik uiteindelijk 1 final design gemaakt die ik dan kon laten zien aan mijn team. Na het maken van de designs gingen we samen met elkaar onze designs bespreken en bepalen hoe wij uiteindelijk de squad page eruit wouden laten zien. Nadat wij een goed eind design hadden voor de squad page hebben wij ook voor dat design een mobile versie gemaakt. Met beide schetsen heb ik vervolgens een breakdown schets gemaakt.

8 designs:

20220922_235745 20220922_235748

Final design:

Squad page

In de Breakdown schets heb ik uitgelegd hoe het design is opgebouwd met de code en design. Ook staan er breakpoints in waardoor je kan zien, wanneer het design van de site verandert.

Media Query

Met media query heb ik laten zien na hoeveel pixels ik een breakpoint doe (1000px). Met een media query kun je ervoor zorgen dat je een website/design responsive kan maken. Meestal doe je dit door in een media query een min of max width aan te geven zodat na die width er iets verandert aan de CSS.