grafisk workflow · et redesign af hummels website. det gamle website gjorde meget brug af...

GF

WF

G R A F I S KW O R K F L O W

N I K O L A J V A N G K I L D E

M E D I E G R A F I K E R S V E N D E P R Ø V E

2 0 1 6

Et redesign af hummels website.

Det gamle website gjorde meget brug af farverige teksturer, baggrunde bannere osv.

Der var et ønske om et mere moderne, enkelt

og strømlinet website.

Der skulle kodes både en desktop- og en mobilversion af sitet.

Der skulle desuden lægges op til en

webshop-del af sitet samt en kontaktformular.

O P G A V E B E S K R I V E L S E

1

Som indledning lavede jeg en tidsplan over hele projektet. Ved at disponere min tid på forhånd, skabte jeg en god arbejdsstruktur for mig selv, så jeg havde et overblik over, hvilke ting jeg skulle nå, i hvilken rækkefølge det var mest hensigtsmæssigt at gøre det samt hvor lang tid de enkelte ting gerne skulle tage. På den måde kunne jeg også løbende se, om jeg holdte tidsplanen, eller om jeg var bagud.

T I D S P L A N

Dag 1 Dag 2 Dag 3 Dag 4 Dag 5 Dag 6 Dag 7 Dag 8 Dag 9 Dag 10

Indledning og opgavebeskrivelse

Inspiration

Brainstorm

Skitser

Indsamling af billeder og tekst

Typografi

Grafikoptimering

Mockup

Flowchart

Skelet

Storyboard

Kodning

Kontaktformular

Google analytics

Browsertest

SEO-optimering

Upload

2

I N S P I R A T I O N

Jeg har hentet inspiration fra andre websites, som på den ene eller den anden måde har noget til fælles med hummel. Jeg har kigget på websites med indhold, der er præget af ting som sneakers, sportstøj og børnetøj, da det er de ting, hummel selv laver og sælger. Den tendens jeg personligt bider mærke i, er sites der har en smal bred navigationsbar og et eller flere meget markante topbannere på sitets indexside. Især på sites med webshop virker det som en god måde at fange den besøgendes opmærksomhed, så personen klikker sig ind på nogle givne produkter.

3

Efter at have researchet og fundet nogle websites til inspiration tegnede jeg nogle forskellige bud på,

hvordan det nye hummel-website kunne se ud.

Jeg havde fokus på nogle af de observationer, jeg havde gjort mig i inspirationsfasen – især de markante

topbannere var et element, jeg vægtede højt.

S K I T S E R

4

Mit flowchart viser sitets opbygning. Det er et overskueligt værktøj til at vise, hvilke undersider man kan tilgå hvorfra, og en programmør kan derfor bruge det til at kode sitet med korrekte links mellem siderne.

F L O W C H A R T

D R O P D O W N

I N T E R N T L I N K

D Ø D T L I N K

PR

OD

UK

TE

R

I N D E X

SP

OR

T

LI

FE

ST

YL

E

FO

OT

WE

AR

TR

AI

NI

NG

KO

NT

AK

T

OS

TA

K_

NY

HE

DS

BR

EV

FI

ND

O

ST

AK

5

Skelettet er endnu et værktøj til en programmør, der potentielt set skal kode sitet. Det er en form for skabelon, der med nøjagtige mål og betegnelser viser, hvor på sitet de forskellige elementer skal placeres. Bredder, højder, marginer osv. er alle defineret med pixels, så programmøren har helt konkrete data at arbejde med. Her er desktop-udgaven af skelettet.

S K E L E T I

D E S K T O P

W I D T H : 1 0 0 %

M A X - W I D T H : 1 0 2 4 P X

M I N - H E I G H T : 5 0 P XM A R G I N - B O T T O M : 1 9 P X

M E N U 1 M E N U 2 M E N U 3 M E N U 4

W I D T H : 3 3 0 P X

H E I G H T : 2 5 0 P X

H E I G H T : 1 0 0 P X

1 5 P X

3 0 P X

3 5 P X

H E I G H T : 4 0 P X

H E I G H T : A U T O


M I N - H E I G H T : 3 0 P X

M I N - H E I G H T : 3 0 P X

Lorem ipsum dolor sit


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

H E I G H T : 5 0 P X

H E I G H T : 5 0 P X

H E I G H T : 1 6 5 P XM A R G I N - T O P : 1 0 P X

H E I G H T : 1 6 5 P XM A R G I N : 1 % 0 1 % 1 . 6 %

H E I G H T : 1 6 5 P XM A R G I N : 1 % 0 1 % 1 . 6 %

H E I G H T : 1 2 2 P X

H E I G H T : 1 6 5 P XM A R G I N : 1 % 0 1 % 1 . 6 %

H E I G H T : A U T OM A R G I N - T O P : 2 0 P XP A D D I N G - L E F T : 1 0 P XP A D D I N G - R I G H T : 1 0 P X





W I D T H : 4 8 0 P X

6

M O B I L

W I D T H : 1 0 0 %

M A X - W I D T H : 1 0 2 4 P X

M I N - H E I G H T : 5 0 P XM A R G I N - B O T T O M : 1 9 P X


W I D T H : 3 3 0 P X

H E I G H T : 2 5 0 P X

H E I G H T : 1 0 0 P X

1 5 P X

3 0 P X

