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:
Mappeinnlevering grafisk 1. semester
Etter en hektisk periode med deadlines på layout-oppgaven, miniprosjektet og mappen, og etter en laaang helg med mye styr i InDesign har jeg endelig levert mappen min med de grafiske arbeidene fra første semester multimediedesign.
Den første PDF’en er selve mappen som inneholder de obligatoriske oppgavene, og noen læringsaktiviteter som jeg hadde lyst å ha med.
Mappeinnlevering_grafisk_small (Klikk på lenken for å laste opp mappa i PDF)
Den andre PDF’en innholder rapportene som vi har levert inn sammen med de obligatoriske oppgavene. I denne versjonen av rapportene har jeg kortet dem noe ned (fjernet mye av research og idéutviklingen), og beholdt de delene som omhandler hvordan jeg har tenkt i forhold til designet. I tillegg har jeg lagt til bilder og tekst som viser hva som er endret i forhold til første innlevering av disse oppgavene.
Mappeinnlevering_grafisk_RAPPORTER_small (Klikk på lenken for å laste opp rapportene i PDF)
Gry Monica's hjørne 
Kommentarene