Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag

Storlek: px

Starta visningen från sidan:

Download "Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag"

Britt Nyberg
för 8 år sedan
Visningar:

1 Den här veckan Kapitel 7 och 11 Kom ihåg att boka tiden för handledning på fredag Uppsamling av missade övningar på onsdag

2 Making it look good Visuell design Färger Typografi Exempel och patterns Komplex data

6 Utseendet spelar roll Inte speciellt förvånande Användaren trivs bättre - Ökar chansen att man vill prova igen - Ökar chansen att man få gott rykte - Ökar tiden användaren spenderar på sidan Användaren får större tolerans - Ökar chansen att man har överseende med småproblem Användbarheten ökar helt enkelt

Ökar tiden användaren spenderar på sidan Användaren får större tolerans -

7 Utseendet spelar roll Väldesignad software tar hänsyn till utseendet, språk och dess ton lika mycket som till kvalitén (kodning) Produkter och websidor stödjer också branding. Interface kan skapa emotionell respons.

till kvalitén (kodning) Produkter och websidor

8 Utseende spelar roll

9 Samma innehåll olika utseende Utseende spelar roll

10 Samma innehåll olika utseende Utseendet spela roll

11 Samma innehåll olika utseende Utseende spelar roll

12 Visuell design Kognitivt inbyggda fenomen - Hjärnan uppfattar vissa saker automatiskt (preattentive variables) - Vissa reaktioner kan förutses Känslor och instinktiva reaktioner spelar in också - Kultur - Förväntningar - Erfarenheter osv... Vad använder man då och hur?

förutses Känslor och instinktiva reaktioner spelar in också -

13 Färg Markera, beteckna, sätta etikett på

14 Färg Färg är det bland det första vi ser. Det är bra att fundera ut ett färgschema Grundregler Använd mörk förgrund mot ljus bakgrund eller tvärtom - För att testa skillnaden kan man göra om till gråskala Använd aldrig röd kontra grön för kritiska distinktioner - Upp till 10% av alla män har någon form av färgblindhet

ljus bakgrund eller tvärtom - För att testa skillnaden kan man göra om till

15 Färg Ha aldrig liten blå text på en röd eller orange bakgrund Det är svårt att läsa text skriven med komplementärfärger

16 Bakgrund och kontrast Ljus eller mörk bakgrund? - Gör stor skillnad - Ljusa klart vanligast - Mörka - Vanliga kontroller funkar bäst på dessa - fräckare, dyster, energisk - Finns undantag - Sketchflow, Photoshop t.ex.

Vanliga kontroller funkar bäst på dessa - fräckare,

17 Bakgrund och kontrast Skarpa kontraster - Spänning o styrka Mindre kontrast - Lugnande och avslappnande

18 Hue (kulör, färgton, nyans)

19 Varma och kalla färger Varma- Röd, orange, brun, beige Kalla - Blå, grön, lila, grå (i stora mängder) För att framkalla respekt och konservatism används typiskt kalla färger i synnerhet blått

20 Färgmättnad Mättad Omättad

21 Färgmättnad Mättade eller rena (saturated) färger Klara, briljanta, skarpa gula, röda, gröna etc - Framkallar energi, livlighet, värme - Vågade och har karaktär Också tröttande för ögat - Vanligast att ha max 1 eller 2 mättade färger - Resten omättade, nedtonade

22 Exempel

23 Exempel

24 Kombinationer Vad händer om man kombinerar? - 2 mättade färger = mer liv, energi än bara 1 färg - 1 mättad och 1 omättad = mer uppmärksamhet mot mättad - Ofta använder man ett litet antal grundfärger och sedan variationer på dessa - Mindre splittrat intryck

25 Exempel

26 Exempel

27 Färgblindhet Röd-grön - Protanopia - Deuteranopia Blå-gul - Tritanopia

28 Färgblindhet Förmedla aldrig information med enbart färg - Använd istället medföljande text, form eller något annat. - Undvik röd-gröna kombinationer - Testa, testa, testa! Mer info

29 Sammanfattning Färgval spelar roll Se över färgscheman i projektet Rast!

30 Typografi Typografi är läran om texter och dess utformning. En text kan avstavas, radbrytas och sidbrytas på flera olika sätt. Mellanrummet mellan raderna, bredd, marginaler, placering påverkar det totala intrycket. Traditionellt = hur lätt det är att läsa och förstå en text Idag = att påverka Viktigt på nätet

31 Typografi Sans-serif (sans = utan) Sans-serif ofta bättre i små storlekar på datorskärm men på pappret är det tvärtom. Webben: - Verdana - Georgia

