Kakeeksper en. Kontaktinformasjon. Informasjon. Følg oss. Nyhetsbrev. Om produktet Konkurranse Kontakt oss

Transkript

1 Hjem Om produktet Konkurranse Kontakt oss Kakeeksper en Kontaktinformasjon Skogsstien 4, 3243 Kodal Mail@kakeeksperten.no Informasjon Om oss Om produktet FAQ Jobbe hos Kakeeksperten f Følg oss Facebook Instagram Twitter Youtube Nyhetsbrev @adresse.com

2 Hjem Om produktet Konkurranse Kontakt oss Kakeeksper en Sjokolademuffins Denne sjokolademuffinsen er en garantert favoritt. Hva er vel bedre enn en saftig, god og ikke minst sunn muffins til dessert, kveldskos eller når man fyser på noe godt? Muffinsen er fylt med sjokoladebiter, noe som gjør at sjokoladesmaken kommer enda bedre frem. Dersom du får gjester på besøk, har vi en tilbudspakke som inneholder 12 sjokolademuffins til kun 150 kr. Dette tilbudet gjelder frem til Hvis du vil komme innom kafeen vår eller ta med deg denne nyheten hjem, koster det 20 kr. Prisen er altså billig med tanke på smaken. Dersom du mener at vi har tatt oss vann over hodet og at denne muffinsen ikke faller i smak, får du pengene tilbake. Muffinsen er glutenfri, uten melkeprotein og er tilsatt allergen-egg. Den kan inneholde spor av nøtter. Kontaktinformasjon Skogsstien 4, 3243 Kodal Mail@kakeeksperten.no Informasjon Om oss Om produktet FAQ Jobbe hos Kakeeksperten f Følg oss Facebook Instagram Twitter Youtube Nyhetsbrev @adresse.com

3 Hjem Om produktet Konkurranse Kontakt oss Kakeeksper en Vinn gavekort på 500 kroner! Som en gave til våre gamle og nye kunder, gir vi ut 5 gavekort på 500 kr som kan brukes i vårt bakeri. Det eneste du trenger å gjøre er å svare på spørsmålet nedenfor og skrive mailadressen din så vi får kontaktet deg dersom du vinner. Konkurransen varer frem til , hvor vi trekker 5 heldige vinnere av gavekort. Et sted på denne nettsiden kan du finne svaret på spørsmålet. Spørsmål: hva er den viktigste ingrediensen i sjokolademuffinsene? Skriv svaret ditt her. Skriv din e-post her. f Del på Facebook Send Kontaktinformasjon Skogsstien 4, 3243 Kodal Mail@kakeeksperten.no Informasjon Om oss Om produktet FAQ Jobbe hos Kakeeksperten f Følg oss Facebook Instagram Twitter Youtube Nyhetsbrev @adresse.com

4 Hjem Om produktet Konkurranse Kontakt oss Kakeeksper en Spørsmål om oss Spørsmål om produkt Tidligere spørsmål << << << Spørsmål? Har du noen andre spørsmål som du ikke har fått svar på? Ring oss på tlf , eller skriv spørsmålet ditt under. Skriv din e-post her. Skriv ditt spørsmål her... Annet << f Send Kontaktinformasjon Skogsstien 4, 3243 Kodal Mail@kakeeksperten.no Informasjon Om oss Om produktet FAQ Jobbe hos Kakeeksperten f Følg oss Facebook Instagram Twitter Youtube Nyhetsbrev @adresse.com

5 Hjem Om produktet Konkurranse Kontakt oss Kakeeksper en Om oss Kakeeksperten startet sin kafé i 2012 og har siden det hatt stor suksess med sine kaker og bakverk. Bakeriet utvikler stadig nye bakverk som er tilpasset kundens ønsker. De legger sjelen sin i alt de baker, og derfor sies det at kjærlighet er den viktigste ingrediensen i alle bakverk i kafeen. Bakeriet lager alt fra bunnen av, og har derfor bakverk med naturlige råvarer som blir hentet på gårder ikke langt unna kafeen. Besøk den koselige kafeen i Skogsstien 4 i Kodal sentrum. Ledige stillinger Det finnes ingen ledige stillinger for øyeblikket. Ta med en CV til kafeen, så ringer vi deg dersom du er aktuell til en ledig stilling senere. Kontaktinformasjon Skogsstien 4, 3243 Kodal Mail@kakeeksperten.no Informasjon Om oss Om produktet FAQ Jobbe hos Kakeeksperten f Følg oss Facebook Instagram Twitter Youtube Nyhetsbrev @adresse.com

