- PDF Free Download

Storlek: px

Starta visningen från sidan:

Download ""

Karl Pålsson
för 9 år sedan
Visningar:

1 Grafisk design

7 Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback

8 Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer tilltalande

9 Gestaltlagarna

10 Grafisk design / Visualisering Layout Färg Ikoner Typografi

11 Layout Grundregel: Komposition & gruppering använd rutnät och justering för god komposition gruppera gränssnittets delar enligt en naturlig modell

12 Layout Rutnät (grid)

16 Vilka skillnader finns?

17 Layout Ramar & Linjer Var försiktig!!! Spatial spänning / interferens Mellanrum (white space)

21 Layout Tips! Rutnätet bör vara osynligt (utnyttja harmoniska proportioner). Undvik plottrighet På ett uppslag kan man ha 6-15 informationsgrupper I första hand gruppering med hjälp av mellanrum och rutnät utnyttja först därefter: - text/rubriker (tänk på typografiregler) - färg (försiktigt) - linjer & ramar (varsamt)

22 Grafisk design / Visualisering Layout Färg Ikoner Typografi

23 Varför färg? gruppera information

25 Varför färg? gruppera information skapa/visa på associationer

30 Varför färg? gruppera information skapa/visa på associationer indikera betydelse och struktur

32 Varför färg? gruppera information skapa/visa på associationer indikera betydelse och struktur göra gränssnittet mer visuellt tilltalande

34 Färg men tänk på att många färger medför lätt visuell förvirring och visuell trötthet

36 Färg men tänk på att många färger medför lätt visuell förvirring och visuell trötthet ca. 8% färgblinda

38 Färg men tänk på att många färger medför lätt visuell förvirring och visuell trötthet ca. 8% färgblinda färgpsykologi

40 Färg Grön: harmoni, balans, kreativitet Gul: glädje, sti mulans, opti mi sm Blå: exklusivt, lyxigt, svalt Röd: livslust, provocerande, varmt Brun: ombonat, mysigt, varmt Grå: neutralt, sobert, anonymt Svart: rebelli skt, syndi gt Vit: renhet, fräschör

41 Färg Grundregel Var sparsam (och försiktig) med färger

42 Färg Tips! Designa först monokromt addera sedan färg försiktigt/sparsamt. - Max. 5 betydelsebärande färger. - Diskreta bakgrundsfärger. - Var konsekvent. Gör färgkodningen redundant (form-färg, text-färg). Var försiktig med starka färger och starka kontraster. Se speciellt upp med: - Blått på svart - Kombinationen blått och rött

43 Hur känns det att läsa texten nedan? 97 % av befolkningen, dvs de som inte är färgblinda, sorterar mer eller mindre automatiskt in information med hjälp av färger. Detta utnyttjas ofta vid designarbete. Olika färger används för att framhäva och förstärka information, man använder sig av en s.k. färgkodning. Fördelarna med färgkodning är stora. Färg står ut från en monoton bakgrund. Därför uppfattas färgkodade detaljer snabbt och enkelt. Söktiden av ett färgkodat föremål är oberoende av hur stor yta som söks av. Vissa färger har en väletablerad symbolisk betydelse. Rött betyder fara eller varning, grönt står för trygghet eller gå osv. Färger kan knyta ihop utspridda element som hör samman.

44 Grafisk design Layout Färg Ikoner Typografi

46 Varför ikoner? öka begripligheten

47 Varför ikoner? öka begripligheten underlätta hågkomst

48 Varför ikoner? öka begripligheten underlätta hågkomst spara utrymme

49 Varför ikoner? öka begripligheten underlätta hågkomst spara utrymme göra gränssnittet mer visuellt tilltalande

50 Varför ikoner? öka begripligheten underlätta hågkomst spara utrymme göra gränssnittet mer visuellt tilltalande men ikoner kan vara svåra att förstå och besvärliga att utforma

53 Ikoner Grundregel Ikoner bör vara enkla och bygga på substantiv

54 Ikoner Tips! Gör ikoner enhetliga (storlek, form, färg). Testa om ikonerna är lätta att förstå. Kombinera gärna ikon + text. Mer i kursboken sid

55 Vilken grad av stilisering är lämplig?

56 Grafisk design / Visualisering Layout Färg Ikoner Typografi

57 Typografi Utformning och layout av text (typografi) är viktigt, då text ofta utgör en av huvudbeståndsdelarna i gränssnitt. Grundregel Enhetlighet var sparsam med olika typsnitt, storlekar, stilar, etc.

58 Antikva (Serif) Sans serif A A Times New Roman Arial

59 Datorskärmen: Upplösning

60 Typografitips! Text behöver luft. Utnyttja informativa rubriker, underrubriker, etc. - Viktigt för gruppering, struktur och översikt. - Underlättar bearbetning (tar in texten i två steg). Högst två typsnitt i en produkt,högst fyra storlekar på stilen Max tecken per rad. Justera texten. Undvik versaler. Serifer på papper, sans-serifer på skärm Försiktigt med kursiv, fet, etc. använd en metod för att betona. Bra kontrast.

61 Grå text Kan vara snyggt Kan användas för att ge mindre tyngd åt text Ger dålig kontrast! Använd därför mycket försiktigt!

62 Tänk på: Olika riktlinjer för olika plattformar ios human interface guidelines Android UI guidelines Mac OS X human interface guidelines UI guidelines for Microsoft Windows

63 Om man vill fördjupa sig Designing visual interfaces, Mullet & Sano (1994)

Relevanta dokument

Grafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer