11 Nov

Arbeidskrav 3 – Designprosessen

 

Vi har som oppgave å designe et nettsted for designbyrået MID128. Etter første fase med research og planlegging ble førsteutkastet seende slik ut:

mockup nettside(1)

 

På gjennomgangen fikk vi gode tilbakemeldinger. Kunden og publikum mente blant annet at:

  • Menyen måtte få mer luft
  • Bildene tok litt mye plass, det ser litt rotete ut
  • Trenger en sterkere og friskere farge i paletten

Neste var å snakke med brukere (aka. gruppe 2). Etter en gjennomgang av nettsiden kom de fram til mulige forbedringer:

  • Det var litt vanskelig å navigere på forsiden
  • Ønsket flere sosiale medier-knapper
  • Mulighet til å skille sidene med eller elementene på siden med farge?

 

Etter å ha diskutert og jobbet med tilbakemeldingene, kom vi frem til et andre utkast:

mockup nettside1

  • Meny: Vi gjorde den større og ordnet mer luft mellom navigasjonsknappene så det skulle være enklere å bruke menyen uansett om du bruker mus eller finger.
  • Forsiden har fått kortere bilder. Vi har også satt opp en newsfeed (med de nyeste prosjektene) nederst for å gjøre siden mer interessant.
  • Etter gode tilbakemeldinger på å bruke grønt i paletten som et symbol på bygda Volda valgte vi å beholde fargen, men paletten som tidligere besto av grønnyanser, beige og brun har fått oransje også. Det tenkte vi skulle friske opp nettsiden og stå litt i kontrast til de andre fargene.

Skjermbilde 2014-10-14 kl. 18.12.14

 

 

02 Oct

Arbeidskrav – HTML5

MID128                Arbeidskrav 6 – HTML5

  1. Formålet med HTML

HTML (HyperText Markup Language) brukes for å strukturere en nettside. Det er selve oppsettet til nettsiden, men kan også brukes til utforming selv om valgene er noe begrenset.

Det er laget flere versjonen av dette markeringsspråket hvor HTML5 er den nyeste.

 

Med HTML5 har det kommet flere attributter/semantiske elementer. Nå har det kommet flere måter å dele opp nettsiden på med elementer som <nav> for navigeringsbaren, <aside> for sidemenyen, hvor man tidligere måtte indikere dette ved en id eller class.

<canvas> er et nytt element for grafikk. Det er en boks hvor man kan legge til grafiske elementer vet hjelp av programmer som f.eks JavaScript.

Enkelte elementer fra tidligere versjoner har blitt fjernet fra HTML5. Dette inkluderer blant annet attributtene <center>, brukt til å sentrere en tekst, <frame>, som definerer ett enkelt vindu i en <frameset>, og <font> som spesifiserer utseende på en skrifttype.

2.Arbeidskrav6Arbeidskrav6 (2)

23 Sep

Arbeidskrav 2 – Accessibility

Tok en tur innom Difi (direktoratet for forvaltning og ikt) sin veiledning for universell utforming av IKT, og sammenlignet kravene med nettsiden http://www.compagniet.no/.

compagniet1

Compagniet, en velkjent restaurant med lang historie i Tromsø, men ikke fullt så funksjonibel nettsted.
Alt er plassert litt her og der. Diverse menyer finner du overalt. Bildegalleriet er sørgelig, men maten er fantastisk.

compagniet2

Siden har en dårlig meny. Hovedmenyen har liten kontrast mellom teksten og bakgrunnen som gjør det vanskelig å lese. Undermenyen er tung å navigere når det er mange like alternativ og liten skille mellom lenkene.
Til høyre i menyen er det en hurtigmeny som nesten ikke er synlig. Her er det blant annet lenket til en side på engelsk, kart og sideoversikt. Men for brukere med redusert presisjonsevne er dette skrekken av en meny. Klikkeflaten er minimal og kontrasten er svak bare for å gjøre det ekstra vanskelig.
Mobil- og padbrukere vil ha det frustrerende å navigere på dette nettstedet ettersom den ikke er tilpasset forskjellige skjermstørrelser og enkelte menyknapper har en liten klikkeflate.

Minus:
– Tungvint navigasjon
– Dårlig kontrast
– Ikke egnet til berøringsskjerm
– Statisk

Eksempel på forbedring:

arbeidskrav 2

Her har jeg gjort siden mer strukturert med mer synlige elementer. Navigasjonsmenyen har større tekst og mer kontrast for å være lettere å lese, samtidig som det er stor trykkoverflate så det skal være enklere å bruke i forhold til berøringsskjerm. Oppsettet på siden har jeg forenklet for at det skal bli lettere å tilpasse den til forskjellige skjermstørrelser.
Compagniet sin nettside mener jeg har kunder i alle aldre, derfor er det viktig å kunne skalere teksten større om ønskelig for de som synes det er tungt å lese tekst på skjerm. Sidestrukturen er nogen lunde den samme, men jeg har fjernet elementene jeg mente var overflødig for at det skal bli lettere å navigere på siden. Det var mye kontaktinformasjon rundt om på siden, så de ville jeg ha plassert i en footer nederst på siden, eventuelt på en egen underside om ønskelig.

17 Sep

Arbeidskrav 1 – God/Dårlig Design

 

Vi har gått nærmere inn på hva som gjør et godt og dårlig webdesign. Her er to eksempler på hver:

 

fior1

fiordilattegelato.com kan du få informasjon om, samt bestille, spesiallaget desserter som iskrem og kake, og plukke det opp i butikken som ligger i Denver, Colorado. Målgruppen til siden vil jeg si er alle som kan kjøpe is og er kjent med å bruke internett i området rundt Denver. Med tanke på at man må betale mer siden det er spesiallaget i forhold til iskrem i dagligvarebutikker, mener jeg målgruppen blir begge kjønn i alderen 25-50 som kan ta seg råd til litt luksus i hverdagen. Det er en behagelig og oversiktlig nettside å se på. Stilen er minimalistisk. Det er godt med luft mellom elementene og den er kort og presis. Bildene av produktene går rett på sak og viser produktet nøyaktig og fristende måte. Det virker som de har et godt gjennomgående tema på alle elementene på siden. De har valgt å bruke duse farger som kan assosieres med iskrem som er et godt virkemiddel å bruke for å gjøre kunden interessert.

 

penny1

penny2

Pennyjuice.com er et klart motstykke til fior di latte. Pennyjuice er et amerikansk selskap som spesialiserer seg på å selge store mengder juice til institusjoner som barnehage, skoler o.l. Målgruppen blir da definert til de ansvarlige for kjøp av kantine varer i USA. Siden er lite oversiktlig og vanskelig å navigere på. Det sterke fargevalget gjor det slitsomt å lese og med liten skrift blir det vanskelig å forstå budskapet med siden, for det er ingen andre elementer som indikerer at produktet er juice (foruten produktnavnet). Bildebruken kan indikere at det handler om barn, eller til barn, ettersom fargevalget og bildene er såpass barnslige. Navigasjonen er tungvindt siden menyen er satt på de rareste plasser som ikke virker naturlig for sidestrukturen.

 

29 Oct

GD 5: Logo

Under tilbakemelding på de forskjellige logo skissene fikk jeg beskjed om å jobbe videre med skisse to. Jeg har pyntet litt på skrifttypen og prøvd ut litt forskjellige muligheter som å lage den fetere og med litt rundere bokstaver. Meningen er at den skal se veldig enkel ut. Jeg har også prøvd forskjellige måter å ramme inn bokstavene på, og endte opp med boks versjonen, siden den er ganske ren og enkel.

Logo5

09 Oct

GD 4: Skisse til Logo

Logo1
Her ville jeg ha en litt elegant og fin logo. Jeg valge å kombinere skrifttypene med å ha monogrammet i løkkeskrift og resten av bokstavene normale.

Logo2

Her ville jeg gå litt mer minimalistisk. Jeg valge å kun beholde fornavnet og gjøre skriften veldig simpel for å få det til å se enkelt og moderne ut.

Logo3
Her har jeg fokusert mer på en logo. Da har jeg tatt forboksaven “m” og prøvd å lage noe ut av den som ble en simpel logo som kan brukes i tillegg til hele navnet. Den skal være lett leselig og gjenkjennelig.

25 Sep

Fotokrav 4

Oppgavene var som følge,

4A og 4B) Ta ett bilde satt i naturen og ett i by der temaet er “vennskap”. Det skal være med minst ett menneske i begge bildene.
4C, 4D, 4E, 4F og 4G) Ta fem forskjellige bilder i valgfri sjanger og med valgfritt tema. Benytt deg av symmetri, asymmetri, linjer, kontrast og geometriske former for å komponere bildene, med fokus på ett av virkemidlene i hvert bilde.

4A) MID131_oppgavenr4A_gr_b_Maria_Henriksen
Ta et bilde satt i naturen med tema vennskap. For meg er å dra på tur sammen et stort tegn på vennskap. Jeg valgte å ha motivet helt nede til høyre for å skape en følelse av et stort åpent rom  og satt personene tett sammen for at de skulle virke nære hverandre.
1/125 sek, f/5.6, ISO-320, 50mm

4B)
MID131_oppgavenr4B_gr_b_Maria_Henriksen
Ta et bilde satt en by med tema vennskap. Her valgte jeg å la horisonten være nede på bilde for at det skal virke som de går mot noe sammen. Og asfalten, husene og strømledninger gjør det klart at det er satt i en by.
1/250 sek, f/8, ISO-200, 62mm

4C)
MID131_oppgavenr4C_gr_b_Maria_Henriksen
Dette bilde er tatt for å vise symmetrien i naturen, her ved en bregne. Jeg har blendet ut mye av bakgrunnen og tatt et ganske nært utsnitt for å ta bort ting som ikke er relevant for temaet og heller satt fokus på planten.
1/125 sek, f/5.6, ISO-400, 105mm

4D) MID131_oppgavenr4D_gr_b_Maria_Henriksen
Dette bilde skal vise asymmetri og her ville jeg se hvor mye jeg kunne ta bort av motivet og fortsatt forstå hva det viser. Hunden er plassert i til venstre så den ser ut i tomrommet.
1/400 sek, f/10, ISO-100, 105mm

4E)
MID131_oppgavenr4E_gr_b_Maria_Henriksen
Her er et bilde som viser linjer som kommer frem om kvelden. Utsnittet er sånn for at det skal gi en form for dybde og at det fortsetter videre ut av bildet.
1/25 sek, f/4.2, ISO-2000, 30mm

4F)
MID131_oppgavenr4F_gr_b_Maria_Henriksen
Planten som vokser opp fra grusen er en kontrast mellom det levende og dødt. Det er kun forgrunnen som er i fokus for å fremheve planten og skape dybde i bildet.
1/160 sek, f/5.6, ISO-200, 105mm

4G)
MID131_oppgavenr4G_gr_b_Maria_Henriksen
Bildet her er tatt for å vise geometriske former i naturen. Her er fokuset på to epler i forgrunnen, men man kan skimte flere lengre bak som skaper en samhørighet i bildet. Fargen rødt mot grønt er også en måte å skape kontraster i bildet som gjør det lettere å feste blikket på eplene.
1/100 sek, f/5.6, ISO-200, 105mm

 

25 Sep

GD 2&3: Redesign


Oppgaven var å redesigne emballasjen et produkt, og her valgte jeg A-CREME. Det designet de bruker i dag er ganske utdatert. Ettiketten er veldig rotete og fargekombinasjonen passer dårlig, og den ligner heller på en krukke med medisin enn en vanlig hudkrem.

Målgruppen er menn og kvinner 20-30år, så her tenkte jeg å lage et enkelt design som appellerer til både menn og kvinner. Derfor bruker jeg mye blått som er en ganske nøytral og ren farge, og jeg vil ha emballasjen så simpel som mulig for å gjøre det enkelt å finne navnet på kremen og for å si at dette er en enkel krem som passer til det meste. Selve krukken har jeg gjort om så kremen blir mer tilgjengelig. Heller en bred og flat krukke enn høy og smal.

design2
Her har jeg valgt å gå for en gjennomsiktig glasskrukke så man enkelt ser hvor mye det er igjen, og fjernet så mye elementer fra fremsiden som mulig.

design1
Her går jeg for en annen variant i plast, enda flatere og med teksten på lokket av boksen.

Jeg fikk beskjed om å forbedre skisse 1 og kombinere den litt med skisse 2. Og da har jeg tatt skrifttypen fra skisse 2, også har jeg byttet litt om på teksten. Navnet på kremen har jeg plassert på toppen også.

Skisse2

18 Sep

Fotokrav 3

Oppgaver:

1) Ta to forskjellige bilder av samme person eller personer, der du bruker forskjellig brennvidde til å endre meningen i bildet.

MID131_oppgavenr3_gr_b_Maria_Henriksen_Bilde1
Bildet viser en person

MID131_oppgavenr3_gr_b_Maria_Henriksen_Bilde2
Her er brennvidden økt og man ser kun et øye

2) Ta to forskjellige bilder av samme valgfrie motiv, der du bruker forskjellig brennvidde til å endre meningen i bildet.

DSC_5311
Bildet viser en sti
1/60 sek, f/5.6, ISO-180, 18mm

DSC_5314
Øker man brennvidden skifter bildet motiv og viser en blomst
1/125 sek, f/5.6, ISO-250, 98mm

3)

  • Tema «Kontrast».
    DSC_5252

    Dette bildet av en stein i bekken viser kontrasten mellom flytende og fast form.
    1 sek, f/20, ISO-200, 85mm
  • Ta et bilde med tema “Linjer”
    DSC_5304
    1/400 sek, f/10, ISO-100, 70mm
  • Ta et bilde med tema “Som i et speil”
    speil
    1/125 sek, f/11, ISO-200, 25mm