6 Sitemap og wireframe Hjem/forside Om produktet Konkurranse Kontakt oss Om oss Spørsmål

7 Mandatory 05 Rapport, Del 1 Marthine Fjeld

8 Innledning Oppgaven sier at vi skal lage en kampanjeside for et produkt som skal lanseres av et fiktivt bakeri. Bakerier selger mye forskjellige varer, blant annet kaker. Det var derfor kaker ble mitt hovedfokus i denne oppgaven, derav navnet på mitt fiktive bakeri, Kakeeksperten. Planen var i utgangspunktet at mitt fiktive bakeri skulle selge en ny type brownies, men da jeg prøvde meg på oppskriften ble den så mislykket at jeg ikke ville vise bilder av den en gang. Dermed gikk jeg videre til muffins en sunnere sjokolademuffins med sjokoladebiter i. Selv om bilder ikke telles like mye i denne oppgaven, så har det en del å si for helhetsinntrykket til nettsiden. Derfor valgte jeg å legge litt større fokus på bildene for å få de rene og fine, og tilpasset kampanjesiden. I en tidligere oppgave laget jeg 10 spørsmål som passer fint i denne innledningen. 1. Hvilken målgruppe ser du for deg skal besøke nettsiden din? Damer i alderen Hvem er dine konkurrenter og hvordan skiller du deg fra dem? Konkurrenter er andre bakerier som f.eks. Nærbakst. Mitt bakeri skiller seg fra andre bakerier ved at de satser på én målgruppe når det kommer til dette produktet, i tillegg til at de gjør noe større for å markedsføre produktet. 3. Hva er deadline for nettsiden? Hvor stort er budsjettet? Deadline for nettsiden er 13.februar i første omgang, og 24.april i andre omgang. 4. Hvem er kontaktpersonen for prosjektet? Den som er ansvarlig for nettsiden. 5. Hvem vil være ansvarlig for å opprettholde nettsiden? Vil personen ha tid og kompetanse til å gjøre det? Den som er ansvarlig for nettsiden skal kunne opprettholde nettsiden til kampanjen er over. 6. Hva er hensikten med nettsiden? Hensikten er å markedsføre et nytt produkt for bakeriet. 7. Hva er viktig for deg i forhold til innholdet i nettsiden? Å informere om det nye produktet, og å gjøre siden aktuell og interessant for målgruppen. 8. Hvor mange sider skal nettsiden ha? Hvilke sider? 4 basic sider hjem, om produktet, konkurranse, kontakt og tilleggssider i forhold til kontaktsiden. I tillegg skal nettsiden leveres med et eksternt stilark (style.css). 9. Har du innhold eller tekst som skal plasseres i nettsiden? Innhold som skal brukes er bilder, tekst utarbeides etter hvert. 10. Har du bilder som du planlegger å bruke? Bilder som er tatt skal brukes. I tillegg kan det utarbeides bilder i Illustrator etter hvert.

9 Som spørsmålene viser er min målgruppe damer i alderen år, en relativt vid målgruppe med tanke på interesser. Derfor må nettsiden være tilpasset alle interesser, og det havner da altså på fargevalg. Nettsiden skal markedsføre Kakeekspertens nye produkt, sjokolademuffins. Nettsiden må få målgruppa interessert i det nye produktet, og derfor er elementene viktig. Research og Arbeidsprosess Kreativ metode I en oppgave vi hadde for en stund tilbake i skoleuke 18, skulle vi lage wireframe og spørsmål. Denne oppgaven hjalp meg godt på vei i forhold til at jeg fikk ideer om hvordan nettsiden skulle bygges opp og hvilken hensikt den skulle ha. Jeg fikk planlagt målgruppe osv., og nå som jeg har laget front-end design til kampanjesiden, så lagde jeg det ut i fra skissene til wireframene som jeg lagde. Inspirasjonsmetode For å finne inspirasjon til nettsiden, så jeg på eksisterende nettsider. Jeg lagde et moodboard som man kan se lenger ned. I tillegg så jeg på eksisterende logoer, for jeg har en hjerne som trenger noe å gå etter for å fungere. Når jeg hadde funnet ut av hvilken type logo jeg ville lage, så lagde jeg hele nettsiden i hodet. Det hjalp også å skisse ned alle ideene jeg hadde, og dette er første gangen jeg skisser ned så mange logoer. Vanligvis skisser jeg én logo og vil bruke den med en gang, mens nå så skisset jeg mange forskjellige typer. Jeg trodde jeg ville ha en av de første logoene, men til slutt havnet jeg på en av de siste jeg skisset. Det valget angrer jeg ikke på. Analyse Det finnes utallige bakerier i Norge, men det er ikke ofte at jeg ser at et bakeri lager en hel nettside for å markedsføre et produkt. Det er fordelen med mitt fiktive bakeri. Utfordringen for mitt bakeri er å gjøre seg synlig. Jeg har ikke klart å finne noen bakerier som har samme type logo som jeg har laget til mitt bakeri, så der har jeg en fordel ved at de som ser logoen kan synes at det virker interessant. De fleste bakerier har bakevarer på logoen sin, nettopp for å symbolisere at det er logoen til et bakeri. Mitt bakeri heter som sagt Kakeeksperten, og derfor er det en kake i logoen som understreker dette. Eksempler på eksisterende logoer:

10 Skisser Jeg skisset logoer før jeg begynte å designe dem. Skissene kan man se under kategorien Logo. Jeg brukte wireframes som jeg hadde designet fra før av i forhold til front-end designet. Disse hjalp meg med å holde en ren struktur, uten at siden ble for mye. Wireframes

11 Moodboard

12 Logo Før jeg startet på logoen, satte jeg meg ned og skisset en del i forhold til figurer. Jeg falt til slutt på en figur som jeg synes hadde passet til målgruppen. Skisser Jeg valgte å tegne kaken for frihånd i illustrator. Da jeg kom til duken på kakefatet fikk jeg litt problemer, da jeg fant ut at jeg ville fylle denne med blonder - som en kakeserviett. Jeg så tutorial på YouTube av Helen Bradley som viste hvordan jeg kunne tegne blonder på kantene. Da jeg hadde lagd blonder på kanten til duken, fant jeg fort ut av at blondene ikke ville synes. Dette fordi logoer oftest blir minsket i størrelsen på web eller i brosjyrer. Derfor måtte jeg komme opp med noe nytt. Jeg valgte å legge et stroke med blonder rundt sirkelen som var fylt med lillafargen. På den måten kan man se hint av blondekanten, til tross for størrelsen, noe man kan se under her. Bildet til venstre viser hvordan det så ut med én farge.

13 Jeg brukte to farger i logoen for å holde det enkelt. Den ene fargen var i en dus lillatone og den andre i lyserosa. Jeg brukte disse fargene på annenhvert lag i logoen for å skape kontraster. I tillegg la jeg til et en litt mørkere farge som stroke på logoen for å skille de forskjellige elementene. Hvit er brukt for å skape litt ro i de to fargene, altså på stjernene. På bakgrunnen til logoen brukte jeg samme farge som er brukt på stroke til lillafargen. Altså en mørkere lillafarge. Dette har jeg gjort fordi de skaper en sammenheng med fargene, i tillegg til at kaken kommer mye bedre frem. Etter å ha utformet hovedelementet, altså kaken, så valgte jeg å teste hvilke muligheter jeg har i forhold til utforming rundt kaken. Jeg kom opp med noen forslag, men hadde hele tiden øynene på logoen med et bånd bak. Jeg synes at denne så veldig eksklusiv ut, i tillegg til at jeg kunne se for meg hvordan den hadde sett ut på websiden, kakebokser osv. Den har også en litt mer spennende detalj enn det de andre forslagene hadde, og båndet i den rosa fargen gjør at logoen ikke blir så tung. Derfor falt valget på denne logoen.

