• Analyseren Voordat we gingen ontwerpen had ons team unaniem besloten om in een ruimte-achtig thema onze overzichtspagina. Om dit concept visueel te maken, stelde we een moodboard op binnen onze Miro pagina. Daarin kregen we allemaal een goed beeld van welke stijl we wilden uitstralen naar de gebruiker toe.

Onderstaand heb ik schetsen geschets ter inspiratie voor de squatpage C gezamenlijk als team is er een selectie van de beste ideeën samengevoegd Selectie schetsen

• Schets 1: In de 1e schets staat een maan in het midden met daarover heen alleerlei planten die om de maan rond draaien. Boven de maand staat de naam van de "squatpage" weergegeven.
• Schets 2: In de 2e schets staan allemaal doorlopende kaartjes met de mugshots weergegeven erin.
• Schets 3: In de 3e schets staat 1 cirkels onder elkaar weergegevens, in elke cirkel staan de mugshots per team vermeld.
• Schets 4: In de 4e schets staat het alfabet van A tot G vermeld. Als je dit alfabet afgaat met de muis weergeeft de mugshots zich doormiddel van een pop-up.

• Schets 5: In de 5e schets heb ik een bubble game getekend. Als je op de bubble klikt komt de mugshot te voorschijn.
• Schets 6: In de 6e schets staat een wereldkaart vermeld. Iedere squat heeft zijn eigen land op de kaart, doormiddel van een click op het desbetreffende land, komen de mugshots naar de voorgrond

Responsive design

Media-query &

De breakdown schets weergeeft de CSS code weer:

• De keyframe: De regel @keyframes specificeert de animatiecode. De animatie wordt gemaakt door geleidelijk van de ene set CSS-stijlen naar de andere te gaan.
• Position: De .Position. zorgt ervoor dat de maand/zon positie specifiek wordt gebruikt bij een element
• Display: Zorgt voor de controle van de layout.

Breakdown Point Bij het 1e breakdown point (768 x 1024) krijgt mijn schermbreedte een andere layout te zien.

De media query is als volgt opgebouwd:

Iphone X
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 

Tablet: 
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 

Laptop: 
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 768px) 

High-res: 
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1920px) 
  and (max-device-width: 1080px) 

}