Uke 20 Oppg. 1.2 Lyssetting og valører

I denne oppgaven skulle vi lyssette og ta bilder av en ballong i et enkelt hjemmestudio. I bildet skulle vi jobbe med valører, og fokusere på enten high-key eller low-key valører, i tillegg til høy eller lav kontrast i valørene. Jeg valgte å fokusere på high-key med lav kontrast mellom lys og mørke. Vanligvis tar jeg bilder med high-key valører og høy kontrast, så det var spennende å prøve noe annet i denne oppgaven. Jeg har begrenset plass i den lille leiligheten jeg bor i, og ikke mye utstyr, men jeg rigget til et enkelt «studio» med en hvit plate/kartong, en hvit genser og en stålampe, i tillegg til ballongen.

Her er det bildet jeg synes fungerte best:

 

Reklamer

Uke 20 Oppg. 1.1: Lysbruk i portretter de siste 1000 år

I denne oppgaven skulle vi utføre research på bruk av lys i portretter de siste 1000 år. Vi skulle finne et bilde fra hvert århundre og reflektere over hvordan lyset har blitt brukt i de forskjellige bildene. Alt skulle samles i en PDF og lastes opp på http://www.issuu.com og embeddes her på den reflekterte dagboken. Jeg fikk ikke til å embedde her på wordpress, men her er link PDF på issuu:

 http://issuu.com/amygdala85/docs/lysbruk_i_portretter

Her er PDF: lysbruk siste 1000 år

Uke 19: CSS ukesoppgaver 3.1 – 3.3

3.1 Adobe Dreamweaver – CSS

I denne oppgaven skulle vi med utgangspunkt i nettsiden vi jobbet med i uke 17 og 18 legge til forskjellige bakgrunnsfarger i div-tag boksene som vi definerte i html-dokumentet . Til dette skulle vi bruke Dreamweaver og CSS. Vi skulle også utheve et ord som gjentok seg på siden, samt legge på en tynn border som var sort og solid.

3.2 Boks modell

I denne oppgaven skulle vi i et nytt html-dokument legge til 3 paragrafelementer i en <div id> tag. Vi skulle så legge til følgende egenskaper og verdier på <p> tag: margin 15 px, padding 5 px, background color #999, border thin solid #000.

3.3 CSS – Position

I denne oppgaven skulle vi plassere de tre <p> tagene fra forrige oppgave fra en vertikal plassering til en horisontal plassering. Vi skulle plassere ved hjelp av følgende egenskaper og verdier: position: absolute, position: relative, float: right.

Position: absolute 

Position: relative 

Float: right 

Uke 18 Oppg. 2.5: Dreamweaver – Wireframe

I denne oppgaven skulle vi lage en wireframe med utgangspunkt i siden vi lagde i uke 17. Deretter skulle vi benytte Adobe Dreamweaver til å dele index.html filen inn i byggeklosser med id-attributter. Til slutt skulle vi teste ut resultatet i en nettleser.

Wireframe:

Index fil i code view:

 Index fil i design view:

I browser:

Uke 18 Oppg. 2.4: Sitemap

I denne oppgaven skulle vi tegne et sitemap til 3 av nettstedene fra oppg. 2.1 research. Jeg benyttet Adobe Photoshop til å lage sitemaps.

Cecilie Melli: 

Lookbook: 

Web designer wall: 

Uke 18 Oppg. 2.3: Navigasjon – Innhold

I denne oppgaven skulle vi ta utgangspunkt i sidene fra research-oppgaven (2.1)  og se på hvilke typer navigasjon som tas i bruk for at brukeren skal kunne bevege seg rundt på nettstedet.

De 4 hovedtypene av navigasjon er:

  •  Direkte navigasjon – brukeren navigerer direkte til et nettsted ved å skrive relaterte ord direkte i nettleserens adressefelt, i stedet for bruk av søkemotorer, og legger til .com, .org, .no etc, de kommer da direkte til et nettsted relatert til dette ordet.
  • Søkbar navigasjon – Mange nettsteder i dag inkluderer søkbare felt som er tilknyttet en søkemotor som en metode å navigere seg rundt på et nettsted. Du får kun treff på søk som er relaterte til nettstedet.
  • Lineær navigasjon – en metode hvor brukeren navigerer seg gjennom nettstedets sider i en rekkefølge bestemt av utvikleren av nettstedet.
  • Tab navigasjon – er hyperlinket navigasjon. Det vil si ikon, tekst, bilder etc som er linket til andre sider enten på nettsiden, nettstedet eller andre steder på nettet.

(Hentet fra html-leksjon).

Eksempler fra sidene jeg har funnet:

Cecilie Melli:

JC Photography: 

Opera: 

Tab-navigasjon og søkbar navigasjon går igjen på alle sidene jeg har gått igjennom. Når det gjelder undersider som gjentar seg finner jeg eksempler på dette på sidene til Opera, blant annet kan man nå Opera Link gjennom flere ulike steder på siden.

Uke 18 Oppg. 2.2: Byggeklosser (wireframes)

I denne oppgaven skulle vi ta for oss 3 nettsteder fra forrige oppgave og lage en wireframe for hver hovedside. De ulike byggeklossene skulle settes navn på.

Cecilie Melli 

JC Photography

Opera 

Uke 18 Oppg. 2.1: Nettsteder – research

I ukens første oppgave skulle vi finne frem til 10 ulike nettsteder og analysere dem i forhold til innhold, navigasjon og oppbygning/design.

Web Designer Wall 

Dette er en side som tar for seg trender, idèer og tutorials innenfor webdesign. Navigasjonen er enkel med tre hovedkategorier, og i tillegg tags som kan ta en direkte til det man er interessert i å lese mere om. Oppbygningen av siden er typisk for bloggdesign, med tre kolonner; en hovedkolonne i midten og to mindre for navigasjon og reklame/sponsorer på sidene. Selve designet liker jeg personlig veldig godt; det er fargerikt og inspirerende, uten at det tar for mye oppmerksomhet fra innholdet på siden. Designet gir siden en identitet som lett legges merke til og gjenkjennes.

WeHeartIt

WeHeartIt er en side der alle kan dele sine favorittbilder og videoer fra nettet. Andre kan så se på bildene og merke dem som en av sine favoritter ved å klikke på et hjerte på bildet. På denne måten kan man dele sine favoritter videre til andre, også via facebook og twitter. Navigasjonen er veldig enkel; for å se en kategori man er interessert i kan man benytte seg av søkefeltet øverst på siden, eller man kan klikke på «top tags», som viser de kategoriene som er mest populære i øyeblikket. Oppbygningen av siden er enkel med èn hovedkolonne i midten der bildene vises. På høyre side er en mindre kolonne for tags og div. annet. Designet er enkelt med få farger og en lett gjenkjennelg logo. Siden har også mye luft.

Lookbook 

På denne siden kan alle legge ut «streetstyle» bilder, og er altså et sted der moteinteresserte både kan gi og få inspirasjon. Man kan ved hjelp av menyene på toppen velge å se det nyeste som har blitt lagt inn, hva som er mest hot akkurat nå, eller hva som ligger på topp. I tillegg til disse menyene kan man også navigere ved hjelp av en annen meny som ligger over denne, til intervjuer, konkurranser, forum osv. Innholdet er også søkbart. På høyre side er en kolonne som også kan brukes til navigasjon. Her kan man velge klesmerker og land, i tillegg til at man kan se mer formell informasjon om siden. Hovedkolonnen er midtstilt og viser de ulike streetstyle bildene.

Opera 

Dette er hjemmesiden til nettleseren Opera. Fra denne siden kan man laste ned nettleseren, samt finne mer informasjon om nettleseren og selskapet. Fra hovedsiden navigerer man ved hjelp av hovedmenyer som er plassert øverst på siden, med undermenyer som kommer frem når man holder musepekeren over. Oppbygningen er ganske enkel med et stort midtstilt forsidebilde og tekst i tre like store kolonner under. Sidene er basert på firmaets lett gjenkjennelge logo når det hjelper farger og typografi.

Booking.com 

På booking.com kan man bestille hotellopphold i hele verden. Enkel navigasjon er ekstra viktig på denne typen sider, og her synes jeg det fungerer godt. Fra førstesiden kan man fylle inn hvor man skal reise, når man skal reise og hvor mange som skal reise. Deretter kommer det opp en lang liste med forlag til aktuelle hoteller. Man kan så luke vekk hoteller man ikke er interessert i ved å bestemme ulike egenskaper man vil at hotellet skal ha, f.eks hvor mange stjerner det skal ha, hvilken prisklasse det skal være i osv. Fra en toppmeny kan man også rangere listen basert på pris, stjerner, eller hvor populære hotellene er blant brukerne av siden. Fra førstesiden kan man også klikke seg direkte inn på aktuelle byer uten å fylle ut reiseinformasjon. Førstesiden er bygget opp med en infolinje øverst, og to like store kolonner under.

Morten Strid 

Morten Strid er en Interactive Art Director bosatt i Bergen. På denne siden viser han  frem sine arbeider. Dette er en veldig spesiell og spennende side med enkel oppbygning. Navigeringen er enkel, fordi det er få menyer. Den kunstneriske delen av siden står klart i fokus, og er med på å understreke at han er en kreativ utøver. Arbeidene hans vises frem på en skjerm, med en enkel menylinje nederst på siden.

Cecilie Melli 

Cecilie Melli designer klær, bla. brudekjoler, og det er veldig tydelig at denne siden først og fremst har jenter som målgruppe. Navigeringen er enkel med en menylinje øverst på siden. Når man holder musepekern over menyene kommer undermenyer frem. Oppbygningen er også enkel med midtstilt hovedoverskrift, menyer og bilde. Under kan man se nyheter på siden i tre like store kolonner. Designet er moderne i forhold til typografi, og med et klart feminint fargevalg.

Circus Arnardo

Dette er altså siden til Circus Arnardo, og på denne siden er det mye lyd og bevegelse! Det er også mye farger, og artige illustrasjoner, og det er tydelig at siden i hovedsak har barn i målgruppen. Navigasjonen foregår ved hjelp av en enkel meny øverst på siden. Det er ikke mye info på siden, men man kan hvertfall se reiseruten og bestille billetter, som jo er det viktigste. Lyden synes jeg ble litt i overkant her, og jeg skvatt skikkelig til da jeg gikk inn på siden. Her var det både høye flylyder og brøl fra elefanter, og jeg prøvde desperat å slå av lyden fortest mulig.

Bambus 

Bambus er to studentbedrifter som leverer tjenester innen grafisk design, opplæring, fotografering osv. Siden er meget enkel, med kun tre kategorier; Om oss, portefølje og kontakt. Siden er bygget opp basert på et nett av firkanter i ulike farger som er plassert midt på siden. Både menyene og porteføljen er plassert på disse firkantene. Stilig og enkelt design, selvom jeg ikke umiddelbart forsto hva siden dreide seg om.

JC Photography 

Denne siden tilhører en fotograf bosatt i Paris. Navigeringen består stort sett av på scrolle nedover for å se på fotografier, i tillegg til linker til andre sider der man kan se flere arbeider av fotografen. Oppbygningen er gjort slik at bildene kommer i sentrum, plassert i en bred midtstilt kolonne. På hver side er den en mindre kolonne med informasjon og linker.

Uke 17 Oppg. 1.3: CSS – Font og farger

I denne oppgaven skulle vi style tekstelementene fra forrige oppgave.

CSS-koden:

Resultatet:

Jeg opplever at det går helt fint å bruke notepad til utarbeidelse av nettsiden. Nå har jeg ikke noe særlig erfaring med Adobe Dreamweaver, men jeg tror det kan være et bedre program å bruke i forhold til å holde oversikt, særlig når man skal utarbeide mer kompliserte nettsteder.

Siden jeg har laget nå er jo ikke akkurat så pen og gjennomtenkt, men jeg synes det er moro å se hvordan man kan style siden ved bruk av CSS, og det blir spennende å bruke dette i Oblig 06. Jeg ser at det er viktig å tilegne seg mest mulig kunnskap i forhold til den tekniske delen, om man skal ha mest mulig frihet til å utføre designet på den måten man vil.

Uke 17 Oppg. 1.2: Head og body

I denne oppgaven skulle vi ta utgangspunkt i index-filen fra forrige oppgave. Innholdet skulle så deles opp i head og body, det skulle legges inn tittel og det skulle linkes til en CSS-fil. CSS-filen skal jobbes med i neste oppgave, og er derfor foreløpig tom. De fleste av disse tingene hadde jeg på plass i forrige oppgave, men jeg har nå også linket til denne CSS-filen.