Mediedesign 2013 semesteroppgave for Susanne Bøhler, tema: “Profilering, Bugge & Olsen AS”.

Min oppgave:
Lage ny nettsiden til Bugge & Olsen AS, klikk HER for å se siden.
Lage profilmanual til bedriftens nye logo osv, klikk HER for å se profilmanualen.
Lage brosjyre til LCT, klikk HER for å se den.

De 7 siste ukene har jeg jobbet med en ny profilering til Bugge & Olsen AS. Bugge & Olsen AS er en uavhengig speditør som holder til på Revet i Larvik. Både logo og nettsiden til bedriften var utdatert og bedriften hadde et stort ønske om noe nytt. Jeg fikk derfor spørsmål om å lage et forslag til ny profilering til bedriften i forbindelse med denne semesteroppgaven. Jeg syntes det var ekstra spennende å ha en ekte kunde under semesteroppgaven, så jeg sa jeg skulle prøve! Jeg laget en ny logo, nettside i WordPress, visittkort, brev- og konvoluttmaler, bordkalender, notatblokk, mailsignatur og andre produkter hvor logoen er trykt på. Alt er samlet i profilmanualen jeg har laget som du kan se HER.

Jeg har brukt følgende programmer under min semesteroppgave: Illustrator, Photoshop, Dreamweaver, InDesign, Bridge og After Effects.

Jeg har fått gode tilbake meldinger fra Bugge & Olsen om designet jeg har kommet med, selv er jeg også fornøyd. Når det gjelder nettsiden syntes jeg at jeg har fått til et enkelt og nytt design, likevel har det et design som tyder på at dette er en seriøs (kontor)bedrift.

Logo:
Jeg ville beholde flagget i logoen, men fornye den. Den gamle logoen har bedriften hatt i nesten 50 år, og det bar flagget i logoen veldig preg av. Jeg laget logoen i Illustrator etter flere tutorials som jeg fant på nettet. Bedriften selv ønsket egentlig ikke ny logo, men da jeg la frem den nye logoen var de veldig fornøyde.

logo10

Nettsiden:
Nettsiden er basert at kundene er firmaer som enten ønsker å bruke Bugge & Olsens tjenester eller som trenger å komme raskt i kontakt med firmaet. Jeg laget derfor et enkelt design på siden, med en meny på venstre side som er oversiktlig og enkelt å finne frem på. Det er heller ikke mange linker på sider. Jeg har laget siden i WordPress, jeg har endret på et allerede eksisterende theme i WordPress. Jeg har både kodet php, html og CSS. Siden er basert på et responsivt design, det vil si at den ser anderledes ut når man tar den opp på mobilen enn hvis man ser den på et nettbrett eller pc-skjerm. Bildene skaleres, det samme gjør skriften når man åpner den på ulike enheter.

Forsiden  Horisontalt  Iphone-hjemmesid

Som nevnt tidligere har jeg også laget visittkort, brev- og konvoluttmaler, bordkalender, notatblokk, mailsignatur, bil-design osv. Visittkortene er tosidig trykk med logo på baksiden og kontakt informasjon på forsiden. Bugge & Olsen har allerede tatt i bruk mine visittkort, med den nye logoen! Moro!! Konvoluttene og brevmalen er laget med et enkelt design med standard mål.

bak foran
Visittkort.

Brevmal C5 Notatblokk
Brev – og konvoluttmal, notatblokk.

Bordkalenderen er en liten kalender som bedriften kan gi ut til kunder, men også ha på egne pulter. Kalenderen gjenspeiler designet på nettsiden

Kalenderf maijuni

Tilslutt har jeg laget en profilmanual som gir rettningslinjer til hvordan logo og andre trykksaker skal brukes. Profilmanualen er på 29 sider og er laget i et A5 format. Klikk HER for å lese den.

I tillegg til dette har jeg laget en brosjyre til LCT som er en av firmaene som Bugge & Olsen samarbeider med, bedriftene har også samme daglig leder. Brosjyren handler om grensekontrollstasjon som er i samme bygg som Bugge & Olsen. I og med at Bugge & Olsen ikke hadde behov for en brosjyre eller lignende valgte jeg å legge denne til i min semesteroppgave. Jeg valgte å animere brosjyren i After Effect, for å vise at jeg også kjenner til det programmet. Se min animertefilm av brosjyren under.

