1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S.

Transkript

1 Kunde Bogforlaget Frydenlund A/S Produkt Opgave Hjemmesiden før Redesign af hjemmesiden som ejes af forlaget. Min opgave lød på, at udforme et nyt design til hjemmesiden, og derefter aflevere materialet til webudviklerne, Metalogic. Målgruppe Målgruppen til denne hjemmeside er primært historie studerende. Det kan både være på universitet og gymnasie. Andre historie interresserede er også en del af målgruppen. 3

2 Wireframes Jeg tegnede nogle wireframes til at præsentere for den person der havde ansvar for his2rie hjemmesiden, dette for at hun skulle få et nogenlunde billede af, hvordan hjemmesiden ville komme til at se ud. Koncept idé Jeg ville designe en hjemmeside, som er så simpel og bruger venlig som muligt. Den skal ikke være for indviklet at søge rundt i, og det skal være nemt og ligetil at finde de bøger man søger. Arbejdsredskaber Adobe Illustrator CS6 Adobe Photoshop CS6 4

3 Research og inspiration Før jeg begyndte på selve design delen, lavede jeg lidt re search på nettet, om hvad bevæger sig derude vedrørende webdesign. Det viser sig så også, at jeg ikke er helt ved siden af, når jeg tænker i det simple design. En ting jeg specielt bed mærke i, når det gælder web-design der er fremme i tiden nu, var de såkaldte»ghostknapper«til menubaren. 5

4 6 Fonte BEBAS NEUE BOLD BEBAS NEUE REGULAR BEBAS NEUE BOOK BEBAS NEUE LIGHT BEBAS NEUE THIN Open Sans regular Open Sans italic Open Sans semibold Open Sans bold Open Sans extrabold R 5 G 28 B 7 R 255 G 9 B 7 R 35 G 6 B 30 #747f75 #ffc048 #883c82 R 25 G 35 B 55 R 6 G 58 B 97 R 90 G 200 B 35 #d72337 #749ec5 #bec823 Til rubriker ville jeg finde en font, der både var lidt moderne nu, og som kunne fungere godt til overskrifter på en hjemmeside. Der valgte jeg Bebas Neue, som er kendt for sine rene linjer og elegante former. Den er meget overskuelig og enkel, der gør det ensartet korrekt både til web og print. Til brødtekst bruger jeg fonten Open Sans. Open Sans er de signet med åbne former, med et neutralt men venligt udseende. Den er optimeret til print, web og mobile interfaces, og har fremragende læsbarhed karakteristika i sine bogstavformer. Farver Den grøn/grå farve er hovedfarven på hjemmesiden. Den er dejlig neutral og rolig. Så har jeg valgt nogle farver til at friske designet lidt op. Dem bruger jeg til menuknapperne og fanerne.

5 Ghost knapper Selvom dette er en historiehjemmeside, betyder det ikke at designet skal være historisk. Så jeg ville bruge noget af det som er fremme i tiden nu, og derfor valgte jeg at designe me nuknapperne som»ghost-knapper«. Egentlig skulle de kun have en kant og være helt gennemsigtige. Men da det er lidt svært at se, hvad der står på»menuen«, hvis baggrunden ikke er helt mørk hele tiden, lagde jeg signatur farven til hjemme siden på i 70 % gennemsigtighed. Dette giver lidt af ghost-knap følelesen, samtidig som det er læsbart. 350 px header Headeren skal have den funktion, at den har nogle billeder der skifter hvert. sekund. Kunden vil gerne bruge det til at skiftevis have sort/hvide historiebilleder, og eventuelle annoceringer af historie bøgerne. 70% Kant px gennemsigtighed Header-karusselfunktionen er skabt ved at opbygge html og dynamisk indhold fra en database. Derefter har webudviklerne levendegjort den via css og jquery. Skiftende billeder på header 7

6 Menuer og skiftende faner Menuen er en helt klassisk horisontal menu. Den skifter farve for hvert nyt menupunkt. 67 px For ekstra brugervenlighed på historiesiden ville jeg lave noget grafik, som skulle vise hvilken side man var på. Jeg lavede en fane med sammenflætning af farven på menu en og kompass-delen af hjemmesidens logo. Så hver gang du klikker på et nyt menupunkt, så skifter fanens farve. 35 px Fanen er placeret på venstre side af menuen. Siden har mange undersider, derfor var det også nødvendigt at designe en dropdown menu. 48 px 8

7 335 px 9

8 95 px 28 px Forside Bøger På forsiden har jeg besluttet sammen med vores historie ansvarlige på forlaget, at alle bøgerne skal ligge, fem ad gangen, hvor man så kan klikke sig videre til de næste fem osv. Søgefelt Øverst på alle sider over for logoet, har jeg placeret et søge felt. Når man søger noget, f.eks. bogen»chile«, kommer vi ind på søgeresultatsiden, og hvis der er rigtig mange resultater, skal man have mulighed for at klikke sig videre til de næste sider derfra. 0

9 pt =,33px Kompass logografik Pentool og afmaskning

10 Logo Vi syntes at, eftersom his2rie.dk er sin helt egen hjemmeside løs fra frydenlund.dk, skulle den også have sit helt eget logo, som den ikke har haft indtil nu. Inspiration Jeg søger altid inspiration, før jeg begynder på en opgave, og til dette logo søgte jeg specifikt efter historie symboler og ikoner. Ret hurtigt kom så ideen til et kompas som en del af logoet. Første udgave Min første udgave af logoet er blevet designet ud fra stjernen i midten af et kompas, hvor jeg har tegnet en pil der går bag læns rundt om stjernen for at illustrere begrebet»historie«. Første udgave af logoet 2 Her har jeg primært brugt funktionen»pathfinders«og»divide«i Illustrator.

11 Design af logo Charcoal pencil Men det er ikke altid at man er tilfreds med første udgave, og det var jeg ikke i dette tilfælde, så jeg prøvede mig lidt frem indtil jeg var tilfreds. Niagara Solid Regular Logoet er sat ind som et billede (a href med et link) Almindelig stroke Kompas Kompas-delen af logoet er meget simpelt lavet. Jeg har la vet to cirkler i Illustrator, hvor jeg har brugt»charcoal pencil«stroke. Pilene inden i midten er lavet med en almindelig sort stroke. Font Fonten til logoet er Niagara Solid, regular. Den er designet af Tobias Frere-Jones i 90 erne. Fonten er meget flot i sit sprøde og elegante look. Jeg kan godt lide at den er ligesidet. Det gør det roligt at se på. Fontdesigneren er inspireret af amerikansk stil fra erne, og derfor synes jeg også at fonten funge rer meget godt til et historie-logo. Færdigt logo 3