Ontwerpen - Tristandemuijnck/Codeforce-squad-page Wiki

Team

Voor het ontwerpen van de squadpage hebben wij een schets gemaakt met als idee dat het een hub moet voorstellen. De verschillende squads krijgen hun eigen button met, als daar op gedrukt wordt, de leden van de squad daar omheen gecirkeld. Daarna kan er op een lid geklikt worden om naar het visitekaartje te gaan.

Breakdownschets Mobile

Breakdownschets-squadpage-mobile

Breakdownschets Desktop

Breakdownschets-squadpage-desktop

Breakdownschets Desktop v2

Mediaquery

Voor deze site gebruiken wij 2 mediaqueries, mobile version(max-width: 425px) en desktop version(min-width: 426px). De mobile version zal een max-width krijgen van rond de 425px. Dit houdt in dat alle schermen met een breedte onder 425px de mobile version van de css krijgen. Hier zijn de breedtes aangepast en de lettertypes verkleind. Ook is de layout van de site anders dan op schermen met een breedte boven de 425px.

Individueel - Tristan de Muijnck

Voor het ontwerpen van de squadpage had ik vrij snel al een idee van hoe de website eruit moest komen te zien. Omdat het om een soort hub gaat leek het mij een leuk idee om een soort cirkel/web te maken waar alle groepen van de squad in zitten. Ik ben dan ook gelijk begonnen met het maken van een aantal sketches. Eerder genoemde sketches zijn daar het resultaat van.

De bedoeling was eerst om een aantal kleinere cirkels(groepen) te maken in een grote cirkel, waarna die cirkels weer opsplitste in kleinere cirkels(groep leden). Later kregen wij inspiratie van een site die gemaakt is door Sanne 't Hooft. Hierbij werden alle bolletjes in een cirkel geplaatst en werd er perspectief toegepast op de cirkel om diepte te creeeren. Dit zorgde ervoor dat er een tweede versie van de sketch gemaakt moest worden. Ik had nu nog meer ideeen gekregen om toe te passen op onze squadpage, denk hierbij aan een lijst met namen en shortcuts naar visitekaartjes of verborgen knopjes als het team niet geselecteerd is in de cirkel. Uiteindelijk is deze tweede sketch de definitieve versie geworden.

Hierna ben ik begonnen aan het maken van een simpele breakdownschets om een beeld te krijgen van hoe de site in elkaar zit. Ik had hierbij besloten dat de site uit 4 aparte onderdelen bestaat: de main container, de group carrousel, de nav list met namen en links naar visitekaartjes en de group knopjes(deze staan in de carrousel). De main container bestaat hierbij uit een <section> en een <nav> (zie onderstaand voorbeeld)

⚠️ **GitHub.com Fallback** ⚠️