Tilbakeblikk:
Ut i fra den tidsplan jeg hadde laget på forhånd, holdt jeg den ikke. Å kode nettsiden var en vanskeligere jobb og tok myyyye lenger tid enn jeg hadde trodd. Jeg har derfor jobbet nesten 6 uker med koding av nettsiden og å legge inn den informasjonen som skulle være på siden. Alt annet har jeg jobbet med hjemme på kveldene og i helgene. Jeg fikk veldig mye hjelp i starten for å forstå WordPress koding, både ved tutorials på nett og fra våre flinke lærere. Jeg kodet først siden i HTML, for så å gå igjennom utallige tutorials og forklaringer på hvordan en wordpress side er bygget opp. Jeg prøvde derfor å lage et WordPress theme fra bunn av, men jeg fant ut at det var enklere for meg å endre på et allerede eksisterende theme. Da jeg hadde kodet siden slik jeg ønsket jobbet jeg med det responsive designet, dette innebærer mye koding i CSS for å få den til å se like bra ut og brukervennlig på nettbrett som på smarttelefoner.

Jeg har lært utrolig mye om WordPress de siste 7 ukene. Jeg har kun kodet i HTML før så det å kode i php var en helt ny verden for meg, men jeg har nå lært hvilken PHP kode som erstatter hvilken HTML kode, og hvorfor man skriver det man skriver i en PHP kode. Faktisk ikke så veldig vanskelig bare man kommer inn i det. Jeg hadde nok ikke klart å gjennomføre oppgaven uten god hjelp fra lærer Marius og det store internettet.

For å lese mer om arbeidsprosessen min kan du trykke HER.

 

 

Oppdatering uke 22

Siden sist har jeg begynt på profilmanualen og kommet ganske godt i gang med den. Jeg har lest meg opp på mange profilmanualer som ligger på nettet for å vite hva som er nødvendig å ha i en profilmanual. Jeg laget et enkelt “design” i manualen som jeg syntes tok igjen det designet jeg har på nettsiden, visitkort og andre ting jeg har laget.

Jeg holder samtidig på å legge inn tekst og bilder på nettsiden, regner med å være ferdig med det i løpet av uken slik at uke 23 bare blir å fin pusse på ting.

Under kan man se 2 utdrag fra min profilmanual.

Screen Shot 2013-05-29 at 8.59.49 AM Screen Shot 2013-05-29 at 9.00.05 AM

Oppdatering uke 21

Tiden flyr, nå er det ikke lenge til alt skal leveres!

I og med at det har vært langhelg har jeg jobbet en del hjemme, det vil si jeg har jobbet mye med design. Jeg tok for meg konvolutt, kalender og brosjyre. Jeg ønsker at “bølgen” som er på hjemmesiden skal gå igjen i produktetene (så langt det er mulig). Jeg kom opp med to forslag til konvolutter, jeg velger å gå for et enkelt design også på konvoluttene:
Konvolutter Untitled-1

Jeg har også laget en bordkalender som bedriften kan gi til kunder eller ha selv på sin pult, jeg slo sammen to måneder på en side for at den ikke skulle bli for stor. Planen er at det skal komme opp en nytt bilde når man “blar om” på kalenderen. Her er det jeg hadde tenkt for januar og februar
ij

Brosjyren lager jeg om grensekontrollstasjonen i Larvik, dette er en brosjyre som egentlig er til bedriften CTL, men Bugge & Olsen og CTL har et tett samaberid og jeg ble derfor spurt om å lage denne brosjyren. Den er ikke helt ferdig, det er veldig mye tekst og lite bilder foreløbig i brosjyren, dette skal endres på.
Screen Shot 2013-05-22 at 8.56.01 AM Screen Shot 2013-05-22 at 8.56.11 AM

Ellers jobber jeg veldig med nettsiden, og håper å ha den ferdig i løpet av uken. Jeg mangler mye tekst og bilder, men det er heldigvis under produksjon!
Nettsiden kan sees her: www.nettkringkasting.no/~susanne/wp

 

 

Oppdatering uke 20

Jeg har jobbet med logoen til Bugge & Olsen, selvom bedriften selv ikke ville ha en ny logo, velger jeg å lage en logo kun for denne semesteroppgaven. Jeg jobbet meg gjennom mange forskjellige tutorials for å få en bølge-effekt på flagget.

Her er resultatet av de ulike tutorialsene jeg gikk igjennom, jeg prøvde flere ganger å lage en gradient på flagget slik at effekten med bølgene skulle komme tydligere frem. Men jeg valgte tilslutt å ikke ta med dette, grunnen er at det blir for mye og med tanke på trykk er det finere uten en gradient i flagget.
logo1 logo2 logo3 logo4 logo5 logo6 logo7 logo8 logo9 logo10

 

Dette er mitt resultat:
logo11
Under kan du se den gamle logoen:
Bugge & Olsen m-tekst pms2935 [Converted]

Jeg har også gjort ferdig visittkortet, her er hvordan det nåværende visittkortet ser ut:

bilde

Her er det jeg har jobbet med denne uken:

visitkort3baksort visitkort3sort

Websiden har jeg ikke gjort så mye med, det gjør jeg til uka! Det som mangler på siden er tekst(som jeg skal få i løpet av uken) og til å gjøre den brukelig på mobil.

