GRAFIKS WORKFLOWMaria Gjedsted ⋅ MG25 ⋅ 2. skoleperiode

Workflow 2

OPGAVEBESKRIVELSEOPGAVENHjemmeside til Tissø Rolkub

PROGRAMMER

DESIGNKRAV • Sitet skal være indbydende og enkel• Den skal være i lyse farver• Brugervenlig - nem at navigere rundt på• Det skal være overskuelig og informerende• Det skal være nemt at finde kontaktinformationerne

LAYOUT• Sidens bredde er 1024px• Links med hover effekt for brugervenlighed• Slideshow med stemningsbilleder • Billeder• Alle billeder er tilpasset og rettet i Photoshop• Billederne er komprimeret til web så de ikke fylder så meget

ARBEJDSPROCESS• Møde med kunden• Kravsspecifikationer - Særlige ting• Målgruppe • Dokumenter• Design, farver• Skitser/ideer - Møde• Kode• Programmering med brug af HTML, CSS, jquery• Sitet er testet• Aflevering

OPBYGNINGSom løsning til denne opgave, har jeg fundet en responseve template, som jeg bruger som udgangspunkt. Jeg retter til både i html koderne og i min css. Responsiv design betyder at min side vil kunne tilpasse sig flere forskellige skærmtyper.

Alle de billeder jeg bruger, sender jeg gennem Photoshop. Jeg søger for at billederne ligger er i RGB og for at optimere bille-derne til nettet., gemmer jeg dem under ”save for web”.

DIGITAL WORKFLOW

Ideudvikling Inspiration SkitserIdé layout

i Photoshop

Materialer fra kunden

Flowchart PræsentationJusteringer,

færdiggøresle

Workflow 4

INSPIRATIONDet kan hjælpe at søge inspiration på nettet. Jeg kan ud fra disse ekempler få et overblik overhvilke elemneter jeg synes fungere, og ikke fungere.

Der er knald på farverne på denne side. Der er ganske vist farvehamoni, men siden udståler ikke den ro som jeg gerne vil fange.

Denne side er lys og meget enkel. Jeg kan godt lide at der ikke er så mange forstyrende elementer. Men siden må heller ikke være alt for tom.

Her er jeg ret begejstret for topbanneret. Selv om der er meget informatiion på siden, så er der også mange billeder, det virker lettere end alt for meget tekst.

Her er en enkel og lys side, uden for mange ting der larmer.

Pæn side, med en sjov effekt i venstre side. Der er leget med dybten ved hjælp at skyggeeffetk under wrapperen.

Workflow 5

Velkommen

BestyrelseRoere KontaktNye medlemmer

Kontingent VedtægterUngdomsroning

Meld dig ind ReglementSenior

Vinterroning

Billede

FLOWCHART

Workflow 6

HÅNDSKITSER

Workflow 7

FONT OG FARVEVALG

R: 0

G: 0

B: 0

R: 153

G: 153

B: 153

R: 134

G: 151

B: 145

R: 134

G: 151

B: 145

R: 0

G: 38

B: 51

R: 25

G: 69

B: 101

R: 112

G: 162

B: 179

Jeg har valgt en skrifttyper som egner sig til webbrug. Den skal være lette at læse, på skærmen. Jeg har valgt en ”open sans”, en Arial, sans serif. Den er let og tydelig og signalerer en moderne og seriøs stil.

Arial

abjdefghijklmnopqrstuvwyzæøåABJDEFGHIJKLMNOPQRSTUVWYZÆØÅ1234567890

Workflow 8

HTML OG CSS

Eksempel på formular på kontakt siden

Workflow 9

FÆRDIG WEBSITE