Arbeidskrav 2 – Accessibility og universell utforming

Jeg har valgt å se på websiden http://www.visitalesund-geiranger.com/ som en side med dårlig accessibility.

Etter å ha lest punktene om universell utforming, har jeg lagt merke til detaljer som siden kunne/måtte ha endret på for å oppfylle de. 

Bilder:

Siden begynner bra med ett stort boks som viser bilder i ett slideshow, men skroller vi litt nedover dukker plutselig en hau med bilder opp plassert overalt på siden som blir distraherende. Noen av de er annonser som i tillegg blinker. De er store bilder som er blitt gjort mindre, så vi ser tette pixler som gjør bildet forstyrrende. 

Alt-teksten til bildene har liten font størrelse og svak kontrast.

Vi finner en tilknytning til facebook i venstre hjørne lenger ned på siden som er en «Facebook social plugin». Den eneste måten vi ser det på er facebook logoen og en «like» knapp. Øverst i boksen ser vi at det står «Find us on Facebook», men det må vi lete litt etter. Overskriften i boksen skaper ikke kontekst og det er så vidt logoen har fullverdig alt-tekst.

Video:

Ser vi under “Cruise” undersiden, er det helt nederst til venstre to små Youtube vinduer som skal vise en film fra Geiranger og fra Ålesund. Filmen i seg selv er grei med at det ikke er snakking der informasjonen kan være viktig, men vinduene er alt for komprimert der funksjonene er smeltet inn i hverandre. Det var vanskelig for meg og f.eks justere volum, trykke på fullscreen eller youtube ikonet som sender seeren til youtube for å se videoen, utenom å bli forstyrret. Dette vil være ett stort problem for mennesker med parkinson da det vil være vanskelig å treffe der man vil trykke. I tillegg er det vinduene så små at svaksynte vil ha problem med seg filmen. Det er mye plass under teksten til større video vindu. På en mindre flate som mobil og Ipad hadde dette vert veldig utfordrende for brukeren.

Skulle jeg hatt video på siden, og hadde det vert tale, ville jeg hatt undertekst slik at hørselshemmede kunne fått med seg det som blir sagt. 

Farge:

De har valgt en slags lys og mørkelilla bakgrunnsfarge  sammen med hvit skrift. Den er ikke så heldig siden overskriften forsvinner litt i det lyselilla. Brukere med dysleksi, vil muligens finne det i tillegg, mer vanskelig å konsentrere seg på en tekst som er mindre synelig.

Tekst og Struktur:

Teksten på siden kunne godt vert større og hatt sterkere kontrast. Strukturen forsvinner litt på siden med liten skrift og med så mye innhold på en plass.

Det hadde vert bedre med større bilder, større tekst under, og en lengre side.

Lenkene på forsiden er helt ok merket med at de skifter farge i en liten boks øverst og at det kommer en liten strek under teksten lengre ned på siden, men det er flere undersider som ikke har det. Teksten kunne godt vert større.

Siden har ganske mye innhold, og det er nav baren øverst som guider oss gjennom siden. Over nav baren er det enda en liten nav bar som leder til konferanse, cruise og fritid som er startsiden. Det er utrolig forvirrende og man kan lett rote seg bort med alle lenkene og det er lett å gi opp søket..

Med så mye innhold spredd utover kan det bli forvirrende og jeg tenker litt på brukere med dysleksi, der det hadde vert lettere for dem med mer presis og sammenhengende plassering av informasjon for å få med seg sammenhengen.

Siden er laget for å vise frem Geiranger, Ålesund og Sunnmøre. Og man kan bestille reiser eller cruise (slik jeg forstod det). Jeg hadde personlig ikke likt å bestilt noe som helst derfra siden jeg ikke forstod meg helt på siden. Jeg har laget en skisse over noe som kunne vert bedre og mer oversiktelig slik at man fikk en lett forståelse av hva siden faktisk skal handle om: 

Skisse av nettside

 

Share and Enjoy

Arbeidskrav 3 (del 2)

Tilbakemelding fra “personas”

I denne oppgaven skulle vi ta utganspunkt i det den andre gruppa sa om hva som kunne gjøres annerledes med webside-utkastet vårt. Vi fikk mange gode forslag og noterte ned det de sa. De skulle ha forskjellig personas og forklarte litt hvordan designet ville treffe dem bedre.

Vi hadde en “dyrlege” og en “fotograf” som gidde oss feedback. Jeg har laget “Portfolio” undersiden og har gått ut fra tilbakemeldingene jeg fikk fra oppdragsgiver forrige time og av personasene.

