- PDF Free Download

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 tilltalande

Gestaltlagarna

Grafisk design / Visualisering Layout Färg Ikoner Typografi

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

Layout Rutnät (grid)

Vilka skillnader finns?

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

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)

Varför färg? gruppera information

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

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

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

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

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

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

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

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

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.

Grafisk design Layout Färg Ikoner Typografi

Varför ikoner? öka begripligheten

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

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

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

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

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

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 169-173.

Vilken grad av stilisering är lämplig?

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.

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

Datorskärmen: Upplösning

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 40-60 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.

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!

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

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