Hjem Om oss Kontakt Style sheet. Hjem Om oss Kontakt Style sheet. Hjem Om oss Kontakt Style sheet. Hjem Om oss Kontakt Style sheet.

Transkript

1 HJEM OM OSS KONTAKT STYLE SHEET LIMITLESS - SUNN & ENERGIRIK BAGUETT Limitless inneholder en optimal balanse av karbohydrater, fett og protein for aktive mennesker. Vårt mål er å kunne tilby deg sunn, god og lettvint mat, slik at du yter maks før og etter trening. Limitless får du kjøpt hos nærmeste Siljan Bakeri for kr 49,- Hjem Om oss Kontakt Style sheet HJEM OM OSS KONTAKT STYLE SHEET Om oss Når du kjøper en baguett, er du alltid garantert egetbakt brød og friske grønnsaker. Service og friskhet kommer alltid i første rekke. Hvis du lurer på noe eller ikke skulle være fornøyd med bestillingen, tar vi gjerne imot tilbakemeldinger. Hjem Om oss Kontakt Style sheet HJEM OM OSS KONTAKT STYLE SHEET Kontakt Ved eventuelle spørsmål ta gjerne kontakt på telefon eller mail. Langesundveien Stathelle post@siljanbakeri.no Hjem Om oss Kontakt Style sheet HJEM OM OSS KONTAKT STYLE SHEET Style sheet (Kommer i del 2) Hjem Om oss Kontakt Style sheet Hjem Om oss Kontakt Style sheet LOGO Om oss Aabslkjds;kjdf sklj. ;ashda;slkdj aksjfj;lasdkdakasldjas;aasdd asdhlskah;jasf;kjas;jfsad,gnadf;sg [ ;lfedkdkdfjfhggskd sddnfsdlkkfj;asdlfk;aksdj ;adjg;asdlg;asldg;aslgj;s\asd;gl ;dgk HJEM OM OSS KONTAKT STYLE SHEET Header Body Hjem Om oss Kontakt Style sheet Footer

2 RAPPORT PRODUKTWEBSIDE MAGNE SILJAN INNLEDNING Sunn livsstil, trening, sunn mat i en fei det er ønskelig i vår tid! Produktet jeg har valgt å presentere og designet skal gi dette inntrykket. TOLKNING AV OPPGAVEN Tolkingen av oppgaven ble at det skulle utvikles en webside for et bakeriprodukt.det skulle handle om produktet og ikke presentasjon av virksomheten. Jeg valgte å lage logo som kan appellere til en målgruppe. I vår tid er mange opptatte av trening og sunn livsstil, og dermed også mat og kosthold som kan støtte det. Et bakeri assosieres ofte med kaker og kos, men mindre med sunne produkter. Derfor ønsket jeg å sette fokus på sunn mat fra bakeri. Ved å studere ulike produkter fra ulike aktører og for å finne produkt som lett og raskt kan spises over alt, og som frister, har jeg studert ulike nettsteder. KONSEPT OG MÅLGRUPPE Ved å kalle baguetten Limitless, insinueres det at den gir deg utvidede muligheter, og det kan også henspeile på produktet som kan nytes når og hvor du vil og som kan ha ulike pålegg som grenseløst kan tilfredsstille folks ulik smak og behov for variasjon. Valget å bruke engelsk i logo er for å treffe ulike nasjonaliteter i Norge, de fleste snakker engelsk. Valget å sette ordene limit og less sammen, og å bruke små bokstaver (minuskler) er for å gi inntrykk av raskt, moderne og lett tilgjengelig stil. Mitt utgangspunkt var også å gjøre dette på en enkel måte, da jeg aldri har laget noen webside tidligere. Målgruppen er fortrinnsvis folk i alder år, som liker å trene og holde helsa i orden, og som ofte er på kafé og bakeri. Jeg valgte et produkt som folk kjenner fra før, baguetten, og ga den en sunn beskrivelse. BUDSKAP/OPPNÅDD HANDLING Hensikten er å formidle friskhet, sunnhet, aktiv livsstil. Fargevalg og utforming støtter det, mener jeg.

3 RESEARCH OG ARBEIDSPROSESS KREATIV METODE OG HVORDAN DET FUNGERTE Inspirasjon er hentet fra ulike nettsider og kampanjeprodukter. Skisser og noen provisoriske utkast er utgangspunktet som det digitaliserte produktet sprang ut fra. Det fungerte bra og jeg kom raskt til produktet slik planen var. ANALYSE Aktører som Subway og Tine yt er tilsvarende konsepter. Subway er fastfood, rask mat som lages raskt på stedet, og Tine yt er produkt med tanke på trening og restitusjon. Ved å kombinere disse to hensiktene fikk jeg mitt produkt. Til dette ble Scamper-metoden brukt: Ved å gjøre små endringer på noe som finnes fra før og ved å kombinere ulike produkter fremkommer et nytt og bedre produkt. Mitt varemerke og identitet skal være frisk, sunn, rask og internasjonal: internasjonal ved bruk av engelsk, frisk og sunn i påleggsvalg og fargevalg, rask ved produktets servering og ved layout. SKISSER OG UTKAST INNSKANNET IDÉPROSESS VS. SKISSEBOK

4 MOODBOARDS DESIGNVALG STILUTTRYKK Dette er en produkt-webside. Enkelt stiluttrykk for enkel navigasjon på side var viktig å få til, dessuten ville jeg ikke sette meg for høye mål når jeg ikke har laget webside tidligere. Bildet av baguetten er tatt utendørs i overskyet vær for å få et mykt lys og for å unngå harde skygger.

5 TYPOGRAFI Typesnittet er Myriad og Brush script. Myriad er brukt i Bold kursiv for å skape energi/ assosiasjon til fart og aktivitet, og minuskler er skrevet i regular som vanlig brødtekst. Brush script er brukt i orange i de skråstilte menyene for å skape variasjon, energi og et personlig preg - uhøytidelig. Jeg synes logoen har fått et naturlig utseende ved at jeg har valgt enkle skriftuttrykk og begrensede farger. FARGER Sterk og klar grønnfarge assosieres med natur, sunnhet og friskhet. Sammen med det hvite gis det et rent og delikat utseende. Ved å duse ned bakgrunnen kommer produktet i fokus, og ved å fotografere baguetten slik at vi ser grove korn, gir det ekstra inntrykk av sunn mat. Fargevalg er begrenset for å gi rolig og enkel tilgang til informasjonen og gi et helhetlig inntrykk. Den orange teksten ble valgt for å gi noe varm farge og som også forbindes med energi. KOMPOSISJON, LAYOUT, GRID Et enkelt oppsett ble valgt for komposisjon av siden. Det gjør at vi unngår rot, og gjør navigasjon enklere for brukeren som finner siden på Internett. Menyvalg av pålegg er lagt inn på skrå slik at øyet føres til baguetten i det gyldne snitt. Tekst er lagt øverst til venstre fordi det er et av de stedene vi naturlig leser informasjon fra i vår vestlige kultur. EGENEVALUERING REFLEKSJON RUNDT EGET PRODUKT Jeg er godt fornøyd med min første web-side og gleder meg til å få den til å fungere. Hensikten med designet er å treffe målgruppa, og det håper jeg at jeg gjør. Frisk livsstil er til det moderne mennesket, og derfor ville jeg ha moderne typografi. UTVIKLING OG PROSESS Jeg har jobbet over lang tid med denne oppgaven, latt den utvikle seg litt og litt. Det har fungert bra, og alt har gått fint. KONKLUSJON Det har vært moro. Jeg har fått til det jeg tenkte, og har lært mye å lage web-side. Bevisst bruk av farger, design og typografi er interessant. Gjennom denne oppgaven har jeg utforsket og blitt bedre kjent med kameraet mitt.

6 KILDEHENVISNINGER OG REFERANSER LYNDAVIDEOER: Successful Branding av Lorrie Thomas Ross. Designing a Logo av Nigel French. Creating a CD cover av Nigel French Foundations of Typography av Ina Saltz WORDPRESS:

7 HJEM OM OSS EMBALLASJE KONTAKT LIMITLESS - SUNN & ENERGIRIK BAGUETT Limitless inneholder en optimal balanse av karbohydrater, fett og protein for aktive mennesker. Vårt mål er å kunne tilby deg sunn, god og lettvint mat, slik at du yter maks før og etter trening. Limitless får du kjøpt hos nærmeste Siljan Bakeri for kr 49,- Hjem Om oss Emballasje Kontakt HJEM OM OSS EMBALLASJE KONTAKT OM OSS Når du kjøper en baguett, er du alltid garantert egetbakt brød og friske grønnsaker. Service og friskhet kommer alltid i første rekke. Hvis du lurer på noe eller ikke skulle være fornøyd med bestillingen, tar vi gjerne imot tilbakemeldinger. Hjem Om oss Emballasje Kontakt HJEM OM OSS EMBALLASJE KONTAKT EMBALLASJE Våre baguetter er pakket i plast og sørger for at baguettene holder seg ferske og gode. Plast er den typen emballasje som gir høyest miljøgevinst ved gjenvinning og for hver kilo plastemballasje som materialgjenvinnes, reduseres utslippene av CO2 med nesten tre kilo. Vi i Siljans Bakeri ønsker å bidra til en mer miljøvennlig hverdag. Hjem Om oss Emballasje Kontakt HJEM OM OSS EMBALLASJE KONTAKT KONTAKT Ved eventuelle spørsmål ta gjerne kontakt på telefon eller mail. Langesundveien Stathelle post@siljanbakeri.no Hjem Om oss Emballasje Kontakt PRODUKTEMBALLASJE KLISTREMERKE kylling Hjem Om oss Emballasje Kontakt LOGO HJEM OM OSS EMBALLASJE KONTAKT Header Om oss Body Hjem Om oss Emballasje Kontakt Footer

8 RAPPORT PRODUKTWEBSIDE MAGNE SILJAN INNLEDNING Sunn livsstil, trening, sunn mat i en fei det er ønskelig i vår tid! Produktet jeg har valgt å presentere og designet skal gi dette inntrykket. TOLKNING AV OPPGAVEN Tolkingen av oppgaven ble at det skulle utvikles en webside for et bakeriprodukt. Det skulle handle om produktet og ikke presentasjon av virksomheten. Jeg valgte å lage logo som kan appellere til en målgruppe. I vår tid er mange opptatte av trening og sunn livsstil, og dermed også mat og kosthold som kan støtte det. Et bakeri assosieres ofte med kaker og kos, men mindre med sunne produkter. Derfor ønsket jeg å sette fokus på sunn mat fra bakeri. Ved å studere ulike produkter fra ulike aktører og for å finne produkt som lett og raskt kan spises over alt, og som frister, har jeg studert ulike nettsteder. KONSEPT OG MÅLGRUPPE Ved å kalle baguetten Limitless, insinueres det at den gir deg utvidede muligheter, og det kan også henspeile på produktet som kan nytes når og hvor du vil og som kan ha ulike pålegg som grenseløst kan tilfredsstille folks ulik smak og behov for variasjon. Valget å bruke engelsk i logo er for å treffe ulike nasjonaliteter i Norge, de fleste snakker engelsk. Valget å sette ordene limit og less sammen, og å bruke små bokstaver (minuskler) er for å gi inntrykk av raskt, moderne og lett tilgjengelig stil. Mitt utgangspunkt var også å gjøre dette på en enkel måte, da jeg aldri har laget noen webside tidligere. Målgruppen er fortrinnsvis folk i alder år, som liker å trene og holde helsa i orden, og som ofte er på kafé og bakeri. Jeg valgte et produkt som folk kjenner fra før, baguetten, og ga den en sunn beskrivelse. BUDSKAP/OPPNÅDD HANDLING Hensikten er å formidle friskhet, sunnhet, aktiv livsstil. Fargevalg og utforming støtter det, mener jeg.

9 RESEARCH OG ARBEIDSPROSESS KREATIV METODE OG HVORDAN DET FUNGERTE Inspirasjon er hentet fra ulike nettsider og kampanjeprodukter. Skisser og noen provisoriske utkast er utgangspunktet som det digitaliserte produktet sprang ut fra. Det fungerte bra og jeg kom raskt til produktet slik planen var. ANALYSE Aktører som Subway og Tine yt er tilsvarende konsepter. Subway er fastfood, rask mat som lages raskt på stedet, og Tine yt er produkt med tanke på trening og restitusjon. Ved å kombinere disse to hensiktene fikk jeg mitt produkt. Til dette ble Scamper-metoden brukt: Ved å gjøre små endringer på noe som finnes fra før og ved å kombinere ulike produkter fremkommer et nytt og bedre produkt. Mitt varemerke og identitet skal være frisk, sunn, rask og internasjonal: internasjonal ved bruk av engelsk, frisk og sunn i påleggsvalg og fargevalg, rask ved produktets servering og ved layout.

10 SKISSER OG UTKAST

11 Moodboards DESIGNVALG STILUTTRYKK Dette er en produkt-webside. Enkelt stiluttrykk for enkel navigasjon på side var viktig å få til, dessuten ville jeg ikke sette meg for høye mål når jeg ikke har laget webside tidligere. Bildene av baguett er tatt utendørs i overskyet vær for å få et mykt lys og for å unngå harde skygger. TYPOGRAFI Typesnittet er Arial og Brush script. Arial er brukt i Bold kursiv for å skape energi/ assosiasjon til fart og aktivitet, og minuskler er skrevet i regular som vanlig brødtekst. Brush script er

12 brukt i orange i de skråstilte menyene for å skape variasjon, energi og et personlig preg - uhøytidelig. Jeg synes logoen har fått et naturlig utseende ved at jeg har valgt enkle skriftuttrykk og begrensede farger. FARGER Sterk og klar grønnfarge assosieres med natur, sunnhet og friskhet. Sammen med det hvite gis det et rent og delikat utseende på produktemballasje og indexbilde. Ved å duse ned bakgrunnen kommer produktet i fokus, og ved å fotografere baguetten slik at vi ser grove korn, gir det ekstra inntrykk av sunn mat. Fargevalg er begrenset for å gi rolig og enkel tilgang til informasjonen og gi et helhetlig inntrykk. Den orange teksten ble valgt for å gi noe varm farge og som også forbindes med energi. KOMPOSISJON, LAYOUT, GRID Et enkelt oppsett ble valgt for komposisjon av siden. Det gjør at vi unngår rot, og gjør navigasjon enklere for brukeren som finner siden på Internett. Menyvalg av pålegg er lagt inn på skrå slik at øyet føres til baguetten i det gyldne snitt. Skygge er lagt til for å skape dybde. Tekst er lagt øverst til venstre fordi det er et av de stedene vi naturlig leser informasjon fra i vår vestlige kultur. Emballasjedesignet er enkelt og stilrent. Pilen skaper balanse til logoen og ordet, "kylling", og gir en assoisajon til det "grenseløse" og "progresjon" - positive assosiasjoner til produktet. HTML OG CSS Adobe Dreamweaver er brukt til HTML og CSS. Forklaringer er merket i rødt. INDEX.HTML <!DOCTYPE html> <html> <head> <title>limitless</title>  <link rel="stylesheet" href="style.css">  <meta charset="utf-8">  </head> <body> <div id="wrapper">  <div class="header">  <a href="index.html">  <img src="logo.png" alt="limitless">

13 </a>  <ul>  <li> <a href="index.html"class="active">hjem</a> </li> <li> <a href="omoss.html">om oss</a> </li> <li> <a href="emballasje.html">emballasje</a> </li> <li> <a href="kontakt.html">kontakt</a> </li> </ul> </div> <div class="content">  <div class="inner">  <h1>limitless - SUNN & ENERGIRIK BAGUETT</h1>  <p>  Limitless inneholder en optimal balanse av karbohydrater, fett og protein for aktive mennesker. Vårt mål er å kunne tilby deg sunn, god og lettvint mat, slik at du yter maks før og etter trening </p> <p>limitless får du kjøpt hos nærmeste Siljan Bakeri for kr 49,-</p> </div> </div> <div class="footer">  <ul> <li> <a href="index.html" class="active">hjem</a> </li> <li> <a href="omoss.html">om oss</a></li> <li> <a href="emballasje.html">emballasje</a></li> <li><a href="kontakt.html">kontakt</a> </li> </ul> </div> </div> </body> </html> CSS * { * For å resette standard nettleser padding og margin

14 padding: 0; margin: 0; body { * Oppsett for standard font-typer, bakgrunnsfarge og skriftfarge font-family: Myriad Pro, Arial, Verdana, Tahoma, sans-serif; background-color: #333; color: #fff; a { * Standard farge på linker <a> og for å fjerne text-decoration: underline; color: #fff; text-decoration: none; #wrapper { * Standardbredde og sentrering av side max-width: 1009px; margin: auto;.header { * For at all skrift skal være caps og for padding (plass, margin) text-transform: uppercase; overflow: hidden; padding: 10px 0;.header img { * Flyt logo til venstre float: left;.header ul { * For marginer og flyt meny til høyre. Fjernet også standard listestyling margin: 40px 40px 0 0; float: right;

15 list-style: none;.header li { * Font-størrelse og flyt meny-elementene til venstre font-size: 20px; margin-right: 40px; float: left;.header a { * Standard-farge på lenker i menyelementer color: #888;.header a.active,.header a:hover { * For å endre farge når man har musepekeren over eller meny-elementet har class="active" color: #8dc444;.content { * Font-størrelse, padding og bakgrunn på innholdet. Satt en minstehøyde på 668px (bakgrunnstørrelsen). Border-box er der så man kan legge til padding uten at høyde/bredde blir større. font-size: 16px; padding: 35px; background: url(bakgrunn.jpg) no-repeat; min-height: 668px; box-sizing: border-box;.content.inner { * Indre bredde så ikke texten flyter ut width: 500px;.content h1 { * Satt opp font for oversrkifter font-size: 20px;

16 color: #8dc444; margin-bottom: 10px; font-style: italic;.content p { * Margin for paragrafer margin-bottom: 10px; * Nedover er det veldig likt som meny i header.footer ul { padding: 5px; text-align: center;.footer li { list-style: none; display: inline-block; padding: 2px 4px; border-left: 1px solid #888;.footer li:first-child { border: none;.footer a { color: #888; * *

17 EGENEVALUERING REFLEKSJON RUNDT EGET PRODUKT Jeg er godt fornøyd med min første web-side og har lært veldig mye om html og CSS. Jeg kunne ingen ting fra før av. Hensikten med designet er å treffe målgruppa, og det håper jeg at jeg gjør. Frisk livsstil er til det moderne mennesket, og derfor ville jeg ha moderne typografi. UTVIKLING OG PROSESS Jeg har jobbet over lang tid med denne oppgaven, latt den utvikle seg litt og litt. Det har fungert bra, og alt har gått fint. KONKLUSJON Det har vært moro. Jeg har fått til det jeg tenkte, og har lært mye om å lage web-side. Bevisst bruk av farger, design og typografi er interessant. Gjennom denne oppgaven har jeg utforsket og blitt bedre kjent med kameraet mitt. KILDEHENVISNINGER OG REFERANSER LYNDAVIDEOER: Successful Branding av Lorrie Thomas Ross. Designing a Logo av Nigel French. Creating a CD cover av Nigel French Foundations of Typography av Ina Saltz HTML Essential Training by Bill Weinman Responsive Design Fundamentals by James Williamson

18 WEBSIDE: Andre: bmobilized: Create a Moblie Website bmobilized tutorial on YouTube: Convert Your Moblie Website Screenfly: Test Your Website at Different Screen Resolutions browsershots.org - Check Browser Compability Ad Age's Top Viral Ad Campaigns of 2012 WORDPRESS: