Eerste ontwerp studentenpagina

[ambersr]

We werken individueel aan een ontwerp van de deeltaak Squad page en coderen een individuele pagina

[julia-stevens]

Hierbij ons teamcanvas:

https://miro.com/app/board/uXjVKh1tR08=/

[julia-stevens]

Mijn schetsen op papier:

• 
• 

Mijn schetsen in Figma:

Link naar (gezamenlijke) Figma: https://www.figma.com/design/ID0gXOfa6vxaMRj2leorYf/Squad-Page-Wireframes---de-Eendtjes?node-id=0-1&t=2BTrfYgm9tJexsOB-1

• 
• 
• 
• 
• 

[julia-stevens]

Mijn breakdown schetsen

• Breakdown van de gehele desktop pagina en mobiele pagina:
• 
• Breakdown van een card
• 
• Breakdown van het campus plekken onderdeel op de pagina
• 
• Breakdown van een campus card
• 

[julia-stevens]

Alle commits met code van mijn individuele pagina aan het eind week 2 (in sprint 1)

https://github.com/julia-stevens/your-tribe-squad-page/commits?author=julia-stevens

Meest recente commit

f193828c2e38df2556158df9af1eeeccd6478c82

[julia-stevens]

Feedback van Marcin

• missing plaatjes door tikfoutje
• de alt teksten bij de foto's van klasgenoten kun je niet lezen door de kleur die de tekst hier heeft, probeer de color op de img tag aan te passen in dit geval

[ambersr]

Schetsen desktop & mobiel voor studenten en campus pagina:

Ik heb doormiddel van een aantal schetsen voor mezelf bepaald wat de opbouw van de squadpage zou worden. Naast de schetsen heb ik kort toegelicht wat het element is en wat je zou moeten zien op de pagina.

[ambersr]

Individueel ontwerp in Figma

Na het schetsen hebben we individueel een ontwerp gemaakt in Figma. Het leek mij een heel cool idee om de stijl van de FDND pagina aan te houden voor de squadpage. Het huisstijl heb ik daarom aangehouden zoals de kleuren en fonts. Ook heb ik verschillende elementen overlapt dit zorgt voor een speelse maar wel overzichtelijke uitstraling.

Linkje naar het design: https://www.figma.com/design/ID0gXOfa6vxaMRj2leorYf/Squad-Page-Wireframes---de-Eendtjes?node-id=0-1&t=3IJ9GVyAA4bjPmqy-1

[ambersr]

Breakdown schetsen

Na het ontwerpen ben ik begonnen met het maken van breakdown schetsen. Hierin heb ik aangegeven welke elementen en properties ik wil gebruiken in mijn code. Ook heb ik het grid van de studenten en campus listing uitgetekend. Dit maakte voor mij duidelijk welke waarde ik moet geven aan de properties van het grid.

[ambersr]

Feedback moment 1 individueel squadpage van Marcin

• logo ontbreekt
• probeer een ander font te gebruiken, het liefst 2, 1 voor de headings en 1 voor de teksten
• vergeet niet de titel van het document aan te passen
• centreer de flexbox en/of maak de divs ongeveer 25% van de totale width op desktop