Mappeinnlevering web 2.semester
Mappeinnlevering 2. semester var en obligatorisk innlevering der vi skulle samle alle de obligatoriske oppgavene fra dette semesteret (web/digital) på en nettside som skulle inneholde linker til alle oppgavene. Det var valgfritt om vi laget nettsiden i HMTL eller Flash. I tillegg til obligatoriske oppgaver kunne vi valgfritt også legge til læringsaktiviteter / andre arbeider. Mappen skulle designes på en måte som representerer meg som designer.
Her er min digitale mappeinnlevering for 2. semester multimediedesign:
Jeg har kalt den ”Digital portefolio” og den inneholder link til følgende obligatoriske oppgaver fra 2.semester:
- Obligatorisk oppgave 06 – Enkelt nettsted
- Obligatorisk oppgave 07 – Fotoessay (PDF-format)
- Obligatorisk oppgave 08 – Fotoessay (Flash webside basert på fotoessayet i oppgave 07)
- Obligatorisk oppgave 08 – Flash interaktivt banner
- Læringsaktivitet: WordPress nettside www.brunmark.no (jeg gjorde denne i 2.semester i stedet for læringsaktiviteten ”Regnskapsfirma”.
- Læringsaktivitet: Lysbruk i portretter de siste 1000 år (Research + PDF)
- Diverse foto tatt i løpet av studiet som ligger på min Flickr-konto.
Valg av teknisk løsning for mappeinnlevering:
Presentasjonen kunne være i HTML eller Flash og jeg valgte HTML fordi jeg nettopp har jobbet med to Flash-prosjekter i obligatorisk oppgave 08, og trenger mer øvelse i HTML. En annen grunn er at Flash ikke støttes av alle typer devices (f.eks iPad) så det er sannsynligvis viktigere å lære seg HTML enn Flash.
Jeg har for første gang laget en nettside 100% i Photoshop og klippet den opp ved å bruke funksjonen ”slices” og ”save for web and devices”. Det var mye enklere enn jeg trodde, ikke noe stress med alle boksene div’ene som legger seg feil og hopper rundt, slik det gjerne blir når man skal lage en nettside ved å begynne å kode HTML og CSS på et blankt dokument. (Obligatorisk oppgave 06 Enkelt nettsted er bygget på den måten)
Designvalg for mappe:
Jeg er en person som liker sans seriff skrifter best, gjerne geometriske, og gjerne tynne. Jeg liker ren, enkel design, men den må ikke være for kjedelig, kontraster og skarpe farger må få bryte opp, der må være dynamikk. Jeg liker også røffe, scruffy finisher, som for eksempel på fotoessayet/fotogalleriet.
Denne mappepresentasjonen har mange av disse elementene i seg, så jeg vil si at den representerer meg ganske godt som designer. Bakgrunnsbildet er et makrobilde jeg tok av boblene i colaglasset mitt, men jeg synes det ligner på aliens. Jeg liker jordfarger og skarpe farger i kontrast mot svart. Jeg er glad i å fotografere og synes svart er fint som ramme for foto men også ellers i design. Sjakkbrettruter har jeg alltid likt, når jeg var liten ønsket jeg meg svart-hvitt sjakkrutete kjøkkengulv når jeg ble stor. 🙂
Skisser mappepresentasjon:
Arbeid med digital mappe i Photoshop (screenshot):
Arbeid i Dreamweaver (screenshot):
Deilig å ha levert inn mappa mi, da er det bare prosjekteksamen igjen! 😀
Obligatorisk oppgave 07 Fotoessay (PDF) – forbedret versjon
Som en av de digitale oppgavene fra 2.semester i multimediedesign skulle oppgave 07 Fotoessay også forbedres før mappeinnlevering. Her er litt informasjon om forbedringsarbeidet mitt med denne oppgaven.
Bildene
Ved bytte av pc og overgang til Mac har jeg dessverre klart å miste en masse originalfiler som jeg trodde jeg hadde kopi av på en ekstern disk. De originale RAW-filene til bildene i Fotoessay /Fotogalleri er dessverre borte. Om du som leser dette er glad og fornøyd og har viktige filer og bilder lagret på ett sted – skaff deg en ekstra kopi, lagre alltid to steder! Noen ganger krasjer disker eller man sletter foldere uten å vite det…
Jeg fikk en del tips fra lærer ved første innlevering av obligatorisk oppgave 07 Fotoessay om hvordan bildene kunne redigeres bedre. Men fordi jeg kun har gjenfunnet jpeg-versjoner som allerede var redigert ganske kraftig til en grunge-aktig look med mye konstrast og et grønnlig fargestikk, så var det ganske lite jeg kunne gjøre for å forbedre bildene. Men jeg har gjort et forsøk.
Forside før og etter:
Bildet skulle være helt i svart-hvitt men jeg hadde valgt en desaturert versjon der jeg fjernet alle farger bortsett fra lilla. Den nye versjonen av forsiden er laget i helt svart-hvitt. Jeg har rettet opp bildet som var noe skjevt i forhold til horisonten (bordkanten).
Bilde 1 før og etter:
Kommentar var lærer på at det rosa neonlyset bak henne var forstyrrende. Jeg har duset det ned så godt det var mulig på en jpeg.
Bilde 2 før og etter:
Jeg har redusert det skarpe lyset på hånda hennes.
Bilde 3 før og etter:
Jeg har duset (uskarpet) og mørknet bakgrunnen og skarpet/lysnet henne for å få henne mer fram. Har også croppet bildet tettere for å fremheve at hun er objektet, ikke miljøet rundt henne.
Bilde 4 før og etter:
Jeg har gjort bakgrunnen mer diffus på dette bildet slik at frisøren og kunden kommer bedre fram.
Bilde 5 før og etter:
Jeg har gjort bakgrunnen (speilbildet) ennå mer diffus enn på originalen og en anelse mørkere.
Bilde 6 før og etter:
Lærer kommenterte at dette bildet var for likt bilde to, men jeg har valgt å beholde det da jeg ikke hadde et som var bedre å erstatte det med. Jeg har en tett crop på dette bildet med vilje for å komme nært innpå situasjonen.
Layout på PDF
Komposisjonen på den første PDF-presentasjonen av Fotoessayet trengte mer bearbeidelse spesielt med tanke på luften i mellom bildene. Jeg har jobbet mye med forskjellige muligheter her. En liten utfordring med to bilder i liggende format og fire i stående.
Noen skisser for layout PDF
Jeg er enig med læreren i vurderingen av første versjon og jobbet med å lage en ny komposisjon som hadde fokus på luften i mellom bildene, samtidig som den var mer spennende.
Arbeid i InDesign med ny PDF-layout
En ny variant:
En annen utgave:
Ny versjon som jeg hadde tenkt å levere:
Sammenligning av gammel og (foreløpig) ny versjon av PDF:
Ny versjon som harmonerer bedre med Fotogalleri
Mye senere, etter at jeg egentlig var ferdig med en ny versjon av PDF’en, og hadde laget ny versjon av Fotogalleriet i Flash, så syntes jeg PDF’en og Flash-versjonen ikke harmoniserte nok. Så jeg ville lage enda en ny PDF som stod mer i stil med Fotogalleriet slik det var blitt. Her er skisser til PDF-layout som er laget etter at Fotogalleriet var ferdig:
Jeg har endret fonten fra Karat til Arial som er fonten jeg bruker i flash Fotogalleriet, og gjort mye bruk av svart på samme måte som Fotogalleriet har. Jeg bruker for eksempel samme svarte felt nede på forsiden og samme tekstlayout, men har valgt å beholde sirklene fra forrige versjon, bare at de er svarte og større. Fotonettsider og layout der et foto fyller hele siden synes jeg er veldig flott, og har valgt å gjøre dette her.
Endelig versjon av Fotoessay (hver enkelt side):
Som PDF spread:
Link til ny versjon av obligatorisk oppgave 07 Fotoessay:
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/pdf/Fotoessay_new_10.pdf
Til sammenligning, her er den gamle versjonen:
https://grymonica.wordpress.com/wp-content/uploads/2012/03/fotoessay_02.pdf
Obligatorisk oppgave 06 Enkelt nettsted – forbedret versjon
I forbindelse med mappeinnlevering hvor alle de obligatoriske oppgavene fra 2. semester leveres på nytt for karaktersetting, ble vi bedt om å prøve å forbedre oppgavene.
I denne bloggposten skal jeg vise hva jeg har gjort med min Obligatoriske oppgave 06 Enkelt nettsted.
Farger og lesbarhet
Jeg er veldig glad i dyp lilla og skarp irrgrønn, men innser at fargene ikke hadde god kontrast eller lesbarhet i forhold til en svart bakgrunn. Jeg testet fargene med Colour contrast analyser (et gratis program man kan laste ned her: http://www.paciellogroup.com/resources/contrast-analyser.html ) og fikk dårlige resultat på begge fargene, både på kontrast og lysstyrke.
Lilla #A00051 fikk ”fail” både på kontrast (lesbarhet) og er håpløs for fargeblinde:
Grønn #00D498 fikk ”fail” på kontrast (lesbarhet), men ”pass” på lysstyrke:
Jeg valgte derfor to helt nye, mye lysere farger som gav bra score både på lesbarhet, lysstyrke og fargeblindhet.
Den nye grønne er #82D3AC:
Den lilla fargen er byttet ut med en rosa farge #
Meny
Jeg har endret navigasjonsmenyen som før var lilla til grønn. Jeg synes det gir en fin helhet og bedre lesbarhet. Har økt skriftstørrelsen på menyen ørlite (fra 1.2 em til 1.1 em).
Layout og tekst
Index-siden: Jeg syntes det var for mye luft på den gamle versjonen og ønsket meg en tettere layout. Jeg har fjernet padding mange steder på index-siden slik at den fremstår balansert, men ikke uten unødvendig store avstander mellom elementene.
Jeg har også redusert tekststørrelsen på brødteksten ved siden av bildet på index-siden, samt teksten i footer.
Før var menyen midtstilt i forhold til hovedinnholdet, jeg har nå valgt å venstrestille menyen mer slik at den er mer på linje med resten av innholdet.
De tre undersidene har fått samme størrelse på bilde og tekstbokser, mens index-siden fortsatt er litt annerledes. Men også denne har jeg gjort noe mer lik de andre; bildet er blitt mindre og tekstboksen og bildet har bedre balanse i forhold til hverandre.
Jeg jobbet en del med å lage templates (første gang jeg prøver dette) og jeg ser at det er smart for å få påfølgende sider like, uten å slite seg i hjel. Men siden Enkelt nettsted ikke var tenkt slik fra begynnelsen av, ble det lettere for meg å kopiere HTML og CSS over på de andre sidene. Heldigvis var det ikke så mange sider. Men en annen gang skal jeg definitivt prøve meg på templates.
Bilder
Jeg har laget nye versjoner av bildene, og blant annet fjerne ”feather” i kantene på bildet på siden ”om meg” slik at nå har alle bildene firkantede hjørner.
Rollover
Jeg har latt teksten på linker i menyen skifte fra grønn til rosa ed understreking ved mouseover og klikk, slik at det er lett å se at dette er linker. Jeg har også gjort det slik at linken i menyen til den siden man står på, alltid er rosa og med understreking.
Lenke til toppen
På de lange sidene har jeg laget et ”named anchor”, lenke til toppen av siden.
Gammel versjon av obligatorisk oppgave 06 Enkelt nettsted:
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/index.html
Ny versjon av obligatorisk oppgave 06 Enkelt nettsted:
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
Screenshots:
Gammelt nettsted:
Nytt nettsted:
Obligatorisk oppgave 07 Fotoessay
Klikk på forsidebildet ovenfor for å se mitt fotoessay «En frisørs hverdag» presentert som PDF.
Eller klikk her om du vil lese den på ISSU.COM/gmfh.
Og her er bildene mine fra fotoessayet ett og ett:
Rapport om prosessen
I denne innleveringsoppgaven skulle vi lage et fotoessay for portretterte en person. Det kunne gjerne være flere personer med, men en person i hovedrollen. Et fotoessay vil si en rekke bilder som forteller en historie. Vi skulle ta 6 bilder pluss et forsidebilde i svart-hvitt, forsidebildet skulle være tatt i studiolys/kunstig lys, og minst ett av de andre bildene i serien skulle være tatt i naturlig lys (dagslys). Men ellers var det fritt fram for bruk av lyskilder og utstyr.
Personen som portretteres skulle samtykke i at bildene ble tatt og at de kunne publiseres, en kontrakt som gav tillatelse til dette skulle fylles ut.
I forkant har jeg vært hos Mette og sett hvordan og hvor bildene kunne tas. Jeg fant ut at det ville være best å ha ekstra lys i tillegg til blitsen på kameraet og skaffet meg en ekstern Canonblits. Vi diskuterte litt rundt mulige bilder på forhånd og avtalte tid for fotografering. Jeg leste litt om lys, bruk av blits og portrettfotografering på forhånd.
Forsidebildet er av en frisørsaks, en kam og en kopp kaffe. Alle tre typiske objekter på en frisørsalong og nært knyttet til Mette siden hun bruker dem hele tiden. Jeg har gjort bildet svart-hvitt med unntak av kammen, her har jeg latt rødfargen være igjen, for at forsidebildet skulle passe sammen med resten av bildene. Jeg prøvde med helt svart-hvitt og det ble ikke fint i det hele tatt. Derfor dette valget her selv om det står svart-hvitt i oppgaven.
Lys og utstyr
Bildet av Mette der hun smiler crazy og skal til å klippe sitt eget hår, er tatt i dagslys utenfor salongen i Strøget. Forsidebildet er tatt med ekstern Canon blits inne i salongen. Alle andre bilder er tatt med kunstig lys innendørs (med og uten blits). Det var vanskelige lysforhold i salongen med mye downlights (spots) i tillegg til store glødelamper (lysepærer uten skjerm) som hang fra taket. Jeg tok bilder både med og uten blits for å se hva som ble best, og skiftet mellom tre objektiver; 18-55mm, 50mm og noen få med 100mm. Brukte også blitsen med og uten en lys plasthette foran.
Lyssettingen i bildene er kunne helt sikkert vært mye bedre, men jeg valgte bevisst å ta innendørs bilder til denne oppgaven selv om dette ikke er det jeg kan mest om. Hittil har jeg tatt mest bilder i utendørs i dagslys, lyssetting og innendørs foto er en stor utfordring for meg og noe jeg vil lære mer om. Skulle gjerne lære å ta bilder med så flott lys som bildet av modellen med det krusete håret ovenfor (som henger på veggen hos Adam og Eva Strøget). Eller som bildet med modellen med det hvite håret, her er det flott dramatisk lyssetting!
Enkelt nettsted – the end
Strevde fortsatt med å få til plasseringen av elementene, og startet på nytt igjen med et nettsted med navnet ”PlanB” fordi jeg tenkte at om ikke jeg får tid til å lage et skikkelig fint nettsted, så kan jeg i det minste ha et i bakhånd, et enkelt et, som var min PlanB.
Men etter god hjelp fra lærerne på forumet fikk jeg det etter hvert til likevel. Viktig å ha styr på hvilke div’er som er inni hvilke andre div’er og hvor store disse er. Det var også et godt tips å gjøre seg ferdig med byggeklossenes plassering, før man begynner med styling. Lettere å se sammenhengen da.
Jeg valgte å fjerne det hvite fra skissene mine slik at bakgrunnen ble helt svart og endret bittelit i plassering av f.eks menyen, men ellers er det ferdige resultatet nesten som på skissen.
Men jeg må si at dette har vært litt av en reise! Jeg har lært masse av den, og synes min ”PlanB”-nettside ikke ble så verst likevel tilslutt for å være en begynner slik som meg!
Endelig versjon ”PLAN B” websiden:
Live versjonen av nettsiden finner du her: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
T H E E N D ! 🙂
Enkelt nettsted episode 3
Begynte å skisse igjen. Var ikke fornøyd med utseendet på siden, samt kranglet med posision, float, osv. Lekte med nye varianter av den grønne websiden, men begynte igjen å tenke på skarpe farger mot svart bunn. Her er nye skisser:
Nye skisser i Illustrator:
Kjedelig? Tja. Kanskje på tide å ta fram igjen sommerfuglen? Denne?
(Ny variant av dem gamle, snudd på gradient blant annet).
Og noen slike?
Sommerfugldesign på websidene:
Men hva har egentlig sommerfugler med webdesign, HTML og CSS å gjøre? Det ble litt feil. Så jeg bestemte meg for å knipse noen bilder selv og bruke disse. Bildet av meg selv manipulerte jeg med Adobe Photoshop Lightroom slik at det ble sjøgrønt og lilla, og fargene i designet ovenfor plukket jeg opp herfra med teardrop-verktøyet i Illustrator.
Valgte dermed å manipulere bildene jeg tok slik a de også ble litt sånn ”aged” og med lilla, grønne og gule toner.
Dette bildet illustrerer at HTML er et ”markup language”. Dermed en gul marker. Logisk, eller hva?
Dette bildet skal vise en wireframe skisse, hvordan man planlegger byggeklossene til en webside:
Til forsidebilde valgte jeg et bilde jeg selv tok i vinter, av noen tørre strå foran et nettinggjerde med snøen i bakgrunnen. Jeg manipulerte bildet slik at det fikk en nydelig turkisgrønn farge. Bildet skal selvfølgelig illustrere ”nettet”, med det nettinggjerdet (”wire fence” på engelsk, ikke langt unna ”wire frame”) 🙂
Kommentarene