WEBP – Idéutvikling 1

Denne uken startet jeg arbeidet med moodboards. Med de to moodboardene nedenfor ønsker jeg å vise farger, tekstur og andre viktige elementer som kunden ønsker at jeg skal ta hensyn til underveis i prosessen. Fargene indigo og burgunder var hovedsaklig kundens ønsker, og om dette er noe som passer til det endelige resultatet får jeg teste ut. Jeg har også brukt noen av kundens egne bilder av prosess og produkt, for inspirasjon.

Videre har jeg jobbet en del med wireframes, og digitale skisser av design og layout av nettstedet. Disse har jeg laget i Photoshop, og fokusert på plassering av elementer, samt navngivelse av disse for en bedre oversikt. Wireframe er et storyboard, og et visuelt uttrykk som viser hovedelementene som skal være med.

 

De 4 wireframene over viser hovedsiden (Home) til nettstedet. Jeg ønsker å ta for meg hovedsiden først, deretter de andre sidene. Derfor kommer wireframes, elementer, tekst og annet til de andre sidene til nettstedet senere.

Ha en fin 17.mai alle sammen! Hipp Hipp HURRA!

– Annette B. D.

9.1 Layoutstiler – CURB – Skisser

Dette semesteret skal du utarbeide layout for CURB magasinet sin hovedside på nettet. Dere skal bruke de samme elementene som ble brukt til det trykte magasinet, se her. Følgende krav er satt til aktiviteten:
– Minimum 6 analoge eller digitale skisser. Test ut layoutstilene; symmetrisk, asymmetrisk og kombinasjon.
Velg en av skissene.
– Lage en wireframe av denne skissen, hvor en grid skal brukes som hjelpemiddel.
– Utarbeid det ferdige designet i Photoshop eller InDesign.
– Produser dette som en HTML fil, bruk CSS til layout.
– Legg opp nettsiden i en egen mappe med navn: aktiviteter, på deres ftp server og begrunn valg av layout og design på din reflekterte dagbok.

CURB magasinet er et fiktivt magasin som blir brukt i øvelser til utarbeidelse av layout. Se mitt ferdige eksempel til det trykte magasinet, her. Dette ble utført forrige semester, og dette semesteret skal jeg jobbe videre med CURB-magasinet, samt elementene jeg har valgt. Dette virker som en ganske krevende oppgave, spesielt tids – og design messig. Grid er et svært viktig hjelpemiddel i layout, både for trykk og web. Gjennom denne aktiviteten skal jeg erfare hvordan grid blir brukt i arbeid for web.

Hittil har jeg lest alle HTML-leksjoner om grid, og brukt gode, relevante linker for grid for videre lesing. Jeg har brukt tid på å gå gjennom HTML og CSS, ved å se tilbake på tidligere oppgaver og leksjoner. Nå er første punkt i oppgavens krav utført; skisser. Jeg valgte å starte med analoge skisser, og det ble totalt 12 stk. Det fungerer bedre for meg å ha mange forslag, for deretter å oppnå et bedre resultat. Her er skissene som er utarbeidet til denne oppgaven, hvor plassering og form har blitt vektlagt:

Videre kommer jeg til å lage noen digitale skisser, og se hvordan de ulike forslagene fra de analoge skissene fungerer. Det forslaget jeg synes fungerer best, er det jeg kommer til å jobbe videre med. Først må jeg lage en wireframe, og deretter begynne arbeidet med layout (og grid som hjelpemiddel) i Photoshop eller InDesign.

– Annette B. D.

Oblig.08 – Ferdig

Idag er innleveringsdagen for obligatorisk oppgave 08 – Flash. Igår klarte jeg heldigvis og ordne opp i problemene som oppsto ved integrering av fotogalleri og banner til mitt enkle nettsted. Jeg fryktet det kom til å bli vanskelig, og det var akkurat det som skjedde.

Først gikk jeg igjennom fotogalleriet; sjekket at alt var på plass og slik jeg ønsket. Deretter eksporterte jeg FLA filen til en SWF fil, altså en komprimert fil. Lagret denne filen i samme mappe som banneret. Jeg åpnet banneret i Flash, sjekket at animasjonen fortsatt fungerte og at alt var på plass. Deretter åpnet jeg Action Script vinduet og kodet riktig URL i parentesene, slik som vist under.