14 Det neste var å finne en font som passet til hele uttrykket. Jeg satte opp en liste over fonter jeg synes var fine og som kunne passet til logoen, og deretter valgte jeg å gå gjennom denne listen en del ganger. Edwardian Script Gabriola Lavanderia Learning Curve Pro Lucida Calligraphy Savoye LET Plain Snell Roundhand Til slutt falt valget på fonten Gabriola. Fonten er lettleselig og inneholder noe som kan hinte til løkkeskrift, noe som gjør fonten litt mer eksklusiv. Når man bruker løkkeskrift i logoer så kan det ofte bli veldig vanskelig å lese hva det står, men denne fonten er veldig enkel og lettleselig i alle størrelser. Fonten passer også fint til utformingen av logoen i forhold til at den ikke tar all fokus. Helheten i fonten og logoen ble laget mens sangen Norwegian Dream av The Green Children gikk på repeat i bakgrunnen, noe som gjorde at logoen fikk et rolig og harmonisk uttrykk. Fonten viser at det er snakk om noe eksklusivt, og noe fint. Helhetsinntrykket gjør at målgruppen kan sitte igjen med følelsen av at Kakeeksperten er dyktige, i forhold til den flotte kaken, fargevalget og utformingen generelt. Logoen er laget i RGB da det er dette som gir best resultat på web, men det er veldig enkelt å lage den i CMYK dersom den skulle blitt brukt til trykk uten noe betydelig fargeforskjell. Kakeeksper en

15 Forside På forsiden har jeg laget en banner som går bak logoen. Navigasjonen skal altså være vannrett. Her har jeg brukt samme farge som på kaken på logoen for å skape en helhet. Skrifttypen er i Verdana for å skape kontrast mellom fonten på logoen og fonten i navigasjonsmenyen. Fargen på fonten er sort for å gjøre den lettleselig. Når man klikker seg inn på de forskjellige menysidene, så endrer fargen seg til mørkelilla. Dette er for å vise tydelig hvilken side man er inne på. Jeg har valgt å legge til en ekstra side til nettsiden, kalt konkurranse. Dette er for å markedsføre produktet på en måte til, i tillegg til kampanjesiden i seg selv. Som bakgrunn til nettsiden valgte jeg å tegne striper i Illustrator. Fargen på denne er i en dus lillafarge, noe som gjør at den ikke tar alt for mye oppmerksomhet. Da jeg hadde gjort ferdig forsiden uten bakgrunn, så var det på en måte ingen sammenheng mellom elementene. Denne bakgrunnen gjorde at elementene skapte et bedre samspill i tillegg til at det ikke ble så tomt. Under ser man bilde uten og med bakgrunn.

16 Jeg har lagd et slideshow på forsiden som skal vise hva denne kampanjesiden dreier seg om, som er sunne og saftige muffins. Bildene skal vekke nysgjerrigheten, og ved å klikke på Om produktet så får man informasjon om hva denne siden dreier seg om og hva som er spesielt med produktet som blir lansert. Disse bildene skal være med i slideshowet på forsiden: Footeren har jeg gjort mørklilla, samme farge som bakgrunnen i logoen. Dette skaper en kontrast med menyen, som er i en lysere lilla. Her har jeg brukt samme font som i logoen, Gabriola, på overskriftene og fonten Minion Pro Regular på linkene og informasjonen. Dette er for å skape en mindre kontrast mellom overskrift og undertitler. Fargen på teksten er i hvit for å gjøre det mer lettleselig. Under spalten Følg oss, tegnet jeg de ulike symbolene som illustrerer de sosiale mediene i Illustrator. På denne måten kan man kjenne igjen hvilket plattform det er snakk om, i tillegg til at det blir en fin og liten detalj. Med trykk på liten, for i dette omfanget er symbolene ganske små. Derfor skal symbolene legges til i en større størrelse under sidene Konkurranse og Kontakt oss. Jeg har også lagt til en rund firkant som gjør at man kan taste inn eposten sin under nyhetsbrev, som på den måten gjør siden mer realistisk uten at den fungerer som en faktisk nettside.

