Brukergrensesnitt og design av skjermbilder
description
Transcript of Brukergrensesnitt og design av skjermbilder
![Page 2: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/2.jpg)
Noen ord om prosjektet• Hvordan fungerer gruppene?
– Fungerer arbeidsfordelingen?– Fungerer møtene?– Hvordan gjør dere rapportering?
• Kom med spørsmål! • Husk å logge alle problemer/løsninger =
skal inn i prosessrapporten
![Page 3: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/3.jpg)
God design er god kommunikasjon
• Design handler om kommunikasjon. • Kommunikasjon med kunder, leverandører og
samarbeidspartnere. • Forskjellige områder
– Grafisk design for blad og bøker– Skjermdesign for digitale medier.
• Farger, bevegelser, lyd, interaktivitet gir andre bruksområder og opplevelser enn trykte medier
• Viktig å analysere målet med kommunikasjonen
![Page 4: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/4.jpg)
Bevisst design
• Grafisk design kan ikke skilles fra design av brukergrensesnittet og universell tilgjengelighet
• Form og innhold hører sammen
• Bruk tekst og bilder for å understreke innholdet
• Husk meningsfylt bruk av bilder, med alternativ tekst
![Page 6: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/6.jpg)
Øyet gjør sirkelbevegelser
Rembrandt - The Music Party
![Page 7: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/7.jpg)
Grafisk design = Visuell informasjon
• Layout, typografi og illustrasjon brukes til å føre øyet over websiden
• Først ser man form og farge og forgrunn mot bakgrunn (kontrast)
• Dernest litt informasjon (grafikk dersom det er til stede)
• Til slutt ser man detaljene i teksten
![Page 8: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/8.jpg)
Hva vi ser
Tiden….
![Page 9: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/9.jpg)
Kontrast og balanse er viktig
• En side med bare tekst ser ut som en grå masse uten noen punkter å feste blikket på
• Man må lage balanse mellom visuell kontrast og organisering av elementene
![Page 10: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/10.jpg)
Tilpass form og innhold til brukergruppen
• Det vanligste og mest effektive design for Internettbrukere:– Nøye balanse mellom tekst og linker– Forholdsvis små bilder– Laster raskt, unngår forstyrrende elementer
![Page 11: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/11.jpg)
Ressurser
• Skjermdesign:
http://www.lucas.no/Pages/skjerm.html
![Page 12: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/12.jpg)
Gjennomgangsfarger
• Gi sidene én farge: en ’blå’, en ’rød’
• Dvs: Hovedtyngden er på én del av fargeskalaen
• http://www.componentsoftware.no/ = blå
• http://www.banetele.com/ = rød
![Page 13: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/13.jpg)
Litt om komposisjon
![Page 14: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/14.jpg)
Oppdeling
![Page 15: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/15.jpg)
Det gylne snitt 1,618...
• Det gylne snitt bygger på en harmonisk deling av et linjestykke.
• Snittet deler linjestykket slik at forholdet mellom den lengste og den korteste delen er like stort som forholdet mellom hele linjestykket og den lengste delen av det.
![Page 16: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/16.jpg)
Oppdeling - intuitivt
![Page 17: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/17.jpg)
Optisk midtpunkt – her?
![Page 18: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/18.jpg)
Eller kanskje her?
![Page 19: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/19.jpg)
Flagget
![Page 20: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/20.jpg)
Plassering av elementer
![Page 21: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/21.jpg)
Påvirkning
![Page 22: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/22.jpg)
Forts.
![Page 23: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/23.jpg)
Fargeprøver
![Page 24: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/24.jpg)
Fargesirkel/gråskala – ’Get it right in balck and white’.
![Page 25: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/25.jpg)
7 slags fargekontraster
Kontrast betyr motsetning, og oppstår når en tydelig kan skille farger fra hverandre.
EgenkontrastKontrasten mellom de enkelte fargene
Lys/mørk-kontrastHvitt og svart er den sterkeste kontrasten.
Kald/varm-kontrast
![Page 26: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/26.jpg)
Kontraster forts.
Komplementærkontrast
KvantitetskontrastFargenes lysstyrke er forskjellig. Rødt og grønt har samme lysstyrke og får lik oppmerksomhet. Gult sammen med fiolett har forholdet 1:3. Forholdet er: gult 3, orange 4, rødt 6, grønt 6, blått 8, fiolett 9.
KvalitetskontrastMotsetningen mellom rene og urene (dempede) farger er kvalitetskontrasten.
![Page 27: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/27.jpg)
Tekst/bakgrunnsfarger
![Page 28: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/28.jpg)
Kontraster: Mørk på lys og lys på mørk
![Page 29: Brukergrensesnitt og design av skjermbilder](https://reader033.fdocuments.net/reader033/viewer/2022061610/5681500b550346895dbde71f/html5/thumbnails/29.jpg)
Tommelfingerregler
• Antall farger i et skjermbilde bør begrenses til 4 pr. skjermbilde
• 7 for et system som et hele.
• Farger kan utnyttes i informasjon: – F.eks. farge på overtrukne konti
• Farger kan hjelpe til med å gruppere objekter som hører sammen