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 08 – Fotogalleri Flash – forbedret versjon
I denne obligatoriske oppgaven (08) skulle vi lage et Flash fotogalleri fra bildene vi tok i obligatorisk oppgave 07 Fotoessay. I tillegg skulle vi lage et Flash banner som skulle plasseres på Enkelt nettsted (obligatorisk oppgave 06) og ved å klikke på dette banneret skulle man komme til Fotoessayet. I forbindelse med mappeinnlevering for 2.semester, har jeg jobbet med å forbedre oppgave 08.
Interaktivt banner i flash
Her er et bilde av det gamle banneret:
Og her et bilde av det nye:
Jeg har tegnet om igjen de tre grafiske elementene, koppen, saksen og kammen med en mer nøyaktig strek og med tynnere stroke. Jeg har valgt å gjøre bakgrunnen lys grå fordi jeg synes det gamle versjonen var veldig skrikende i kontrast mot den svarte nettsiden. Den nye lysegrå ser faktisk hvit ut mot det svarte, men er ikke like skarp å se på.
Se den nye versjonen av banneret nederst på Enkelt nettsted (ny versjon): http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
Den gamle versjonen av banneret kan du se nederst på gammel versjon av enkelt nettsted: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/index.html
Fotogalleri
Kritikken jeg fikk for det første fotogalleriet mitt var at det var forskjellig stil på banner og galleri. På banneret hadde jeg f.eks tegnede elementer, disse var ikke å finne i fotogalleriet.
Noen skisseidéer til ny utforming av fotogalleriet
I den nye versjonen av fotogalleriet har jeg integrert koppen, saksen og kammen i nederste del av galleriet (footer). De fungerer samtidig som ”hjem” knapp; ved å klikke på dem kommer man tilbake til forsiden.
Jeg har lagt en rad med thumbnails (små kvadratiske versjoner av alle de seks bildene) i footer, ved å klikke på disse kommer man til den store versjonen av bildet. Det ligger også usynlige fremover og bakover-knapper helt til høyre og helt til venstre nederst i de store bildene (rett over den svarte footeren). Disse blir synlige ved mouseover, og man kan klikke fremover eller bakover eller hele veien rundt.
Link til obligatorisk oppgave 08 Fotogalleri (ny versjon):
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/flash/Fotogalleri_ny_2012.swf
(Til sammenligning, her er den gamle versjonen: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/Flash/Fotogalleri_03_oldversion.swf )
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:
Ny versjon av hjemmesiden i WordPress
Fordi en hun kjente hadde en webside med samme template, ville hun gjerne bytte. Derfor byttet jeg til et annet WordPress theme på siden hennes www.brunmark.no.
Jeg har tatt noen screenshots av det nye utseendet av websiden (på noen av dem er bildet øverst «klippet i biter», dette skyldes at bildene rulerer). Websiden ser nå slik ut:
Har laget hjemmeside i WordPress
Som en øvelse til prosjekteksamen og for å hjelpe en venninne, har jeg laget en hjemmeside i WordPress. Hun har nettopp sluttet i jobben og begynt som frilansjournalist, og hun trengte en hjemmeside for å presentere seg selv og hva hun kan tilby.
Her er noen screenshots fra hjemmesiden – banneret i topp rulerer i tre versjoner:
Og her er en link til siden: www.brunmark.no
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”) 🙂
Enkelt nettsted episode 2
I mai begynte jeg på igjen. Jeg gjennomgikk alle leksjonene på nytt, begynte å tenke wireframes og tok en titt på det tidligere arbeidet. Syntes det var kjedelig.
Ble inspirert av skissen med den store buede D’en og alle rundingene bak. Tenkte at D’en kunne være et slags konteiner for overskriften, som skulle være i venstre side istedenfor på toppen.
Hvorfor må alle websider ha tradisjonell design og layout, hadde lyst å lage noe annerledes og kanskje litt Austin Powersk? Fargesprakende 70-tall, psykedelisk? Det ville være tøft om undersidene hadde samme layout men forskjellig farge.
Begynte å jobbe i Dreamweaver etter å ha laget disse skissene først i Illustrator for å se hvordan det kunne bli:
Noen ”knapper” eller menyer i form av bilder som jeg lagde:
Begynte å utforme nettstedet i Dreamweaver men støtte borti diverse problemer. For det første ble den siste siden for lys, skriften inne i den hvite firkanten ville ikke vise. Byttet til en ekstra grønn underside, samme som forsiden.
Hadde valgt en kul font, syntes jeg, men leste en del om websafe fonts og fant ut at det ville være lite smart å bruke den. Måtte nok heller velge en av de vanligste fontene på nettet, som de fleste har installert.
Syntes etter hvert at den psykedeliske index-siden ble litt for mye, og utformet en ny, litt dusere en:
Men det var ikke lett å jobbe med bakgrunnsbilder og forskjellige farger på hver underside for en nybegynner som meg. Fikk tips om hvordan lage templates for Dreamweaver, noe som gikk lekende lett, men da uten fancy bakgrunnsbilder.
Gjorde bildet til bakgrunnsbilde for alle sidene, laget det transparent og la på svart bakgrunn. Fikk til hele nettstedet med svart-grønn kombinasjon, men fikk ikke til å plassere layout’en skikkelig. Sammentrykt på index-siden og for mye mellomrom før teksten begynte på de andre sidene.
Index-side:
Underside:
Enkelt nettsted episode 1
Denne oppgaven er nok den jeg har brukt lengst tid på av alle de obligatoriske oppgavene på multimediestudiet. Jeg begynte i januar-februar på læringsaktivitetene for webdesign som enkel HTML og CSS og jeg påbegynte allerede da Enkelt nettsted med ideer og skisser.
Her er en av de første ideskissene:
Hadde lyst å lage en dekorativ CSS fordi CSS er selve designet til websiden, selve stylingen. Den skulle være på mørk bakgrunn (svart, mørk grå eller grå) slik at den på en måte lyste. Her er noen forsøk i Illustrator:
Skisset litt mer og tenkte litt på hvor mange kolonner jeg skulle ha osv. Her er noen skisser:
Så testet jeg skissene røft i Illustrator:
Begynte å leke med en annen slags illustrasjon:
Og så prøvde jeg det ut på skissen i Illustrator med forskjellige farger. Kanskje grått var kjedelig?
Dette var i februar. Deretter ble det travelt på jobb og det ble umulig for meg å studere ved siden av i en periode. Hverdagen hang ikke sammen, så her ble det en lengre pause i arbeidet.
Gry Monica's hjørne 
Kommentarene