Grafisk Design
Dokumentation Inspiration Opgavens art Fiktiv opgave af opbygning af en hjemmeside. Kort om opgaven Hjemmesiden, skulle være oplysende om produkter og virksomheden, den skulle være enkel og lige til at gå til, så alle forbruger/kunder kunne være med. Kvalitetsvurdering Opbygningen af siden er blevet meget enkelt, og let overskueligt. Tekst mængden er holdt på det laveste, da det er mere besværligt for øjnene af læse på en skærm. Opbygningen af siden, giver anledning til at lave hjemmesiden i PHP, for derved lettere at kunne redigere og udskifte ting senere hen. Jeg har taget udgangspunkt i en skærmstørrelse på 960 px, da det er den størrelse, de fleste private bruger. Der kan da komme nogle konflikter op, hvis fx. en gamer med en højere opløsning skal ind på hjemmesiden. S34 S35
inspiration Skitser Mobil version N36 N37
Farver & fonte Skærm design Brun R:83 G:55 B:45 C:40 M:70 Y:70 K:60 jord, varm, Moderne, rund, flere typer, Grotesk, Orange R:222 G:151 B:231 C:0 M:49 Y:76 K:0 varm, farverig, iøjenfaldende Beige R:252 G:244 B:231 C:0 M:6 Y:11 K:0 neutral, varm, kontrast til øvrige farver Lyse indbydende billeder til slider, giver en varm indtryk af firmaet og hjemmesiden. Hurtige links til undersiderne Masser af luft på siderne giver ro og overblik. Hurtigt at finde oplysninger Lige opstilling let for alle bruger at finde frem til det søgte Kontakt formular, samt adresse, så forbrugeren let kan komme i kontakt. Produkter Grøn R:145 G:164 B:62 C:50 M:20 Y:89 K:4 natur, økologisk, Om os Kontakt Clasisk, Grotesk, flere typer, Lyse grøn R:214 G:218 B:181 C:20 M:8 Y:35 K:1 natur, økologisk, S38 S39
Wireframes Tablet design Tallene og størrelserne, kan variere fra wireframes til hjemmesiden. 220 x 110 px 140 x 110 px 140 x 110 px en er fjernet, på nogle af siderne, da de kan tage for meget fokus, på en lille skærm, dog beholdt på forsiden, for at skabe noget attention. Teksten deles op i spalter, for at mindske tekst volumen, så det ikke føles som meget tekst. Om os en er lavet om, så den bedre passer til en lille skærm, og så det bliver lettere for forbrugeren at ramme den rigtige knap produkter H1 tag 960 x Auto px 140 x 110 px Kontakt Link om os 960 x 400 px 960 x 500 px H1 tag 960 x 500 px 160 x 160 px H1 tag 960 x Auto px Histori om virksomheden 300 x 520 px af virksomheden 400 x 520 px 160 x 160 px Adresse felt Kontakt formular Link produkter 960 x 400 px 160 x 160 px S40 S41
Wireframes Phone design Produkter Opstilling under hinanden, for at gøre billederne større, istedet for man skal zoome ind, eller læse teksten, for at finde det ønskede produkt. Om os Tallene og størrelserne, kan variere fra wireframes til hjemmesiden. 160 x 70 px 160 x 70 px 160 x 70 px slider Tekst om virksomheden spalte 2 spalte 1 spalte 2 spalte 1 spalte 2 Splate 3 160 x 70 px Kontakt Row Link til om os Splate 3 spalte 2 Row Kontakt/mail Splate 3 Link til produkter spalte 2 Adresse spalte 6 S42 S43
Wireframes billede Tallene og størrelserne, kan variere fra wireframes til hjemmesiden. tekst billede Tekst Kontakt/ mail Link til om os tekst billede Link til produkter tekst Adresse S44 S45