G F W F G R A F I S K W 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

Transkript

1 G F W F G R A F I S K W 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 O P G A V E B E S K R I V E L S E 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. 1

3 T I D S P L A N 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. 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 2 Typografi Grafikoptimering Mockup Flowchart Skelet Storyboard Kodning Kontaktformular Google analytics Browsertest SEO-optimering Upload

4 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

5 S K I T S E R 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. 4

6 I N D E X F L O W C H A R T 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. P R O D U K T E R K O N T A K T O S F I N D O S T A K T A K _ N Y H E D S B R E V 5 I N T E R N T L I N K D R O P D O W N D Ø D T L I N K S P O R T T R A I N I N G F O O T W E A R L I F E S T Y L E

7 D E S K T O P WIDTH: 100% HEIGHT: 100PX Lorem ipsum dolor sit MIN-HEIGHT: 50PX MARGIN-BOTTOM: 19PX MENU 1 MENU 2 MENU 3 MENU 4 HEIGHT: 40PX MAX-WIDTH: 1024PX 30PX S K E L E T I 15PX HEIGHT: AUTO Skelettet er endnu et værktøj til en programmør, der potentielt set skal kode sitet. HEIGHT: 250PX 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. WIDTH: 330PX 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 35PX HEIGHT: AUTO Her er desktop-udgaven af skelettet. Lorem ipsum dolor sit MIN-HEIGHT: 30PX 6 WIDTH: 480PX Lorem ipsum dolor sit HEIGHT: 50PX

8 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 Lorem ipsum dolor sit MIN-HEIGHT: 30PX M O B I L WIDTH: 480PX Lorem ipsum dolor sit HEIGHT: 50PX HEIGHT: 122PX MENU 1 MENU 2 MENU 3 MENU 4 HEIGHT: 50PX HEIGHT: 165PX MARGIN-TOP: 10PX S K E L E T I I HEIGHT: 165PX MARGIN: 1% 0 1% 1.6% Udover desktop-udgaven, har jeg også lavet et skelet over mobil-udgaven af sitet. HEIGHT: 165PX MARGIN: 1% 0 1% 1.6% HEIGHT: 165PX MARGIN: 1% 0 1% 1.6% 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 HEIGHT: AUTO MARGIN-TOP: 20PX PADDING-LEFT: 10PX PADDING-RIGHT: 10PX Lorem ipsum dolor sit MIN-HEIGHT: 30PX 7

9 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 produkter (dropdown) sport.html lifestyle.html footwear.html training.html kontakt.html find_os.html (dødt link) sport.jpeg sport.html lifestyle.jpeg lifestyle.html footwear.jpeg footwear.html training.jpeg training.html nyhedsbrev 8 footer-cards.png

10 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

11 K O D N I N G 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. 10

12 S A F A R I B R O W S E R T E S T 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. C H R O M E 11 F I R E F O X

13 D E S C R I P T I O N K E Y W O R D S S E O - O P T I M E R I N G T I T L E S R O B O T S 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 M A N T I K 12

14 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

15 U P L O A D 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. 14

16 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å et tjek uden fejl. 15

17 K V A L I T E T S - V U R D E R I N G 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. 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 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. 16