BILDEBRUK FOR NETTREDAKTØRER JAKOB THYNESS

Transkript

1 BILDEBRUK FOR NETTREDAKTØRER JAKOB THYNESS

2 Jakob Thyness Partner, Webgruppen AS Utdannet art director Mer enn 20 års designerfaring Erfaring med web/digitale medier siden 1993 Medlem av Grafill, Dataforeningen (BITS)

3 Dirty Design

4 Hva skal vi med design? Design er et verktøy for å utstyre nettstedet med egenskaper vi ønsker Hvis vi skal kunne vurdere om et design er godt eller dårlig, må vi ha en klar målsetting med nettstedet Dersom designet hjelper til å oppnå denne målsettingen, har vi et godt design

5 Godt eller dårlig design?

6

7

8

9 Design er et middel, ikke et mål! Design skal skape verdi for brukeren ved å la ham oppnå målene sine på enklest mulig måte Ved å skape verdi for brukeren, skapes også verdi for avsender Husk: webdesign likner mer på industridesign enn på grafisk design!

10 Branding - en interessekonflikt Branding er til for avsenderen, ikke for brukeren Branding er et produkt av tradisjonelle massemedier, og har redusert relevans på web Brandbasert design går på tvers av brukerens behov og kaster bort tiden hans

11 Forskjellen på glatt og dirty glatt Gjør visuelle elementer mer like hverandre for å lage en helhetlig identitet dirty Understreker forskjeller for å fremheve funksjonalitet og innhold Visuelt konsekvent Funksjonelt konsekvent Avsenderfokusert Brukerfokusert Push Pull

12 Hva betyr dette for designet? Dirty Design starter med prioritering av innhold Design i henhold til et overordnet visuelt konsept er sjelden optimalt Det er forskjellen mellom elementene som tillater brukeren å orientere seg på nettstedet Hvis man understreker egenarten til hvert element bir det lettere for brukeren å finne både det han er ute etter, og det du ønsker at han skal se

13 Content is (still) king Nøkkelen til en vellykket brukeropplevelse er innholdsbasert design Webinnhold kan deles inn i forskjellige innholdstyper, som alle har spesielle krav til design Å overse disse kravene er risikabelt

14 Innholdstyper Transaksjon - å utføre en handling Informasjon - å finne spesifikke opplysninger Dialog - å utveksle informasjon Oppdatering - å få opplysninger om nye ting som skjer Opplevelse - å bli underholdt Applikasjon - å behandle data

15 Lukten av informasjon Teori om hvordan brukerne orienterer seg på web Underbygd av flere tusen brukerobservasjoner Jared Spool, Christine Perfetti og David Brittan User Interface Engineering Designing for the scent of information :

16 Lukten av informasjon (forts.) Brukeren lukter seg frem som en sporhund Brukeren følger lukten av informasjon så lenge den blir sterkere, men blir den svakere går brukeren tilbake til der lukten var sterk sist og fortsetter i en annen retning Sideelementet som lukter mest er en tekstlenke som inneholder et trigger-ord Alle sideelementer må designes for å lukte mest mulig

17 Slik lager du Dirty Design Prioriter riktig - ikke la viktig innhold forskyves av trivielt innhold. Bruk tekstbaserte menyer, og la lenker være blå og understreket. Formater teksten riktig. Bruk kulepunkter og mellomtitler, og gjør teksten skumlesbar. Pass på at bildene er relevante. Generiske og profilerende bilder blir ignorert av brukeren. Hvis du vil utløse handlinger, ha klare og tydelige calls to action

18 Bilder på web

19 Bilder på web Bilder er viktige. Men teksten er viktigst. Bilder må tolkes - vi tolker bilder ut fra vårt eget erfaringsgrunnlag, og de kommuniserer derfor ikke pålitelig. Bilder trenger som oftest tekst for at vi skal vite sammenhengen.

20 Hvor finner vi bilder?

21 Kilder til bilder Bildebyråer Direkte kjøp fra fotograf Bildesamlinger på CD/DVD Gratis bildebaser Ta bilder selv

22 Bildebyråer Alle prisnivåer, fra nesten gratis til meget kostbart, avhengig av kilde Lar deg søke på nøkkelord Bildene blir vanligvis tilgjengelige umiddelbart Du kan laste ned markeringskopier for skissebruk

23 Noen populære bildebyråer

24 Brukerlisenser for byråbilder Rights Managed - har begrensninger for hvordan de kan brukes, f. eks. kommersielt/ikke-kommersielt, bildestørrelse, tidsrom for bruk osv. Prisen varierer ofte avhengig av restriksjonene. Royalty Free - få eller ingen restriksjoner på bruk, og prisen er ofte basert på filstørrelsen alene. Bildebyråets generelle vilkår vil fortsatt gjelde.

25 Gratis bildedatabaser Man kan søke på nøkkelord Bildene er tilgjengelige umiddelbart Bildene koster ingenting, og kan som oftest brukes fritt Begrenset bildeutvalg og dårligere bildekvalitet Kan inneholde tvilsomme bilder Man må selv sørge for at bildene er juridisk i orden

26 Noen populære gratis bildedatabaser s Creative Commons søk

27 Creative commons Lisenser som tillater vederlagsfri distribusjon av åndsverk. Formålet er å utvide mulighetene for å gjenbruke eller bygge videre på åndsverk. Lar opphavsmannen spesifisere hva som er tillatt/ikke tillatt. Det finnes 4 ulike lisenstyper: Attribution, Noncommercial, No Derivative Works og Share-alike.

28 Attribution (by) Bruker kan kopiere, distribuere, vise og oppføre verket, samt å bruke det som grunnlag for nye verk, forutsatt at opphavsmannen navngis.

29 Noncommercial (nc) Bruker kan kopiere, distribuere, vise og oppføre verket, samt å bruke det som grunnlag for nye verk, forutsatt at dette skjer på ikke-kommersiell basis.

30 No Derivative Works (nd) Bruker kan kopiere, distribuere, vise og oppføre verket i dets opprinnelige form, men får ikke bruke det som grunnlag for nye verk.

31 Share-alike (sa) Verket kan brukes som grunnlag for nye verk, forutsatt at det nye verket distribueres under samme lisensvilkår som det opprinnelige

32 Kombinasjoner av CC-lisenser De 4 grunnlisensene kan kombineres med hverandre på ulike måter Ikke alle kombinasjoner er gyldige CC-lisenser

33 Kurante lisenskombinasjoner Attribution alone (by) Attribution + Noncommercial (by-nc) Attribution + No Derivative Works (by nd) Attribution + Share-alike (by-sa) Attribution + Non-commercial + No Derivative Works (by-nc-nd) Attribution + Non-commercial + Share-alike (by-nc-sa)

34 Søketips Vær konkret! Abstrakte begreper kan ikke avbildes. Vær mangfoldig! Bruk mer enn ett ord i søket, og gjør flere søk. Vær almengyldig! Jo flere som forstår bildet, jo bedre. Vær beskrivende! Bruk beskrivende ord når du visualiserer, og inkluder dem gjerne i søket. Bruk søkefunksjonen bedre! Mange baser lar deg spisse søket ytterligere med avkrysninger etc.

35 Direkte kjøp fra fotograf Bildene kan tas på oppdrag eller kjøpes fra fotografens bildearkiv. Man er som oftest sikret god kvalitet. Utvalget er begrenset. Pass på at bruksrettighetene er i orden, også for web.

36 Bildesamlinger på CD/DVD CD-samlingenes rolle er i ferd med å bli overtatt av bildebyråene/bildebasene. Det er fortsatt en god del samlinger å få kjøpt, men færre og færre vil betale for bilder de ikke bruker. Prisene varierer med filstørrelsen. Bildene kan som regel brukes fritt.

37 Forhandlere av bildesamlinger på CD

38 Egne bilder Du får alltid bildet du ønsker deg Den billigste måten å skaffe seg bilder på Pass på at alle rettigheter er ivaretatt

