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

Storlek: px

Starta visningen från sidan:

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

Kristina Lindgren
för 8 år sedan
Visningar:

1 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 fredag - Inga pappersprototyper - Grundfunktionalitet klar

boka tiden för handledning på fredag när doodles kommer upp.

2 Making it look good (kap 7 och 11) Visuell design Färger Typografi Exempel och patterns Preattentive variables

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

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

till kvalitén (kodning) Interface kan skapa

7 Utseendet spelar roll

8 Samma innehåll olika utseende Utseendet spelar roll

9 Samma innehåll olika utseende Utseendet spelar roll

10 Samma innehåll olika utseende Utseende spelar roll

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

12 Färg To label = Markera, beteckna, sätta etikett på

13 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

14 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

15 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,

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

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

18 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

19 Färgmättnad Mättad Omättad

20 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

livlighet, värme - Vågade och har karaktär Också tröttande för

21 Exempel

22 Exempel

23 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

24 Exempel

25 Exempel

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

27 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

28 Sammanfattning Färgval spelar roll Se över färgscheman i projektet Efter rasten: Typografi och preattentive variables Rast!

29 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 (sälja eller påverka på något annat sätt)

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

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

32 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

33 Typografi ord per kolumn (engelska) ä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

34 Online text Oftast scannar man texten. Bli därför 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) Läs mer på:

35 Online text Kontrasten mellan text and bakground ska inte vara för stor eller för liten - Guidelines - Några verktyg (botten av hemsidan) 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

36 Online text Kontrasten mellan text and bakground ska inte vara för stor eller för liten - Guidelines - Några verktyg (botten av hemsidan) Mörkgrå på vit bakgrund är bättre än svart på vitt Svart på en off-white (naturvit) 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

37 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

38 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)

39 Mönster: Visual Framework (nämndes tidigare) 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

40 Exempel (också på Contrasting Font Weights)

41 Exempel

42 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

43 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)

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

45 Few hues, many values exempel

46 Few hues, many values exempel

47 Preattentive variables 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 Resten av kapitel 7 får ni läsa själva

48 Hitta prickarna

49 Hitta prickarna

50 Hitta tal > 1

54 Mera

55 Forts preattentive variables

56 Forts preattentive variables

57 Mera

58 Forts preattentive variables

59 Forts preattentive variables

60 Forts preattentive variables

61 Forts preattentive variables

62 Exempel

63 Exempel

64 Exempel

65 Exempel

66 Exempel

67 Exempel

68 Exempel

69 Exempel encoding och layering

70 The End

71 Do this Don t do this

Relevanta dokument

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

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 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 Making it look good Visuell design Färger Typografi Exempel och patterns Komplex