1 / 36

Brukergrensesnitt og design av skjermbilder

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?

chaman
Download Presentation

Brukergrensesnitt og design av skjermbilder

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Brukergrensesnitt ogdesign av skjermbilder Kirsten Ribu 04.11.2005

  2. I dag • Litt om prosjektet og innleveringen i dag • Om komposisjon og farger Kirsten Ribu HiO 2005

  3. 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

  4. 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

  5. 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

  6. Logoer og farger Kirsten Ribu HiO 2005

  7. Eksempel Kirsten Ribu HiO 2005

  8. Øyet gjør sirkelbevegelser Rembrandt - The Music Party Kirsten Ribu HiO 2005

  9. 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

  10. Hva vi ser Tiden…. Kirsten Ribu HiO 2005

  11. 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

  12. 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

  13. 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

  14. Ressurser • Skjermdesign: http://www.lucas.no/Pages/skjerm.html Kirsten Ribu HiO 2005

  15. Et eksempel på reklamens makt http://www.window95.com/ Kirsten Ribu HiO 2005

  16. 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

  17. Litt om komposisjon Kirsten Ribu HiO 2005

  18. Oppdeling Kirsten Ribu HiO 2005

  19. 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

  20. Oppdeling - intuitivt Kirsten Ribu HiO 2005

  21. Optisk midtpunkt – her? Kirsten Ribu HiO 2005

  22. Eller kanskje her? Kirsten Ribu HiO 2005

  23. Flagget Kirsten Ribu HiO 2005

  24. Plassering av elementer Kirsten Ribu HiO 2005

  25. Påvirkning Kirsten Ribu HiO 2005

  26. Forts. Kirsten Ribu HiO 2005

  27. Kirsten Ribu HiO 2005

  28. Kirsten Ribu HiO 2005

  29. Fargeprøver Kirsten Ribu HiO 2005

  30. Skrekkeksempler • www.webpagesthatsuck.com • http://www.nacd.org/ Kirsten Ribu HiO 2005

  31. Fargesirkel/gråskala – ’Get it right in balck and white’. Kirsten Ribu HiO 2005

  32. 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

  33. 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

  34. Tekst/bakgrunnsfarger Kirsten Ribu HiO 2005

  35. Kontraster: Mørk på lys og lys på mørk Kirsten Ribu HiO 2005

  36. 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

More Related