Jeg eksporterte denne til en SWF fil, og lagret i samme mappe som galleriet. Videre åpnet jeg Adobe Dreamweaver, index siden. Her importerte jeg banneret og la den inn nederst på siden. Jeg hadde allerede lagt til fotogalleriet i en egen Flash mappe, så denne var det bare å laste opp. Etter en del forsøk på å teste ut resultatet på mitt enkle nettsted, kom denne meldingen opp ved å klikke på banneret:

Noe var altså feil i kodingen til banneret eller plasseringen i mappene. Jeg prøvde meg frem; forandret kodingen, forandret mappeplassering, forandret filnavn etc. Den samme meldingen kom fortsatt opp. Etter mange timer begynte jeg å bli veldig frustrert, og da jeg spurte om hjelp på forumet til Noroff følte jeg meg både dum og fortvilet når jeg ikke skjønte forslagene de kom med. Uansett, etter mye fortvilelse greide jeg det tilslutt. Jeg lagret banneret som SWF på nytt, med et annet filnavn, la det til i Dreamweaver med en annen tittel, og lastet opp på nytt. Problemet var mest sannsynlig at filnavn og tittel var det samme, når jeg forandret dette var problemet løst.

Nå håper jeg virkelig at alt fungerer slik jeg ønsker, og at det fungerer likt på alle maskiner. For å komme til hovedsiden på mitt enkle nettsted hvor banneret er plassert, klikk her.

Banneret ser slik ut, og er allerede halvveis i animasjonen i denne printscreenen. Jeg har lagt til en svart ramme på banneret og sidene i fotogalleriet, for å skille de fra nettstedet og for å skape en bedre helhet i designet.

For å komme direkte til Flash fotogalleri, bruk denne linken, her.

Først kommer du til hovedside 1, som viser forsiden til fotoessayet og galleriet med fotografi, tittel og rammer. Deretter kommer du til hovedside 2, som viser titler til hvert bilde, samt tittel med tekst til fotogalleriet. Jeg håper teksten er med på å veilede brukeren til å forstå hva de ulike knappenes funksjon er. Dette er noe jeg har brukt mye tid på å få til, og for å forstå hvordan det fungerer anbefaler jeg å sjekke det ut. Fra denne siden kommer brukeren til selve galleriet, hvor knapper blir brukt for å ta brukeren tilbake eller videre i fremvisningen, eller tilbake til hovedside 2.

En annen viktig ting til denne oppgaven er rapporten, som teller 20%. Jeg legger mye arbeid i rapporten, det er veldig viktig for meg at denne fremstår profesjonelt og at den reflekterer min prosess og arbeidsmetode, samt idé og utvikling. Her kan jeg bruke litteratur og leksjoner fra Noroff som kilder, og begrunne mine valg. Hva har jeg lært? Hvordan har jeg lært det? Hvorfor? Hva har jeg gjort og hvordan?

Dette er noe jeg prøver å svare på i rapporten. I rapporten følger jeg et oppsett gitt av Noroff, hvor det starter med en innledningsdel, deretter en del om research og arbeidsprosess, videre en del om designvalg, så en del med egenevaluering og konklusjon, og tilslutt kildehenvisning og referanser. For de som ønsker å lese rapporten, totalt 10 sider, bruk linken under.

Rapport Oblig.8

– Annette B. D.

6.1 Formprinsipper

I denne oppgaven skal du lage et Flash dokument som inneholder 5 scener. 4 av scenene skal visualisere og forklare 4 av formprinsippene:
1. Balanse
2. Kontrast
3. Bevegelse
4. Proporsjon
5. Rytme
6. Harmoni og dynamikk
7. Enhet og helhet
Med Action Script skal de 5 scenene føres sammen, du skal kunne klikke på hver boks på hovedsiden, som skal føre deg til rett scene. På hver av de 4 formprinsipp scenene skal det være lagt inn en knapp som tar deg tilbake til hovedsiden.

Denne aktiviteten har vært svært utfordrende, og denne aktiviteten tilhører forrige uke. Etter en pause i helgen har jeg idag klart å løse problemet, og endelig er denne aktiviteten gjennomført.

Jeg startet forrige uke med å lese om de ulike formprinsippene, en repetisjon av hva jeg har lært tidligere. Dette gjorde jeg for å være sikker på hva de ulike formpinsippene står for, og for å kunne bruke teksten på de ulike scenene jeg har utarbeidet. Her er tekst/forklaring som jeg har jobbet med til de ulike formprinsippene:

