Prototype

Nina Amdal
6 min readDec 17, 2014

--

Her er en prototype på hjemmesiden min. Jeg vil bare si at siden medium ikke ville laste opp mine jpg. filer, måtte jeg ty til screenshot. Det er grunnen til at noen av sidene er litt rart kuttet opp, særlig de lengre sidene. Håper dette ikke gjør ting for forsyrrende, og at dere fremdeles skjønner tanken bak prototypen min. (Og noen steder er det en liten “gradient” nederst i hjørnet. Den skal egentlig ikke være der)

  1. Her er forsiden min.

2. Hvis man beveger pilen over “produkter” vil det dukke opp en grønn firkant som viser hvor du trykker.

3. Inne på produkter kommer det opp en “meny”. Som man kan se, følger toppmenyen med på alle sidene, slik at man lett kan gå videre til “bestill”, “blogg” og “utleie”

Under alle vectorbildene av de forskjellige produktene, står det en liten kort tekst. Hvis man vil lese mer om dette produktet, har jeg valgt å legge til en “les mer” knapp, for å komme seg videre til en mer utypende tekst om produktet.

4. Her er inne på Angus siden:

Jeg har valgt å ha en scrolleside. På hver av sidene, har jeg en liten undermeny i grønt. Man kan velge om man vil scrolle nedover hele siden, hvis man vil ha med seg alt. Men hvis man bare ønsker å lese om “kjøttet” kan man trykke på den knappen i menyen, og siden vi automatisk flytte seg nedover til dette pungtet. Slik er det på alle produktsidene.

blar videre…

Alle mine sider på “produkter” har det samme designet og det samme prinsippet.

5. Her er siden om kylling:

(Grunnet at jeg måtte bruke screenshot, siden medium ikke kunne laste opp så store jpg filer, har det blitt kuttet litt feil på de lange sidene…)

6. Og gris:

(Videre kommer mer om “våre griser”, men igjen, grunnet feilkutting pga screenshot ble mye av det borte…)

7. Så har vi korn:

(Feilkutt igjen….)

(…og igjen)

8. Tilbake på hjemmesiden. Her har brukeren “hovret” over “om oss” knappen. Derfor har den fått en lysere grønnfarge bak seg.

9. Inne på “om oss” ser det slik ut:

Samme prinsippet her. Med en liten menylinje for å navigere videre nedover på siden. Menylinjen på toppen følger fremdeles med.

Dårlig kutt

10. Det samme igjen på “kontakt” som på de andre menyikonene, bakgrunnen skifter farge:

Da kommer man videre inn på denne siden:

11. Kontakt

Her står all kontaktinformasjon, og et lite “kommentarfelt” hvis noen har noe de gjerne vil spørre om.

Så til pungtene i overmenyen. Her er det også slik at der musepekeren peker, blir det en lysere grønnfarge bak. Neste side er:

12. Bestilling.

Her kan man bestille hva man vil ha. Først fyller man ut navn og adresse. Hvis man ønsker å se et kjøttkart, kan de trykke der. Da vil det komme opp en pdf av et kjøttkart. Man kan krysse av om man vil ha kalv eller stort dyr, og videre nedover kan man velge hva man vil ha.

En dropdown meny som viser utvalget. Her blir bagrunnen grå når musepekeren peker over ett av ordene.

Når det er valg, vil “Velg her” bli byttet ut med ditt valg. I dette tilfellet; mørbrand.

Når du har trykket på bestillknappen, kommer denne opp:

Neste stopp er:

13. Blogg

Her vil du først komme inn på en “teaser” side. På denne måten vil flere innlegg bli sett, uten at man må bla seg gjennom alle sammen for å finne noe man vil lese. Her er det en overskrift, et bilde, og et lite utrag av teskten. Trykker man på les mer, vil hele innlegget komme opp.

Det ser da slik ut:

Det siste vi skal innom er:

14. Utleie av gården.

Her kan man velge hva man vil gjøre på gården, ved å trykke på dropdown menyen “Hva ønsker du å gjøre.” På siden kan man velge når man vil leie, og menyen under skriver man inn hvor mange voksne, barn eller babyer det kommer.

Grunner til at jeg gjorde som jeg gjorde:

Jeg valgte grønnfarger og bilder fra gården, for å skape en koselig og varm atmosfære. Jeg valgte å ha en menylinje øverst med utvalgte knapper som følger på alle sidene, slik at man lett kunne velge “bestill” eller en av de andre sidene uansett hvor man var.

Jeg ville også ha en kombinasjon av trykking og scrolling, fordi det er forkjellig hva folk foretrekker. Man skal få valget til å trykke seg dit man vil, eller hvis man gjerne ønsker å få med seg så mye som mulig, kan man lett bla seg nedover.

Grønnfargen er fordi Gulbrand sa han likte den flaskegrønne fargen, og fordi de har en økologisk gård. Grønn skaper også en rolig følelse, og er behagelig å se på.

Det at bakgrunnsfargen bak ikonene i menyene skifter farge, er så kunden skal skjønne at det er en link, og at de skal forstå hvor de “er på vei.”

Det var min prototype!

--

--