Ferdig produkt og evaluering

Dette er det endelige produktet! Etter syv uker med lange dager og stadig nye utfordringer, er nå tiden kommet for å levere. Her er den ferdige semesteroppgaven min.

Video av hvordan magasinet oppleves på en Ipad:     >trykk her

Video av after effects-filmen som finnes i magasinet:    >trykk her

Link til nettsiden:    >trykk her

Link til profilmanual:    (for pdf):    >trykk her        (for swf):    >trykk her

Bilder av layout, vertikalt:   >trykk her

Bilder av layout, horisontalt:    >trykk her

Link til Facebook-side:   >trykk her

Reklamemateriell:   >trykk her

Link til 5 utvalgte arbeider:   >trykk her

Over her finner du linker til alle delene av oppgaven min. Disse håper jeg kan ses som en helhet, på tross av at delene befinner seg på ulike steder. Det har vært en lærerik prosess, mer lærerik enn det jeg hadde sett for meg. Og det viktigste av alt, det har vært gøy.

Jeg begynte på denne oppgaven i den tro at jeg skulle lage magasinet i InDesign. Og på en måte har jeg gjort det også. Bare ved hjelp av Mag+. Hvis jeg skulle gjort denne oppgaven en gang til, er det det jeg ville gjort annerledes. Da hadde jeg ikke brukt over to uker på å sette meg inn i hvordan et magasin for nettbrett skulle lages i InDesign, men heller begynt å se på hvordan det skulle gjøres i Mag+. Problemet var jo at jeg ikke visste om Mag+ når vi startet på denne oppgaven. På en annen side, så har jeg lært mer, i og med at jeg har satt meg inn i begge deler. Nå er det naturlig at det er Mag+ jeg husker best, siden det er det jeg har jobbet mest med.

I forhold til tidsplan jeg hadde satt som en føring, har dette fungert greit. Jeg har hele tiden hatt en plan, men enkelte ganger har ting tatt litt lenger tid enn det man i utgangspunktet har sett for seg. Det jeg har oppdaget i løpet av denne prosessen, er at selv om det står èn bestemt ting som skal gjøres i for eksempel, 3 dager, så er det ikke dermed sagt at man ikke kan gjøre andre ting samtidig. Det å kunne variere arbeidet har gitt meg mye i denne prosessen. Samtidig har mye av det arbeidet jeg la ned de første ukene, ikke vært til noen hjelp da jeg begynte med Mag+. Både grid og mappestrukturen jeg planla i begynnelsen, er arbeid Mag+ allerede har gjort for deg. På en annen side er jeg glad jeg gjorde denne delen på forhånd, da jeg har en bedre forståelse for oppsettet som ligger i bunnen. I InDesign må man også lage et dokument for vertikalt format, og et dokument for horisontalt format. I Mag+ kan man designe begge formatene i et dokument, og verktøyet lager mappestrukturen for deg. På den måten sparer man mye tid på det tekniske, og kan konsentrere seg mer om designet, som jo er hovedfokuset.

Når det gjelder bruk av ulike programmer, så føler jeg at jeg har benyttet meg av så mange som mulig. Selve magasinet er laget i InDesign, ved hjelp av Mag+. Illustrasjonene og bildene er laget i Illustrator og Photoshop. Den ene quizen kodet jeg i Dreamweaver, selv om jeg endte opp med å bruke appen jeg hadde laget til mobiltelefonen på det endelige produktet. Animasjonen med “typografi” er laget ved hjelp av Bridge og After effects. Typografi-animaticen av sangen til Hellbillies, er laget i After effects. Websiden er et WordPress theme som jeg har tweaket på. Reklamemateriellet er laget i Illustrator og InDesign, og annonsene er laget i Flash. Tilslutt har jeg fått filmet magasinet på Ipaden. Det har også vært en del utfordringer i forbindelse med oppdateringer, oppgradering av operativsystem, ny bruker og diverse installasjonsprosesser. Dette har tatt mye tid, men har vært nødvendig for å få verktøyene og plug-in´en til å fungere.

I løpet av denne semesteroppgaven føler jeg selv at jeg har lært utrolig mye. Det å sette seg inn i hvordan Mag+ fungerer, og hva de ulike lagene gjør, har vært en utfordring. Da er det desto mer gøy når man begynner å få et grep om det. Det å teste ut ting for å se hva som fungerer, og i hvilken rekkefølge man må gjøre det, for at det skal fungere. For så å finne ut hvilke elementer som må ligge til grunn for å kunne oppnå det man ønsker, hvorvidt det er interaktivitet eller et skiftende bakgrunnsbilde. Samtidig som man må vite i hvilket lag disse elementene må befinne seg for å kunne fungere. Det er vanskelig å forklare, men desto mer gøy når man begynner å forstå det. Mag+ er et nyttig hjelpemiddel og verktøy, som lar designere bruke mer tid på layout enn på den tekniske delen som ligger i bunnen.