Kontrast: Innen fotografi og design brukes ofte kontraster som mørk og lys, størrelse-, farge-, form- og strukturkontraster. Kontrast vil si at noe står i kontrast til noe annet, og at det er en stor forskjell mellom dem. Skaper en følelse av spenning og liv, samt at kontraster lager ett blikkfang. Ved å bruke kontraster blir en komposisjon mer livlig og mindre monoton. Eksempler:
Farge mot farge
Lys – mørk
Kald – varm

Balanse: Alle komposisjoner trenger i utgangspunktet balanse. Å skape balanse er avhengig av hvordan vi plasserer et element opp mot andre elementer som vi oppfatter som likeverdige. Hvis en komposisjon er i ubalanse kan dette skape forvirring og formidle utrygghet. I all mediedesign er det et trygt utgangspunkt å bruke balanse i bruk av virkemidler, kontrast, proporsjoner og bevegelse.

Bevegelse: Bevegelse skaper en følelse av fremdrift, system og orden, samt liv og spenning. Bevegelse i en komposisjon kan oppnås ved bruk av linjer, og for å skape bevegelse på en side blir animasjon og levende bilder brukt. Innen fotografi kan bevegelse skapes/oppnås ved å bruke lang lukkertid, f.eks av vann som renner, mennesker som løper etc.

Proporsjon: Selve ordet proporsjon betyr forhold, altså forholdet mellom to forskjellige størrelser. Alle gjenstander, bilder, byggverk og kropper er satt sammen av enkeltelementer, deler eller størrelser. En slik forskjell skaper liv, og sørger for at elementene fremhever hverandre. En god proporsjon er det når det gjelder målbare størrelser, et godt prinsipp er å følge det gyldne snitt.

Rytme: Mange medier bruker rytme, men det er mest brukt og forbundet med musikk, dans og poesi. Rytme i fotografi og design kan være et mønster som blir gjentatt. I typografien er det bokstaver, ord, linjer, grupper, titler, illustrasjoner, streker, ornamenter, avstander o.l. som er rytmens elementer.

Harmoni og dynamikk: Harmoni er en av kunstens grunnprinsipper, hvor gjentakelser av et motiv kan skape en følelse av enhet og balanse. Harmoni kan oppnås ved hjelp av små kontrollerte forskjeller mellom elementene i en komposisjon. Forskjellene må ikke overdrives siden dette kan ødelegge harmonien. Både harmoni og dynamikk har samme funksjon, å bestemme hva slags forhold vi skal ha mellom elementene i en komposisjon. Harmoni skaper en følelse av ro og balanse i bildet, mens dynamikk skaper en følelse av aktivitet, kraft, liv og spenning.

Enhet og Helhet: Enhet vil si at komposisjonen oppleves som en helhet, den gir oss en følelse av at elementene hører sammen. Vi bruker to måter å bygge opp en side på, enten symmetrisk (harmoni og balanse) eller asymmetrisk (spennende og dynamisk). Det kan virke som en rytme, at noe blir gjentatt i bildet.

Kilder: Wikipedia og Kunnskapssenteret.

Etter en del jobbing med å forklare alle formprinsippene søkte jeg etter inspirasjon til visualisering. Her er moodboardet jeg har utarbeidet og fått idéer fra:

Deretter startet arbeidet i Adobe Flash. Først lagde jeg en hovedside, deretter 5 andre scener. På hovedsiden skrev jeg tittelen Formprinsipper, og lagde 4 bokser, som etterhvert ble knapper. Jeg valgte å ha tilsammen 6 scener. Etter visualisering og forklaring på hver scene begynte jeg kodingen med Action Script, på hovedsiden, og tok de andre scenene tilslutt for å legge til en knapp som fører deg tilbake til hovedsiden. Slik ser kodingen ut på hovedsiden:

Slik ser kodingen ut når jeg har lagt til en knapp som skal føre brukeren tilbake til hovedsiden. Kodingen er omtrent det samme på alle scenene, bare navngivningen er annerledes.

Tilslutt et bildet over arbeidsområdet mitt i Flash, og hvordan hovedsiden, timeline og oversikt over scenene ser ut:

Her er link til mitt enkle nettsted hvor flash oppgavene blir lastet opp: Formprinsipp