17 Om produktet Denne siden inneholder de samme elementene som forsiden, noe for så vidt alle sidene gjør. Forskjellene på sidene er innholdet, altså tekst og bilder. Her er det plassert fire bilder i en kvadrat som skal friste målgruppa til å smake på muffinsen. Siden det er tekst ved siden av bildene, så hadde et slideshow vært forstyrrende og upassende. Teksten er plassert på en lyslilla firkant, som er den samme fargen som er brukt i meny og logo. Fontene er de samme som i footeren, Gabriola på overskrift og Minion Pro Regular på tekst. Teksten inneholder seriffer, og siden det er så mye tekst så blir den altså mer lettleselig. I teksten har jeg fokusert på å reklamere for produktet med tanke på å friste målgruppa til å kjøpe produktet. Jeg har altså ikke skrevet hva muffinsen inneholder, men dette veier opp med siden Kontakt oss hvor man kan spørre om innholdet i muffinsene. Konkurranse På denne siden har jeg plassert kun et bilde, for å ha hovedfokus på konkurransen men samtidig at man skal bli minnet på at det handler om muffinsene. For å vinne et gavekort så må man vite hva den viktigste ingrediensen i sjokolademuffinsene er. Svaret på den viktigste ingrediensen er så klisjé som kjærlighet. Siden jeg ikke har skrevet hva muffinsen inneholder, så har jeg lagt til et hint på konkurransesiden om at man kan finne svaret et sted på kampanjesiden. Svaret finner man under linken Om oss i footeren hvor det står i teksten at den viktigste ingrediensen som Kakeeksperten fokuserer på i alle bakevarer, er kjærlighet. På den måten kan målgruppa lete etter svaret, i tillegg til å utforske kampanjesiden på en helt ny måte. Man kan også dele konkurransen på Facebook for å videreformidle konkurransen, slik at målgruppa og antall seere blir større. Svaret skriver man i en hvit boks, og det samme gjør man med mailen. Dette for å gjøre kampanjesiden mer realistisk og lik en eksisterende nettside. Teksten er plassert på en lyslilla firkant, på samme måte som i siden Om produktet. Dette for å skape en helhet mellom sidene.

18 Kontakt oss Under denne siden er plasseringen av elementene i innhold litt annerledes. Her er det to bilder på venstre side og en tekstspalte på høyre side som rammer inn innholdet. Bildene er plassert for å pynte siden. I midten er det plassert en drop-down meny som skal inneholde svar på tidligere spørsmål osv. Knappene i denne menyen inneholder piler nedover som skal vise at det er en meny som går nedover. På venstre side kan man stille et spørsmål som ikke har blitt besvart tidligere, og evt. sende dette på mail. Drop-down menyen gjør siden spennende, ved at den har en funksjon som er moderne på en nettside med et litt gammeldags preg. Fargene på de forskjellige elementene er de samme som på resten av sidene i nettsiden. Her er lyslilla brukt som bakgrunn til teksten, og knappen med send har fått den mørkelilla fargen som er i logoen og footeren, for å skape en kontrast med den lyselilla fargen. Fonten på denne siden er Minion Pro Regular. For å fylle den midterste spalten, la jeg større symboler av de sosiale mediene under drop-down menyen. Når jeg skal lage websiden i Dreamweaver kan det hende at disse må flyttes, da det kommer an på hvor stor plass drop-down menyen kommer til å bruke.

19 Tilleggssider I tillegg til sidene i menyen, har jeg laget noen tilleggssider. Tilleggssidene er sidene som er linket til i footeren. Altså Om oss, Om produktet, FAQ og Jobbe hos Kakeeksperten. Siden Om produktet blir linket opp mot siden i menyen på toppen. FAQ blir linket opp mot siden Kontakt oss. Om oss og Jobbe hos Kakeeksperten blir linket opp mot samme tilleggsside. Om oss/jobbe hos Kakeeksperten Denne siden er gjort veldig enkel i forhold til at den ikke inneholder bilder av muffinsen. Det er fordi denne siden handler om bakeriet generelt, og ikke kampanjen. Derfor har jeg plassert et kart på venstre side som skal vise hvor kafeen ligger, samt informasjonstekst på høyre side. Teksten er plassert på en lyselilla firkant, på samme måte som teksten på de andre sidene i nettsiden. Jeg har brukt fonten Gabriola på overskriftene, og Minion Pro Regular på innholdsteksten. Kilder Kilder til bildene under eksempler på logoer Tutorial på YouTube av Helen Bradley