brukergrensesnitt og design av skjermbilder n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Brukergrensesnitt og design av skjermbilder PowerPoint Presentation
Download Presentation
Brukergrensesnitt og design av skjermbilder

Loading in 2 Seconds...

play fullscreen
1 / 36

Brukergrensesnitt og design av skjermbilder - PowerPoint PPT Presentation


  • 104 Views
  • Uploaded on

Brukergrensesnitt og design av skjermbilder. Kirsten Ribu 04.11.2005. I dag. Litt om prosjektet og innleveringen i dag Om komposisjon og farger. Noen ord om prosjektet. Hvordan fungerer gruppene? Fungerer arbeidsfordelingen? Fungerer møtene? Hvordan gjør dere rapportering?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Brukergrensesnitt og design av skjermbilder' - chaman


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
i dag
I dag
  • Litt om prosjektet og innleveringen i dag
  • Om komposisjon og farger

Kirsten Ribu HiO 2005

noen ord om prosjektet
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
  • Samle alle filer i ett dokument etter hvert – endelige innleveringer på papir!
  • Teksten til innholdet i prosessrapporten legges ut i midten av måneden – onsdag 16.11

Kirsten Ribu HiO 2005

god design er god kommunikasjon
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

Kirsten Ribu HiO 2005

bevisst design
Bevisst design
  • Grafisk design kan ikke skilles fra design av brukergrensesnittet
  • Form og innhold hører sammen
  • Bruk tekst og bilder for å understreke innholdet
  • Bruk logoer, merkevare bevisst

Kirsten Ribu HiO 2005

logoer og farger
Logoer og farger

Kirsten Ribu HiO 2005

eksempel
Eksempel

Kirsten Ribu HiO 2005

yet gj r sirkelbevegelser
Øyet gjør sirkelbevegelser

Rembrandt - The Music Party

Kirsten Ribu HiO 2005

grafisk design visuell informasjon
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

Kirsten Ribu HiO 2005

hva vi ser
Hva vi ser

Tiden….

Kirsten Ribu HiO 2005

kontrast og balanse er viktig
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

Kirsten Ribu HiO 2005

for mye
For mye….
  • En side som er overlesset med grafikk vil også virke frastøtende på en bruker på jakt etter informasjon
  • Eksempel: Dagens Næringsliv

http://www.dn.no/

Kirsten Ribu HiO 2005

tilpass form og innhold til brukergruppen
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
    • Eksempel: Kokkeside:

http://www.williams-sonoma.com/

Kirsten Ribu HiO 2005

ressurser
Ressurser
  • Skjermdesign:

http://www.lucas.no/Pages/skjerm.html

Kirsten Ribu HiO 2005

et eksempel p reklamens makt
Et eksempel på reklamens makt

http://www.window95.com/

Kirsten Ribu HiO 2005

gjennomgangsfarger
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

Kirsten Ribu HiO 2005

litt om komposisjon
Litt om komposisjon

Kirsten Ribu HiO 2005

oppdeling
Oppdeling

Kirsten Ribu HiO 2005

det gylne snitt 1 618
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.
  • Matematisk kan dette uttrykkes slik: Hvis linjestykket AC er delt i et punkt B slik at

(a+b)/a = a/b

sies B å dele AC i det gylne snitt

Kirsten Ribu HiO 2005

oppdeling intuitivt
Oppdeling - intuitivt

Kirsten Ribu HiO 2005

optisk midtpunkt her
Optisk midtpunkt – her?

Kirsten Ribu HiO 2005

eller kanskje her
Eller kanskje her?

Kirsten Ribu HiO 2005

flagget
Flagget

Kirsten Ribu HiO 2005

plassering av elementer
Plassering av elementer

Kirsten Ribu HiO 2005

p virkning
Påvirkning

Kirsten Ribu HiO 2005

forts
Forts.

Kirsten Ribu HiO 2005

fargepr ver
Fargeprøver

Kirsten Ribu HiO 2005

skrekkeksempler
Skrekkeksempler
  • www.webpagesthatsuck.com
  • http://www.nacd.org/

Kirsten Ribu HiO 2005

7 slags fargekontraster
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

Kirsten Ribu HiO 2005

kontraster forts
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.

Kirsten Ribu HiO 2005

tekst bakgrunnsfarger
Tekst/bakgrunnsfarger

Kirsten Ribu HiO 2005

tommelfingerregler
Tommelfingerregler
  • Antall farger i et skjermbilde bør begrenses til 4 pr. skjermbilde
  • 7for 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

Kirsten Ribu HiO 2005