Kommunikations- orienterad visuell design

Storlek: px
Starta visningen från sidan:

Download "Kommunikations- orienterad visuell design"

Transkript

1 Kommunikations- orienterad visuell design Magnus Haake LUCS, Lunds universitet

2 Kommunikationsorienterad visuell design = Kognitivt orienterad grafisk design

3 Varför kognitivt orienterad grafisk design? Verktyg för att strukturera och koda information med avseende på människors kognitiva förmågor och begränsningar.

4 Bra kognitivt orienterad grafisk design: ökar synligheten ger klar affordance stödjer god mappning ger god feedback

5 Fokus på användbarhet mindre på upplevelse estetik varumärke etc.

6 Teman för föreläsningen Gestaltlagarna Informationskodning Färg Ikoner Typografi Layout

7 Gestaltlagarna

8 Lagen om likhet Gestaltlagarna

9 Gestaltlagarna

10 Gestaltlagarna

11 Lagen om närhet Gestaltlagarna

12 Gestaltlagarna

13 närhet likhet kontinuitet slutenhet gestalt/area man ser omedelbart olika figurer Gestaltlagarna

14 Victoria and Albert Museum, London Design by Pentagram Gestaltlagarna

15 Victoria and Albert Museum, London Design by Pentagram Gestaltlagarna

16 Gestaltlagarna

17 Gestaltlagarna

18 Gestaltlagarna

19 Gestaltlagarna

20 Gestaltlagarna

21 Teman för föreläsningen Gestaltlagarna Informationskodning Färg Ikoner Typografi Layout

22 Informationskodning

23 Informationskodning

24 Informationskodning

25 Informationskodning Layering Information i olika lager (nivåer) Informationskodning: Layering

26 Informationskodning: Layering

27 Informationskodning Micro Macro Översiktlig information i kombination med information på detaljnivå. Informationskodning: Micro - Macro

28 Informationskodning: Micro - Macro

29 Informationskodning: Micro - Macro

30 Informationskodning Layering + Micro Macro Informationskodning: Layering + Micro - Macro

31 Overview Zoom & Filter Details on demand Ex: FilmFinder (HCIL/SpotFire) Informationskodning: Layering + Micro - Macro

32 Informationskodning: Layering + Micro - Macro

33 Informationskodning: Layering + Micro - Macro

34 Informationskodning: Layering + Micro - Macro

35 Teman för föreläsningen Gestaltlagarna Informationskodning Färg Ikoner Typografi Layout

36 Färgers egenskaper Spatial effekt Termisk effekt Psykologisk effekt Blå avlägsen kall vilsam Grön avlägsen kall vilsam Gul nära varm Röd mycket nära varm stimuleran de mycket stimuleran de (ej vilsam) Färg

37 Färgers associationer vitt svart rött Färg

38 Färgers associationer Blå: exklusivt, lyxigt,svalt Grön: harmoni, balans, kreativitet Gul: glädje, stimulans, optimism Röd: livslust, provocerande, varmt Brun: ombonat, mysigt, varmt Vit: renhet, fräschör Grå: neutralt, sobert, anonymt Svart: rebelliskt, syndigt Färg

39 Färg

40 Färg

41 Färgers associationer Blå: exklusivt, lyxigt,svalt Grön: harmoni, balans, kreativitet Gul: glädje, stimulans, optimism Röd: livslust, provocerande, varmt Brun: ombonat, mysigt, varmt Vit: renhet, fräschör Grå: neutralt, sobert, anonymt Svart: rebelliskt, syndigt Färg

42 Kognitiv gränssnittsdesign Egenskaper i mänsklig kognition och implikationer för gränssnittsdesign Färg

43 Färg

44

45 Teman för föreläsningen Gestaltlagarna Informationskodning Färg Ikoner Typografi Layout

46 Ikoner

47 Ikoner

48 Ikoner

49 igenkänning av bilder (passivt minne) är kraftfullare (snabbare och tillförlitligare) än igenkänning av ord [ men vi genererar (aktivt minne) ord lättare än bilder ] Ikoner

50 igenkänning av bilder (passivt minne) är kraftfullare (snabbare och tillförlitligare) än igenkänning av ord [ men vi genererar (aktivt minne) ord lättare än bilder ] och så är vi individer Ikoner

51 kan öka begripligheten Ikoner

52 kan spara utrymme Ikoner

53 men ikoner kan vara svåra att förstå och besvärliga att utforma Ikoner

54 Ikoner

55 Nödstopp Dörr öppen Motor överhettad Ingen tryckluft Frekvenskontroll Ikoner

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

57 Ikoner

58 Ikontips! Gör ikoner enhetliga (storlek, form, färg) Testa ikonerna (är de lätta att förstå) Dubbelkoda (ikon + text) Ikoner

59 Teman för föreläsningen Gestaltlagarna Informationskodning Färg Ikoner Typografi Layout

60 Typografi Utformning och layout av text (typografi) är viktig, då text ofta är en huvudbeståndsdel i olika informationsmaterial. Typsnitt

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

62 Datorskärm & Upplösning Typsnitt

63 Typsnitt: Papper Typsnitt

64 Typsnitt: Skärm Cambria Calibria Typsnitt

65 Ordbilder: gemener - VERSALER Typsnitt

66 7.1. LoFi- och HiFi-prototyping Det finns (naturligtvis) olika metoder för prototyping. En vanlig kategorisering man kan göra är en uppdelning mellan: LoFi-prototyping (Pappersprototyp) HiFi-prototyping (Datorprototyp) Det vanliga är nog att man direkt utvecklar en HiFi-prototyp med mer eller mindre full funktionalitet (vertikal prototyp, se nedan) på datorn med hjälp av gränssnittsverktyg. Problemet i dessa fall är att konstruktören/designern lätt blir ovillig att ändra i sitt gränssnitt, när man redan lagt ner så mycket tid på att implementera olika funktioner. Här är då LoFi-prototyping ett smidigt sätt att snabbt och billigt arbeta igenom och disskutera olika designidéer. Problemet med denna metod är att den av många upplevs som oseriös och kanske lite tramsig. Det kan också kännas svårt att göra användartest med en LoFi-prototyp. Båda dessa problem är högst påtagliga, men beror i regel på att man aldrig fått utbildning och övning på att göra LoFi-prototyper. Som skissmetod är den som sagt snabb, enkel och billig. Man kan sitta flera i en grupp och skissa tillsammans med papper, penna och små papperslappar. Det är även fullt möjligt att göra bra och informativa användartest redan med dessa pappersprototyper, för att se om man tänker rätt. Typsnitt

67 7.1. LOFI- OCH HIFI-PROTOTYPING DET FINNS (NATURLIGTVIS) OLIKA METODER FÖR PROTOTYPING. EN VANLIG KATEGORISERING MAN KAN GÖRA ÄR EN UPPDELNING MELLAN: LOFI-PROTOTYPING (PAPPERSPROTOTYP) HIFI-PROTOTYPING (DATORPROTOTYP) DET VANLIGA ÄR NOG ATT MAN DIREKT UTVECKLAR EN HIFI-PROTOTYP MED MER ELLER MINDRE FULL FUNKTIONALITET (VERTIKAL PROTOTYP, SE NEDAN) PÅ DATORN MED HJÄLP AV GRÄNSSNITTSVERKTYG. PROBLEMET I DESSA FALL ÄR ATT KONSTRUKTÖREN/DESIGNERN LÄTT BLIR OVILLIG ATT ÄNDRA I SITT GRÄNSSNITT, NÄR MAN REDAN LAGT NER SÅ MYCKET TID PÅ ATT IMPLEMENTERA OLIKA FUNKTIONER. HÄR ÄR DÅ LOFI-PROTOTYPING ETT SMIDIGT SÄTT ATT SNABBT OCH BILLIGT ARBETA IGENOM OCH DISSKUTERA OLIKA DESIGNIDÉER. PROBLEMET MED DENNA METOD ÄR ATT DEN AV MÅNGA UPPLEVS SOM OSERIÖS OCH KANSKE LITE TRAMSIG. DET KAN OCKSÅ KÄNNAS SVÅRT ATT GÖRA ANVÄNDARTEST MED EN LOFI-PROTOTYP. BÅDA DESSA PROBLEM ÄR HÖGST PÅTAGLIGA, MEN BEROR I REGEL PÅ ATT MAN ALDRIG FÅTT UTBILDNING OCH ÖVNING PÅ ATT GÖRA LOFI-PROTOTYPER. SOM SKISSMETOD ÄR DEN SOM Typsnitt

68 Typografi Grundregel 1: Enhetlighet; var sparsam med olika typsnitt, storlekar, stilar, etc. Typsnitt

69 7.1. LoFi- och HiFi-prototyping Det finns (naturligtvis) olika metoder för prototyping. En vanlig kategorisering man kan göra är en uppdelning mellan: LoFi-prototyping (Pappersprototyp) HiFi-prototyping (Datorprototyp) Det vanliga är nog att man direkt utvecklar en HiFi-prototyp med mer eller mindre full funktionalitet (vertikal prototyp, se nedan) på datorn med hjälp av gränssnittsverktyg. Problemet i dessa fall är att konstruktören/designern lätt blir ovillig att ändra i sitt gränssnitt, när man redan lagt ner så mycket tid på att implementera olika funktioner. Här är då LoFi-prototyping ett smidigt sätt att snabbt och billigt arbeta igenom och disskutera olika designidéer. Problemet med denna metod är att den av många upplevs som oseriös och kanske lite tramsig. Det kan också kännas svårt att göra användartest med en LoFi-prototyp. Båda dessa problem är högst påtagliga, men beror i regel på att man aldrig fått utbildning och övning på att göra LoFi-prototyper. Som skissmetod är den som sagt snabb, enkel och billig. Man kan sitta flera i en grupp och skissa tillsammans med papper, penna och små papperslappar. Det är även fullt möjligt att göra bra och informativa användartest redan med dessa pappersprototyper, för att se om man tänker rätt. Typsnitt

70 7.1. LoFi- och HiFi-prototyping Det finns (naturligtvis) olika metoder för prototyping. En vanlig kategorisering man kan göra är en uppdelning mellan: LoFi-prototyping (Pappersprototyp) HiFi-prototyping (Datorprototyp) Det vanliga är nog att man direkt utvecklar en HiFi-prototyp med mer eller mindre full funktionalitet (vertikal prototyp, se nedan) på datorn med hjälp av gränssnittsverktyg. Problemet i dessa fall är att konstruktören/designern lätt blir ovillig att ändra i sitt gränssnitt, när man redan lagt ner så mycket tid på att implementera olika funktioner. Här är då LoFi-prototyping ett smidigt sätt att snabbt och billigt arbeta igenom och diskutera olika designidéer. Problemet med denna metod är att den av många upplevs som oseriös och kanske lite tramsig. Det kan också kännas svårt att göra användartest med en LoFi-prototyp. Båda dessa problem är högst påtagliga, men beror i regel på att man aldrig fått utbildning och övning på att göra LoFi-prototyper. Som skissmetod är den som sagt snabb, enkel och billig. Man kan sitta flera i en grupp och skissa tillsammans med papper, penna och små papperslappar. DET ÄR ÄVEN FULLT MÖJLIGT ATT GÖRA BRA OCH INFORMATIVA ANVÄNDARTEST REDAN MED DESSA PAPPERSPROTOTYPER, för att se om man tänker rätt. Typsnitt

71 Typografi Grundregel 2: Textens visuella struktur ska avspegla textens semantiska struktur. Typsnitt

72 Del 9: Diskussioner och slutsatser. Avslutningsvis presenteras i denna del diskussioner och slutsatser om projektet. Vilka lärdomar kan dras, vad har gått bra och vad kunde gjorts bättre? Sammanfattningsvis är en övergripande positiv erfarenhet från projektet att det med den valda metoden vist sig gå att implementera god användbarhet. Projektets mål och resultat. Målet med projektet var att ta fram en prototyp till ett feluppföljningssystem, anpassat till mekanisk verkstadsindustri, där fokus låg på att visa hur ett kognitiv anpassat gränssnittet kan se ut och fungera. Det bakomliggande intresset från Volvo-Flobys sida var att få ett verktyg för att öka kunskapen om orsaker till stillestånd och i en förlängning kunna öka verkningsgraden. Prototypen för detta projekt var klar i sin här presenterade form i juni 1996 och den efterföljande kontrollperioden sträckte sig fram till november Under denna period noterades inga egentliga användbarhetsproblem, utan de synpunkter som gavs gällde främst önskemål om kompletterande tjänster. Med avseende på aspekterna ovan var projektet lyckosamt då det frambringade ett kognitivt väldesignat gränssnitt för att smidigt samla in och sammanställa de data som behövs för att studera orsaker till stillestånd. Därmed visade projektet också hur huvuddelarna (loggning av stillestånd och uppföljning av loggdata) i ett utbyggt nätverk för kontinuerlig loggning och uppföljning av stillestånd skulle kunna se ut. Det bör också nämnas att två examensarbeten genomfördes i anslutning till detta projekt under våren 1996 vid institutionen för datavetenskap, högskolan i Skövde. Bengtsson, Andreas: Utveckling av presentationsprogram för verkningsgrad hos Volvo PV, HS-IDA-EA Syftet med examensarbetet var att ta fram en prototyp för beräkning och presentation verkningsgrad. Detta examensarbetet var relativt fristående med avseende på feluppföljningssystemet, och fokuserade på hur ett gränssnitt för presentation av verkningsgrad med avseende på olika tidsperioder, arbetsskift, operatörer, etc. skull kunna se ut. Lindberg, Ann-Sofi: Problemlösning - operatörens vardag, HS-IDA-EA I examensarbetet studerades problemlösning hos operatörerna vid vevstaksline, Volvo-Floby. Diskussion kring inledande mål. Vid projektets inledning fanns en del önskemål och idéer kring hur systemet skulle kunna fungera (se sid ). Bättre uppfattning om orsaker till stillestånd. Man ville ha en klarare uppfattning om orsakerna till stillestånd för att få ett bättre underlag vid diskussioner om åtgärder och förbättringar. Inom ramen för denna rapport gjordes ingen egentlig utvärdering av olika felorsaker och lämpliga åtgärder, dock visade den sammanställning som genererades av uppföljningssystemet att speciellt byte av förslitningsdelar (skär) med medföljande injustering (mätning) konsekvent stod för en stor del av stilleståndstiden. Under projektet fördes också vissa resonemang kring inköp av skär med längre Typsnitt

73 DEL 9: DISKUSSIONER OCH SLUTSATSER Avslutningsvis presenteras i denna del diskussioner och slutsatser om projektet. Vilka lärdomar kan dras, vad har gått bra och vad kunde gjorts bättre? Sammanfattningsvis är en övergripande positiv erfarenhet från projektet att det med den valda metoden vist sig gå att implementera god användbarhet. Projektets mål och resultat Målet med projektet var att ta fram en prototyp till ett feluppföljningssystem, anpassat till mekanisk verkstadsindustri, där fokus låg på att visa hur ett kognitiv anpassat gränssnittet kan se ut och fungera. Det bakomliggande intresset från Volvo-Flobys sida var att få ett verktyg för att öka kunskapen om orsaker till stillestånd och i en förlängning kunna öka verkningsgraden. Prototypen för detta projekt var klar i sin här presenterade form i juni 1996 och den efterföljande kontrollperioden sträckte sig fram till november Under denna period noterades inga egentliga användbarhetsproblem, utan de synpunkter som gavs gällde främst önskemål om kompletterande tjänster. Med avseende på aspekterna ovan var projektet lyckosamt då det frambringade ett kognitivt väldesignat gränssnitt för att smidigt samla in och sammanställa de data som behövs för att studera orsaker till stillestånd. Därmed visade projektet också hur huvuddelarna (loggning av stillestånd och uppföljning av loggdata) i ett utbyggt nätverk för kontinuerlig loggning och uppföljning av stillestånd skulle kunna se ut. Det bör också nämnas att två examensarbeten genomfördes i anslutning till detta projekt under våren 1996 vid institutionen för datavetenskap, högskolan i Skövde. Bengtsson, Andreas: Utveckling av presentationsprogram för verkningsgrad hos Volvo PV, HS-IDA-EA Syftet med examensarbetet var att ta fram en prototyp för beräkning och presentation verkningsgrad. Detta examensarbetet var relativt fristående med avseende på feluppföljningssystemet, och fokuserade på hur ett gränssnitt för presentation av verkningsgrad med avseende på olika tidsperioder, arbetsskift, operatörer, etc. skull kunna se ut. Lindberg, Ann-Sofi: Problemlösning - operatörens vardag, HS-IDA-EA I examensarbetet studerades problemlösning hos operatörerna vid vevstaksline, Volvo-Floby. Diskussion kring inledande mål Vid projektets inledning fanns en del önskemål och idéer kring hur systemet skulle kunna fungera (se sid ). Bättre uppfattning om orsaker till stillestånd Man ville ha en klarare uppfattning om orsakerna till stillestånd för att få ett bättre Typsnitt

74 DEL 9: DISKUSSIONER OCH SLUTSATSER Avslutningsvis presenteras i denna del diskussioner och slutsatser om projektet. Vilka lärdomar kan dras, vad har gått bra och vad kunde gjorts bättre? Sammanfattningsvis är en övergripande positiv erfarenhet från projektet att det med den valda metoden vist sig gå att implementera god användbarhet. Projektets mål och resultat Målet med projektet var att ta fram en prototyp till ett feluppföljningssystem, anpassat till mekanisk verkstadsindustri, där fokus låg på att visa hur ett kognitiv anpassat gränssnittet kan se ut och fungera. Det bakomliggande intresset från Volvo-Flobys sida var att få ett verktyg för att öka kunskapen om orsaker till stillestånd och i en förlängning kunna öka verkningsgraden. Prototypen för detta projekt var klar i sin här presenterade form i juni 1996 och den efterföljande kontrollperioden sträckte sig fram till november Under denna period noterades inga egentliga användbarhetsproblem, utan de synpunkter som gavs gällde främst önskemål om kompletterande tjänster. Med avseende på aspekterna ovan var projektet lyckosamt då det frambringade ett kognitivt väldesignat gränssnitt för att smidigt samla in och sammanställa de data som behövs för att studera orsaker till stillestånd. Därmed visade projektet också hur huvuddelarna (loggning av stillestånd och uppföljning av loggdata) i ett utbyggt nätverk för kontinuerlig loggning och uppföljning av stillestånd skulle kunna se ut. Det bör också nämnas att två examensarbeten genomfördes i anslutning till detta projekt under våren 1996 vid institutionen för datavetenskap, högskolan i Skövde. Bengtsson, Andreas: Utveckling av presentationsprogram för verkningsgrad hos Volvo PV, HS-IDA-EA Syftet med examensarbetet var att ta fram en prototyp för beräkning och presentation verkningsgrad. Detta examensarbetet var relativt fristående med avseende på feluppföljningssystemet, och fokuserade på hur ett gränssnitt för presentation av verkningsgrad med avseende på olika tidsperioder, arbetsskift, operatörer, etc. skull kunna se ut. Lindberg, Ann-Sofi: Problemlösning - operatörens vardag, HS-IDA-EA I examensarbetet studerades problemlösning hos operatörerna vid vevstaksline, Volvo-Floby. Typsnitt

75 DEL 9: DISKUSSIONER OCH SLUTSATSER Avslutningsvis presenteras i denna del diskussioner och slutsatser om projektet. Vilka lärdomar kan dras, vad har gått bra och vad kunde gjorts bättre? Sammanfattningsvis är en övergripande positiv erfarenhet från projektet att det med den valda metoden vist sig gå att implementera god användbarhet. Projektets mål och resultat Målet med projektet var att ta fram en prototyp till ett feluppföljningssystem, anpassat till mekanisk verkstadsindustri, där fokus låg på att visa hur ett kognitiv anpassat gränssnittet kan se ut och fungera. Det bakomliggande intresset från Volvo-Flobys sida var att få ett verktyg för att öka kunskapen om orsaker till stillestånd och i en förlängning kunna öka verkningsgraden. Prototypen för detta projekt var klar i sin här presenterade form i juni 1996 och den efterföljande kontrollperioden sträckte sig fram till november Under denna period noterades inga egentliga användbarhetsproblem, utan de synpunkter som gavs gällde främst önskemål om kompletterande tjänster. Med avseende på aspekterna ovan var projektet lyckosamt då det frambringade ett kognitivt väldesignat gränssnitt för att smidigt samla in och sammanställa de data som behövs för att studera orsaker till stillestånd. Därmed visade projektet också hur huvuddelarna (loggning av stillestånd och uppföljning av loggdata) i ett utbyggt nätverk för kontinuerlig loggning och uppföljning av stillestånd skulle kunna se ut. Det bör också nämnas att två examensarbeten genomfördes i anslutning till detta projekt under våren 1996 vid institutionen för datavetenskap, högskolan i Skövde. Bengtsson, Andreas: Utveckling av presentationsprogram för verkningsgrad hos Volvo PV, HS-IDA-EA Syftet med examensarbetet var att ta fram en prototyp för beräkning och presentation verkningsgrad. Detta examensarbetet var relativt fristående med avseende på feluppföljningssystemet, och fokuserade på hur ett gränssnitt för presentation av verkningsgrad med avseende på olika tidsperioder, arbetsskift, operatörer, etc. skull kunna se ut. Lindberg, Ann-Sofi: Problemlösning operatörens vardag, HS-IDA- EA Typsnitt

76 Typografitips! Text ska förmedla struktur med hjälp av struktur! Utnyttja informativa rubriker, underrubriker, etc. - Viktigt för gruppering, struktur och översikt. - Underlättar bearbetning (tar in texten i två steg). Text behöver luft. Högst två typsnitt. Högst fyra storlekar (huvudrubrik, underrubriker, brödtext, fotnoter). Använd en metod (förslagsvis kursiv) för att betona. Försiktig med versaler tecken per rad som riktmärke för läsbarhet. Bra & tydlig kontrast. Justering av text? (marginaljusterat eller vänsterjusterat) Serifer på papper, sans-serifer på skärm. Typsnitt

77 Typsnitt

78 Teman för föreläsningen Gestaltlagarna Informationskodning Färg Ikoner Typografi Layout

79 Observera! Layoutdelen hanns inte med under föreläsningen den 11:e november. Den kommer att gås igenom snabbt (5-10 min.) i början av den andra designorienterade föreläsningen torsdagen den 21:e november. Föreläsningen den 21:e november kommer sedan att handla om virtuella interaktiva karaktärer.

80 Varför layout? skapa struktur skapa balans markera betydelse Layout

81 Layout Proportioner Layout: Proportioner

82 Kvadrat 1:1 Datorskärm 3:4 Gyllene snittet 1,62 A4 1,42 (roten ur 2) Layout: Proportioner

83 Layout Rutnät, gruppering & justering Layout: Rutnät, gruppering & justering

84 Layout: Rutnät, gruppering & justering

85 Layout: Rutnät, gruppering & justering

86 Layout Regularisering Layout: Regularisering

87 Layout: Regularisering

88 Layout: Regularisering

89 Regularisering (Rutnät, gruppering & justering) > Likformighet & upprepning < Layout: Regularisering

90 Layout: Regularisering

91 Layout Ramar & linjer Layout: Ramar & linjer

92 Layout: Ramar & linjer

93 Ramar & Linjer > Var försiktig! < Layout: Ramar & linjer

94 Layout: Ramar & linjer

95 Ramar & Linjer > Var försiktig! < Använd: mellanrum / lagen om närhet lagen om likhet tonade bakgrunder Layout: Ramar & linjer

96 Layout: Ramar & linjer

Teman för föreläsningen. Gestaltlagarna Layout Typografi

Teman för föreläsningen. Gestaltlagarna Layout Typografi Teman för föreläsningen Gestaltlagarna Layout Typografi Gestaltlagarna Lagen om likhet Gestaltlagarna Gestaltlagarna Gestaltlagarna Lagen om närhet Gestaltlagarna Gestaltlagarna närhet likhet kontinuitet

Läs mer

Kommunikationsorienterad. visuell design

Kommunikationsorienterad. visuell design Kommunikationsorienterad visuell design Magnus Haake LUCS, Lunds universitet Kommunikationsorienterad visuell design = Kognitivt orienterad grafisk design Varför kognitivt orienterad grafisk design? Verktyg

Läs mer

Kommunikations- orienterad visuell design

Kommunikations- orienterad visuell design Kommunikations- orienterad visuell design Magnus Haake Inst. för Designvetenskaper, LTH Lunds universitet Kommunikationsorienterad visuell design = Kognitivt orienterad grafisk design Varför kognitivt

Läs mer

Layout. Layout. Varför layout? Proportioner. Rutnät, gruppering & justering. skapa struktur skapa balans markera betydelse

Layout. Layout. Varför layout? Proportioner. Rutnät, gruppering & justering. skapa struktur skapa balans markera betydelse Layout Proportioner A4 1,42 (roten ur 2) Letter 8,5 x 11 Gyllene snittet 1,62 Kvadrat (1:1) Datorskärm 0,75 (3:4) Layout: Proportioner Layout: Proportioner Pocket: 110 x 178 mm Fackpockett: 110 x 170 mm

Läs mer

Layout. Proportioner. Layout: Proportioner

Layout. Proportioner. Layout: Proportioner Layout Proportioner Layout: Proportioner A4 1,42 (roten ur 2) Letter 8,5 x 11 Gyllene snittet 1,62 Kvadrat (1:1) Datorskärm 0,75 (3:4) Layout: Proportioner Layout: Proportioner Pocket: 110 x 178 mm Fackpockett:

Läs mer

Layout. Proportioner. Layout: Proportioner

Layout. Proportioner. Layout: Proportioner Layout Proportioner Layout: Proportioner Layout: Proportioner Layout: Proportioner Layout: Proportioner A4 1,42 (roten ur 2) Letter 8,5 x 11 Gyllene snittet 1,62 Kvadrat (1:1) Datorskärm 0,75 (3:4) Layout:

Läs mer

Kommunikations- orienterad visuell design

Kommunikations- orienterad visuell design Kommunikations- orienterad visuell design Magnus Haake Kognitionsvetenskap Lunds universitet Kommunikationsorienterad visuell design = Kognitivt orienterad grafisk design Varför grafisk design? Verktyg

Läs mer

Layout. Proportioner. A4 1,42 (roten ur 2) Letter 8,5 x 11. Gyllene snittet 1,62. Kvadrat (1:1) Datorskärm 0,75 (3:4) Layout: Proportioner

Layout. Proportioner. A4 1,42 (roten ur 2) Letter 8,5 x 11. Gyllene snittet 1,62. Kvadrat (1:1) Datorskärm 0,75 (3:4) Layout: Proportioner Layout Proportioner A4 1,42 (roten ur 2) Letter 8,5 x 11 Gyllene snittet 1,62 Kvadrat (1:1) Datorskärm 0,75 (3:4) Pocket: 110 x 178 mm Fackpockett: 110 x 170 mm Lilla romanformatet: 135 x 210 mm Stora

Läs mer

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

Läs mer

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

Läs mer

Grafisk manual GAKE DOJO. Riktigt bra självförsvar!

Grafisk manual GAKE DOJO. Riktigt bra självförsvar! Grafisk manual 2007 JUJUTSU Riktigt bra självförsvar! Högskolan för Lärande och Kommunikation i Jönköping Andrea Drljaca, Viktor Larsson och Jesper Jarl Grafisk manual 2007-06-08 INNEHÅLL GRAFISK MANUAL...4

Läs mer

Gränsöverskridande samverkan

Gränsöverskridande samverkan 1 Grafisk Profil Denna grafiska manual är en hjälp för dig som jobbar i eller med Vårdsamverkan Fyrbodal för att skapa en tydlig, enhetlig och konsekvent kommunikation med omvärlden. Vår logga, våra färger

Läs mer

GRAFISKA RIKTLINJER. för Statskontoret. Version

GRAFISKA RIKTLINJER. för Statskontoret. Version GRAFISKA RIKTLINJER för Statskontoret Version 5. 2018-01-09 Innehåll Logotype svensk och engelsk Färgpalett Typografi Rapportomslag Annonsering Visitkort Logotype svensk och engelsk Logotypen förekommer

Läs mer

Hur gör man en poster? Sommarforskarskolan 2018

Hur gör man en poster? Sommarforskarskolan 2018 Hur gör man en poster? Sommarforskarskolan 2018 En vetenskaplig poster Vad är en poster? Vad är en postersession? En vetenskaplig poster Hur skiljer sig en poster från en artikel? Hur skiljer sig en poster

Läs mer

Grafisk manual Vårdsamverkan Skaraborg

Grafisk manual Vårdsamverkan Skaraborg Grafisk manual AaBbCcDdEe FfGgHhIiJjKk LlMmNnOoPp QqRrSsTtnOoPpQq RrSsTtUuVv WwXxYyZzÅåÄäÖö Varför en grafisk manual? s visuella profil syftar till att skapa en tydlig, enhetlig och konsekvent kommunikation

Läs mer

Innehåll. 3 Grafisk profil. 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek

Innehåll. 3 Grafisk profil. 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek Grafisk profil Innehåll 3 Grafisk profil 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek 6 Teckensnitt 7 Färger Profilfärger och kompletterande

Läs mer

Design av användargränssnitt

Design av användargränssnitt Design av användargränssnitt Vad är ett bra användargränssnitt? Vad påverkar designen? Utvärdering viktig Praktiska rekommendationer - Heuristik Exempel på bra och mindre bra design Vad är ett användargränssnitt?

Läs mer

RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK. Grafisk manual

RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK. Grafisk manual RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK Grafisk manual Riksförbundet Attention är en intresseorganisation för människor med neuropsykiatriska funktionshinder. Vi arbetar för att de barn, ungdomar och vuxna

Läs mer

Att göra en vetenskaplig poster

Att göra en vetenskaplig poster Att göra en vetenskaplig poster FoU-enheten för närsjukvården Susan Wilhelmsson FoU handledare, docent Vad är en poster? Ett sätt att presentera ett arbete på ett enkelt och tilltalande sätt Ett sätt att

Läs mer

GRAFISK MANUAL FASTSTÄLLD AV FULLMÄKTIGE 2014-12-10

GRAFISK MANUAL FASTSTÄLLD AV FULLMÄKTIGE 2014-12-10 GRAFISK MANUAL Studentkåren i Borås Studentkåren i Borås 2014 Fastställd av fullmäktige 2014-12-10 Grafik: Studentkåren i Borås Layout: Paulina Olin Att användas som riktlinje av studentkårens interna

Läs mer

Grafisk profil för digitala gränssnitt MAJ 2019

Grafisk profil för digitala gränssnitt MAJ 2019 Grafisk profil för digitala gränssnitt MAJ 2019 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT Inledning Den här grafiska profilen för digitala gränssnitt innehåller riktlinjer för hur Umeå kommuns e-tjänster

Läs mer

RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK. Grafisk manual

RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK. Grafisk manual RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK Grafisk manual förord enhetligt uttryck - enhetligt intryck Riksförbundet Attention är en intresseorganisation för människor med neuropsykiatriska funktionshinder.

Läs mer

MANUAL FÖR ENHETLIG KOMMUNIKATION GRAFISK PROFIL

MANUAL FÖR ENHETLIG KOMMUNIKATION GRAFISK PROFIL MANUAL FÖR ENHETLIG KOMMUNIKATION GRAFISK PROFIL Innehåll Logotyp 1.0 Den grafiska profilen syftar till att skapa en enhetlig visuell identitet för NB coachning. Den här manualen beskriver hur man arbetar

Läs mer

Grafisk manual Version 1.0 CTIVE

Grafisk manual Version 1.0 CTIVE Grafisk manual Version 1.0 SPORTS CLUB Active Sportsclub 2 Innehåll 1 / Introduktion 1.1 / Syfte 2 / Grafisk manual 2.1 / Logotyp 2.1.1 Logotypens sammansättning 2.1.2 Storlekar & friyta 2.1.3 Användning

Läs mer

Grafisk profil R AB. Ransäters Invest AB

Grafisk profil R AB. Ransäters Invest AB Grafisk profil R AB Ransäters Invest AB Innehåll 3 Grafisk profil 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek 6 Teckensnitt 7 Färger och

Läs mer

DOME. storyteller DOME STORYTELLER

DOME. storyteller DOME STORYTELLER STORYTELLER Domteatern på Visualiseringscenter C är ett fantastiskt presentationsverktyg med en yta på nästan 300 kvadratmeter som är helt anpassningsbar efter kundens önskemål. Dome Storyteller är utvecklat

Läs mer

Grafisk design För synskadade och lite om dyslexi

Grafisk design För synskadade och lite om dyslexi Grafisk design För synskadade och lite om dyslexi Färgblind Tritanopi/tritanomali, blått Protanopi/protanomali, röd Deuteranopi/deuteranomali, grönt Röd-grön vanligast Gul-blå ovanlig Mycket ovanligt,

Läs mer

Interaktionsteknik. Föreläsning 6, Kognition perception. Översikt. Vad händer i medvetandet?

Interaktionsteknik. Föreläsning 6, Kognition perception. Översikt. Vad händer i medvetandet? Föreläsning 6: Kognition och perception Rogers et al. Kapitel 3 Översikt Vad är kognition? Vad är användare bra och dåliga på? Exempel på hur kognition kopplas till interaktionsdesign Kognition och perception

Läs mer

För mycket information! Att presentera vetenskap. Målet med föreläsningen. Planera din presentation besvara dessa frågor: Presentationens struktur

För mycket information! Att presentera vetenskap. Målet med föreläsningen. Planera din presentation besvara dessa frågor: Presentationens struktur Målet med föreläsningen tt presentera vetenskap Magister-/ Masterkurs Odontologi, VT- 16 Tülay Lindberg, nna Kats Institutionen för Odontologi 1. Lära dig mer om hur man presenterar forskning så att de

Läs mer

Föreläsning 6: Kognition och perception. Rogers et al. Kapitel 3

Föreläsning 6: Kognition och perception. Rogers et al. Kapitel 3 Föreläsning 6: Kognition och perception Rogers et al. Kapitel 3 Översikt Vad är kognition? Vad är användare bra och dåliga på? Exempel på hur kognition kopplas till interaktionsdesign 120420 Kognition

Läs mer

Riksteatern Grafisk manual

Riksteatern Grafisk manual Riksteatern Grafisk manual 2017-08-24 Om manualen Riksteaterns utseende ska vara tydligt och igenkännbart i visuell kommunikation - både internt och externt. Det är en förutsättning för att skapa ett starkt

Läs mer

GRAFISK MANUAL & RIKTLINJER

GRAFISK MANUAL & RIKTLINJER GRAFISK MANUAL & RIKTLINJER Sektion 0 Introduktion Sida 2 Sektion 1 Logotyp Sida 4 Sektion 2 Typografi Sida 8 Sektion 3 Färger Sida 12 Sektion 4 Placeringsexempel Sida 14 SEKTION 0 INTRODUKTION Producerad

Läs mer

Allt är Tobbes fel. Grafisk profil för förbundet. Ung Pirat

Allt är Tobbes fel. Grafisk profil för förbundet. Ung Pirat Allt är Tobbes fel. Grafisk profil för förbundet Ung Pirat Varför behövs en grafisk profil? En grafisk profil har man för att en organisation enkelt ska kännas igen. Här sammanställs olika riktlinjer för

Läs mer

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare. 1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera

Läs mer

GUIDELINES: VALSLOGAN 2018 GRAFISK ANVÄNDNING

GUIDELINES: VALSLOGAN 2018 GRAFISK ANVÄNDNING GUIDELINES: VALSLOGAN 2018 GRAFISK ANVÄNDNING Det här dokumentet anger guidelines för hur 2018 års valslogan används i grafisk form. @ 2018 Socialdemokraterna Sida 1 2018 ÅRS VALSLOGAN: Användning: Använd

Läs mer

Vad påverkar designen?

Vad påverkar designen? Vad påverkar designen av ett gränssnitt? Vi ser arbetet med design av ett användargränssnitt som något som liknar en arkitekts arbete. En arkitekt ska i sin utformning av en ny byggnad se till att: Byggnaden

Läs mer

Varumärket - föreningens hjärta... 3. Logotyp... 4. Logotypens frizon... 5. Deviselement... 6. Profilfärger... 7. Primära färger...

Varumärket - föreningens hjärta... 3. Logotyp... 4. Logotypens frizon... 5. Deviselement... 6. Profilfärger... 7. Primära färger... 1 Varumärket - föreningens hjärta... 3 Logotyp... 4 Logotypens frizon... 5 Deviselement... 6 Profilfärger... 7 Primära färger... 7 Sekundära färger... 8 Tertiära färger... 9 Typsnitt & typografi... 10

Läs mer

http://www.one-life.com/ http://www.bjork.com/ http://www.ro.me/ http://www.protest.eu/en#!/home

http://www.one-life.com/ http://www.bjork.com/ http://www.ro.me/ http://www.protest.eu/en#!/home http://www.one-life.com/ http://www.bjork.com/ http://www.ro.me/ http://www.protest.eu/en#!/home http://www.oakley.com/legionofoakley?cm_mmc=ads-_-apparel_goggles-_-prs_sigseries-_-appa Inspiration Koncept

Läs mer

Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Design och konstruktion av grafiska gränssnitt Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Making it look good: Visual Style and Aesthetics Visuell design Färger Typografi Exempel

Läs mer

Våra visuella riktlinjer

Våra visuella riktlinjer GRAFISK MANUAL Våra visuella riktlinjer Det här dokumentet innehåller regler för vår visuella kommunikation. Följ dessa regler noggrant för att bibehålla och bygga Bygdegårdarnas Riksförbund som varumärke.

Läs mer

Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst?

Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst? Några exempel Principer för design Hur många kan ställa in klockan på sin video utan manual? Hur ofta vrider man på fel platta på spisen eller glömmer vrida av den när man är klar? Hur ofta knuffar man

Läs mer

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor Projektarbete Solveig Betnér Innehållsförteckning Syfte s. 3 Målgrupp s. 3 Genre s. 3 Funktionalitet s. 4 Prototyper s. 5

Läs mer

Kognitiva teorier inom MDI - Introduktion

Kognitiva teorier inom MDI - Introduktion Kognitiva teorier inom MDI - Introduktion (MDI) Inst. för informationsteknologi http://www.it.uu.se/edu/course/homepage/hci/ht10 Arbetsuppgiften till idag: Identifiera ett tydligt exempel på dålig användbarhet

Läs mer

Föreläsning 7: Kognition & perception

Föreläsning 7: Kognition & perception Föreläsning 7: Kognition & perception FSR: 3, 4 Att läsa: Kapitel 2-3 i Rogers et al.: Interaction design Översikt Att kunna om perception och kognition Konceptuella modeller Metaforer Paradigm, teorier,

Läs mer

Webbdesign. Fotografiska vann bästa webbsite 2015 i kategorin turism:

Webbdesign. Fotografiska vann bästa webbsite 2015 i kategorin turism: Webbdesign Man kan definiera webbdesign som konsten att skapa webbplatser. En webbdesigners uppgift är att välja färger som passar, lägga till bra och rätt funktioner till webbplatsen och sedan se till

Läs mer

Design av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan

Design av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan Design av användargränssnitt Vad är ett bra användargränssnitt? Vad påverkar designen? Utvärdering viktig Praktiska råd och tips - Heuristik Exempel på bra och mindre bra design Några egenskaper hos människan

Läs mer

Människan och Tekniken. Fö 3 Människan och tekniken. Perception. Visuell perception

Människan och Tekniken. Fö 3 Människan och tekniken. Perception. Visuell perception Fö 3 Människan och tekniken Fö1 om Användbarhet och svårigheter med det. PACT som ett ramverk för att beskriva problemet. Fö 2 om metoder för att genomföra PACT-analys, dvs användarstudie och ev. analys

Läs mer

Brand Guidelines 2019

Brand Guidelines 2019 Brand Guidelines 2019 Alla vinner när du har rätt tonalitet. Uppdraget vi har är viktigt. Om ingen tog hand om använda tidningar och förpackningar skulle det få stora negativa konsekvenser för hela samhället,

Läs mer

Brandskyddsföreningen är en allmännyttig ideell förening som arbetar för ett brandsäkrare Sverige. Brandskydds föreningen är ett ledande

Brandskyddsföreningen är en allmännyttig ideell förening som arbetar för ett brandsäkrare Sverige. Brandskydds föreningen är ett ledande Vår grafiska manual Brandskyddsföreningen är en allmännyttig ideell förening som arbetar för ett brandsäkrare Sverige. Brandskydds föreningen är ett ledande kunskapscentrum som ökar fram tidens brandsäkerhet

Läs mer

Grafisk manual reviderad

Grafisk manual reviderad EFFEKTIV KOMMUNIKATION. En väl genomtänkt, enhetlig och konsekvent tillämpad grafisk profil skapar igenkänning och tydlighet. En förutsättning för korrekt och konsekvent tillämpning av den grafiska profilen

Läs mer

Grundläggande grafisk profilmanual för SKR. Georgia Pro Black italic. Georgia Bold italic. Typografi. Rubriker. Georgia Pro light italic 16 pkt

Grundläggande grafisk profilmanual för SKR. Georgia Pro Black italic. Georgia Bold italic. Typografi. Rubriker. Georgia Pro light italic 16 pkt Grundläggande grafisk profilmanual för SKR Typografi Vi använder Calibri och georgia. Dessa typsnitt finns förinstallerade på de flesta datorer och därmed kan både tryck, web och word-dokument hålla samma

Läs mer

Prototypning och heuristisk utvärdering

Prototypning och heuristisk utvärdering Filmtajm Prototypning och heuristisk utvärdering! Sketch-a-move http://vimeo.com/5125096 Interaktiva system Mattias Arvola Institutionen för datavetenskap 2 Dagens föreläsning Prototypens roll: Evolutionär

Läs mer

SWEBO Bioenergy Grafisk profil

SWEBO Bioenergy Grafisk profil SWEBO Bioenergy Grafisk profil Formsmedjan Reklam & Kommunikation Grafisk profil Den image vi har, det vill säga hur andra människor uppfattar vårt företag är ett resultat av alla de intryck vi gör på

Läs mer

RIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER

RIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER RIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER DETTA DOKUMENT ÄR ETT KOMPLEMENT TILL NYFÖRETAGARCENTRUM SVERIGES GRAFISKA PROFIL. I DEN GRAFISKA PROFILEN SPECIFICERAS

Läs mer

GRAFISK PROFILMANUAL

GRAFISK PROFILMANUAL GRAFISK PROFILMANUAL JUNI 2017 INLEDNING Vår grafiska identitet är det snabbaste och starkaste uttrycksmedlet för vårt varumärke. Därför är det av största vikt att vi följer de grafiska riktlinjer som

Läs mer

GRAFISK PROFIL TIDAHOLMS KOMMUN

GRAFISK PROFIL TIDAHOLMS KOMMUN GRAFISK PROFIL TIDAHOLMS KOMMUN INNEHÅLL 2 3 4 5 6 7 8 8 8 Varför grafisk profil? Övergripande riktlinjer Logotyper Kommunvapen Tidaholmslogotyp Verksamhetsspecifika symboler Skyltar Mallar Audiell profil

Läs mer

Grafisk manual Version 1.0

Grafisk manual Version 1.0 Grafisk manual 2 0 / Innehåll 1 / Introduktion 1.1 / Syfte 2 / Grafisk manual 2.1 / Logotyp 2.1.1 Logotypens sammansättning 2.1.2 Storlekar & friyta 2.1.3 Användning 2.1.4 Strapline 2.1.5 Operatörslogotyper

Läs mer

GRAFISK MANUAL Arcada studerandekår - ASK

GRAFISK MANUAL Arcada studerandekår - ASK GRAFISK MANUAL Arcada studerandekår - ASK Innehåll 1 Inledning 3 2 Namn och undertecknare 3 3 Färgskala 3 4 Typografi 4 4.1 Brödtext 4 4.2 Rubriker 5 5 Logo 5 5.1 Logo med text 5 5.2 Logo utan text 6 5.3

Läs mer

Logotyp och Grafisk profil för UT Transport i Norr AB

Logotyp och Grafisk profil för UT Transport i Norr AB Logotyp: Introduktion UT Transport i Norr AB s logotyp är designad för att på ett tydligare och starkare sätt representera det företag som UT har utvecklats till att bli idag och kommer att bli imorgon.

Läs mer

Klimatrådet Grafiskt manér

Klimatrådet Grafiskt manér Klimatrådet Grafiskt manér Igenkänning och trovärdighet Klimatrådet är ett nätverk bestående av vitt skilda organisationer från offentlighet, näringsliv och idéburen sektor. En del i att knyta ihop rådets

Läs mer

Inviatech Grafisk Profil V kreativ & engagerad samhällsbyggare

Inviatech Grafisk Profil V kreativ & engagerad samhällsbyggare kreativ & engagerad samhällsbyggare Grafisk profil Allt vi på Inviatech kommunicerar påverkar omgivningens bild av oss. För att underlätta arbetet med att sprida vårt budskap och våra värderingar har vi

Läs mer

GRAFISK PROFIL TIDAHOLMS KOMMUN

GRAFISK PROFIL TIDAHOLMS KOMMUN GRAFISK PROFIL TIDAHOLMS KOMMUN INNEHÅLL 2 3 4 5 6 7 9 10 10 10 Varför grafisk profil? Övergripande riktlinjer Logotyper Kommunvapen Tidaholmslogotyp Grafiska element Verksamhetsspecifika symboler Skyltar

Läs mer

Intryck som ger avtryck

Intryck som ger avtryck Intryck som ger avtryck Vapnet är stadens minsta gemensamma nämnare, vars släktdrag går att känna igen redan från början av 1600-talet då staden grundades. En stad ett ansikte Göteborgs Stads grafiska

Läs mer

Vad är Typografi och Layout

Vad är Typografi och Layout Vad är Typografi och Layout Typografi: Att ge form åt dokumentets bokstäver, ord, meningar, stycken och rubriker. Layout: Att lägga ut text och bild på en sida så att den blir tilltalande och lätt för

Läs mer

Kursplan Gränssnittsdesign, 100p Läsår

Kursplan Gränssnittsdesign, 100p Läsår Kursplan Gränssnittsdesign, 100p Läsår 2013-2014 Kurswebb: www.creativerooms.se/edu, välj Gränssnittsdesign Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se Hösttermin 2013 Vecka

Läs mer

Fö 4: Utvärdering. Gästföreläsning. Muddy-cards resultat. Varför och vad? Varför? Vad? Mot vad? (Krav) Hur? IMPACT

Fö 4: Utvärdering. Gästföreläsning. Muddy-cards resultat. Varför och vad? Varför? Vad? Mot vad? (Krav) Hur? IMPACT Varför? Vad? Mot vad? (Krav) Hur? IMPACT Fö 4: Utvärdering Gästföreläsning Computer Supported Collaborative Work flera användare. Live Help Systems Johan Åberg Vecka 10 Måndag 3/3 kl 10 i sal C3 Muddy-cards

Läs mer

INNEHÅLL. Version

INNEHÅLL. Version INNEHÅLL 1. Om Trosa kommuns grafiska profil och manual Sid 3 2. Kommunvapnet Sid 4 2.1. Form och ursprung Sid 4 2.2. Användning av vapnet Sid 5 2.3. Vapnets färger och varianter Sid 6 2.4. Otillåten användning

Läs mer

Dokumentation av rapportmall

Dokumentation av rapportmall Dokumentation av rapportmall Utgivningsår: 2003 Författare: Eva Erbenius Samhällsmedicin Centrum för Tillämpad Näringslära Box 175 33 Wollmar Yxkullsgatan 19 118 91 Stockholm Innehåll Inledning... 3 Rapportens

Läs mer

förankrade i Sverige och den vardag som svenskarna upplever oavsett klass, bostadsort, ålder eller ursprung.

förankrade i Sverige och den vardag som svenskarna upplever oavsett klass, bostadsort, ålder eller ursprung. En guide till Alliansens utseende 2014 OM ALLIANSEN VÅR AMBITION Alliansen ska upplevas som: förankrade i Sverige och den vardag som svenskarna upplever oavsett klass, bostadsort, ålder eller ursprung.

Läs mer

Grafisk profil 2015 Uppdaterad senast 2015-01-13

Grafisk profil 2015 Uppdaterad senast 2015-01-13 Grafisk profil 2015 Uppdaterad senast 2015-01-13 Innehåll Vad är en grafisk profil?... 3 Färger... 4 Profilfärg...4 Komplementfärger...4 Gråtoner...4 Tilläggsfärger...4 Färgkoder...5 SciLifeLabs logotyp...

Läs mer

S.M.A.R.T UF 07/11 2014 GRAFISK PROFIL Emin Karalic. Grafisk profil 2014/2015

S.M.A.R.T UF 07/11 2014 GRAFISK PROFIL Emin Karalic. Grafisk profil 2014/2015 Grafisk profil 2014/2015 Förord Vi inom S.M.A.R.T UF arbetar för avstigmatiseringen kring psykisk ohälsa genom olika projekt. Talespersonen som agerar som en del av ansiktet utåt är Emin Agga. Han jobbar

Läs mer

Grafisk manual. version 1.2

Grafisk manual. version 1.2 Grafisk manual version 1.2 Innehåll 1.0 Varför en grafisk manual? 1.1 När ska manualen användas? 1.2. Använda profilmaterial 1.3 Lämna synpunkter 2.0 Namnet och organisationen 2.1 Namnet 2.2 Presentationstext

Läs mer

Interaktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling

Interaktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling martin östlund 2008 Interaktionsdesign och användbarhet Personas» Metod för representation av användaren Paper prototyping» Metod för konceptutveckling Att designa för användbarhet» Forsknings- och tillämpningsområden»

Läs mer

Glimåkra folkhögskola

Glimåkra folkhögskola grafisk manual Glimåkra folkhögskola Den grafiska manualen är överenskomna regler inom Glimåkra folkhögskola som anger hur vi bör kommunicera internt och externt. Manualen anger råd och riktlinjer för

Läs mer

Grafisk manual (kort version)

Grafisk manual (kort version) Grafisk manual (kort version) Innehåll 1. Grafisk profil 2. Idé 3. Logotyp Lathund 4. Fri yta 5. Balans 6. Storlek 7. Med andra logotyper 8. Typografi Museo Sans 500 Georgia 9. Färger Huvudfärger 10. Språk

Läs mer

Prototypning. Filmtajm. Prototypens roll: Evolutionär eller kasta bort. Dagens föreläsning. Detaljgrad. Detaljerad i vilket avseende?

Prototypning. Filmtajm. Prototypens roll: Evolutionär eller kasta bort. Dagens föreläsning. Detaljgrad. Detaljerad i vilket avseende? Filmtajm Prototypning Sketch-a-move http://vimeo.com/5125096 Mattias Arvola Institutionen för datavetenskap 2 Dagens föreläsning Typer av prototyper Upplösning Pappersprototyper Datorprototyper Verktyg

Läs mer

Föreläsning 9: Gränssnitt och webbdesign

Föreläsning 9: Gränssnitt och webbdesign Föreläsning 9: Gränssnitt och webbdesign FSR: (1), 4, 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 160429 Gränssnitt och webbdesign 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt

Läs mer

FÄRGER GRAFISKA ELEMENT BILD- OCH TEXTMANÉER ANVÄNDNING SLUTORD

FÄRGER GRAFISKA ELEMENT BILD- OCH TEXTMANÉER ANVÄNDNING SLUTORD GRAFISK MANUAL IDENTITET INNEHÅLL Grafisk design och kommunikation är en sektion med en stark identitet. Vi vet vilka vi är och hur vi gör. Denna manual har gjorts för att alla andra också ska veta vilka

Läs mer

Svenskt Sigill Grafiska riktlinjer

Svenskt Sigill Grafiska riktlinjer Svenskt Sigill Grafiska riktlinjer Inledning 2 Logotyp Grundversion 3 Logotyp Frizon 4 Logotyp 3D 5 Logotyp Webbanpassad 6 Logotyp Byline 7 Logotyp Tilläggsinformation 8 Tillämpning 10 Typografi 11 Kontakt

Läs mer

GRAFISKA RIKTLINJER Svenska Ridsportförbundet maj 2015. Svenska Ridsportförbundet Grafiska riktlinjer 1

GRAFISKA RIKTLINJER Svenska Ridsportförbundet maj 2015. Svenska Ridsportförbundet Grafiska riktlinjer 1 GRAFISKA RIKTLINJER Svenska Ridsportförbundet maj 2015 Svenska Ridsportförbundet Grafiska riktlinjer 1 VÅR PROFIL Det här är en grafisk manual för Svenska Ridsportförbundet som talar om hur vi vill se

Läs mer

Grafisk profil för Ottenby Åkeri

Grafisk profil för Ottenby Åkeri Grafisk profil för Ottenby Åkeri Grafisk profil framtagen för Ottenby Åkeri utav designbyrån ADDinnovation 2006 Inledning Grafisk profil Den största vinsten med en enhetlig grafisk profil är att företagets

Läs mer

Föreläsning 7, Interak2on

Föreläsning 7, Interak2on Föreläsning 7 Handlande, metaforer och interaktionsstilar Kapitel 10-11 i Stone et al. The Human Action Cycle 1. Målformulering Utförandefas 2. Översätta mål till uppgifter 4. Utföra handlingssekvens Utvärderingsfas

Läs mer

Grafisk manual Ture Johanssons Trävaru

Grafisk manual Ture Johanssons Trävaru Grafisk manual Ture Johanssons Trävaru Ve rsion 1. 2012 1 I N N E H Å L L L o g o t y p e F ä r g e r T e c k e n s n i t t P a p p e r s v a l E x e m p e l V i s i t k o r t K o r r e s p o n d e n s

Läs mer

VÅR NYA PPT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP GÖTEBORGS UNIVERSITET

VÅR NYA PPT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP GÖTEBORGS UNIVERSITET VÅR NYA PPT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP 2019-06-03 Lättare för dig bättre för dina åhörare Den nya mallen är framtagen utifrån två olika perspektiv användbarhet

Läs mer

Kognition crash course

Kognition crash course Kognition crash course Termen kognition kommer från det latinska ordet cognitare (att tänka) Kognitionsvetenskap och kognitiv psykologi syftar till att beskriva och förstå hur tänkande går till. Människans

Läs mer

Innehållsförteckning. Inledning 4 Vår logotyp 5 Våra färger 9 Vår typografi 11 Dekorelement 14 Bildspråk 18

Innehållsförteckning. Inledning 4 Vår logotyp 5 Våra färger 9 Vår typografi 11 Dekorelement 14 Bildspråk 18 Grafisk manual Innehållsförteckning Inledning 4 Vår logotyp 5 Våra färger 9 Vår typografi 11 Dekorelement 14 Bildspråk 18 Läs det här först! Välkommen till Teknikföretagens grafiska manual. Den är avsiktligt

Läs mer

Text och typsnitt. Läsbarhet. Tecken per rad. Storlek

Text och typsnitt. Läsbarhet. Tecken per rad. Storlek Text och typsnitt Läsbarhet Tecken per rad Idealt antal för löpande text i större mängder är 45-65, (55). Tidningar och tidskrifter: 25-35 tecken per rad. För långa rader - svårt för läsaren att snabbt

Läs mer

Grafisk manual. Studentkåren i Sundsvall 2013

Grafisk manual. Studentkåren i Sundsvall 2013 Grafisk manual Studentkåren i Sundsvall 2013 STUDENTKÅREN I SUNDSVALL GRAFISK MANUAL INLEDNING 2 Inledning Detta dokument reglerar Sundsvalls studentkårs grafiska profil med logotyper, typsnitt, färger

Läs mer

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Grafisk produktion för webb och tryck. Projektarbete Solveig Betnér

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Grafisk produktion för webb och tryck. Projektarbete Solveig Betnér Högskolan i Borås HT10 Webbredaktörsprogrammet distans Grafisk produktion för webb och tryck Projektarbete Solveig Betnér Sammanfattning och syfte Företaget Solveig skapar textila handarbetade produkter

Läs mer

Nordjobbs grafiska manual

Nordjobbs grafiska manual Grafisk manual Nordjobbs grafiska manual Nordjobbs grafiska manual har utarbetats för att samla Nordjobbs grafiska profil. Den innehåller riktlinjer, bland annat om hur logotyp, typografi och färger ska

Läs mer

Inledning. Innehåll. Inledning

Inledning. Innehåll. Inledning GRAFISK MANUAL 2019 Inledning 2 Inledning Det här är en uppdaterad manual som ska tydliggöra Moderaternas grafiska profil och göra det enkelt att göra rätt. Att den grafiska profilen följs på nationell,

Läs mer

Primär färgpalett. Rött RGB: HEX: #A92B31. Guld RGB: HEX: #AD9469

Primär färgpalett. Rött RGB: HEX: #A92B31. Guld RGB: HEX: #AD9469 Huddinge Färger & gradienter Primär färgpalett Färg är en av de mest igenkännbara delarna av ett varumärke. I bästa fall kan det bli det element som omvärlden främst kopplar till företaget. Huddinge primära

Läs mer

Vetenskapliga affischer. Karin Fahlquist

Vetenskapliga affischer. Karin Fahlquist Vetenskapliga affischer Karin Fahlquist En forsknings affisch/poster Sammafatta information eller forskning kortfattat och tilltalande Publicera resultat Skapa diskussion (diskussions underlag) Reklam

Läs mer

PLÅT & VENTFÖRETAGEN Grafisk manual

PLÅT & VENTFÖRETAGEN Grafisk manual 08-762 75 85 info@pvforetagen.se www.pvforetagen.se Grafisk manual Manual Den här manualen är främst framtagen för alla som är anställda eller arbetar som leverantör till Plåt & Ventföretagen. Målet är

Läs mer

Hi-Fi Prototyping + laborationsgenomgång & verktyg

Hi-Fi Prototyping + laborationsgenomgång & verktyg Hi-Fi Prototyping + laborationsgenomgång & verktyg Karin Fahlquist 2015 Frågor att besvara Vad innebär prototyping? Vad är speciellt med hi-fi prototyping? Hur kan man använda dem? Hur väljer man nivå

Läs mer

Program för grafisk profil Ks/ 2018:140. kommunfullmäktige kommunstyrelsen övriga nämnder förvaltning. Fastställt av kommunfullmäktige

Program för grafisk profil Ks/ 2018:140. kommunfullmäktige kommunstyrelsen övriga nämnder förvaltning. Fastställt av kommunfullmäktige Program för grafisk profil Ks/ 2018:140 kommunfullmäktige kommunstyrelsen övriga nämnder förvaltning Program för grafisk profil Fastställt av kommunfullmäktige 2018-03-22 65 1 2 Program för GRAFISK PROFIL

Läs mer

KULTURRÅDET - EN INSPIRERANDE MYNDIGHET

KULTURRÅDET - EN INSPIRERANDE MYNDIGHET 2008-01-28 09.32 KULTURRÅDET - EN INSPIRERANDE MYNDIGHET Kulturrådet har i uppdrag att förverkliga de kulturpolitiska beslut som riksdag och regering fattat. Det är ett viktigt uppdrag och ett inspirerande

Läs mer

Föreläsning 7: Kognition & perception

Föreläsning 7: Kognition & perception Föreläsning 7: Kognition & perception FSR: 3, 4 Att läsa: Kapitel 2-3 i Rogers et al.: Interaction design Översikt Vad är kognition, perception? Vad har kognition och perception med interaktionsdesign

Läs mer

Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc.

Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc. Karin Fahlquist Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc. Viktigt att se från andra personers perspektiv Abatrakta idéer kommer till liv Utforska

Läs mer

En bild säger mer än tusen ord

En bild säger mer än tusen ord Identitet 2 3 En bild säger mer än tusen ord Ideon Science Park är inte bara en organisation och ett geografiskt område. Det är också ett starkt varumärke som skapar positiva bilder i många människors

Läs mer