Teknologien for å designe interaktive magasiner for nettbrett er ennå så ny, men allikevel på full fart fremover. Det kommer stadig nye verktøy som gjør arbeidsprosessen enklere og raskere. Som for eksempel Mag+. Stadig flere magasiner lager nå versjoner av utgavene sine beregnet på nettbrett. Det er et område i utvikling, så det gjelder å følge med. Dette blir spennende!

 

 

After Effects – film av magasinet på iPad

For å få levert oppgaven min er jeg nødt til å filme magasinet, slik at det er mulig å se hvordan det oppfører seg, og hvordan de ulike sidene fungerer. En stor takk til Maja Furuhaug og Marius Sagen for god hjelp med filmingen av magasinet.

Dette har jeg holdt på med de to siste dagene, og deretter redigert filmen i After Effects. Filmen ble filmet i auditoriet her på skolen, med en greenscreen i bakgrunnen, og tre lyslamper. Det er filmet med et speilreflekskamera. I After effects har jeg har laget en intro med tittel, for så å sette keyframes på begynnelsen av filmen, slik at den fader fint inn. Deretter har jeg lastet ned en gratis sang fra nettet, Gillicuddy – “A Garden And A Library”. Link til siden finner du her. Dette for å ha rolig musikk i bakgrunnen, som ikke virker forstyrrende. Ettersom denne sangen ikke var like lang som filmen min, har jeg loopet den 3 ganger. Fordi jeg har tatt bort lydsporet på filmen, forsvinner også lyden på After effects-filmen jeg har laget av sangen til Hellbillies. Denne har jeg da lagt inn på nytt, og forsøkt å få den til å passe så godt som mulig med ordene i filmen. Når denne sangen er ferdig å spille i magasinet, fortsetter filmen med at jeg viser hvordan menyen i Mag+ virker, og hvordan du lett kan velge hvilken side du vil se. Da ble det plutselig veldig stille på filmen etter så mye lyd, derfor la jeg sangen til Gillicuddy en gang til, og lot denne fade ut med filmen. Så etter å ha rendret ut denne filmen, som ble på rett over 9 minutter, fra After effects, har jeg nå lastet den opp på Vimeo. I neste innlegg hvor jeg presenterer resultatet av disse syv ukene med arbeid, vil jeg legge linken til denne.

Reklamemateriell

Jeg sa i oppgavebeskrivelsen at jeg ville lage reklamemateriell i ulike varianter, til magasinet. Jeg har nå laget en plakat inspirert av forsiden på magasinet. Denne er i A3-format. Så sammen med Facebook-siden og de to flash-annonsene skaper dette en ramme rundt magasinet, og lager den pakken med reklamemateriell jeg var ute etter. Under har jeg lagt ved bilder av plakaten, og reklamemateriale samlet. De to flash-annonsene har jeg kodet inn i sidebaren på siden her. De linker til websiden.

 

Plakat_A3

reklamemateriell_samlet2

Webside

Som nevt i forrige innlegg, hadde jeg tre alternativer hva angikk websiden. Jeg bestemte meg for at jeg ville få Absolute-themet til å fungere, og har jobbet med det de siste to dagene. Det er et vrient theme, som oppfører seg noe rart til tider. Igår skulle jeg endre fonten på brødteksten, og dermed forsvant slideshowet fra Hjem-siden.(!) Så jeg brukte litt tid på å finne ut hvordan jeg skulle få dette tilbake. Jeg slettet Hjem-siden fra menyen, men siden var der fremdeles. Det gikk ann å trykke på den, men siden var tom. Jeg satte at slideshowet skulle være på en av de andre sidene i menyen, men det kom fremdeles ikke på plass. Så jeg laget en ny side i menyen, og satte at slideshowet skulle være her. Da dette fungerte, opprettet jeg Hjem-siden på nytt, og satte slideshowet inn her på nytt. Da fungerte det. Så nå er slideshowet på plass.

Ellers har jeg fått siden slik jeg vil ha. En enkel og oversiktlig side, som gir en smakebit på hva man finner i det interaktive magasinet. På Hjem-siden ligger et slideshow. Under Nyheter ligger et lite utvalg av artikler i form av en portfolie. Dette er artikler som finnes i den nåværende utgaven av magasinet. Disse kan man trykke på, og få opp et større bilde og tekst. Fordelen her, er at man kan bla seg videre til neste artikkel, uten å måtte gå ut av den artikkelen man er på, får så å velge en annen. Tanken er at man kan oppdatere denne etterhvert som det kommer flere utgaver.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