39 1. Tenk på hva du vil oppnå med bildet

40 Hvorfor bruker vi bilder? Et bilde sier mer enn tusen ord Et bilde sier noe annet enn tusen ord Et bilde sier det på kortere tid enn tusen ord

41 Når bruker vi bilder?

42 1. Når vi vil utdype en historie

43 elle.no

44 2. Når vi vil understreke et poeng

45 climatecrisis.net

46 3. Når vi vil dokumentere noe

47 Foto: Adnan Hajj/Reuters

48 Foto: Adnan Hajj/Reuters

49 aftenposten.no

50 Foto: The White House

51 Faksimile: Der Tzitung

52

53 aftenposten.no

54 4. Når vi vil vise sammenhenger

55

56 5. Når vi vil skape en stemning

57 istockphoto.com

58 2. Velg motiv med omhu

59 Konkretiser! Et bilde må nesten alltid vise noe fysisk. Se etter ting i artikkelen som gjør den unik, og som skiller den fra andre artikler. Start alltid med det spesielle, og gå videre til det generelle etter hvert.

60 Hva slags bilder fanger oppmerksomheten? Brukeren ser på bilder som inneholder relevant informasjon. Brukeren overser pyntebilder, merkevarebyggende bilder og åpenbare stockfotos.

61 Mennesker Ansikter er interessante i seg selv. Kropper må ha noe spesielt ved seg for å være like interessante (bevegelser, klær, fysiske attributter) Øyekontakt skaper nærhet. istockphoto.com

62 Situasjoner Situasjoner utspiller seg over tid, og må derfor ofte forklares nærmere. Fokuser på det sentrale i situasjonen: Hva har skjedd? Hva er i ferd med å skje? istockphoto.com

63 Gjenstander Det må være tydelig hva gjenstanden er. Gjenstander i bruk er mer visuelt interessante (og ofte mer informative). Enkeltstående gjenstander avslører flere detaljer. istockphoto.com

64 Stemninger Jo enklere følelser man appellerer til, jo bedre. Våg å være banal! istockphoto.com

65 «Etterslep» Siden vi tolker bilder og symboler ut fra vårt eget erfaringsgrunnlag reagerer vi mest pålitelig på ting vi har sett før. Dette betyr at ting som gir mening for oss ofte har et visst «etterslep», fordi vår generelle ide om dem ble dannet for lenge siden.

66

67

68 Når erfaringsgrunnlaget mangler Hvis vi ikke kjenner igjen eller kan relatere til det vi ser, er det stor sannsynlighet for at kommunikasjonen mislykkes. Derfor er det vanskelig å kommunisere nye eller avanserte ideer i bilder.

69 «On White», Wassily Kandinsky, Kilde: Wikipedia

70 campaignforrealbeauty.com

71 3. Komposisjon - ikke så vanskelig som du tror

72 Tredjedelsregelen Del bildet i tre deler horisontalt og vertikalt Plasser den viktigste delen av motivet i et av krysningspunktene Unngå å sentrere motivet i bildet

73 istockphoto.com

74 Det gyldne snitt Del bildet i to ulike deler Den minste av delene skal forholde seg til den største som den største forholder seg til helheten Plasser fokus i bildet på delelinjen

75 istockphoto.com

76 Forgrunn/bakgrunn Hovedmotivet så stort som mulig i forgrunnen Tydelig forskjell mellom forgrunn og bakgrunn skaper spenning i bildet Ikke prøv å få med alt på én gang

77 istockphoto.com

78 Diagonalen Legg motivet langs en diagonal linje fra hjørne til hjørne for å skape fart og liv i bildet

79 istockphoto.com

80 Perspektiv Et motiv som går innover i bildet skaper dybde og trekker tilskueren inn.

81 istockphoto.com

82 4. Farger kan forsterke budskapet

83 Fargebruk Bevisst bruk av farger kan forsterke innholdet i bildet Farger kan ha ulik betydning i ulike kulturer Fargeassosiasjoner er alltid svært enkle