Kommentarene fra dyrlegen som appelerte til “portfolio” undersiden var: “Masse bilder på portfolien. Mer innhold! Ha slideshow av arbeidene.”, “Sosiale medier knappene trenger mer luft, føler ikke instagram. G+ kunne vi tatt med.”
Fra fotografen: “Liker godt trekantene, de burde være like. Skulle stått litt nærmere hverandre.”, “Hatt mer luft mellom underside lenkene og innholdet”, “Kanskje kutte ut sirklene”. “Smettet inn google+”. “Hatt en infoboks/newsfeed som oppdaterer seg på hva som har skjedd nylig.”

Ut i fra tilbakemeldingen fra personasene, tegnet jeg opp en skisse på hvordan jeg kunne løse det. Jeg la til flere bilder av oppdrag/jobber. Siden det var vanskelig å lage ett slideshow av ett stillbilde tenkte jeg heller at når man holder musepekeren over ett bilde så fader det nesten helt sort og en forklarende tekst kommer opp.
Jeg tok bort de tidligere buttonsene og la til nye. Kuttet ut instagram og la til G+. La også mer luft mellom arbeidene og buttons. Jeg tegnet opp en newsfeed boks som evt kunne vert der. Vi valgte å ikke ta det med siden vi følte det ble litt for ubalansert og at vi evt kunne plassert den på “Nyheter” undersiden. På portfolio skal det kun fokuserest på arbeidene våre. Vi rettet opp i trekantene slik at de ble like.

Ut i fra tilbakemelding fra oppdragsgiver (og fotografen) lagde jeg rektangler istedet for sirkler. Jeg valgte å ikke ha noe luft mellom bildene, men en brå overgang fra hvert bilde.
Vi lagde også en strek på hver side av teksten til undersidene for å vise bedre frem hvilken side man var på. 

 

IMAG0961

 

 

Sånn ble portfolio siden: 

Portfolio

(Klikk for større bilde)

Share and Enjoy

“God” design og “Dårlig” design på hjemmesider.

En side som jeg synes var enkel og fin er siden Teamtreehouse.com. Det er en side som lærer bort HTML, CSS, osv. Man kan abbonere og få tilgang til en rekke torturials. Målgruppa er for alle som vil lære seg å lage nettsider og webdesign. Designet har ikke noe spesifikt målgruppe preg. For unge voksne! Dette er da en side jeg synest har GOD design.
Link her: http://teamtreehouse.com/

Skjermbilde 2014-09-15 kl. 13.48.57

 

 

Det er videoer som forklarer detaljert og enkelt hvordan forskjellige koder fungerer i HTML og CSS. Det fungerer også som en gradningsstige hvor du gjør øvelser i slutten av hver video og får såkalte “badges” og poeng når du fullfører. 

Skjermbilde 2014-09-15 kl. 13.54.31Skjermbilde 2014-09-15 kl. 13.56.35

 

 

Skriften er behagelig å lese. Det er en slags Sans serif med runde hjørner. Den gjør seg dekorativ med at den går igjen med designet på siden.

Skjermbilde 2014-09-15 kl. 13.58.36

 

 

De har brukt forskjellige farger til å skille forskjellige kategorier. Fargene er blandet med hvitt for å få en mer roligere stemning og ikke noe som skal skrike til deg. Pastell farger som roer ned siden. 

Skjermbilde 2014-09-15 kl. 14.10.12

 

 

Navigasjonen er utrolig enkel. Når man skal se turtorials er det en egen boks til høyre som viser kategoriene og den er der til enhver tid så det er lett å gå tilbake uten og trykke på tilbake knappen elns.

Skjermbilde 2014-09-15 kl. 14.14.51

 

 

Bildebruken består av ikoner og enkle illustrasjoner, men på fremsiden er det bilder som er enkle med stor blenderåpning og en setting som virker nokså økologisk? Som kanskje er i stil med navnet dems. 

Skjermbilde 2014-09-15 kl. 13.36.39  Skjermbilde 2014-09-15 kl. 14.24.34

 

 

Det jeg synest bidrar til god design er komposisjon, riktig fargevalg (og font). Nogenlunde tenkt over og noe som ikke har blitt gjort før!

_____________________________________________________________________________________________________________________________________
En side jeg syntes hadde dårlig design er Petersbuss.se som ser ut til å være ett buss selskap eller reiseselskap som tar svansker på ferie. Det ser ut som om siden er laget for godt voksne og pensjonister. Link her: http://www.petersbuss.se/

Skjermbilde 2014-09-15 kl. 14.54.01

 

 

Skriften er ganske hultertibulter der det blir brukt forskjellige fonter, farger og størrelser, innrammet av bokser med en annen farge. Den er ikke lett å lese og man kan gå glipp av noe.

Fargevalget ser ikke ut til å være noe serlig gjennomtenkt. En egg gul boks og en oransje ish boks skaper ingen slags stemning. Variasjoner mellom blå og rød skrift på lenkene er heller ingen super idee.

Lenkene er plassert under en overskrift som er vanskelig og legge merke til. Det er ingenting som man kan navigere tilake med når man først har klikket på en link. Man må bruke tilbake knappen. Prisene er gjemt godt unna. Først etter 4-5 klikk på lenker man såvidt ser eller forstår er en lenke, kommer man til priser som er delt inn i  fargekoder.

Skjermbilde 2014-09-15 kl. 15.10.03 Skjermbilde 2014-09-15 kl. 15.10.58

Bildene på forsiden er satt opp i ett veldig enkelt galleri der bildene står klemt inn i hverandre uten mellomrom. Det er plassert bilder på forskjellige under sider istedenfor å kanskje være samlet på ett sted.

 

 

 

Share and Enjoy

Erstatningsoppgave

Jeg var syk under praksisperioden så jeg måtte skrive en erstatningsoppgave for å måle opp. Jeg skrev en akademisk tekst på 5 sider med en problemstilling:

“Jeg har lyst til å finne ut mer av hvilket forhold barn og unge har til media og teknologi, og hvordan kan dette påvirke skolen?”

Jeg begynte å skrive om barn og unge og deres forhold til ny teknologi og media. Så videre om kjønnsforskjeller på dataspill og teknologi og litt om sosiøkonomisk bakgrunn. Og til slutt om lærere, skolen og deres forhold til den nye teknologien kontra barn og unge.

Link til oppgaven min: Erstatningsoppgave

Share and Enjoy

Øvingsoppgave i Lyd 1.

Jeg lastet ned et lovlig lydspor fra soundcloud og brukte markeringsverktøyet til å velge ut en del av sporet på 40 sekund. Så brukte jeg fade in – out verktøyet i begynnelsen og slutten av sporet.

Så eksporterte jeg det til mp3 fil og pupliserte det på brukeren min på soundcloud.

Resultatet ble slik:

Share and Enjoy

Studiofotografering

Oppgaven til denne gang var å ta studiobilder med studioblitz der en person er motivet. Vi skulle bruke ulike lyssetningsteknikker i bildene så uttrykket endrest.

DSC_3298
f/11  Eksponeringstid: 1/160 sek ISO: -100 Brennvidde: 40mm

Her er Kim som modell. Jeg plasserte lysskilden, en softboks, til venstre i bildet slik at skyggen blir kastet over på høyre siden i bildet. Mulig at modellen skulle vert mer sentral så det kom litt mer lys over på andre siden av ansiktet.

DSC_3325
f/11  Eksponeringstid: 1/160 sek ISO: -100 Brennvidde: 40mm

Her tok jeg bilde av Torgeir. Her kommer lyset fra softboksen fra høyre side på bildet. Han er plassert slik at det kommer litt lys på siden som ikke er opplyst, det danner en trekant under øyet. Det gjør bildet mer spennende. Lite hint av reflektor i skyggene på venstre side.

IMG_6244
f/10  Eksponeringstid: 1/125 sek ISO: -100 Brennvidde: 40mm

Her er Silje som modell. Jeg liker veldig godt måten hun er plassert på og blikket/øynene. Her brukte jeg studio blits uten filter og fikk en veldig opplyst side på ansiktet og skulderen. Samtidig fikk jeg litt belysning på den siden lyset ikke kaster, og synest det gjør at øyet der kommer mer frem. Likte også at skulderen kaster skygge, det gjør bildet mer spennende.

IMG_6319
f/13  Eksponeringstid: 1/125 sek ISO: -100 Brennvidde: 28mm

Her er Eirinn som modell. Dette bildet likte jeg godt. Jeg har plassert modellen på venstre side og det blir ett stort sort område på høyre siden i bildet. Her brukte jeg ett bikube filter på studioblitsen. Det var bare den som kastet lys, ellers var rommet mørkt. Det gjorde at ansiktet ble lyst opp og bakgrunnen ble mørk. Lyset kommer fra høyre siden i bildet og kaster skygge på venstre siden. Skyggene skaper mer spenning i bildet. Generelt synest jeg det er ett bra bilde mtp plassering av motiv og lysbruk.

 

 

Share and Enjoy

Design – bearbeiding av logo

IMAG0850

Her er den bearbeidet skissen min. Jeg valgte å bruke “tuben” og navnet mitt inni hvor det starter med stor skriftstørrelse og blir mindre jo lengre den går innover i bølgen, for å skape perspektiv.
Fargene har jeg enda ikke bestemt meg helt for, men jeg tror det blir en blanding av turkist, hvit og mørkeblått i bølgen, lyseblå skrift kanskje. I bakgrunnen har jeg lagt på en fjellkjede, siden jeg også liker å gå toppturer på vinteren.
Litt mer personlig preg der. Og på himmelen bak fjellene har jeg lagd ett litt psychedelisk mønster som jeg tenker skal ha veldig svake nedtonete farger, slik at det ikke tar for mye oppmerksomhet. Mulig jeg vil endre på denne skissen etterhvert, men den er hvertfal sånn den vil se ut, i stor grad;)

Share and Enjoy

Fotografering i studio og utendørs

I fototimen i dag skulle vi få prøve oss på studiofotografering. Sarah gikk gjennom noen viktige punkter på lyskilder. Alle fikk prøve å ta bilde av en “modell” og prøve ut hvordan bildet ble med og uten reflektor.

Her er mine studio bilder:

_14A6024 _14A6026
f/11 – Eksponeringstid: 1/60 sek  ISO: 100 Brennvidde: 70mm

Her ser vi Marius som modell. Bildet til venstre er tatt uten reflektor og skaper mer dybde i bildet og som er positivt med ett portrett. Bildet til høyre er tatt med reflektor. Den er plassert på venstre siden og har en lyskilde, som er blitsen, på høyre side. Da tar blitsen og reflekterer lyset fra den hvite reflektoren og kaster det på høyre siden for modellen. Ansiktet og klærne blir lyst opp mer. Skyggende blir svakere.

 

Når vi var ferdig med studio, skulle vi gå ut og bruke lyset. Oppgaven var å ta ett bilde i sterkt lys med og uten reflektor og ett lys i skyggen med og uten reflektor:

_DSC3272 _DSC3271
f/3.2 Eksponeringstid: 1/1000 sek ISO: 200 Brennvidde: 70mm

Her er Eirinn som modell. Bildene er tatt i sol lyset. Bildet til venstre er tatt uten reflektor og sol lyset kommer fra høyre siden for modellen. Skyggene i ansiktet blir veldig klare. Bildet til høyre er tatt med reflektor. Den er plassert på venstre siden for modellen. Her ser vi at ansiktet blir betraktlig mer opplyst.
Solen er en sterk lysskilde, kaster mye lys tilbake, og når det blir tatt bilder av personer ute med sterkt sollys, mysest det mer med øynene.
Det resulterer med at det ikke viser personen med ett naturlig ansiktsuttrykk (lærte vi i dag).

Sarah gidde meg ett tips om at det er veldig lyse punkt i håret på høyre side av modellen kontra på venstre side der vi ser konturene bedre. Siden bildene var tatt i RAW format kunne de redigerestpå en måte som ikke ville gå utover bildet. Jeg visste ikke helt hvordan det skulle gjørest, men jeg føler jeg har fått frem det viktigeste av det vi skulle lære i dag.


_DSC3286
_DSC3288
f/3.2 Eksponeringstid: 1/400 sek ISO-200 Brennvidde: 68mm

Her er Kim som modell. Bildene er tatt i skyggen og vi ser at modellen ikke myser med øynene og at ansiktet visest mer enn om hann skulle ha myset. Bildet til venstre er tatt uten reflektor og vi ser at det er mørkere enn bildet til høyre som er tatt med reflektor. Her er reflektoren plassert på venstre side for modellen.

 

Share and Enjoy

Oppgave i CSS – Stilark

Vi fikk utlevert en oppgave i CSS med å lage ett nettsted med to html sider som var knyttet til ett eksternt stilark.

Dette var oppgaven: Lag en nettsted (i egen mappe på Minerva) med minimum to HTML-sider som er knyttet til ett eksternt stilark. På sidene skal du lage CSS-regler som er knyttet mot ett spesifikt element (ID) og vise ulike typer innhold med HTML (bilde, avsnitt, overskrifter, lister, etc.)

Her er en link til siden jeg lagde: http://minerva.hivolda.no/~oysteilo/stilark/index.html
Men jeg tror det er noe feil på serveren som gjør at bildene mine ikke vises. Dette har hendt med html oppgaven med Svein også.. Jeg har ikke svar på hvorfor dette skjer..

Share and Enjoy