Designmanual+ Afsluttende+projekt+1.+Semester++ Michella+Serritzlew+Jacobsen+
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Indholdsfortegnelse PBS...3 WBS...3 Brainstorm...4 Wireframes...5 Forside...6 Om mig...7 Projekter...8 Læring...9 Tanker bag portfolioen...10 Kontaktformular...11 Beslutninger...12 Typografi og farver...13 Skrift...13 Farver...13 Forside...14 2
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB 3 PBS WBS Portfolio (5uger) Organisering (1uge) Tankerbag portfolioenog denstilblivelse (4dage) Brainstorm DokumenM tationfor designvalg PBS,WBSog GanttKort (2dage) Websites skelet (2dage) Wireframes Produkter (3uger) Portfolio (2uger) HTML/CSS Tekstarbejde Redesignaf projekter (2dage) Brugertest (2dage) Forberedelse Test Portfolio Website HTML/CSS Domæneog Filezilla Adobe Visuelt Wireframes Logo Farverog Fonts
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Brainstorm Jeg brugte først brainstormingen til at komme på en masse idéer til portfolioen. Nogle af punkterne indeholder elementer, som allerede var fastlagt i projektbeskrivelsen som fx projektets krav. Mange af mine idéer kom fra andre projekter, som vi har lavet i løbet af første semester og fra min viden efter undervisningen. Efterfølgende har jeg brugt brainstormingen som en form for huskeliste/checkliste, da jeg synes, at mange af punkterne var relevante for min opgave. 4
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Wireframes Jeg har lavet wireframes til de vigtigste (størst i form af indhold) sider i portfolioen. Jeg har først lavet en standard wireframe af, hvordan jeg gerne ville have websitet bygget op. Dette wireframe er lavet i InDesign og der er gjort brug af grids systemet. 5
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Wireframes af de enkelte sider har jeg lavet i et online program, gliffy.com. Her kan man designe sine wireframes ved hjælp af forskellige former og figurer. Forside 6
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Om mig 7
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Projekter 8
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Læring 9
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Tanker bag portfolioen 10
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Kontaktformular 11
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Beslutninger Som mine wireframes viser, havde jeg et tydeligt billede af, hvordan jeg gerne ville have opstillingen af website skulle være. Jeg har i høj grad fulgt mine wireframes i løbet af opgaven. Der er ændret på nogle småting som fx billeders eller tekstens placering. Jeg ville gerne lave et stilrent layout altså uden for meget pynt da jeg gerne vil have et overskueligt website. Jeg mener personligt at hvis et website er for rodet eller det er svært at finde de relevante informationer, kan man som bruger have tildens til at finde informationerne på andre websites i stedet. Derudover er det vigtigt for mig, at jeg får lavet en læsbar navigation den skal være let at navigere på for alle. Dette hænger også lidt sammen med det overskuelige website. Farver og typografien skal også vælges nøje. Mit udgangspunkt er at blande enkelte farver sammen med sort og hvid, for ikke at forvirre brugeren med for mange forskellige farver. Da opgaven skal præsenteres på skærm, vil jeg vælge groteske fonts (sans serif uden grafiske tilføjelser), da det giver højere læsbarhed. Serif fonts kan evt. blive valgt til overskrifter eller lign. Jeg ville gerne bruge så meget som muligt fra undervisningen, i løbet af første semester, til websitet. På denne måde får jeg vist hvad jeg har lært, kan og har forstået. Derudover giver jeg mig selv udfordringen ved at sidde med det hele selv, hvilket ofte kan være sværere, end når man gennemgår det sammen på studiet. 12
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB Typografi og farver Skrift Overskrift (header) Typeface: PT Sans (størrelse 100, 40 og 25) PT Sans er en skrifttype der er designet med et konservativt udseende blandet med det moderne. Denne skrifttype er en sans serif font, som er bedst læselig til skærm og web. Jeg synes det var vigtigt at holde mig til det stilrene udseende i min header, da hele mit website er bygget op efter det stilrene. Dog mener jeg også at det var vigtigt, at dens design var anderledes end brødteksten, da det er min sides logo derfor valgte jeg PT Sans. Skrifttypen har god luft mellem hvert bogstav, som giver en høj læsbarhed. Brødtekst Typeface: Verdana (16px) Jeg har valgt denne typeface som brødtekst, da Verdana er en sans serif font. Sans serif fonts er lettest at læse på skærm og til web. Derudover er Verdana meget skarp og tydelig, samt er Verdana udviklet til webbrug. Verdana er også brugt her i designmanualen. Farver Jeg gør brug af farverne sort, hvid, lyseblå (#c0def8) og mørkeblå (#6aa6e5). Den lyseblå bruges som baggrundsfarve, til informationsbokse, på forsiden, samt til opdeling af mine fire projekter. Den mørkeblå gør jeg brug af i navigationsbaren. Jeg har valgt at bruge den mørkeste farve der, da navigationen skal være mest tydelig. Den blå farve er en af de tre primærfarver (gul, rød og blå). Blå viser kreativitet, loyalitet, tillid og har en beroligende virkning. Den lyseblå udtrykker forståelse og blødhed (baggrundsfarve). Mørkeblå udtrykker derimod viden, magt og seriøsitet. Derfor har jeg, som tidligere nævnt, valgt 13
CopenhagenBusinessAcademy 1.Semester MichellaSerritzlewJacobsen MULB at bruge den mørkeblå farve til navigationen, da det er et af de vigtigste elementer på websitet. Baggrunden af wrapperen er hvid, da jeg mener, at det er vigtigt at have en stor kontrast mellem baggrundsfarven og brødteksten (som er sort). Brødteksten skal stå skarpt og mørke bogstaver på en lys baggrund gør det lettere tilgængeligt for brugeren at læse. Forside Jeg har valgt at lave min forside som en forside fra et magasin. Jeg har brugt illustrator til at designe forsiden. Jeg har gjort brug af samme skrifttype som min brødtekst (Verdana), samme farver (sort, hvid og den lyseblå #c0def8) som forekommer i min portfolio. Derudover har jeg varieret teksten mellem regular, bold og italic samt store og små bogstaver og forskellig skriftstørrelse (50, 35 og 22). På denne måde bliver hver tekst fremhævet bedst fx i forhold til baggrundsbilledet. Jeg har delt forsiden op i to store tekster øverst og nederst som handler om selve studiet. Teksten mellem fortæller noget om, hvad man kan forvente at læse i portfolioen. 14