3 5 P X

H E I G H T : 4 0 P X



M I N - H E I G H T : 3 0 P X

M I N - H E I G H T : 3 0 P X




H E I G H T : 5 0 P X

H E I G H T : 5 0 P X

H E I G H T : 1 6 5 P XM A R G I N - T O P : 1 0 P X

H E I G H T : 1 6 5 P XM A R G I N : 1 % 0 1 % 1 . 6 %

H E I G H T : 1 6 5 P XM A R G I N : 1 % 0 1 % 1 . 6 %

H E I G H T : 1 2 2 P X

H E I G H T : 1 6 5 P XM A R G I N : 1 % 0 1 % 1 . 6 %

H E I G H T : A U T OM A R G I N - T O P : 2 0 P XP A D D I N G - L E F T : 1 0 P XP A D D I N G - R I G H T : 1 0 P X





W I D T H : 4 8 0 P X

7

Udover desktop-udgaven, har jeg også lavet et skelet over mobil-udgaven af sitet.

S K E L E T I I

S T O R Y B O A R D

Storyboardet er også et værktøj til at kode sitet. Det er et mere visuelt og knap så teknisk værktøj som f.eks. skelettet, men det viser i billeder hvor de forskellige fotos og grafikker skal placeres på sitet. Sammen med flowchart og skelet er storyboardet et meget nyttigt værktøj i kodningen af sitet.

indkoebskurv.svg

hummel.svg

index.html

kontakt.html

find_os.html (dødt link)

sport.jpeg sport.html

lifestyle.jpeg lifestyle.html

nyhedsbrev

footer-cards.png

footwear.jpeg footwear.html

training.jpeg training.html

produkter (dropdown) sport.html lifestyle.html footwear.html training.html

8

G R A F I K O P T I M E R I N G

Alle billeder har været gennem Photoshop, hvorfra de er gemt via programmets Save For Web-funktion, der minimerer billedfilers størrelse med et minimalt tab af kvalitet. Vectorfiler såsom hummel-logoet er gemt som SVG-filer, som er et skalerbart vectorformat, så samme fil på sigt kan genbruges i flere formater, hvis det skulle blive nødvendigt. Desuden fylder SVG-filer meget lidt. Jo mindre de filer, der skal loades på sitet, er, jo hurtigere loader sitet, hvilket skaber den bedst mulige brugeroplevelse.

9

Kodningen af sitet er foretaget i programmet Brackets.

Brackets har intet live preview af det site, man arbejder på, men det har et enormt overskueligt interface, og

giver et rigtig godt overblik over koden bl.a. pga. de farver, programmet arbejder med, som gør det let at

skelne forskellige typer kode fra hinanden.

K O D N I N G

10

B R O W S E R T E S T

SA

FA

RI

CH

RO

ME

FI

RE

FO

X

Nogle html-koder kan opføre sig forskelligt fra browser til browser. Derfor har jeg testet mit site i tre forskellige browsere: Safari, Google Chrome og Firefox. Da sitet ser ens ud i de tre browsere, har jeg vurderet dets kompatibilitet til at være tilfredsstillende. Jeg har testet i de tre browseres nyeste versioner.

11

For at søgemaskineoptimere sitet har jeg arbejdet med følgende metoder:

Description (beskrivelse af hver side på sitet)

Keywords (nøgleord der beskriver hver sides indhold) Titles (hver side på sitet får en titel)

Robots (gør sitet synligt på Google) Semantik (brug af semantiske html-elementer)

S E O - O P T I M E R I N G

D E S C R I P T I O N

K E Y W O R D S

T I T L E S

R O B O T S

S E M A N T I K

12

G O O G L E A N A L Y T I C S

Google Analytics genererer statistik om trafik på websites. Ved at anvende Google Analytics på websitet kan man løbende analysere besøgendes adfær på sitet, så man har konkrete data til at forbedre og vedligeholde sitet. Især på et site med webshop er det vigtigt at lave analyser på, hvad der giver besøgende på sitet den bedst mulige oplevelse, så der genereres størst mulig salg pr. besøgende.

13

Websitet er uploadet til mit eget domæne via FileZilla Client, som er et open source FTP-program.

Med det færdige projekt organiseret i en god

mappestruktur, kan hele sitet uploades nemt ved blot at trække sitets hovedmappe ind på det domæne, man er logget på via FileZilla-klienten.

U P L O A D

14

15

V A L I D E R I N G

Til slut er sitet valideret via W3C’s valideringsservice. Den fandt lidt småfejl, som er rettet til, så sitet kunne gennemgå en tjek uden fejl.

Jeg er rigtig godt tilfreds med sitet. Jeg beskæftiger mig ikke med webdesign til dagligt, så det har været en spændende udfordring, og jeg synes, jeg har rykket mine kompetencer inden for faget i en positiv retning i løbet af projektet. Baseret på mit eget niveau har sværhedsgraden været høj, og derfor er jeg rigtig glad for, at jeg synes, jeg har fået lavet et pænt og velfungerende site. Det har desuden hjulpet mig rigtig meget at strukturere projektet så grundigt fra begyndelsen.

K V A L I T E T S - V U R D E R I N G

16

W W W . N I K O L A J V A N G K I L D E . D K / H U M M E L

grafisk workflow · et redesign af hummels website. det gamle website gjorde meget brug af...

Documents