84 Varmt istockphoto.com

85 Kaldt istockphoto.com

86 Friskt istockphoto.com

87 Det er begrenset hvor mange fargeassosiasjoner vi klarer å huske av gangen.

88 istockphoto.com

89 5. Gi bildet liv med kontrast

90 Høylys/skygge Høylysområder er nesten helt hvite Skyggeområder er nesten helt svarte Motivet blir skinnende blankt istockphoto.com

91 Komplementærkontrast Fargene kommer fra hver sin side av fargesirkelen Fargene har ofte høy metning, slik at de nesten ser ut til å vibrere Brukes ofte for et etnisk utseende istockphoto.com

92 Lav kontrast I Mindre forskjell på lyse og mørke partier i bildet Gir et kraftig inntrykk Brukes ofte for å gi effekt av autoritet og makt istockphoto.com

93 Lav kontrast II Mindre forskjell på lyse og mørke partier i bildet Gir et lyst og lett inntrykk Brukes ofte for å gi effekt av eleganse istockphoto.com

94 Farger vs. svart-hvitt

95 Farger Levende Spennende Iøynefallende...men også kanskje: Glorete/billig Utdatert istockphoto.com

96 Svart-hvitt Harmonisk Stilfullt Kunstnerisk...men også kanskje: Gammeldags Kjedelig istockphoto.com

97 6. Standardiser størrelser

98 aftenposten.no

99 aftenposten.no

100 aftenposten.no

101 dagsavisen.no

102 dagsavisen.no

103 dagsavisen.no

104 Hvor store bør bilder være? Bilder bør være store nok til at det er enkelt å se hva de forestiller...men ikke så store at de fortrenger annen og viktigere informasjon Husk at med økende bruk av mobiltelefoner og surfebrett blir båndbredde viktig igjen!

105 7. Vær faktaorientert

106 Fakta Forsikre deg om at bildet faktisk viser det du tror det gjør.

107 dagbladet.no

108 8. Vær relevant

109 Relevans Bildet må se ut som om det har noe med saken å gjøre Pass på at tonen i bildet passer til saken Hvis du må velge mellom å relatere bildet til brødteksten eller overskriften, så relater alltid bildet til overskriften.

110 nho.no

111 9. Håndtér personer riktig

112 Personer Hvis enkeltpersoner blir omtalt, så bruk bilder av dem hvis det er mulig Pass på at måten personene framstilles på i bildet samsvarer med innholdet Fall ikke for fristelsen til å bruke bilder av perifere personer

113 dagbladet.no

114 dagbladet.no

115 dagbladet.no

116 dagbladet.no

117 dagbladet.no

118 Roller Hvis en artikkel omhandler roller, som f.eks. sjef singel, eller byråkrat, unngå for enhver pris å vise bilder av identifiserbare personer (selv om de har riktig rolle) Roller er generelle, personer er spesifikke - personlighet er derfor alltid sterkere enn roller

119 dagbladet.no

120 R dagbladet.no

121 dagbladet.no

122 10. Vær redelig - selv om det kan være kjedelig

123 Generelle saker Hvis artikkelen omhandler en personuavhengig sak, så bruk generelle emneillustrasjoner Pass på at disse er relevante både i forhold til sak og målgruppe

124 dagbladet.no

125 dagbladet.no

126 Produkter og firmalogoer Enkelte produkter er like gjenkjennelige som personer En logo er ansiktet til et selskap Disse brukes derfor bare der de omtales spesielt

127 dagbladet.no

128 dagbladet.no

129 dagbladet.no

130 dagbladet.no

131 Oppsummering - innholdskriterier Bildene må gjenspeile målgruppen Bildet må være relevant i forhold til saken Relater bildet til overskriften Bruk bilder av enkeltpersoner bare der de blir omtalt Unngå å illustrere roller med bilder av gjenkjennelige personer Bruk generell saksillustrasjon til personuavhengige saker Spesifikke produkter avbildes bare når de omtales spesielt

132 Takk for meg.