Vi har fire typer navigasjon:

Direkte navigasjon:

Brukeren skriver søkeordet direkte til et nettsted ved å skrive det inn i nettleserens addressefelt, og legger til .com, .org, .no etc.  Det bringer brukeren direkte til nettsiden.

Søkbar navigasjon:

Bruker skriver det hun søker etter i et søkbart felt på nettsiden.  Hun får da treff kun på sider som tilhører nettstedet.

Linær navigasjon:¨

Bruker navigerer seg gjennom nettstedets sider  i en rekkefølge som er bestemt av nettstedets utvikler.

Tab navigasjon:

Et bilde, en tekst eller ikon etc som er linket til andre sider enten innen nettsttedet eller til andre nettsteder.

I tillegg kan vi dele inn navigasjon i tre typer: Global, lokal og contextual navigasjon.

Global navigasjon er oftest tab navigasjon og viser hva nettsiden inneholder med linker til T2 sider.

Lokal navigasjon viser brukeren hvor hun kan gå innenfor den valgte kategorien.

Contextual navigasjon hjelper brukeren å navigere i innholdet på den siden hun er på.

God navigasjon betyr at vi klarer å guide brukeren til rett sted.   Tips som gir god navigasjon:

Logo på samme sted på alle sidene.

Utheving av menyvalget slik at brukeren hele tiden vet hvilken side hun er på.

Brødsmule sti som viser hvor brukeren befinner seg i navigasjonshierarkiet.

Ha en beskrivende tittel slik at brukeren vet hva siden inneholder

I denne oppgaven skulle vi bruke nettstedene fra research oppgaven og beskrive hva slags navigasjon de har:

 

http://www.wspa-international.org/

Har søkbar navigasjon på alle sidene.  Plassert øverst til høyre

Har brødsmule sti

Har tab navigasjon i form av bilder og tekst som leder til andre sider innen nettstedet

Har logo plassert øverst til venstre på alle sider

Har en beskrivende tittel på sidene

Har uthevet i svart i brødsmulestien  og den lokale navbaren i venstre kolonne, som viser hvilken side brukeren er på

Global navigasjon horisontalt øverst, lokal navigasjon i venstre kolonne

http://www.matoppskrift.no/

Har søkbar navigasjon plassert centert øverst og integrert i headingen.

Litt forvirrende brødsmulesti som istedenfor å vise hvilken side brukeren kommer til, viser hovedside:resultat av søk.

Har dropdown meny for hver link i den globale navbaren som er plassert horisontalt under headingen. Dropdown menyen viser både T2 og T3 valg. Dvs at en ny dropdownmeny åpnes når en av T2 linkene blir klikket på.

Siden har tab navigasjon i form av klikkbare bilder og tekst

Har ikke så gode beskrivende tittler på sidene, men har en ny boks for utvidet søk øverst på sidene.

Har lokal navigasjon i venstre kolonne.  Ny dropdown meny åpnes når de blir klikket på, til sider i neste nivå.

http://www.seduce.no/

Har søkbar navigasjon, lineær navigasjon og  tab navigasjon.

Både global og lokal navigasjon i venstre kolonne

Har brødsmule sti, men ingen utheving av siden i den. Har utheving av siden i den lokale navbaren.

Har ingen beskrivende tittel på sidene, men har heller ikke behov for det, i og med at det er en salgsside og bilder av produktene viser innholdet av siden.

http://www.realestate.com.au/buy

Har søkbar navigasjon og tab navigasjon

Har global navbar horisontalt og lokal nav. I venste kolonne.

Likevel virker siden rotete og det er vanskelig å navigere gjennom sidene.  Tab navigsjonen tar brukeren til andre nettsteder.

Det er ingen tydelig og beskrivende tittel på sidene.  Har stort utvidet søkefelt øverst på sidene.

Ingen brødsmulesti

http://www.petsathome.com/

Siten har global navigasjon i to rader over  i form av tekst linker og under i form av navbar knapper.  Hver knapp har en dropdown meny.

Nettstedet har en brødsmulesti og en lokal navigasjon i venstre kolonne.

Hver side har en beskrivende tilttel som forteller om innholdet på sidene.

Logo er plassert på samme stedet og contakt me linken er godt synlig i øverste link rad.

Siten har søkbar navigasjon

http://www.buy.com/

Hovedsiden har ingen markert global eller lokal navigasjon og virker noe rotete i øverste halvdel.  Lenger nede på siden er det et stort felt med tab navigasjon i form av kategorier til de forskjellige produktene.

Lokal navbar i venstre kolonne på undersidene.

Søkbar navigasjon øverst på siden

Beskrivende overskrift på kategori sidene

Utvidet søke mulighet på produkt sidene

Logo på samme sted.

Ingen brødsmule sti

http://www.polymerclaycentral.com/

Veldig rotete hovedside.

Har søkbar navigasjon og global navigsjon i venstre kolonne

Tab navigasjon  i form av tekst

Vanskelig å se hva som er logo på grunn av rotete hovedside

Ingen brødsmulesti

Har link til hovedsiden nederst på alle sidene.

Har beskrivende tittel på alle sidene.

http://www.oswd.org/

Har lineær og tab navigasjon men ingen søkbar navigasjon

Global og lokal navigasjon i venstre kolonne.

Logo på samme sted

Ingen brødsmulesti, men har ikke så mange nivåer at det trengs.

Ingen beskrivende tittel på sidene, men har bilder av produktene

Advertisements

I denne oppgaven skulle vi lage sitemaps over 3 av de nettstedene vi fant i research oppgaven tidligere i uken.  Jeg har laget sitemapene i Freemind, et av programmene vi fikk anbefalt fra skolen.  Ved første øyekast så det veldig komplisert ut, men jeg fikk det til til slutt.  Det var en tidskrevende oppgave, men ga meg god innsikt i hvordan nettstedene var bygget opp i forskjellige nivåer.

WSPA:

OSWD.org

 

Secuce.no

I denne oppgaven skulle vi ta tre av de nettsttedene vi fant i forrige oppgave og definere hva som er nettstedets byggeklosser og elementer.  Vi skulle lage en wireframe illustrasjon som viser hovedsidens byggeklosser.

1.  WSPA

2. matoppskrift.no

3.  seduce.no

 

I denne oppgaven skulle vi finne 10 nettsteder som er ulike i :

Innhold: nettstedets budskap og innhold i forhold til det.

Navigasjon:  Hvordan klikker de seg rundt på sidene

Oppbygging/design:  Hvordan siden er bygget opp med tanke på design (wireframe)

1. www.wspa-international.org/

Innhold/budskap:  WSPA står for World Sosciety for Protecting Animals, og er en nettside der det jobbes for å redde dyr i nød.  Budskapet kommer tydelig frem med både bilder og tekst, samt oppfrodringer til å donere penger eller delta på underskrifts kampanjer i land der dyr er lite verdsatt.

Navigasjon:  Det er plassert en navigasjons bar i venstre kolonne, med links til de andre sidene på nettstedet.  Det er i tillegg plassert et søke felt i høyre kolonne, der man kan søke innen nettstedet.  I tillegg er det linker til administrasjons sider helt øverst over logo feltet og nederst i footeren.

Oppbygging/design:  Nettsiden er enkelt oppbygget med tre vertikale kolonner, horisontal header og footer.  Fargene er holdt i lyse grått og alle viktige “knapper”, samt header er i orange.  Det gjør det lett å finne det man søker.

www.matoppskrift.no/

Innhold/budskap: Dette er en nettside med matoppskrifter, og det kommer tydelig frem gjennom bilder og tekst.

Navigasjon:  Siden har navigasons knappene horisontalt under header feltet.  Når man kommer til en ny side, får man en navbar i venstre kolonne der man kan klikke seg videre til neste level.  Siden har både intern søke felt og Google søke felt.

Oppbygging/design:  Det er ikke så lett å se hvor mange kolonner nettstedet har, da det varierer noe fra side til side.  Når man kommer til oppskriftene har de relativt liten plass på venstre side, mens mye reklame og linker til andre ting opptar mye av resten av siden.  På forsiden er også reklame dominerende, med et bredt reklamefelt plassert over heading feltet og også i høyre kolonnen.  Logoen er tydelig og plassert på venstre side av heading feltet.  Bakgrunnsfargen er hvit og tekst samt nav bar knappene er farget, noe som gir et rent intrykk.

www.seduce.no

Innhold/budskap:  Seduce selger klær og ascessories.  Dette kommer tydelig frem med både bilder og tekst.

Navigasjon: Siden har en oversiktlig hovedside med navigasjonsbar i venstre kolonne.  Alle bildene er til å klikke på og delt inn i hoved kategorier. Dette er gjennomført gjennom hele nettsiden.   Den har et søkefelt for interne søk.  videre har den lett oversiktlig link til handlekurv i venstre side av heading feltet.