På Nyheter-siden har jeg satt at det skal være 5 poster på hver side. Det kan ses på bildet nummer tre. Bilde nummer seks er av 4 poster per side. Jeg syns det fungerer best med 5 poster per side, fordi da blir effekten av sidene som skifter mye større når man kan scrolle ned. Videre i menyen har jeg lagt til en side som forklarer hvordan man bruker magasin-appen, og en side med et kontaktskjema, dersom det er noe man lurer på. Tekstboksene på kontaktskjema har jeg satt til å ha en bredde på 200px, og en høyde på15px, ved å kopiere koden inn i Companion og dermed overstyre de opprinnelige kodene.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Jeg ville ha en side som var enkel og oversiktelig, lett å finne frem i, og uten overflødige elementer. Det skal være lett å oppdatere, og legge til flere artikler, uten at den blir rotete. En ren side med mye luft.  Derfor har jeg fjernet mange av de elementene som var på hver side i det opprinnelige themet, og bare lagt portfolien på en av sidene. Jeg har valgt å ikke legge artikler på undersiden av slideshowet, fordi dette kommer veldig langt ned på siden, og ute av syne på mindre skjermer. Det kommer av at logoen min bygger så mye i høyden, og dermed tar mye av plassen på siden. Det er ikke hensiktsmessig å ha logoen i et mindre format, da undertittelen ikke vil være mulig å lese. Jeg har lagt link og bilder av det opprinnelige themet i et tidligere innlegg.

Hvordan siden er blitt kan du se her: www.lindhagen-design.com

Oppdatering

Da nærmer det seg innlevering med stormskritt. Jeg prøver å holde oversikten nå, og planlegge de siste dagene på best mulig måte. Imorgen onsdag skal jeg jobbe med websiden, og ta de siste finjusteringene på magasinet. Torsdag skal jeg filme hvordan jeg bruker appen, altså hvordan jeg blar og hvordan det interaktive vises i magasinet. Fredag, lørdag og søndag skal jeg ferdigstille hele prosjektet, med profilmanual og evaluering. Samt plukke ut fem arbeider å legge ved semesteroppgaven. Jeg har de siste dagene laget flere sider til magasinet, generert en ny versjon av quizen, begynt å skrive profilmanual, og jobbet med websiden.

 

 

 

 

 

 

 

 

Når det gjelder websiden er jeg veldig usikker på det themet jeg har kjøpt. Det er et theme som krever mye jobb, og som tar lang tid å sette seg inn i, tid som jeg ikke har. Sånn jeg ser det nå, har jeg tre alternativer. Jeg kan velge å fortsette å jobbe med det themet jeg har kjøpt, og satse på at jeg får det til å fungere slik jeg vil. Eller jeg kan kjøpe et nytt theme, et som vil være enklere å tweake på. Eller jeg kan re-installere det themet jeg hadde på siden fra før. Det er noe jeg skal vurdere frem til imorgen, og ta en avgjørelse på det da.

Så langt ser siden slik ut:

Flash

Da har jeg laget to nye annonser i Flash til magasinet. Denne gangen har jeg laget de med en størrelse på 180 x 400 px. Dette var en størrelse som fungerer bedre, de forrige jeg laget på 120 x 240 px ble i minste laget. Jeg har også valgt å ta med mindre tekst denne gangen, og holde elementene lengre i annonsen. På den måten vil den opptre roligere på siden, og vil være mer behagelig for leseren. Jeg har også valgt å holde meg til svart tekst på hvit bakgrunn, som er mer i tråd med logoen. Med unntak av et ord som jeg har gjort rosa, dette for å vekke oppmerksomhet, uten at det skal bli for mye av det. Hadde jeg gjort det på flere ord, ville det mistet effekten sin.

garamond180x400

garamond2_180x400

Typografi Quiz

Da har jeg funnet en løsning på hvordan jeg skal få quizen med i magasinet. Jeg gikk inn på sidene til Tabletquiz igjen, (se tidligere innlegg for beskrivelse og link), og her stod det at quizen var kompatibel med blant annet Safari og Chrome. Dermed fant jeg frem til installasjonskoden jeg hadde mottatt når jeg opprettet quizen første gang, åpnet Safari og installerte quizen her. På den måten kunne jeg i InDesign lage en HTML-boks og linke til denne nettsiden. Da jeg så åpnet den på Ipaden var det å taste inn installasjonskoden på nytt, og dermed virker quizen på Ipaden så lenge den har en aktiv internett-tilkobling. Via Tabletquiz kan jeg også generere nye versjoner av quizen, og den nye versjonen vil komme opp neste gang man åpner quizen. Tabletquiz lar deg lage en quiz gratis, og denne kan du generere 30 ganger. Med denne quizen får jeg også med de tingene jeg ville ha, med at resultetet får man først når man har vært igjennom alle spørsmålene, det er en funksjon så man kan legge igjen navnet sitt, det er en resultatliste, man kan legge igjen en kommentar, samt at man kan se de korrekte svarene tilslutt.

