Designvalg
Designet tager udgangspuntk i billedet af mig, som jeg bruger i min sidemenu. Ud fra billedet valgte jeg de 5 mest representative farver og definerede en farvepalette ud fra det. Jeg lavede nogle simple design regler, og begyndte herefter at implementere det i CSS koden.
Farvepaletten
Farvepaletten består af 5 farver:
- Tie red #7B3939
- Clip blue #5F6BA5
- Collar shirt white #F7F7F7
- Suit black #272727
- Stern white wall #E1E1E1
Farvepaletten basserer på billedet af mig (Max Festersen Hansen) ude til højre. Tie red farven er taget fra det røde slips.Clip blue farven er taget fra slipsenålen. Collar shirt white farven er taget fra muren. Suit black farven er taget fra blæseren. Stern white wall farven er taget fra skjorten.
Det er ikke en stavefejl at Collar shirt white er taget fra murfarven, og Stern white wall farven er taget fra skjorten. Efter at have aflæst farverne, og anvendt dem i designet, så gav det mere mening at bytte rundt på farverne, da det så pænnere ud.
Design regler
Til farvepaletten har jeg lavet et simpelt regelsæt. Stren white wall er primært beregnet til baggrunde. Collar white shirt er beregnet til baggrunde i indelukket indhold. Suit black er beregnet til at indelukke indhold. Tie red er til elementer der skal fokuseres på og til at pynte elementer. Clip blue er beregnet til links i brødtekst og til at pynte elementer.
Reglerne er symbolske overfor farvepalettens oprindelse. Den røde slips står frem som øjefangeren på skjorten. Skjorten er omringet af den sorte farve fra blæsseren. Slipsenålen eksisterer som en pyntegenstand. Bagved personen er der en mur.
Side opsætning
Siden er designet som en responsiv løsning. Wrapperens brede er defineret som 80% af sidens brede. På mindre enheder vil indholdet blive strukket til 90%.
I aside indholdet var det et problem at vise de relativt lange sætninger i punktform, uden at bryde til flere linjer mange gange. Som løsning er fyldeord blevet indsat i et underlement, der gemmes i problematiske skærmstørrelser.
I header er designet unik på forsiden. Logoet og fonten er unik. Jeg læste engang i en usability standard at headeren gerne må være fangende på forsiden, men gerne måtte have en mindre rolle på undersider.