Oppgygging/design: Nettstedet har en gjennomført struktur som er ryddig og oversiktlig.  Bildene er tydelige og hovedsiden har sterke farger.  Det består av 5 kolonner totalt. På produkt sidene er igjen navbaren i venstre kolonnen. De neste 4 kolonnene har bilder av produktene.  På hodedsiden er hoved delen slått sammen i et felt med horisontale skiller på produkt bilder/bilde linker.  Logoen er plassert i headingens venstre side.

www.realestate.com.au/buy

Innhold/budskap:  Jeg må innrømme at jeg ikke er helt sikker på budskapet på denne nettsiden.  url henviser til realestate, men jeg har mer følelse at det er et slags directory for realestate.

Navigasjon:  Nettstedets hovedside har en navigasjonsbar med knapper rett under heading feltet.  Det er videre en navigasjonsbar i venstre kolonne, samt tekst linker i øvre og nedre delen av header feltet.  Bilder og tekst i innholds feltet i midten er klikkbare, men fører noen ganger til andre nettsteder og noen ganger underliggende sider i nettstedet.  Det er søkemoterer flere steder, både på hovedsiden og når du klikker på linker.

Oppbygging/design:  Hovedsiden har et horisontal heading felt øverst, deretter et veldig bredt søkefelt, der man kan spesifisere hva man leter etter.  Resten av siden er delt inn i en venstre kolonne med navbar og informasjon, et tekstfelt i midten, der hoved innholdet er og en bred høyre kolonne for reklame.

www.hasbro.com/littlepetshop/en_us/

Innhold/budskap:  Det er ingen tvil overhodet om at dette er en nettside med leker/ting for barn.  Den er fargerik og har illustrasjoner av figurene/lekene, samt video snutter fra spill og video med musikk.

Navigasjon:  Siden har en navigasjons bar med knapper øverst i headingen.  Den har også linker til video, leker eller spill litt lenger nede på siden, og så et felt til med navigasjonsknapper nesten nederst.  Likevel føler jeg at det var vanskelig å finne frem, og at man må vite hva man er på jakt etter på denne siden.

Oppbygging/design:  På grunn av et urolig design syntes jeg ikke det var så lett å se hvordan byggeklossene er satt sammen.  Det virker som om den er bygget opp med flere horisontale lag, der noen av dem igjen er delt inn i små kolonner.

www.petsathome.com

Innhold/budskap:  Dette er en nettside som selger ting og tang til kjæledyr.  Da det er foto av dyr over hele forsiden, levner det ingen tvil om hva denne siden vil formidle.

Navigasjon: Siden har en horisontal navbar øverst rett under heading feltet.  Knappene skifter farge når man klikker på dem, og det kommer opp en dropdown meny med underliggende sider som tilhører den enkelte knappen.  Videre er det klikkbare linker på alle bilder og bokser på hoved siden.  Når du kommer til en ny side, er det en brødsmule sti øverst under headingen som forteller deg hvor du er.  Nederst i footeren, er det linker til informasjon om nettstedetm, som privacy poliscy, shipping info o.l.

Oppbygging/design: Siden er en salgsside, så produkter står i fokus på hovedsiden med gule buttons angående produkter på salg, slik at det er lett å kjøpe disse produktene.  Siden har hvit bakgrunn og navbar knapper i forskjellige farger.  På tross av alle tilbudene på hovedsiden, er det likevel et ren og tiltalende design.

www.buy.com

Innhold/budskap:  Buy er et nettsted som selger mange forskjellige produkter.  Det er mange bilder av produkter på hovedsiden, og den har et sitemap litt lenger ned på siden, der alle produktene er listet, noe som gjør det enkelt å forstå innholdet på nettstedet.

Navigasjon:  Det er plassert to horisontale navbars øverst under headingen.  I den øverste navbaren vises en dropdown meny når man klikker på knappene.  Det er i tillegg plassert en søk boks vedsiden av navbarene på høyre side. Når  du kommer inn på en ny side, ligger det en navbar på venstre side der man kan velge produkter relatert til den siden.  Enkel og grei navigasjon.

Oppbygging/design:  Designmessig likner buy.com Amazone i oppbygging.  Det er flere nivåer som etterhvert bringer deg til handlekurv og checkout.  På tross av mange produkter, virker hovedsiden ryddig og strukturert.  Den er på hvit bakgrunn og det er brukt rødt for å utheve det som er viktig for å lede kunden til å komme raskt til f.eks tilbuds varer.  Under sidene er ryddig oppbygget, med tydelige bilder av varene og enkel navigering videre.

www.fysiot.no/norwegian-physiotherapists

Innhold/budskap:  Dette er en informasjons side for Norske Fysioteraputers Forbund.  Sidene har mye tekst og lite annet å hvile øynene på enn tekst.  Siden har en stor og veldig tydelig logo, forstår man med en gang at det er en side om fysioterapi.

Navigasjon:  Det er plassert en navbar øverst på siden samt under headingen, samt en søkeboks på høyre side av heading feltet. Det er også lagt inn et brødsmule felt rett under navbaren.  Navbar knappene viser en dropdow meny når de blir klikket på.  Nå de underliggende sidene, kommer det opp en vertikal navbar i venstre kolonne med sider som er relatert til den man er på.

Oppbygging/design:  Siden har et veldig rent og enkelt design.  Den er bygget opp av heading, navbar, venstre kolonne, innholds felt og footer, og er likt bygget opp på alle sidene.  fargene er hvit, grå og lyse blå.

www.polymerclaycentral.com/

Innhold/budskap:  Dette er faktisk en av de ledende sidene på nettet om polymer clay.  Likevel syntes jeg det er litt merkelig, for den er så utrolid rotete av utseende.  Om det ikke var fordi det står Polymer clay central øverst, så kan man ikke finne ut ved første øyekast at det er en side om polymer clay.  Headingen/logoen til siden ser mer ut som en reklame boks enn en heading.

Navigasjon:  Nettstedet har navbar plassert i venstre kolonne, men den begynner ikke før under foldelinjen, noe som igjen gjør siden vanskelig å fostå.  Hoved tekst feltet har horisontale felt med klikkbar tekst, men jeg syntes at det også ser ut som reklame.  Det er også plassert en liten navbar horisontalt rett under heading feltet.

Oppbygging/design: Jeg synes dette nettstedet har et utrolig rotete og kaotisk utseende.  Selver headingen ser ut som reklame, det er plassert et reklamefelt rett over headinge også, som er med på å forsterke inntrykket.  De horisontale feltene i hoved tekst feltet ser også ut som reklame, og det er plassert mange forvirrende bokser over navbaren i venstre kolonne og i høyre kolonne.  Når man klikker seg til en annen side, endrer ofte både navbar og farger på designet seg, noe som gjør meg usikekr på om jeg fortsatt er på det samme nettstedet.  Enkelt ord er uthevet enten med store og fete bokstaver eller med en annen farge, men det er ingen helhet, da det er brukt forskjellig font fra felt til felt. Siden har klart definerte venstre og høyre kolonner, men alt annet virker sammenflytende og ustrukturert.

www.oswd.org/

Innhold/budskap:  Dette er et nettsted som designer templates for websider.  All tekst og bilder på siden referer til design, så budskapet er klart.

Navigasjon:  Linker til about us, sitematp osv er plassert helt øverst til høyre på siden.  Navbaren er plassert i venstre kolonne og forblir uforandret når man går inn på underliggende sider.  Navigasjonen er enkel og grei og lett å bruke.

Oppbygging/design:  Nettstedet har en tiltalende design der farger er brukt til å utheve enkelte ting.  Den virker ryddig og strukturert, samtidig som den er bruker vennlig.  Det er bygget opp med en venstre kolonne og et stort tekst felt som igjen er delt opp i 4 kolonner.  Siden har et heading felt, men det er ikke klart definert som horisontalt, men virker som om det består av flere elementer, og inneholder logo samt informasjon.

 

I disse to oppgavene skulle vi dele opp index.html filen i head og body element, lage en css side kalt index.css og linke den til index.html siden.

Deretter skulle vi legge inn font og farger på paragraf og header tekst elementene og teste det ut i en nettleser.

Jeg syntes det var greit å jobbe med Notepad.  Det var enkelt å se både html filen og css filen og å sjekke det ut i en nettleser, og det var enkelt å rette opp feilene med en gang.

Det å bruke id til å style siden gjorde det enkelt å lage css filen, og å få det ønskede utseende.  Å skifte font og farge på teksten og headingene var også veldig enkelt i css.  Det som var vanskelig var å finne feilen når noe ble galt.  Det var veldig lett å glemme et tegn, eller å snu <>.

