HESTBJERG WEB GRAFISK WORKFLOW

Transkript

1 HESTBJERG WEB GRAFISK WORKFLOW

2 OPGAVE BESKRIVELSE Dette er en hjemmeside jeg har udviklet til Hestbjerg Økologi. Siden skal bruges til at sprede deres budskab. Opgaven Hestbjerg økologi søgte en hjemmeside til at sprede nyheder og tiltag omkring deres produkt, til dette skulle der skabes et simpelt og overskueligt layout som er let at navigere for brugeren. Afsender Hestbjerg Økologi er en økologisk svinekøds producent, deres mål er at skabe bedre vilkår for slagstesvin og samtidigt øge kvaliteten af kødet. Alle deres svin går frit i naturlige omgivelser. Målgruppe Hestbjerg Økologis målgruppe er person folk med interesse for økologi og dyre velfærd, dette er typisk unge til middelaldrende personer, som prioriterer kvalitet og dyrets velfærd over prisen på kødet. 11

3 BRAINSTORM OG TIMELINE Her kan du læse om vores brainstorm process og timeline. Tid og deadline Telefon møde og briefing med Hestbjerg Økologi om projektet og mål. Teknisk data indsamling for tidligere hosting mm. Planlægning farve valg og stilønsker fra kunden samt Inspirations indsamling efter kundens stilønsker. Udarbejdelse af site-map og sidens grundliggende funktioner. Opgaven var et mindre projekt, som skulle udvide sig med tiden. Grundsiden tog cirka en uge at planlægge, design og udvikle. Installation af Wordpress på en lokal server laves, og gøres klar til tema udvikling. Hestbjerg giver respons på designet og tilrettelser laves. Første visuelle udkast sendes til Hestbjerg økologi. Udvikling af sidens wireframe. Et simpelt grundtema vælges og der oprettes et child-theme til videre udvikling der af. Siden udvikles og alle page-templates laves. Samt SEO optimering på grund siderne. Siden sendes vises for Hestbjerg økologi, alle tilrettelser bliver lavet og siden bliver testet. Siden går live. 12

4 BRAINSTORM Her kan du se min brainstorm med Hestbjerg økologi visuelt. Blokke og kasser Brugervenligt En snørklet process Da vi ikke havde mulighed for at sidde over for hinanden var denne process yderst udfordrende. Det hele foregik over telefon og , så det var meget besværligt at holde styr på det hele og få en god process i gang. Simpelt Overskueligt Hestbjerg farver Store billeder Moderne Enkelt Visuel Anvendelig Spænende 13

5 WIREFRAME OG SITE-MAP På denne side kan du se mit wireframe/design og læse om processen Site-map Ud fra snakken på telefon og udarbejde jeg et site-map som skulle bruges til sidens opbygning. Wireframe Jeg udarbejde grund opbygningen med simple former i et 12collumn grid, og så skulle kollapse til et 4collumn grid på mobil. Visualisering Efter at have fået sidens struktur på plads og godkendt af Hestbjerg, lagde jeg noget grafik ind så de kunne få en følelse for det endelige resultat. 14

6 CSS STYLING Her kan du se lidt af den css jeg har skrevet da jeg byggede siden. Css stylesheet Selv om det tema jeg tog udgangpunkt i havde den basale struktur og styling på plads, skulle der stadig skrives en masse Css for at få det til at ligne mit design. Til højre kan man se noget af det css som jeg måtte skrive i min Custom.css fil. Dette er css til rettelser af sidens top banner. Dette er css til rettelser af sidens navigation 15

7 BACKEND OG PLUGINS Her kan se nogle af de valg jeg har taget i Wordpress backend, samt nogle plugins jeg har valgt at bruge. Smush Compression Da siden skal indeholde mange billeder, og kunden selv skal stå for at ligge dem ind, har jeg valgt at bruge et plugin til at komprimere alle billeder som uploades til siden. På den måde kan jeg nogenlunde sikre mig at sidens hastigheden holde sig optimal, fordi alle billeder komprimeres. Yoast SEO Da kunden selv skal stå for at holde sine indlæg så søge maskine venlige som muligt, så er det vigtigt at der er en form for guideline. Jeg har valgt at anvende det mest populære SEO plugin til dette. Pluginet guider brugerne igennem processen og forsøger at informere om ting der burde forbedres. Google Analytics Siden er også opsat med Google analytics. Ved hjælp af analytics har vi mulighed for at tracke besøgende og deres adfærd, og på den måde lave tilrettelser som gør at deres adfærd ændres. Jeg har også valgt at installere et Google Analytics plugin, som gør at kunden uden teknisk kunnen også kan følge lidt med i fremgangen- 16

8 PAGE SPEED/ OPTIMERING På denne side kan du læse om nogle af de ting jeg har gjort for at optimere sidens hastighed Load time For at sikre mig at siden loader hurtigst muligt, har jeg bruge Pingdom.com til at lave en hastigheds test. Her får man en masse data omkring ens hjemmeside og hvordan man kan forbedre det. Page Cache Siden havde rigtigt fine tal, og scorede en B scorer men jeg var sikker på at jeg kunne forbedre dette. Så ud fra de information siden gav mig vurderede jeg at et cache plugin kunne forbedre min score. Jeg installerede et plugin som hedder Lite Speed Cache, og det resulterede i talene på billedet til højre. 17

9 PAGE TEST OG INDEX Her kan du læse om de sidste steps der laves inden siden går live Kompatibilitet test Som en del af testing fasen inden siden går live, laver jeg altid en Browser kompatibilitet test. Til dette bruger jeg en række services, blandt andet Powermapper.com. Siden informere hvis der skulle være nogle problemer, og så kan man vurdere om det er et stort nok problem til at det er tiden værd at løse det. Google Index Når siden er testet igennem og er gået live, så indsender jeg et site-map til Yahoo, bing og Google da dette er de mest populære søge maskiner. På denne måde sikre vi at søge maskinerne forholdsvis hurtigt finder siden og får den indekseret, så den begynder at rangere. 18

10 KVALITETS KONTROL Her kan du læse om vurdering af siden efter den har været live Kunde tilfredshed Hestbjerg Økologi er meget tilfredse med det endelige resultat, og vi kan se at siden bruges flittigt når vi kigger i Analytics. Selvstændighed Hestbjerg har taget sig tiden til at få sat sig ind i hvordan det selv opretter nye sider og opslag og det er utroligt sjældent at vi er nød til at assistere dem med noget, det klarer langt det meste på egen hånd. Egen vurdering Opgaven har været ekstra udfordrende fordi alt kommunikation foregik over eller telefon. Men til trods for at kommunikationen var besværlig, syntes jeg vi er kommet frem til et godt resultat. 19