Forståelse for grafisk produktion og workflow
Overblik over opgaven
Til kernefaget Grafisk workflow har lavet en ny hjemmeside til Sønderjysk Elitesport. SønderjyskEs nuværende hjemmeside har en række udfordringer som jeg har arbejdet med, f.eks. er der store mængder information fra de 5 hold som skal præsenteres på forsiden, på trods af at langt de fleste brugere kun har interesse for information om et enkelt af holdende.
Gennemgang og wireframming
Dette og andre udfordringer har gjort at jeg først har lavet en større gennemgang af den eksisterende side, hvorefter jeg har tegnet wireframes i hånden for at få placeret informationen de rigtige steder. Mit design udnytter især at brugeren kan klikke på holdets faneblad under hver sektion for at se information uden at skifte side.
Jeg har i løbet af mit arbejde taget en lang række screenshots, både fra Photoshop og Dreamweaver, så man kan følge med i processen, som ikke altid har været lineær. Jeg har flere gange gået frem og tilbage, for at ændre i designet. Derudover har jeg også skrottet en stor mængde kode, for at starte forfra og lave en mere enkel kodning med min nyfundne viden.
Design i Photoshop
I Photoshop har jeg lavet et farvetema udfra de blå farver i SønderjyskEs logo og den lyseblå spillerdragt. Derudover er der en lang række gråtoner som dominerer designet, mens de blå farver bruges til at fremhæve vigtige elementer, såsom overskrifter, links og navigation. I min arbejdsgang bruger jeg ofte ”ikke ødelæggende arbejdsgange” såsom Layer Effects, Layer Mask og Adjustment Layers (især Solid Color) som gør at jeg hurtigt kan ændre i tidligere effekter. Derudover inddeler jeg lagene i grupper og farvemarkerer dem, så jeg let kan finde rundt i designet og ”tænde” for visningen af hver underside eller element.
På trods af at jeg har fulgt mit indledende design tæt har jeg ofte prøvet mig frem med placeringen af visse elementer. F.eks. søgefeltet er blevet flyttet løbende, ligesom farven på bjælken med sociale medier og er ændret, da disse ikke fungerede i praksis. Jeg havde desuden længe en idé om brødkrummer, men konkluderede at markeringen af aktiv side i menuen var tilstrækkelig.
Kodning i Dreamweaver
Jeg har brugt en font kaldet Droid Sans, som er indlejret via Googles Web Fonts-service, hvor brugerens maskine henter fonten på Googles server. Jeg har dog sikret mig at andre websikre fonte kan bruges som backup hvis der mod forventning skulle opstå problemer.
I min kodning bruger jeg en lang række div-bokse, ID og Classes, som er defineret i min CSS. Flere gange har elementer flere classes, for at gøre CSS’en mere simpel at vedligeholde og indlæse. Derudover er min kode i både HTML og CSS kommenteret, for at det er lettere at finde rundt i. CSS-kodningen udnytter desuden at mange baggrunde kan gentages vandret for at øge hastigheden på indlæsningen af siden.
CSS’en bruger desuden position-absolut og z-index til at flytte elementer, såsom logoet og markeringen af den aktive side. Derudover er ”ekstra effekter” såsom runde hjørner og hover på aktive div-bokse for nyere browsere, mens ældre browsere ignorer disse effekter.
Videreudvikling af siden
Hjemmesiden er kodet i HTML og CSS, og virker ganske glimrende. Der er dog en del inaktive links som selvfølgelig skal laves, ligesom input felter og andet skal have tilknyttet funktioner. Siden skal desuden opbygges i et CMS system for at kunne opdateres af kunden, hvilket dog ikke er det store problem, da alt forarbejdet er lavet med design og CSS-styling.
Se HTML/CSS side (klik på billederne til højre for undersider)
