Konverter brugere til kunder: Sælg mere med bedre design. Kim Bjørn Digital Markedsføring 6. december 2016

Transkript

1 Konverter brugere til kunder: Sælg mere med bedre design Kim Bjørn Digital Markedsføring 6. december 2016

2 Links fra Kim Bjørn Google Material Design: Online kurser i design og meget andet: Zurb Library (triggers, patterns, elementer): UI Patterns se screenshots og studér brugsmønstre fra mange forskellige apps/sites: patterns.com/explore Apples Human Interface Guidelines: interface- guidelines/ Google Design resources: Google responsive design breakpoints: ui.html#responsive- ui- breakpoints Værktøj til at se sit site i forskellige skærmstørrelser: Adobe farvevælger: Adobe s gratis værktøjer til video m.m.: Invision (prototype værktøj): Google fonts: Google Material Design ikoner: Farveforløb, koder mv.: Sketch- programmet: Animationer i apps: Typografi på nettet: line- length- font- size- responsive- web- design/ Responsive sketchsheets: sketchsheets

3 Hvad skete der lige her?

4 DE$IGN

5 Design is thinking made visual. Saul Bass

6

7 Information! Reaktion?

8 Føle Tænke Gøre

9 Dine brugere

10

11

12

13

14 DEM DET OS

15

16

17

18

19

20

21

22

23 DE$IGN: Tænk anderledes om design. Fokusér på reaktionen! Hvad skal brugerne tænke, føle og gøre? Balancér Dem, Det og Os.

24 Helikopteren

25

26

27

28

29

30

31

32

33

34 Brug lag Prioritér på hvert skærmbillede hvad brugeren skal se som nr. 1, 2 og 3. Start fra et design i gråtoner Brug material.google.com Brug forskelle i størrelse, farve, lyshed og placering

35 Ligner det noget jeg har set før?

36 Når et site bedømmes som troværdigt er det primært pga. indholdet

37 Når et site bedømmes som utroværdigt er det primært pga. designet

38

39

40

41 Historier aktiverer Historier aktiverer mere af hjernen. Mere hjerneaktivitet skaber: en mere positiv oplevelse, bedre forståelse af informationerne samt bedre hukommelse af informationen. *Weinschenk (2016)

42

43

44

45

46 45

47

48

49 Skab likeability Sørg for at ligne andre websites i samme genre/branche og skil dig så lidt ud positivt Brug mennesker, farver og runde former Emotionalize rather than productize Fortæl historier

50 Farver

51

52

53 Brug farver til Identitet Stemning Pædagogik

54

55

56

57

58

59

60

61

62

63

64

65

66 Orange Opmuntrende, optimisme, livsglæde, solskin, fascination, entusiasme, succes, stimulation, helse, ungdommelig. Stimulerer mental aktivitet og appetit. Øger iltoptagelsen. Bringer elementer til forgrunden.

67 Grøn Beroligende, harmoniserende, vækst, hvile, natur, økonomi, håb,. Skaber en følelse af sikkerhed. Tiltrækker sig ofte ikke stor opmærksomhed.

68 Blå Kølende, afslappende, indre ro, rolig, stabil, distance, koncentration, dybde, intellekt, ekspertise. Accepteret blandt mænd. Nedsætter appetit.

69 Lilla/violet Religion, fantasi, åndelighed, mystik, angst, uro, visdom, kongelig, kreativitet, luksus, nobelhed, uafhængighed. Børn foretrækker ofte lilla. Lys lilla til feminint design.

70 Sort Mørke, destruktiv, omsluttende, beskyttende, sorg, eksklusiv, skjulende, magt, autoritet. Fremhæver andre farver. Giver en fornemmelse af dybde/perspektiv.

71 Hvid Let, sart, uskyldig, ren, sårbar, reflekterende, godhed, perfektion, sikkerhed, positiv. Giver indtryk af high-tech, kølighed og lethed i et design.

72 Grå Neutral, upartisk, neddæmpet, trist, asketisk, kedelig. Balancerer kulører. Når grå bruges istedet for sort nedsættes kontrasten og dynamikken i designet.

73

74 Brug farve til at skabe identitet, stemning og pædagogik Brug én primær farve og én sekundær Brug farveforløb i moderat omfang Kontrastér dine primære action-elementer Links og klikbare elementer i farver

75 Hvordan får jeg brugeren til at

76

77

78

79

80

81

82 KØB KØB

83

84

85

86 Sådan gør du Fremhæv Primary Action Skab visuel belønning ved rollover og valg Skab opmærksomhed/info med animation Vis/fortæl brugeren hvad de kan eller har af muligheder

87 Brug pladsen!

88

89

90

91

92

93

94 Brug pladsen Lad billeder og farveflader gå til kant Skab fokus på brugerens valg/opgave Placer vigtige elementer i det tommelfinger-venlige område Lav brede klikbare områder

95 Få brugeren tættere på virkeligheden

96 Virkelighed betaler sig! Video Større 3D foto Foto Tekst *Weinschenk (2016)

97

98

99

100

101

102 Sådan gør du Stor tekst - minimum 16-19px Endnu større billeder Billed(kon)tekster er vigtige! Få brugeren så tæt på den virkelige oplevelse eller det virkelige produkt som muligt (3D/video)

103 DE$IGN: 1) Skab fokus 2) Skab tillid 3) Brug farver pædagogisk 4) Puf til brugeren 5) Brug pladsen 6) Træk dem tæt på

104 Kontakt til Kim