After Effects

Da har jeg laget ferdig typografi-filmen til sangen “Den redde” av Hellbillies, dette gjort i After Effects. jeg valgte å lage mesteparten av sangen, så det ble en film på nesten 3 minutter. Jeg begynte med å sette inn hvert ord etterhvert som Aslag Haugen synger teksten, og bygge små blokker av teksten. Så for å forsøke å vise at jeg kan litt mer, fikk jeg så setninger til å dale ned, og stable seg opp på hverandre. Som avslutning valgte jeg å beholde ordene på skjermen, slik at de tilslutt skaper et mønster. Dette var en tidkrevende prosess, hvor nøyaktighet spiller en stor rolle. At ordene dukker opp samtidig som de blir sunget, er en nødvendighet for at filmen skal fungere. Det var veldig moro å jobbe med, selv om det var en tålmodighetsprøve. Filmen har jeg så rendret ut i H.264, slik at jeg får det .mp4 formatet jeg behøver for å implementere filmen i magasinet. I InDesign har jeg så laget en knapp som heter “spill av” på laget som heter B – slides – pinned blocks. Dette fordi filmen trenger et referansepunkt i et av lagene, slik at den vet hvor den skal spille. Denne knappen har jeg så lagt til media på og linket til filmen jeg har rendret ut fra After Effects. Jeg har valgt å sette den til en fullskjerm-film, slik at leseren skal få mest mulig ut av filmen. Ved å sette innstillingene slik at den lukker seg når filmen er ferdig, kan leseren igjen trykke på den for å se filmen igjen, da det ikke finnes noen loop-funksjon i Mag+ enda. Dette gir også leseren større kontroll over innholdet.

Garamond på Facebook

Som et ledd i markedsføringen av magasinet har jeg laget en Facebook-side. Her skal man kunne se hvilke artikler som er med i den aktuelle utgaven, nyheter, tidligere utgivelser, tips og linker til aktuelle sider, når neste utgivelse kommer, hvordan appen fungerer på Ipad, og kontaktinformasjon. Dette er noe jeg skal se litt på ved siden av magasinet og websiden. Facebook-siden kan ses her.

Absolute – Interactive & Responsive WP Theme

Etter et veldig  bra tips fra Veronica Poer og Marius Sagen, har jeg vært inne på en side som heter themeforest. Her har jeg kjøpt et WordPress theme som heter Absolute. Dette er et theme jeg føler passer bra som webeside for magasinet. Det er lagt vekt på at themet skal være interaktivt og passe på flere formater, både Ipad og Iphone. I tillegg er det mulig å endre en hel del her, fra fonter, farger og størrelser. man kan også inkludere både slideshow og video. Det jeg likte best ved themet var måten det viser innholdet på. Artikler og poster ligger i kolonner med et tilhørende bilde. Dette bildet kan man så trykke på, og det vil komme opp i større størrelse og med mulighet for å legge inn tekst med informasjon. Det virket oversiktlig, og passende for artikler fra magasinet. I tillegg glir sidene fra en side til en annen, noe som skaper en følelse av gjenkjenning i forhold til Ipad-utgaven, der også en side glir over til den neste. På siden til themeforest opplyser de om at Absolute kommer med følgende funksjoner:

  • Responsive Layout
  • Interactive Design
  • Unlimited Styles
  • Unlimited Portfolio Pages
  • 3 Portfolio Layouts
  • Unlimited Sidebars
  • 3 Custom Post Types
  • 3 Page Layouts
  • Contact Form Builder
  • YouTube & Vimeo Support
  • Google Map Integration
  • 10+ Visual Shortcodes
  • Visual Shortcodes Builder
  • 2 Image Sliders
  • Testimonials Slider
  • Social Links Widget
  • Localization-ready
  • Demo XML Included

Jeg har en webside som jeg laget ved en tidligere anledning, som tilhører mitt eget firma, lindhagen-design. Her har jeg nå installert Absolute-themet. Adressen vil jo bli en annen, men dette er for å ha en mulighet til å vise siden slik den kunne sett ut. Websiden er noe jeg skal jobbe med de neste dagene, samtidig som jeg fortsetter med magasinet.

Her er et bilde av themet jeg kjøpte:

 

 

 

 

 

 

Et bilde av slik det ser ut på www.lindhagen-design.com: