Front-end design – Utkast 2

Da har vi (Karina, Øystein, Magnus) tatt til oss kritikk og feedback på vårt førsteutkast, og brukt disse tilbakemeldingene til å forbedre vårt produkt.

Vi har dermed kommet frem til ett andreutkast som ser slik ut.

forside

Her har jeg endret på ganske mye. Jeg har laget en splitter ny logo (med den gamle som inspirasjon) hvorav jeg har valgt å la triangelene representere de forskjellige spesialiseringene man kan velge på MID. På venstre triangel ser vi en person som opererer ett kamera for å representere flerkamera produksjon. Og på høyresiden ser vi ett grafisk element jeg selv har laget i sammenheng med en designoppgave på visuell kommunikasjon. Trekanten i midten representerer web-design med sitt enkle og stilrene design i samsvar med nettsidens fargeprofil.

 

Videre har vi gjort noen endringer på menyene, samt byttet ut ikonene til de sosiale mediene med ett flatere design for å opprettholde stilen på resten av siden.

Vi har også valgt å erstatte innholdet på forsiden som tidligere var en velkomst tekst, med ett bilde som reprsenterer MID, samtidig som vi tenker at vi kan lage rom til ett godt sitat i sammenheng med bildet. Vi har også vurdert muligheten for å ha en form for slideshow med bilder fra MID på forsiden.

Dette er de endringene vi har gjort til andreutkastet på forsiden. Vi jobber nå med å ferdigstille produktet til det endelige utkastet.

Her er det verdt å nevne at vi jobbet i en gruppe på 3, men med 3 undersider fordelte vi det slik at vi lagde en underside hver. Dette er dermed mitt bidrag til andreutkastet.

Magnus Hope // 15.10.2014

Arbeidskrav 2 – Til onsdag 24.09 – Accessibility

Dette arbeidskravet handler om “Accessibility“. Accessibility betyr direkte oversatt tilgjengelighet. Dette betyr at jeg skal vurdere hvor tilgjengelig en nettside er for “alle”.

Nettsiden jeg har valgt å vurdere er http://www.nordea.no/

Jeg mener at Nordea er en dårlig nettside. Jeg syntes at den har ett dårlig oppsett, ett mindre bra design, og jeg mener at nettsiden ikke er veldig tilgjengelig.

Det første jeg ønsker å se på er oppsettet. Oppsettet til nordea’s nettside er rotete, usystematisk, og full av informasjon man ikke trenger. Det er noe som heter 80-20 regelen. Og den heter at 80% av brukerne bare er ute etter 20% av en nettside. Når man først kommer inn på denne nettsiden får man tilgang til hele 100% og dette kan være veldig forvirrende.

En direkte konsekvens av å ha så mye informasjon på forsiden er at det blir mye informasjon, og dermed er informasjonen forminsket for å få plass til alt. Dette gjør at det meste av informasjon som ligger på forsiden har liten skrift og er dermed helt uleselig for de som er svaksynte. Dette er klart negativt da dette gjør det vanskelig for en veldig stor brukerbase å få god utnyttelse av nettsiden.

Dette vises ekstremt godt når du holder over en av drop-down menyene og du svømmer plutselig i ett hav av undermenyer med liten skrift.

Av personlig erfaring vil jeg tørre å påstå at veldig mange går inn på nettsiden til en bank for å finne bankens telefon nummer. Dette fordi mange foretrekker en ekte kundebehandler, fremfor å kave seg gjennom en nettside med alt for mye informasjon. Men! På denne nettsiden må man helt ned på bunnen av nettsiden og lete blant den MINSTE skriften for å finne nummeret til sentralbordet. Det virker nesten som at nordea ikke ønsker telefoner, siden nummeret er så godt gjemt. Knappen som indikerer “chat med oss” er også litt utydelig plassert.

I tillegg til dette er det alt for mye som skjer på nettsiden, det er for mange informasjons bokser, for mange bilder, og alt for mye tekst. Siden er rett og slett så rotete at når du endelig klarer å orientere deg, så har du glemt hvorfor du besøkte nettsiden til å begynne med.

På nettsider i Norge er det satt ett krav til hvor tilrettelagt nettsider skal være ovenfor de med spesielle behov. Her skal vi dekke over noen av de vanligste hemmelsene i norge, og se hvordan de ville klart seg på nordea sin nettside, deretter hvordan man eventuelt kunne tilrettelagt nettsiden på en bedre måte.

Svaksynt

De med svaksynthet vil med en gang slite på nordea sine nettsider. Nettsiden har svake kontraster og unaturlig liten skriftstørrelse på navigeringsmenyen. Dessuten er menyoppsettet rotete og innholdet veldig lite. Her vil jeg dermed gjøre menyen enklere oppsatt og større, økt skriftstørrelse på alt. I tillegg vil jeg gjøre det enklere å zoome inn på ulike elementer på nettsiden. Dette vil gjøre det enklere for svaksynte å navigere siden.

Hørselhemming

Nettsiden tar ikke så mye hensyn til hørselshemmende, men det er det heller ikke så veldig stort behov for, da det ikke er noen lydelementer på nettsiden. Eneste hørselshemmede vil kunne slite med er å få kundehjelp via telefon, men for å kontre dette har nettsiden en chatte-funksjon hvor man kan chatte med en kunderådgiver.

Epilepsi

For de som har problemer med epileptiske anfall er det greit å unngå nettsiden som har mange blinkende elementer som kan i værste tilfelle utløse et anfall. Dette trengs ikke bekymres over på denne nettsiden da det er veldig få farger, og ingen animasjoner eller andre elementer som kan finne på å utløse et anfall.

Redusert bevegelighet i armer/fingre

Dette er ett veldig vanlig problem spesielt hos eldre. For å ha en løsning mot dette trenger nettsiden menyer som er lettere å navigere, slik at om man sitter på ett nettbrett eller en telefon, eller om man sitter med en datamus. Her vil jeg flytte elementer lenger fra hverandre, slik at man ikke risikerer å bomme på menyen å treffe ett annet alternativ enn det man sikter på, men samtidig sørge for at menyene er store og enkle å treffe. Her er luft løsningen.

Mine løsninger til nettsiden er dermed ganske enkle men effektive.

- Større tekst

- Tydligere og mer ryddige menyer (og kutte ut den unødvendige menyen på toppen)

- Mindre informasjon på forsiden

- Mer fokus på visuell informasjon/illustrasjoner, og mindre tekst

- Lett tilgjengelig telefon nummer på forsiden

- Tydeligere designprofil gjennom hele nettsiden

- Tydelige lenker til sosiale medier

 

Dette vil nemlig øke lesbarheten på nettsiden, og økt luft vil gjøre det lettere å navigere. Det vil også gjøre det enklere å finne frem til den viktige informasjonen på nettsiden, samtidig som det ikke går på bekostning av muligheten til å finne de mer utradisjonelle valgene som kanskje ikke alle som besøker nettsiden er ute etter.

Under finner du en visuell framstilling som gir en generell idé i hvilken retning jeg ville tatt nettsiden. Selvsagt er dette en veldig enkel og simpel idé, men jeg føler at dette er den riktige retningen som nettsiden burde bevege seg i for å få bedre tilgjengelighet.

Arbeidskrav2Accesibility (2)

 

 

Arbeidskrav 1 – MID128, God/Dårlig design

I dette arbeidskravet har vi fått beskjed om å vise til eksempler hvor det forekommer gode og dårlige design. Samt gi en kort forklaring på hvorfor designet er godt eller eventuelt dårlig.

Godt design

http://www.apple.com/ Apple

Apple er verdenskjent for sine enkle, minimalistiske og ikke minst futuristiske design. Apple har laget en egen merkevare med å ta i bruk simple og stilrene produkt, ofte i helt hvitt.

Jeg valgte apple fordi jeg mener at de er ett utmerket godt eksempel på hvordan man foretar seg ett godt design. Apple har en veldig distinkt designprofil, en så distinkt designprofil at helt enkle særpreg som hvite overflater og minimalistiske logoer kan skape assosiasjoner til apple med en gang.

Man kan si hva man vil om apple sine produkter, men dette er design og markedsføring på verdensklassenivå, hvor hver minste detalj er nøye uttenkt. Man kan begynne med å ta for seg hvordan hvert enkelt produkt har ett tema som går igjen. Den veldig gjenkjennelige og futuristiske hvite fargen som dekker de fleste av apple produkters overflate ser simpelt men samtidig stilrent ut. Så har du også den gjenkjennelige logoen som har blitt ett ikon for å være hipp og stilig i hele det nye årtusenet. Helt siden tidlig på totusentallet har apple etablert seg med en mengde produkter, alle som fronter denne velrenommerte logoen. Helt fra det ble populært med den for-evig legendariske iPod’en som senere ble oppgradert jevnlig med iPod mini, nano, o.l. Etter hvert kom også macbooken som virkelig satte apple på kartet produktet spredde seg som ild i tørt gress. Nå til dags er iphone allemannseie og annenhver student (om ikke mer) har en egen macbook pro. Dette er ett resultat av god markedsføring, en meget gjennomført designprofil og selfølgelig produkter som fungerer til det de er ment.

Jeg tror at en av grunnene til at apple har valgt å gå for en slik enkel men stilren designprofil er fordi at apple ønsker å formidle at produktene deres er enkle å lære, og enkle å komme inn i. De ønsker å ta ett steg fra operativsystemer som linux og windows som til en viss grad (hvertfall før) har vært betydelig mer kompliserte. Dermed vil med dette apple innføre ett produkt som mannen (og kvinnen) i gata lett kan plukke opp. Plug and play! Det er nettop dette jeg tror startet som målgruppen til apple, og kanskje til en viss grad enda. Nemlig de som ikke vil sette seg inn i det “kompliserte windows” (satt på spissen) og dermed heller vil ta i bruk apple som er enklere å lære og bruke. Men jeg tør argumentere for at målgruppen gradvis har endret seg til ett yngre medium med inngangen av iPod’s og iPhones, så har apple blitt ett såkalt “hype” merke hvor det er kult å bare eie ett produkt av apple. Dermed har det blitt en trend at unge får seg macbook, iphone, ipad’s osv. Så jeg vil si at målgruppen har endret seg over tid til å sikte mot ikke minst ett bredere spekter, men også kanskje ett yngre!

Her skal det også nevnes at apple har valgt en veldig delikat og stilren font som matcher det simple men elegante designet. Her har apple valgt å gå for en font uten seriffer da dette gir ett mer moderne inntrykk enn en font med seriffer. Denne fonten er også veldig enkel, simplistisk og lett å lese. Dette passer utmerket til designprofilen som apple har valgt å gå for, hvor de velger å fremheve den elegante og stilrene siden med produktet.

Denne designprofilen er noe av det første man legger merke til når man besøker nettsiden til Apple som du finner en link til over. I tillegg til at designet er veldig distinkt, har en utrolig god designprofil, er det også simpelt og enkelt å navigere. Menyene er tydelig oppsatt, og når du først besøker nettsiden er det få til ingen distraksjoner som tar vekk fokus fra nettsidens viktige funksjoner. Dermed syntes jeg at nettsiden fungerer utmerket bra til sitt formål. Det fremmer apple sin allerede utrolig sterke designprofil, samt er den veldig enkel å navigere og føles veldig behagelig å surfe.

 

Dårlig design

http://www.vg.no/ VG.no, Norges største nettavis

Dette var kanskje ett utradisjonelt og skummelt valg. Men her er begrunnelsen min. Jeg syntes at VG er en rotete nettside. Dersom du skal inn på VG for første gang vil du bli overveldet med all mulig ubrukelig informasjon, det er reklame banneret overalt og nettsiden eier ikke hierarki. Dette trekker fokus vekk fra nyhetsartikler og nyhetsartiklene har rotete oppsett uten mål og mening, og menyene er kjedelig, dvask og alt for statisk. Hvis du holder over menyalternativer på VG er det ikke engang noe som tilsier at det er en link du holder over.

Sammenligned med andre internasjonale aviser har ikke VG mye å skryte med. Oppsettet er rotete, uviktige elementer tar opp alt for mye av nettsiden. Jeg syntes at hovedgrunnen til at VG sin nettside blir klumpete og rotete er fordi at det er tatt i bruk alt for lite luft på nettsiden. Elementer ligger så tett opp i hverandre at de nesten overlapper, dette gjør det travelt for øynene å prøve å finne ut hvordan man navigerer på siden, da blikket ikke vet hvor det skal legge seg. Hierarkiet på nettsiden fungerer dermed dårlig. Jeg syntes også at noen av artiklene blir alt for dominerende, det er klart at når det skjer noe sensasjonelt skal dette være lett tilgjengelig på nettsiden, men de store nyhetssakene på VG dekker 90% av skjermen. Dette gir inntrykk av at VG er en tabloidavis som kun er interessert i å få flest mulig “klikk” på sine mest sensasjonelle artikler, fremfor å faktisk informere leserene med ett bredt spekter av nyheter.

Fontvalgene til VG er også noe rotete, da det er en tommelfinger-regel at fonter uten seriffer gir bedre lesbarhet på skjerm, da fontstørrelsen er relativt liten, og seriffene fort kan bli klumpete og krangle om oppmerksomheten på pixlene. Likevel velger VG å bruke en font med seriffer på nesten alle artiklene sine.

Hvis du sammenligner med de aller fleste store aviser vil du se at det nærmest er normen å bruke font uten seriffer på nett, tilogmed hos nettaviser. Dette får meg til å tvile på hele designet til nettsiden da det ikke virker som at den er nøye gjennomtenkt. Jeg vil gjerne se mer luft, tydligere designprofil, ryddigere oppsett og mye bedre lesbarhet på hele nettsiden.

Dog syntes jeg at VG’s nyere oppsett utdanker det gamle milevis, men dette er bare fordi at det gamle designet til VG’s nettsider var tilnærmet ubrukelig per dags standard.

Designet minner rett og slett om en gammel blogg til en fjorten år gammel pike som nettop har funnet ut at hun kan tjene penger på dynamiske reklameannonser.

Med dette vil jeg også peke ut at jeg er en aktiv bruker av VG.no, og setter stor pris på artiklene nettsiden har å tilby. Jeg setter bare ikke like stor pris på designet.

Peace out :) // Magnus

MID 128 – Oppgave 1

1.

Formålet med HTML er å kunne sette opp informasjon gjennom en nettside via koder. Dette dekker alt fra tekstbokser, til menyer og bilder.

HTML5 skiller seg fra tidligere versjoner ved at den har bedre støtte for mobiltjenester og nyere nettlesere. De bedrer også brukervennlighet, simplisitet og utseende. Ett av hovedmålene med HTML5 er å minimuere bruken av webapplikasjoner som Adobe Flash.

 

2.

Her finner du en øvingsoppgave der jeg demonstrerer enkel bruk av HTML5 for å strukturere informasjon ved hjelp av div-bokser og lists funksjonen.

http://minerva.hivolda.no/~magnusho/MID128/%C3%98vingsoppgave/%C3%B8vingsoppgave1.html

 

 

Bloggoppgave Mediedidaktikk

Vi elever som går MID linjen på høyskolen i Volda skal iløpet av en av de følgende ukende bli utplassert på diverse barneskoler for å hjelpe til med å lære den yngre generasjon om digital danning.

Her blir vi fordelt inn i forskjellige grupper.

- Digital fortelling

- Film

- Lyd

- Web