32 Typografi Vilket/vilka typsnitt man använder spelar också roll för vilket intryck man ger Varje typsnitt har sin egen röst

33 Typografi ANVÄND INTE TEXT MED BARA STORA BOKSTÄVER EFTERSOM DET ÄR SVÅRARE ATT LÄSA Undantag kan vara vissa rubriker Undvik kursiv text eller fonter med mycket ornament eftersom de är svårare att läsa

34 Typografi ord per kolumn är ungefär lagom för att behålla läsbarhet (ungefär 500 pixels) Låt kortare textstycken vara vänsterjusterade GUI-kits och guidelines har vanligen rekommenderade fonter och fontstorlekar

35 Online text Oftast scannar man texten. Bli så kort och direkt så mycket som möjligt Länkar, rubriker, punkter etc används för att dra uppmärksamhet till viktigt eller intressant innehåll Det är viktigt med trovärdighet (välskriven text, bra grafik, utgående länkar) Read more:

36 Online text Kontrasten mellan text and bakground ska inte vara för stor eller för liten Mörkgrå på vit bakgrund är bättre än svart på vitt Svart på en off-white bakgrund är inte svårt att läsa heller Och mörk text på en ljus bakgrund är.

37 Online text Kontrasten mellan text and bakground ska inte vara för stor eller för liten Mörkgrå på vit bakgrund är bättre än svart på vitt Svart på en off-white bakgrund är inte svårt att läsa heller Och mörk text på en ljus bakgrund är lättare att läsa än tvärtom Läs mer...

38 Desktop GUI Desktop-GUI:n ofta hårt styrda av design-guidelines, speciellt nyttoprogram Vad kan man göra: - Bakgrunder Deep Background - Färger och fonter (vikt och kontrast) - Kanter (man kan använda runda kanter och diagonaler) - Bilder - Man kan göra knappar gjorda av bilder - Träd, listor mm kan också justeras med bilder

39 Rymd, vinklar och textur Textur När man ska täcka en yta ser ofta någon slags textur bättre ut än bara att fylla med en färg Corner treatments mönster Bilder - Kan vara effektivt, men finns i desktop-gui:n mest när de har en funktion (ikoner)

40 Mönster: Visual Framework Vad - Designa varje sida med samma grundläggande layout, färg, stil. När - Applikationer eller sajter med många olika sidor (typ allt). Man vill att det ska sitta ihop Varför - Konsistent design av varje sida gör att man känner igen sig och inte behöver anstränga sig lika mycket. Bidrar till branding också. Hur - Skapa en genomgående look-and-feel för alla sidor i applikationen - Färger, fonter, stil på text - Navigation - Layout-grid

41 Exempel (också på Contrasting Font Weights

42 Exempel

43 Mönster: Deep Background Vad - Placera en bild i bakgrunden som ger intryck av att finnas bakom övriga gränssnittselement När - Man har en layout med ett antal distinkta GUI-element som inte är särskilt överbefolkad och vill att det ska vara intressantare än med vanlig vit/grå bakgrund Varför - Lyckas man göra en bakgrund som ser ut att finnas bakom så kan det vara snyggt helt enkelt Hur - Lite överkurs. Boken talar om soft focus, color gradients, depth cues och no strong focal points

44 Mönster: Deep Background Soft focus (undvik detaljer) Color gradients (starka och rena färger OK men inte hårda linjer mellan dem) Depth cues (ledtrådar att något är långt bort, vertical gradient, oklarhet)

45 Mönster: Few hues, many values Vad - Välj en, två eller max 3 huvudkulörer (hues). Skapa en färgpalett genom att ha olika varianter av dessa När - Man skapar en färgpalett och vill undvika ett splittrat intryck, men ha någon slags karaktär Varför - Alltför många färger, speciellt klara och mättade gör lätt GUI:t överlastat och stökigt. Färgerna slåss om användarens uppmärksamhet. Hur - Välj ett par färger (svart o vitt räknas inte) Sen kan man ha ett stort antal inom dessa färger om det krävs. Verktyg som visats kan vara användbara för detta.

46 Few hues, many values exempel

47 Few hues, many values exempel

48 Att visa komplex data Tidwell kap 7 Preattentive variables (färg, storlek mm) - Saker som uppfattas direkt av människor utan vidare tänkande - Fortsättning på föregående om visual flow, grouping etc - Bra att känna till vid design

49 Hitta de blå prickarna

50 Hitta de blå prickarna

51 Hitta tal > 1

55 Mera

56 Forts preattentive variables

57 Forts preattentive variables

58 The End

59 Do this Don t do this

Relevanta dokument

Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare

Den här veckan Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare Kom ihåg att boka tiden för handledning på fredag när doodles kommer upp. Handledning