Konverter brugere til kunder: Sælg mere med bedre design Kim Bjørn Digital Markedsføring 6. december 2016
Links fra Kim Bjørn kim@kimbjoern.dk Google Material Design: https://material.google.com/ Online kurser i design og meget andet: https://www.udemy.com/ Zurb Library (triggers, patterns, elementer): http://zurb.com/library UI Patterns se screenshots og studér brugsmønstre fra mange forskellige apps/sites: http://ui- patterns.com/explore Apples Human Interface Guidelines: https://developer.apple.com/ios/human- interface- guidelines/ Google Design resources: https://design.google.com/resources/ Google responsive design breakpoints: https://material.google.com/layout/responsive- ui.html#responsive- ui- breakpoints Værktøj til at se sit site i forskellige skærmstørrelser: http://design.google.com/resizer/ Adobe farvevælger: https://color.adobe.com/ Adobe s gratis værktøjer til video m.m.: https://spark.adobe.com/ Invision (prototype værktøj): https://www.invisionapp.com/ Google fonts: https://fonts.google.com/ Google Material Design ikoner: https://design.google.com/icons/ Farveforløb, koder mv.: http://uigradients.com/ Sketch- programmet: https://sketchapp.com/ Animationer i apps: http://capptivate.co/ Typografi på nettet: https://www.smashingmagazine.com/2014/09/balancing- line- length- font- size- responsive- web- design/ Responsive sketchsheets: http://zurb.com/playground/responsive- sketchsheets
Hvad skete der lige her?
DE$IGN
Design is thinking made visual. Saul Bass
Information! Reaktion?
Føle Tænke Gøre
Dine brugere
DEM DET OS
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.
Helikopteren
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
Ligner det noget jeg har set før?
Når et site bedømmes som troværdigt er det primært pga. indholdet
Når et site bedømmes som utroværdigt er det primært pga. designet
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)
45
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
Farver
Brug farver til Identitet Stemning Pædagogik
Orange Opmuntrende, optimisme, livsglæde, solskin, fascination, entusiasme, succes, stimulation, helse, ungdommelig. Stimulerer mental aktivitet og appetit. Øger iltoptagelsen. Bringer elementer til forgrunden.
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.
Blå Kølende, afslappende, indre ro, rolig, stabil, distance, koncentration, dybde, intellekt, ekspertise. Accepteret blandt mænd. Nedsætter appetit.
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.
Sort Mørke, destruktiv, omsluttende, beskyttende, sorg, eksklusiv, skjulende, magt, autoritet. Fremhæver andre farver. Giver en fornemmelse af dybde/perspektiv.
Hvid Let, sart, uskyldig, ren, sårbar, reflekterende, godhed, perfektion, sikkerhed, positiv. Giver indtryk af high-tech, kølighed og lethed i et design.
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.
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
Hvordan får jeg brugeren til at
KØB KØB
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
Brug pladsen!
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
Få brugeren tættere på virkeligheden
Virkelighed betaler sig! Video Større 3D foto Foto Tekst *Weinschenk (2016)
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)
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å
Kontakt til Kim http://kimbjoern.dk kim@kimbjoern.dk