- Design

 

I disse gruppene skal vi gjennomføre ett prosjekt med barneskole elevene hvor de blir fordelt inn i ulike arbeidsroller og skal samarbeide om å danne ett medieprodukt med hjelp fra oss MID studenter.

I dette blogg innlegget skulle vi ta utgangspunkt i noen fiksjonelle men realistiske scenarioer som kan forekomme i utplasseringsuken. Deretter skal vi reflektere over situasjonen for å finne ut hva som må gjøres for at oppgaven skal gi optimal læring for elevene.

Jeg har valgt å ta utgangspunkt i oppgave 1 – Filmgruppa. Dette fordi jeg syntes dette er den mest krevende situasjonen, da vi har gutter og jenter på samme gruppe, som tilsynelatende ønsker to forskjellige ting. Her skal vi se på mulige oppgaveløsninger som kan gjøre dette enklere for alle involvert. Men først skal vi sette oss noen mål.

Målet med denne oppgaven er ikke å lage ett medieprodukt. Målet er å lære barneskole elevene digital danning og samarbeidsevne. Ett mål jeg har satt meg er også å prøve å vise de hvordan filmproduksjon kan være morro. Det er tross alt barneskole elever vi skal ha med å gjøre, så oppgaven må være gøy, hvis ikke dabber interessen totalt av.

Hvordan skal denne oppgaven løses?

Det viktigste først. Jeg vil snakke med elevene om hvordan samarbeid er viktig, og forklare at om alle samarbeider blir det mye kjekkere for alle involvert, og jeg skal garantere de at om de samarbeider med hverandre vil alle være fornøyd med resultatet på slutten.

Slik jeg ser det er det veldig viktig å ha klare regler og retningslinjer om dette skal fungere. Først og fremst vil jeg selv være produsent og selvutnevnt eneveldig sjef på filmteamet, slik at jeg har det siste ordet og kan fordele arbeidsoppgaver. På filmteamet vårt trenger vi forskjellige roller. Avhengig av hvor kompleks oppgaven er fordeler jeg arbeidsoppgavene på elevene, og plasser meg selv der jeg ser at det er effektivt. Jeg vil ikke risikere å gi en kjedelig arbeidsoppgave til en elev, slik at de blir skuffet. Optmalt sett skal alle elevene ha det kjekt, og jeg vil ta på meg de “kjedlige” arbeidsoppgavene selv.

Slik jeg ser det er det her man unngår katastrofen. Dersom alle er fornøyde med sin arbeidsoppgave vil man få en mye mer problemfri prosjektuke. Her gjelder det å høre etter hva hver enkelt elev er komfortabel med, å prøve å fordele rettferdig, men også å fremstille alle arbeidsoppgavene på en gøy måte. Her er det definetivt lov å ansette flere “sjefer”, hehe.

Deretter er det viktig å prøve å ha en åpen kommunikasjon med elevene å sørge for at alle blir hørt. Skape kompromisser som gjør at begge føler at de kommer gjennom. Hovedsaklig tror jeg at om man sørger for at elevene har det kjekt, og sørger for at de føler at de er med på noe viktig, så skal det gå greit.

 

Magnus Hope // 04.03.2014

Øvingsoppgave 5 – Lydteori

Øvingsoppgaver i Lydteori til 06. Februar 2014.

 

  1. Hva er samplingsfrekvens og bitrate, og hvorfor må du kjenne til disse begrepene?
    Samplingsfrekvens er hvor mange ganger i sekundet lydbildet oppdaterer seg.
    Bitrate definerer hvor mye informasjon som behandles per tidsenhet (sekund/minutt o.l)
    Vi trenger disse for å kunne manipulere lyd på riktig måte.

  2. Nevn to utbredte lydformat med ulikt bruksområde. Hvilke egenskaper særpreger disse?
    MP3 (Komprimert format, liten størrelse, men lydkvalitet deretter.)
    WAV (Ukomprimert format, direkte kopi av lydkilden. Stor størrelse men god kvalitet).

  3. Hvordan oppretter og sletter du lydspor i Audition?
    Du gjør det via menyen. Du kan bruke import knappen for å importere lyder. Veldig simpelt.

  4. Hva er forskjellen på et mono- og et stereoopptak? Hva skal du velge når du gjør opptak av én lydkilde med én mikrofon kontra to mikrofoner kontra tre mikrofoner?
    Stereo opptak tar opp lyd med bruk av to uavhengige lydkanaler, imotsetning til mono opptak som bare bruker en lydkanal. Stereo har omtrent tatt mono fullstendig grunnet kvalitetsforskjellen.

  5. I hver «kanalstripe» (lydspor) finner vi solo- og mute-funksjonene. Hva bruker vi disse til?
    Vi kan bruke Solo fuknsjonen i Audition til å kun høre det valgte sporet. Vi kan bruke Mute funksjonen for å kun høre de resterende sporene.

  6. Hvilke tastatursnarveier (eng: keyboard shortcuts) vil du anbefale medstudentene dine å lære seg når de skal behandle lyd i Audition?
    MAC: CMD+C = Copy, CMD+V = Paste, CMD+G = Group, SHIFT+CMD+G = Ungroup.

  7. Hvordan zoomer du inn og ut i Audition? Har denne funksjonen noen tastatursnarvei?
    Du kan bruke knappene som er symbolisert med ett forstørrelsesglass på menyen, eller du kan gjøre som alle andre i hele verden å bruke datamusen/touch-paden.

  8. Hva er forskjellen på «Edit View», «Multitrack View» og «CD View» i Audition?
    Edit view er til å gjøre endringer på spesifikke klipp. Multitrack view er for å koordinere flere klipp i sammenheng med hverandre. Jeg har ikke brukt CD View.

  9. Hva er krysstoning (eng: crossfade) godt for? Hvordan gjøres det i Audition? Hvordan skiller krysstoning seg fra inn- og uttoning (eng: fade-ins, fade-outs)?
    Krysstoning, også kjent som crossfading er godt for å gjøre overganger fra ett lydspor over til ett annet mer smooth fordi at de overlapper hverandre. Fade ins og fade outs gjør overgangene helt stille før det neste begynner.

  10. Hva menes med at et lydsignal «klipper» eller «vrenger» (eng: peaks)? Hvordan kan du forhindre slik «klipping»?
    Dette betyr at lydsporet overstiger lyden til kilden som tar den opp eller som presenterer den. Dette skaper forvrengte og robotaktige lyder som er veldig fæle å høre på.

 

Magnus Hope // Isabel Drevik

Digital fortelling

I Medieteori hos Ivar John fikk vi denne gang i oppgave å lage en digital fortelling. Her skulle vi bruke bilder i samarbeid med Lyd for å lage en “sammensatt tekst” som skal formidle ett budskap.

Med forhåndsbestemt tema “Sosiale Medier” og “Personlig fortelling” landet jeg på å fortelle om egne erfaringer med sosiale medier.

Sjekk youtube link under.

https://www.youtube.com/watch?v=kiI4zyJPHsc&feature=autoshare

Øvingsoppgaver, Lyd

Oppgave 1.

Her fikk vi i oppgave å laste ned ett gratis lydspor, for så å fade musikken inn og ut, før vi videre skulle konvertere musikken til MP3 format med 128 mbit/s bitrate.

Oppgave 2.

Her fikk vi i oppgave å foreta en form for stemme opptak. Her leser jeg et utsnitt av et eventyr av H.C Andersen. Videre fikk vi beskjed om å også konvertere denne filen om til MP3 format med 128 mbit/s bitrate.

Oppgave 3.

Her fikk vi i oppgave å sette sammen de to forrige filene til én sammensatt fil hvor vi justerer lydvolumet til ett komfortabelt nivå der stemmene ikke drukner i lydeffektene. Også i MP3 format med 128Mbit/s bitrate.