Notepad var enkel å forholde seg til også fordi alle kodene/taggene fikk farge dersom de var riktige.  En annen farge betød at det var noe galt enten med den taggen eller den før/etter.

Når jeg hadde laget siden, flyttet jeg den til en annen mappe og det var ikke noe lurt. Da ble alle linkene feil og jeg måtte lage dem på nytt.  Så jeg forstår viktigheten av å ha alt på et sted og i riktige mapper.  Det å være strukturert og ryddig er viktig.  Det å bruke css gjør det mulig å lage en nettsides layout akurat hvordan man vil ha den.  Men, det er mye jobb og mange koder som må brukes både i html og css.  Det er lett å finne kodene man trenger på internet, men ikke så lett å alltid vite hvor de må skrives inn i dokumentet, så det blir mye prøving og feiling.

 

Jeg fant at det var relativt enkelt å lage denne siden.  Den største tekniske utfordringen jeg traff på var når jeg skulle ta en print screen av sidene.  Jeg har knappen på tastaturet, men den virket ikke. Brukte massevis av tid på å forsøke å finne ut hvorfor, men ga til slutt opp.  Brukte istedenfor snipping tool.

Den andre utfordringen var jo å få alt riktig. Det var veldig lett å glemme et tegn og så ble alt helt galt.

Det å følge rekkefølgen med hvilken tag som skal stå først og avsluttes først er også av og til en utfordring, men jeg har lært at de må avsluttes i motsatt rekkefølge enn de startet.  En dame sa en gang at html kan sammenliknes med å putte mange boller inni hverandre.  Du starter med de største og bollene bli mindre og mindre ettersom du putter dem oppi. Når du skal ta dem ut igjen begynner du innerst med de minste og fjerner dem en og en til du står igjen med den ytterste, største bollen.

Er nå ferdig med GRAP og har levert den.

Det har vært en utrolig lærerik opplevelse å ha eksamen på denne måten.  Det å jobbe med en kunde har vært bare positivt og veldig spennende.

Kunden min var Toves Systue som syr Øst Telemark herre bunader.  Hun hadde en utdatert brosjyre og hadde forskjellige logoer på den, på døren og på visittkortet.  Derfor ble oppgaven å lage en ny logo, en ny brosjyre og et nytt visittkort med en visuell profil som tydelig viste hva hun drev med.

Jeg fikk brukt alt vi har lært dette halvåret.  Logoen ble laget i Illustrator, brosjyren og visittkortet i Indesign og alle fotografiene ble bearbeidet i Camera RAW og photoshop.  Trykke prosessen gikk veldig greit, da den foregikk digitalt, og det beste av alt er at kunden bestilte 200 brosjyrer og 200 visittkort.

Og her er produktene:

Logo:

Visittkort:

 

 

Brosjyre:

Forside:

Side 2 og 3:

Bakside:

Ha en RIKTIG GOD JUL OG ET GODT NYTT ÅR!

Dette var en oppgave jeg virkelig likte.  Jeg synes jeg har lært mye i forhold til layout og bruk av bilder, font og farger.  Og her er resultatet:

kokebok_CMYK

 

 

Sånn, nå er GRAM levert.  Fikk zippet filene riktig, så jeg hadde ingen problemer med leveringen.  Leverte Oblig04 i går, så nå har jeg helgen fri før prosjekteksamen begynner på mandag. Å lage mappen har vært moro, selv om jeg er usikker på om jeg har gjort det riktig.   Her kan du se den:

digital_portofoil

Da jeg måtte forbedre illustrasjonen og logoen en del, har jeg brukt noen dager på å lære meg photoshop bedre.  Kjøpte boken Creative Photoshop CS4 av Derek Lea, og kan absolut anbefale den.  Den tar for seg prosjekter der du lærer alt photoshop har å tilby.  Jeg vet ikke om illustrasjonen ble så mye bedre uttrykksmessig men den ble i hvertfall bedre teknisk.

Så nå er det altså levert alt sammen, både oblig 04, mappen og rapportene.  Og her er forbedringene, samt et bilde jeg laget for å blit kjent med photoshop:

Fikk bedømmelsen av illustrasjonen i går, og det var temmelig nedslående.  Rart hvordan man tror man har gjort noe bra, også er det ikke det i det hele tatt.  Og når man får det litt på avstand, så ser man det jo selv også.  Blir av den grunn litt ekstra arbeide disse to ukene, men det er jo ikke noe annet å gjøre enn å rulle opp ermene og hoppe i det.