Siden kan man se her:
www.nettkringkasting.no/~susanne/wp

Oppdatering uke 19

Nettsiden begynner å ta form! Etter å ha brukt mange dager og timer på å gjøre om min HTML side til en WordPress side, bestemte jeg meg i helgen å lage siden utifra en allerede eksisterende theme siden jeg nå forsto mye mer av hvordan wordpress er lagt opp. Hele søndagen satt jeg inne på nettsiden og endra siden ved å bruke “Inspect element”. Jeg fikk siden til å bli slik jeg ville ha den, men jeg kunne ikke oppdatere siden for da hadde alt jeg hadde gjort gått bort. Jeg begynte derfor å notere ned de kodene jeg hadde satt inn slik at jeg enkelt kunne sette de inn i min css når jeg kom på skolen! Jeg redigerte på et theme som heter “responsive”.
Jeg støtte selvfølgelig på noen problemer når jeg skulle legge inn kodene, men etter mye knoting fikk jeg det NESTEN til som jeg ville.

Screen Shot 2013-05-08 at 9.14.00 AM

På kveldene har jeg jobbet med visitkortet, det skal være veldig enkelt.

Her er det nåværende visitkortet:
bilde

Jeg vurderer å lage en bakside som forklarer hva bedriften holder på med:
Screen Shot 2013-05-08 at 9.07.26 AM Screen Shot 2013-05-08 at 9.11.18 AM

Oppdatering uke 18

Forrige uke hadde jeg skissen over nettsiden klar, og torsdag morgen var det bare å sette igang med kodingen. Jeg startet med å kode siden i HTML, dette gjorde jeg for å gjøre det lettere for meg selv når jeg skulle begynne å kode siden i wordpress.

Den største utfordringen jeg møtte på var hvordan jeg skulle legge opp siden slik at jeg “lett” kunne gjøre den om til wordpress. Jeg startet dermed med å gå igjennom forskjellige tutorials som viste meg hvordan jeg kunne kode en side fra bund av i HTML til å bli en fungerende WordPress side. Å kode siden i HTML og CSS var ikke noe problem, dette har jeg gjort mange ganger. Men, da jeg skulle begynne å bytte ut enkelte HTML koder til PHP koder støtte jeg på flere problemer. Etter flere dager trodde jeg at jeg hadde fått lagt opp alle kodene slik jeg skulle og prøvde derfor å laste opp dette “themet” som jeg nå hadde laget på min wordpress. Jeg fikk ingenting opp og det viste seg at den tutorialen som jeg hadde fulgt, til punkt og prikke, ikke lenger fungerte…

Såå.. Jeg prøvde på nytt igjen. Jeg tenkte jeg kunne gå ut i fra et allerede eksisterende theme. Dette var et theme som har menybar på venstre side og er et responsivt theme, responsivt theme vil si at når man skal se siden på en smarttelefon eller nettbrett vil menyen bli til en dropdown meny. Dette ble igjen et håpløst prosjekt. Så jeg gikk tilbake til min opprinnelige plan.

Etter tips fra lærerne gikk jeg nøye gjennom CSS’en min og fant mange feil i den. Etter å ha rettet opp i flere feil, FIKK JEG DELER AV SIDEN TIL Å FUNGERE! Fantastisk!
Slik ser den wordpress siden ut pr dags dato:

Skjermbilde 2013-05-02 kl. 00.40.06

Funksjonen med å legge inn flere sider i menyen fungerer som det skal, men det går ikke ann å trykke på noen av sidene. Som man kan se på bilde er det eneste som mangler å få “innlegg” siden opp til høyere. Hvorfor den ligger der den ligger nå har jeg ingen forklaring på.

Hvis jeg ser på planen som jeg la for semesteroppgaven ligger jeg godt ann. Jeg tenker hele tiden på hvordan jeg vil at både visitkort og brosjyre skal se ut ved siden av denne kodingen. Den neste uken satser jeg på å få fikset “innleggs” delen av siden og få noe inn på linkene på siden.

Oppdatering på semesteroppgaven

Da har vi jobbet en uke med semesteroppgaven, og jeg føler jeg har kommet godt i gang. Jeg startet med websiden og laget en skisse over hvordan jeg ville den skulle være. Jeg snakket med firmaet, Bugge & Olsen, og de var veldig fornøyde med den løsningen jeg hadde kommet frem til. Det var viktig for bedriften at websiden skulle være enkel, det føler jeg at jeg fikk til. Her er min skisse for websiden:
Untitled-2

Jeg jobber med å få rettigheter over noen bilder som jeg vil bruke på nettsiden og å få tekst som også skal inn på siden. Men fremover nå skal jeg først og fremst jobbe med å bygge opp siden, jeg lager den først i dreamweaver, så skal jeg prøve å legge den inn i WordPress.