Design

Interaksjonsdesign (IxD)

Flytdiagram

Jeg har laget et flytdiagram for å vise interaksjonen mellom bruker og hjemmesiden ved bestilling av produkter. Dette gjør det enklere for meg å konstruere siden senere, og i tillegg for kunden å forstå hvordan systemet er bygget opp.

Jeg vil ha et så effektivt system som mulig, derfor skal så mange valg som mulig være “klikkbare” så kunder på siden slipper å skrive mye selv. Når kunden har trykket bestill, skal det bli sendt et skjema til mailen til Trond. Kunden får beskjed på siden at bestillingen er sendt, og at Horgen Gård kommer til å ta kontakt via telefon for å bekrefte kjøpet.

Wireframes

Forsiden (index)

Her ser man de typografiske nivåene litt tydeligere.

Jeg har laget to forskjellige informasjonssider. Dette er den første.

Dette er informasjonsside to.

Dette er en side med liste. Passer til “utsalgssteder” og “priser”.

Dette er kontakt-siden.

Dette er bestillings-siden.

Dette er bloggen.

Jeg ville gjerne ha et gjennomgående design, uten for store forskjeller mellom hver side. På denne måten blir det enklere for brukeren å forstå hvordan man skal navigere seg frem, ettersom det er samme prinsippet på alle sider. Designet er rent med mye luft og tydelige typografiske nivåer. Det skal fremstå som eksklusivt og samtidig offensivt ved å bruke kontraster i både typografi, former og farger.

Wireflow

Jeg har laget wireflow for hele nettsiden generelt, for å gjøre det enkelt for meg selv og kunden å se hvordan brukeren navigerer på siden. Hva linker til hva, og hvordan man kommer seg rundt på siden.

De orange linjene representerer veien fra hjem-siden og menyen øverst på hjemmesiden. De blå representerer direkte linker til andre sider fra den valgte siden.

Her har jeg laget wireflow for selve bestillingssiden.