Prototype

Her er prototypen til Horgen gårds nettside. Både desktop og mobil. Beskrivelse står under linkene og bilder av prototypen ligger helt nederst i blogg innlegget.

Valg

Jeg har tatt bevisste valg under hele prosessen. Det skal jeg skrive om nå og forklare litt rundt det. Jeg har laget prototype for desktop og begynt på en for mobil.

Program

Jeg har valgt å lage prototypene mine i Photoshop og Illustrator. Illustator brukte jeg til vector baserte elementer sånn som logoen, ikonet og mellomstrekene. Jeg valgte dette programmet fordi jeg mener det egner seg best til å lage visse elementer til en nettside og den jobber godt sammen med Photoshop. Selve sammensettingen av alle element valgte å gjøre i Photoshop, dette fordi Photoshop er et pikselbasert program på lik måte som en skjerm som nettsiden skal vises på.

Jeg valgte å ikke prøve de nye programmene som er kommet nå til dags fordi jeg føler meg tryggere i Photoshop og Illustartor. Jeg ville bruke tiden min på designet, isteden for å begynne å sette meg inn i et nytt program. Samtidig er Photoshop et naturlig valg som designer når man skal lage en nettside.

I fremtiden vil jeg nok teste ut Sketch3 og lignende programmer. Virket som det er lettere, og det beste er at du kan produsere alt på en plattform og ikke hoppe mellom flere slik som jeg gjorde.

For å legge til liv og vise frem prototypen på best mulig måte har jeg brukt en nettside som heter Marvelapp. Superfin, enkel og gratis side. Dette er bare en beta versjon enda, så ikke alle funksjonene virket. Den vertikalmenyen skal være fixed, men det var ikke mulig å få til. Så det er noe jeg bare må si at den skal være.

Site map

Her er den korrekte site-mapen til hvordan siden ser ut nå. Har valgt å endre noen få tin fra forrige. Produksjon og produkt er under samme side og sosiale medier er under blogg siden istedet for kontakt.

Designvalg

Hele nettsiden er bygd opp rundt tre nøkkelord: Familie. Familie var veldig viktig for Gudbrand. Det var veldig viktig at det skulle skinne igjennom. Andre nøkkelord er økologisk. All produksjon på gården er økologisk. Det er derfor viktig at kundene får se dette. Det siste nøkkelordet var Angus. Hovedfokuset og hovedproduksjonen på Horgen i dag er Aberdeen Angus. Så jeg fokuserte mest på denne på produktsiden.

Det var viktig at siden skulle gjenspeile disse tre nøkkelordene.

Jeg har valgt å ha en ren og enkel struktur på sidene. Også et rent design. Dette kobles opp mot økologisk. Økologisk dreier seg om rene produkter.

Selve gården og familien har fått mest plass på nettsiden. Viktig å vise frem familien. Derfor har jeg valgt noen bilder av familie. Skulle sett at det var flere, men vi fikk ikke så mange bilder av de.

Aberdeen Angus har fått plass øverst på produktsiden. Dette for å vise at det er hovedproduksjonen til Horgen. Den har også fått størst plass av alle produktene.

Fargevalg. Fargene jeg har valgt på nettsiden er ut i fra Gudbrand sitt ønske. Han ønsket seg en mørk grønn farge og litt gull for å gjøre det eksklusivt. Lik fargene du finner på Wholefoodsmarket.com. Jeg har valgt å ha logoen i gull, for å vise at Horgen er eksklusivt. Ellers har jeg valgt at ulike elementer og detaljer være i en mørk grønn farge.

Jeg er veldig fornøyd med det jeg har fått til. Føler jeg har svart på de kravene Gudbrand hadde og ønsket. Utrolig fornøyd og veldig motiverende å bli valgt ut til kundepresentasjon.

Index/Forside
Til venstre vises hvordan siden kommer til å se ut om du trykker på “Les mer” knappen.
← Bestilling av angus kjøtt. → Lei gården
Enkel kontaktside

MOBIL

Jeg har også begynt å et forslag til mobilversjonen. Det er veldig viktig at Horgen også fungerer på mobil fordi flere og flere bruker smartmobil og for at de skal være mer tilgjengelig og mer brukervennlig.

Jeg har valgt å lage de sidene jeg mener er viktigst som da er forsiden, gårdsiden og bloggsiden.

Jeg har valgt å ha nåkså likt design som den for desktop har for at kunden skal skjønne at dette er samme side. De forandringene jeg har gjort er å ta bort vertikalmenyen, da denne ble for liten og lite brukervennlig på så liten skjerm. Menyen på forsiden er blåst opp og meny-knappene er satt under hverandre så det skal bli lettere å trykke på knappene. Instagramfeeden som er på blogg siden er tatt bort, da denne tok for stor plass, men det er fortsatt ikoner til instagram og facebook tilgjengelig.

Det er noen ting jeg ikke fikk forandret på, men som jeg hadde gjort med litt bedre tid. Det ene er menyen på undersidene. De er alt for små, så derfor lite brukervennlig. Det er vanskelig å trykke på en knapp uten å komme bort i en annen. Her ville jeg heller ha laget en slags drop-down meny.

Ser også nå når jeg fikk prøvd ut mobil-prototypen på min smarttelefon at skriftstørrelsen på brødteksten er for liten. Dette hadde jeg også villet endre på.

Index/forside
Blogg
Gården
Show your support

Clapping shows how much you appreciated Grafikerfrue’s story.