9789147089345

WEBBDESIGN. BUDSKAP, FORM OCH TEKNIK

BUDSKAP, FORM OCH TEKNIK

För en framgångsrik kommunikation på webben måste du utgå från en noggrann planering av rätt budskap till rätt målgrupp, i rätt form och med rätt teknik. Du får här en mix av fakta, exempel och idéer som gör dig till en webbdesigner på Webb 2.0.

Genom boken löper också en praktisk uppgift där du steg för steg får bygga upp en webbplats för ett hotell, utifrån bokens tre block: • Budskap ger modeller för mål- och målgruppsarbete samt val av budskap.

• Form tar upp struktur, navigering, designmodeller, bild, video, ljud, typografi och färg.

• Teknik beskriver de val som man måste göra när det gäller exempelvis system för innehållshantering på sin webbplats. Du får ett bra grund för att lättare kunna ta rätt beslut om teknikval.

Webbdesign. Budskap, form och teknik riktar sig till dig som studerar webbdesign på gymnasiet eller inom någon annan utbildningsform.

Bo Bergström är art director, marknadskonsult, uppskattad föreläsare och författare till faktaböcker och läromedel, bl.a. Grafisk kommunikation. Tommie Karlsson har tidigare arbetat som webbutvecklare, och är idag verksam inom affärsutveckling på webben inom media- och finansbranschen.

Daniel Parmenvik har arbetat med webbteknik i egen verksamhet och som kursledare. Han är idag utvecklingschef inom finansbranschen. Både Tommie och Daniel har också medverkat i andra läromedel inom programmering och utveckling.

är en hel serie läromedel för gymnasieskolans Medieprogram. De kan också användas fristående och inom andra medieutbildningar, på folkhögskolor och i studieförbund: Arbeta med medier Den självkörda radioboken Det fotografiska bildspråket Filmkunskap Filmmusik

Fotografisk bild Grafisk kommunikation Information och reklam Journalistik Ljuddesign för scenen

Manus och dramaturgi för film Massmedier Medieguiden Multimedia Rörliga bilder

Text Webbdesign Visuell retorik Virtuella miljöer

BO BERGSTRÖM | TOMMIE KARLSSON | DANIEL PARMENVIK SCENEN OCH AKTÖRERNA DET STARKA BUDSKAPET DEN PERSONLIGA DESIGNEN BILDEN DE RÖRLIGA BILDERNA LJUDET TEXTEN TYPOGRAFIN FÄRGEN DEN RELEVANTA TEKNIKEN

WEBBDESIGN. BUDSKAP, FORM OCH TEKNIK

Best.nr 47-08934-5

Tryck.nr 47-08934-5-00

Webbdesign omslag.indd 1

09-04-14 14.12.54

Webbdesign. Budskap, form och teknik ISBN 978-91-47-08934-5 © 2009 Bo Bergström, Tommie Karlsson, Daniel Parmenvik och Liber AB Förlagsredaktör: Karin Hagelin Feldt Formgivare: Carina Falk | Catalpa Omslag: Mats Mjörnemark Bildredaktör: Cissi Glave Upplaga 1/1 Tryck: Sahara Printing, Egypten 2009

Kopieringsförbud Detta verk är skyddat av upphovsrättslagen.

Kopiering, utöver lärares rätt att kopiera för undervisningsbruk enligt BONUSavtal, är förbjuden. BONUS-avtal tecknas mellan upphovsrättsorganisationer och huvudman för utbildnings­anordnare, t.ex. kommuner/universitet. Den som bryter mot lagen om upphovs­rätt kan åtalas av allmän åklagare och dömas till böter eller fängelse i upp till två år samt bli skyldig att erlägga ersättning till upphovsman/rättsinnehavare.

Liber AB 205 10 Malmö Tel: 040-25 86 00 Fax: 040-97 05 50 www.liber.se För beställningar även: Tfn: 08-690 93 30 Fax: 08-690 93 01

Webbdesign kap1.indd 2

09-04-14 10.04.17

Förord För några år sedan fick vi, förlag och författare, från lärarhåll önskemål om ett läro­medel om webbdesign. ”Men inte bara teknikinriktat utan ett läromedel som också tar upp kommunikationen på webben.”

Som svar på önskemålet gav vi ut läromedlet Webbdesign. Innehåll, form, interaktivitet som fann sin väg ut till många utbildningar i gymnasiet, folkhögskolor och andra medieoch datautbildningar.

Nu är det dags för ett nytt läromedel, som delvis bygger på det förra, men också förmedlar villkor för den nya webben 2.0 – Webbdesign. Budskap, form och teknik. Som titeln indi­ kerar är kapitlen inordnade i tre block:

• • •

I det första, Budskap, ger vi en översikt över förutsättningarna för arbetet med en webbplats. Här beskrivs mål- och målgruppsarbete samt val av budskap.

Block två, Form, fokuserar på själva webbdesignen och förmedlar alla tänkbara ­aspekter på struktur, navigering, designmodeller, bild, video, ljud, typografi och färg.

Det tredje blocket, Teknik, domineras av innehållshanteringssystem men också av ett antal case där du kan tränga djupt in i arbetet bakom framgångsrika webbplatser. Idag är svårigheten ofta att göra ett teknikval, och i detta block får du en bra grund för att lättare kunna ta rätt beslut.

En ”äkta” webbdesigner följer med genom bokens kapitel och ger tips och råd. Du får också testa dina teoretiska och praktiska färdigheter utifrån ett verklighetstroget uppdrag, Light Hotel, som löper genom bokens samtliga block och kapitel.

Stockholm våren 2009

Bo Bergström

Webbdesign kap1.indd 3

Tommie Karlsson

Daniel Parmenvik

09-04-14 10.04.17

Innehåll 1 Scenen och aktörerna 6 Kommunikationen 7 Interaktiviteten 8 Medielandskap i ständig förändring 9 Globalt, öppet och aktuellt 11 Informationsavdelningen 12 Nättidningen 14 Marknadsavdelningen 16 Yrkesroller 18 Webbdesigner 19 Light Hotel 22

Budskap 2 Det starka budskapet 24 Mål 24 Målgrupp 26 Budskap 28 Form och genrer 31 Light Hotel 32

Form 3 Den personliga designen 34 A & O i webbdesign 35 Struktur 39 Navigeringsverktyg 41 Några designlagar 43 Val av designmodell 45

Webbdesign kap1.indd 4

09-04-14 10.04.17

Vägledning i designarbetet 46

8 Typografin 79

Testa 48

Synligt och osynligt 79

Light Hotel 49

Läsbarhet 81 Light Hotel 87

4 Bilden 51 Bildens funktion 52

9 Färgen 88

Välja bild 53

Färgupplevelse 90

Fönster och spegel 55

Light Hotel 92

Presentation 56 Uppbyggnad och komposition 57 Kontrast och andra effekter 59 Bildens inre och yttre sammanhang 60 Bildretorik 62 Vad krävs av en webbild? 63 Bildanskaffning 64 Light Hotel 65

5 De rörliga bilderna 66 Video 67

Teknik 10 Den relevanta tekniken 94 Webb 2.0 – den sociala webben 94 E24.se 95 Audi TT Lounge 97 Prisjägaren använder prisjakt.nu 101 Utvecklarens verktygslåda 105 Light Hotel 113

Light Hotel 70

Register

114

Tack

116

6 Ljudet 71 Ljudfunktioner 71 Light Hotel 73

7 Texten 74 Webbtext 74 Textens byggstenar 76 Testa 78 Light Hotel 78

Webbdesign kap1.indd 5

09-04-14 10.04.17

Scenen och aktörerna

1

© Jupiterimages

”Budskap, personlighet och teknik.”

Publiken vrålar av skratt, ropar och viftar efter mer, men den kände ståupp­aren uppträder redan på övertid, bockar sig därför och lämnar scenen. Med svetten rinnande i ­pannan går han in i sin lilla loge och när han sedan stänger dörren bakom sig är publikens lockrop avlägsna. Det ger mig tillfälle att ställa frågan om vad som utmärker en bra ståuppkomiker.

– Tre saker, du måste ha något att säga, du måste vara personlig och du måste behärska tekniken att framföra ditt budskap.1 Henrik Schyffert skissar på baksidan av ett programblad för att jag bättre ska förstå: – Det du har att säga i budskapet måste vara allmänmänskligt, oväntat, tänkvärt och kortfattat. Den personliga designen måste vara fylld av originalitet, ödmjukhet och konsekvens. Och tekniken måste bygga på timing, närvaro och, framför allt, bort med allt onödigt!

Dessa råd och erfarenheter är användbara även i den svåra konsten att kommunicera på webben.

1 Källa: Filter, 1/2008

Webbdesign kap1.indd 6

WEBBDESIGN

09-04-14 10.04.18

1. SCENEN OCH AKTÖRERNA

Kommunikationen

© Photospin

Dagligen gör vi det. Vi berättar och anförtror varandra upplevelser och hemligheter. Vi lyssnar, reagerar och svarar på frågor. Det är kanske den enklaste formen av kommunikation mellan två vänner, några kollegor eller grannar över staketet.

På webben möts vi ju också, även om det inte sker öga mot öga. En sändare möter en mottagare, som det heter i kommunikationssammanhang. Sändaren är en webbdesigner, som vi fortsättningsvis kal­lar han och honom, och mot­ tagaren är en webbesökare, som vi följaktligen kallar hon och henne.

Så här kan det gå till: Bokhandelns webbdesigner har skapat en virtuell butik, en webbplats för att sälja böcker. Här möts webbdesignern och besökaren. Han visar böckerna, hon väljer bland dem. Hon ställer frågor, han svarar med pris och recensioner, hon funderar, han avvaktar, hon beställer, han skickar. De agerar tillsammans inom webbplatsen, nästan som i ett samtal. De byter roller i och med att sändaren blir mottagare och mottagaren blir sändare och en tvåvägskommunikation uppstår.

Besökaren tar emot information, bearbetar, sorterar och paketerar de bitar (texter, bilder, frågor, svar, klagomål, beställningar) som just hon är intresserad av. Webbplatsen har blivit som besökaren vill ha den, möblerad enligt hennes önskemål, ändamålsenlig och personlig. Nätbokhandeln kanske blir hennes startsida, hon prenumererar på ­nyheter inom valda intresseområden och hon får specialpriser.

Webbdesign kap1.indd 7

I N L E D N I N G

09-04-14 10.04.25

1. SCENEN OCH AKTÖRERNA

Interaktiviteten Det är interaktiviteten som möjliggör kommunikation mellan webbdesigner och besökare. Det finns två huvudtyper av interaktivitet:

•

Den förflyttande interaktiviteten

• Den påverkande interaktiviteten

Påverkande interaktivitet.

8

Webbdesign kap1.indd 8

Förflyttande interaktivitet är den enklaste formen och innebär att du klickar på ett ord eller en bild som genom en länk tar dig till en annan sida och du får ytterligare textinformation, en förklarande bild, ljud eller möjligheten att starta en video. Detta bygger på en linjär interaktiv struktur.

Denna ganska enkla struktur kanske passar en fotograf som vill presentera sina bilder. En besökare kan välja i ett bildgalleri och sedan bekanta sig med fotografen, hennes inriktning och studiokapacitet inför ett möte om ett uppdrag.

Påverkande interaktivitet går ut på att försöka få besökaren delaktig. Detta innebär en ickelinjär interaktiv struktur med nästan obegränsade möjligheter.

Peace on earth! På bjornborg.com kan du, förutom att chatta med tennislegenden och designa dina egna underkläder, titta på en video som uppmanar dig att skicka in dina gamla ”not sexy” underkläder till företaget. När marknadschefen fått in riktigt många skickas dessa vidare till de grymmaste krigsherrarna på jorden, framröstade av besökarna på webbplatsen. Och plötsligt ligger 19 000 trosor och kalsonger framför makthavarens bostad. Besökaren visar att hon vill påverka möjligheten till världsfred (?) och får samtidigt rabatt på nya fräscha underkläder. Påverkande interaktivitet åt många håll, med andra ord. Och därmed är vi inte längre enbart mediekonsumenter utan även producenter (prosumenter eller på engelska prosumers).

WEBBDESIGN

09-04-14 10.04.27

1. SCENEN OCH AKTÖRERNA

Medielandskap i ständig förändring Webben är numera självklar för oss alla och för en del av befolkningen har den alltid funnits. Men riktigt så är det ju inte.

Krigsvapen World Wide Web möjliggör kommunikation på det världsomspännande nätverket av datorer, internet. Ursprungligen var det en jättelik sammankoppling av datorer inom det amerikanska försvarsväsendet och skulle fungera i händelse av ett världskrig.

1995 fick hela världen upp ögonen för webben. Det visade sig vara det snabbaste sättet att förmedla information kors och tvärs över jordklotet och är nu en viktig del av ett helt annat krig, om människors uppmärksamhet och konsumtion.

Nischade budskap mot nischade grupper Webben är egentligen inget massmedium utan ett så kallat klustermedium. Med kluster menas avskilda, små eller stora grupper av människor med gemensamma tankar och intressen, som med hjälp av webben kommunicerar inom gruppen eller med omvärlden. Vissa kluster driver politiska frågor eller organiserar kampen för miljön, andra ägnar sig åt gemensam prispressaktion mot en viss bransch eller hyllar en udda frisyrstil.

Webbdesign kap1.indd 9

Hockeyfrillanisch.

INLEDNING

9

09-04-14 10.04.28

1. SCENEN OCH AKTÖRERNA

Communities © Photospin

Hur hittar man någon att prata med och som är intresserad av sådant som jag är intresserad av? På jobbet eller i skolan, på uteställen, fester eller bussen? Ja, givetvis, men också ofta i chattforum, bloggar och communities.

Ensam vid sin dator kan man få tips om var man köper häftigaste balklänningen, trösta den som blivit sviken av sin flickvän, prova en ny identitet och förlora pengar på poker. I Sverige fick den här formen för social kontakt fart med den virtuella mötesplatsen Lunarstorm, men betydligt större är giganten Facebook.

Det finns naturligtvis en kommersiell sida av det hela också. Annonsörer kan köpa banners på de personliga Facebooksidorna utifrån de basfakta som finns där (kön, ålder och civilstånd). Baksidan av den totala öppenheten är möjligheten till kartläggning av medlemmar på en community. Inte så trevligt om man skriver att man är ledsen för något och det sedan dyker upp reklam för antidepressiva medel i datorns inkorg.

Ett positivare exempel på gemenskap på webben är Föräldrasnack. Blöjtillverkaren Liberos kunder är så kortvariga. Föräldrarna köper ju bara blöjor under ett par års tid och det ställs stora krav från företagets sida att under denna korta tid bygga upp förtroende och lojalitet.

Självkritiskt frågade sig marknadschefen vem som skulle vilja chatta med Libero.

Ingen! Lösningen blev en webbplats där föräldrarna kunde tala med varandra, Föräldrasnack på libero.se. Utbyte av erfarenheter, tips och råd fick en framskjuten plats i webbplatsen. Hade ditt barn problem vid tandsprickningen? frågar en förälder och får massor av svar från andra föräldrar. Cirka 800 inlägg per dag rapporterar företaget och kan dessutom meddela att Föräldrasnack blivit Sveriges största marknadsplats för begagnade barnvagnar och leksaker.

Kontakt.

10

Webbdesign kap1.indd 10

WEBBDESIGN

09-04-14 10.04.33

1. SCENEN OCH AKTÖRERNA

Globalt, öppet och aktuellt Webben för samman frågor med svar, sökande med finnande, personalchefer med sin personal, redaktörer med sina läsare och försäljningschefer med sina kunder. Det som utmärker den virtuella scenen och mötesplatsen, webben, är framför allt att den är: Global. Webben känner inte av några gränser mellan länder, världshav eller

kontinenter. Vi kan läsa både GP och New York Times till frukosten. Men varför inte kalla den glokal? Det lilla pappersbruket i Dalsland presenterar sig på ett professionellt sätt inför sina kunder i Mellerud men också i Malmö, Milano och Melbourne. Öppen. Webben är alltid öppen. Inga irriterande telefonsvarare eller stängda

växlar hindrar den godissugne att beställa polkagrisar eller produktchefen som vill lägga en order på kullager. Den är också öppen för alla. De flesta hemsidor och communities är tillgängliga för vem som är intresserad.

Aktuell. Webben möjliggör smidiga ändringar och snabb uppdatering. När en

vara är slutsåld försvinner den genast från den digitala produktkatalogen. Och på SVTs nätupplaga redigeras och förmedlas ständigt nya nyheter.

Vad du SjäLV KaN göra för att få ett LugNare LIV På Nätet.

Bakgator Men det finns också ljusskygga besökare i den globala byn. På webben finns de grövsta kränkningarna, hoten, sadismen, övergreppen, hetsen, hädelserna, rasismen, antisemitismen, islamfobin, kvinnoförnedringen och manualerna för terrorism. Det är tätt mellan husen i byn och en viskning rör sig med blixtens hastighet från den ena sidan till den andra. Aldrig förr har så många haft så mycket att känna sig hotade av.

Men vi låter oss inte avskräckas utan besöker några scener där webbkommunikation och webbdesign är betydelsefulla redskap i verksamheten. Det är en informationsavdelning, en nättidning och en marknadsavdelning med sin webbyrå. Häng med!

Webbdesign kap1.indd 11

Skydda din personliga integritet.

INLEDNING

11

09-04-14 10.04.35

1. SCENEN OCH AKTÖRERNA

Informationsavdelningen Intern information

Vanliga rubriker i ett intranät.

På en informationsavdelning arbetas det både inåt och utåt. Den interna informationen kan bestå av nyheter utifrån, till exempel ett företags etablering på en marknad utomlands eller nya bestämmelser som berör verksamheten. Intranätet kan också vara en anslagstavla för sådant som händer inom organisationen, till exempel att växeltelefonisten går i pension och produktavdelningen får förstärkning av en nyanställd ingenjör från Chalmers. Vissa behöver information och stöd för sina arbetsuppgifter. Andra kräver dialog i stället för monolog för att få ett helhetsperspektiv som i sin tur kan gynna företagets utveckling. En blogg på intranätet kan få igång det interna samtalet och göra alla delaktiga i verksamheten. Framgångar kan lyftas fram och diskuteras, liksom motgångar. Förslag på förbättringar och andra tips kan enkelt spridas inom organisationen.

Information utåt Den externa informationen ska sprida kunskap om organisationens verksamhet, tjänster och varor. Informationsavdelningens uppgift är bland annat att påverka attityder och öka förtroendet för organisationen som helhet.

De vanligaste informationstyperna är ekonomisk information för att hålla aktieägare och banker underrättade. massmediekontakter för att uppdatera journalister och påverka beslutsfattare

och opinionsbildare. marknadskommunikation till konsumenter. samhällsinformation till medborgarna från kommun, landsting och stat.

12

Webbdesign kap1.indd 12

WEBBDESIGN

09-04-14 10.04.36

1. SCENEN OCH AKTÖRERNA

2.Navigation s underubriker den ut och des s en rubrik fälls kerar att det finn Klickar man på osv ut yn som samma Vänstermen Rubrikerna med er. erubrik fälls den s nivå und kera en fyra indi på av på t mal 9 pt. på visas, klickar man riken. Menyn består som mes C ) och sidan man befinner sig och Verdana inor text rub n” Länkar 9FE undernivåer till lå ( färgkod: #81 Verdana fet 9 pt. på ”första nivå til. Generellt är länkar på webbplatsen mörkblå ( färgkod: #000099 ),Verdana normal eller fet. Länkar som finns i ver bli mellanb ska vara lå och i fets ska vid mouseo tet på rubrikerna markeras alltid som mellanb snit brödtext och informationstext i högerspalten som ska vara normal och alltid understruket.

Typ . färg r sig på mellanblå sida man befinne undernivåer. Den

y indi , dvs. ) för rubrikerna Vänstermen en trädstruktur kod: #000099 . Pilarna ( >) fram är mörkblå ( färg är uppbyggd som

3.Typsnitt

Ur Arvika kommuns webbprofil (2004) som innehåller anvisningar för navigation, typsnitt, färger, bilder och mått. Profilen är framtagen av konsultföretaget Sublime Consulting AB.

På Arvikas webbplats används fyra olika typsnitt: Helvetica för grafisk text. Verdana och Arial för HTML-text och ROTORcap för bildknappar. Huvudtypsnittet för text är Verdana, finns inte Verdana installerat i datorn ska den ersättas av Arial eller Geneve.

4.Färger Färgerna på Arvikas we bbplats är Används enbart för grafisk text i Entré/mittbild eller exempelvis: pelvis: ”Visste du att...”-rutan. att...” som har Seins nedan: anpassade täl för gränsnitt bö lingen 256 färger ko mmer färger skärmar med minst r 16 000 bitars na att inte översiktlig användningen av and visas korre ra bild av sam färgdjup. De kt. För att tliga färger färger i största mån t innebär bib undvikas. på webbpla Text i entrébild Färgskalan ehålla ett enhetligt ochatt för dom tsen. nedan är fra Helvetica 35 tunn, 24 pt. Knip –40 Ljusblå: #EBF2FC mtagen för homogent att ge en

Text i entrébild intranät Helvetica 35 tunn, 55 pt. Knip –20 Vit.

Projektkod: ARK301 g ig: Soung-Do Kan e Dokumentansvar .kang@sublime.s E-post: soung-do

59 96 00 Tel direkt 08-4 info@sublime.se

6.Mått

ng AB Sublime Consulti Linnégatan 81 OLM 114 60 STOCKH

Webbprofilen

Dokumentansvarig: Soung-Do Kang E-post: soung-do.kang@sublime.se

Projektkod: ARK301

Till grund för arbetet på informationsavdelningen finns en webb­ strategi, vars första punkt bör handla om nödvändiga resurser för en långsiktig webbsatsning, för teknik och design och för personal med rätt utbildning och kompetens.

Informationschefen ansvarar för att texter och bilder är innehållsmässigt och språkligt korrekta, om det är lämpligt och lagligt att publicera och att allt hålls uppdaterat. En bra hemsida måste vara dynamisk och levande i både form och innehåll.

En webbprofil fungerar som en slags instruktionsbok för hur logotyp, färg, form och bild ska återges. Ett fel som många gör är att försöka flytta över den grafiska profilen för tryckt material till webben. Nej, webbplatsen kräver egna designregler.

Sublime Consulting AB Linnégatan 81 114 60 STOCKHOLM

Tel direkt 08-459 96 00 info@sublime.se

Dokument ans E-post: sou varig: Soung-Do Ka ng ng-do.kang@ sublime.se Sublime Co nsulting AB Linnégatan 81 114 60 ST OCKHOL M

Tel direkt 08-459 96 info@sublim 00 e.se

Dokumentansvarig: Soung-Do Kang E-post: soung-do.kang@sublime.se Sublime Consulting AB Linnégatan 81 114 60 STOCKHOLM

Webbdesign kap1.indd 13

Projektkod: ARK301

INLEDNING

Projektkod: ARK301

13

Tel direkt 08-459 96 00 info@sublime.se

09-04-14 10.04.41

1. SCENEN OCH AKTÖRERNA

Nättidningen Till frukost och på väg till jobb eller skola bläddrar nog många i dagens tidning. Men fler och fler söker sig ut på nätet till den aktuella tidningens nätupplaga, som betydligt snabbare förmedlar det senaste sena av nyheter.

En nättidning serverar också reportage, kalendarium, tips om kvällsmat och förslag till aktieköp, sökfunktioner till tidningens hela material, chattforum och mycket annat.

Nätupplagan utvecklas och fördjupas med webb- och mobiltv med otaliga länkar så att vi besökare själva kan välja vad vill fördjupa oss i. Läsarna erbjuds även bevakning av något speciellt ämnesområde. Talar du om att du är intresserad av rymden får du varje gång nedräkningen börjar e-post med en länk till en artikel och en video.

Ge och ta Nättidningen är som en dammsugare, som drar till sig texter och bilder från allmänheten och sänder dem vidare. Den nya journalistiken kan kanske inte längre beskrivas som uppsökande eller grävande utan snarare som bearbetande.

Redaktörer och redigerare utvecklar och omarbetar i allt högre grad inkommet material från dig och mig i stället för att själva initiera och skapa det. Sedan plockar läsarna till sig de lockande texterna och bilderna och lägger till videoklipp från YouTube. Vi tycks alltså inte längre vilja se oss som enbart mediekonsumenter utan som deltagande medborgarjournalister.

Nya yrkesroller tar plats på redaktionerna. En särskild sökredaktör har till uppgift att bevaka hur sökstrukturen på nätet fungerar så att tidningens artiklar hamnar så högt som möjligt i sökningar på Google och Yahoo. Sökredaktören råder journalisterna att exempelvis skriva ut både förnamn och efternamn på en politiker eller artist för att på detta sätt öka chansen att fångas upp av sökmotorerna.

Detta är resultatet av ett förändrat läsbeteende hos mediekonsumenterna, som inte längre klickar sig direkt in på en webbadress utan via sökfunktionen på communities, bloggar och personliga nätverk. Med andra ord går vi inte in

14

Webbdesign kap1.indd 14

WEBBDESIGN

09-04-14 10.04.43

1. SCENEN OCH AKTÖRERNA

via stora entrén till nyhetshuset utan smiter in via bakdörren, ett källarfönster eller varuintaget. Du känner säkert igen dig.

Vem betalar?

Ett problem är att läsarna inte vill betala för sin nättidning. Vi har blivit vana vid att allt på nätet är fritt. Vad ska då nättidningen tjäna pengar på? Jo, reklam förstås – stora och små banners.

Eller att ge vissa läsare tillgång till speciellt material mot att de lämnar ut e-postadress för att annonsören ska kunna nå dem med erbjudanden. Så vem betalar? Vi konsumenter förstås.

Bloggar Via bloggar kan läsaren enkelt kommentera inlägg och föra fram egna diskussionsämnen. Vissa bloggar blir enormt uppmärksammade och så populära att företag erbjuder bloggaren ersättning för att nämna ett varumärke eller en produkt i texten. Förtäckt reklam, här också.

Journalister kompletterar allt oftare tidningsskrivandet med sina personliga bloggar. Dessa växer ibland ut till egna nättidningar där vi möter en ny typ av journalist, en ”sojo” (solo journalist), som inte sitter instängd i tidningshuset utan som ständigt är på resande fot med sin laptop, mobil, stillbilds- och videokamera. Solojournalistens rapporter uppskattas av många, kanske mest för att inslagen inte blir en- eller tvåminuterssnuttar som i traditionella nyhetssändningar i tv, utan ofta betydligt längre och framförallt mycket personligare.

Bloggandet är en viktig del av så kallad flerkanalpublicering som innebär att en nyhet inte längre förmedlas i ett enda medium utan i flera, i papperstidningen, på webben, i mobilen och i en blogg. De flesta anser att bloggen definitivt hör framtiden till eftersom den är snabb och miljövänlig.

Webbdesign kap1.indd 15

INLEDNING

15

09-04-14 10.04.46

1. SCENEN OCH AKTÖRERNA

Marknadsavdelningen Vi lämnar nättidningen och beger oss till ett företags marknadsavdelning. Vissa företag arbetar internt med webbdesign, andra tar en webbyrå till hjälp för att göra webbplatsen så funktionell och lockande som möjligt. Webben är ett alldeles utmärkt säljredskap. På hemsidan kan man

• •

presentera nyheter om företaget och dess produkter. lägga upp en kampanjsajt som en del av en pågående reklamkampanj för en viss produkt. Till kampanjsajten kommer besökaren efter att ha klickat på en banner på exempelvis nättidningen.

Bygg relationer Det gäller att skapa gemenskap mellan företaget och besökaren. Ikea uppmanar kunderna att lägga upp bilder och videoklipp på möbelföretagets webbplats, till inspiration för andra och för Ikea som får en fin inblick i det digitala folkhemmet. Kunderna får sköta företagens ”konverserande” reklam.

Att anspela på sex är ett vanligt grepp inom reklam.

En baby som leker med sina leksaker får plötsligt tag i en av mammas och pappas leksaker. Bilden blir svart och Ikea presenterar sina olika förvaringsalternativ och uppmaningen ”Tidy up”.

1

Webbdesign kap1.indd 16

WEBBDESIGN

09-04-14 10.04.49

1. SCENEN OCH AKTÖRERNA

Ibland utvecklas marknadsföringen till så kallad virusreklam. Företag lägger ut korta, roliga, engagerande videoklipp om sina produkter på exempelvis YouTube. Om de uppskattas av besökarna sprids de vidare till kompisar, och massor av människor blir därmed positiva till företaget bakom virusattacken.

Webbreklam ger nya perspektiv på kommunikation: Tala till någon som lyss­ nar, då slipper du skrika till dem som inte vill höra. Google AdWord menar att den traditionella anslagstavlan, affischen, annonsen eller tv-spoten talar eller skriker för döva öron när konsumenterna nu själva tar initiativet med hjälp av sökmotorer.

Sökordsmarknadsföring

©Jupiterimages

Låt oss säga att ett företag tillverkar fiske­redskap för fritidsfiskare. Marknadschefen funderar och kommer fram till vilka ord en fiskare kan ­tänkas skriva in som sökord – kastspö, wobbler, skeddrag … Dessa ord köper han av Google och varje gång någon söker på ett eller flera av dessa ord dyker en så kallad sponsrad länk (köpt annonsplats) upp strax intill de allmänna träffarna (kallas organiska). Fiskaren klickar på den lilla annonsen som tar honom till fiskeföretagets webbplats där han eller hon kan läsa mer om företaget och framförallt beställa den senaste wobblern i papegojfärg.

Om fiskeföretaget vill nå sina kunder utöver de sponsrade länkarna och hamna högt upp bland de organiska länkarna kan så kallad sökordsoptimering användas. Speciella konsultfirmor gör en analys av sökordens möjlighet till många träffar och ger råd om hur enstaka ord och texter ska bli attraktiva för sökmotorerna.

Fler och fler upptäcker fördelarna med sökordsmarknadsföring. Dagens politik­er köper också sökord på Google. Den politiker som bäst förstår att utnyttja dessa kommunikationsmöjligheter har väljare att vinna. Sedan gäller det också att finnas med på YouTube med tal, klipp, specialskrivna låtar och annat lockande material.

Sökordsoptimerad.

Webbdesign kap1.indd 17

I N L E D N I N G

17

09-04-14 10.04.50

1. SCENEN OCH AKTÖRERNA

Yrkesroller På informationsavdelningen, på nättidningens redaktion och på företagets marknadsavdelning eller på dess webbyrå finns olika yrkesroller. Förutom webb­ designern, som du träffar närmare på nästa sida, arbetar följande med att informera och förföra besökare.

Kommunikationsdesignern ansvarar för att hitta ett

interaktivt formspråk, som stämmer med uppdragsgivarens intentioner och är fängslande för målgruppen.

Interaktionsdesignern är länken mellan design-

och systemutvecklingsfasen och deltar tidigt i projekten för att se vilka interaktiva lösningar designidéerna kräver.

Webbmastern är tekniskt ansvarig för en webb-

plats.

Webbredaktören (kan också kallas copywriter)

är ansvarig för text och innehåll och ofta projektledare.

© Jupiterimages

Diverse andra webbaktörer, till exempel flash developer, project manager, sound director, music director, graphic artist, videoartist, creative artist och art director.

18

Webbdesign kap1.indd 18

WEBBDESIGN

09-04-14 10.04.53

1. SCENEN OCH AKTÖRERNA

Webbdesigner Att vara webbdesigner innebär att utifrån sin egen position försöka förstå hela processen och därmed påverka arbetet från ax till limpa. Att kunna etablera och vidmakthålla en bra relation till uppdragsgivaren är också viktigt. Nyfikenhet och kreativitet är aldrig fel.

Designerns huvudsakliga uppgift är att skapa en funktionell och tilltalande webbplats, som är lätt att hitta till, lätt att förstå och använda. Den ska också inbjuda till rätt handling och slutligen leda till avsett resultat.

Formgivare och pedagog Rätt känsla för balans mellan form och funktion krävs också. Inget form­element kan försvara sin plats utan att ha en funktion. Det innebär ibland att avstå från finesser som inte gynnar kommunikationen. Målet är att visa vad företaget bakom webbplatsen kan och vill presentera, inte vad själva webben tekniskt kan.

Webben är ett tidskänsligt medium. Det finns ett träffande ord för att beskriva den person som klickar sig in: otålig. Webbdesignern måste fråga sig om alltför komplicerade inslag i webbplatsen som insticksprogram (plug-in) hjälper eller stjälper möjligheten att ta till sig information och budskap. Besökare med långsammare uppkoppling uppskattar när en enklare variant av webbplatsen erbjuds.

DISKUTERA

Vad är din egen relation till webben? Hur mycket tid ägnar du åt surfande? Får du den information du vill ha? Hur tycker du att webbplatserna ser ut, trista, spännande, roliga, nyttiga? Fungerar de som de bör?

På sidan 22 presenteras Light Hotel som ­behöver en webbdesigner. Rent allmänt – vad är det viktig­ aste att tänka på? Hur skulle du designa sidorna?

Webbdesign kap1.indd 19

Vilka bilder skulle du använda och hur skulle videoin­ slagen se ut?

Webben är ett globalt medium. Har det betydelse för dina råd? Webben är alltid öppen, hur påverkar det uppbyggnaden av en webbplats för ett hotell? Hur ska man kunna hålla webbplatsen aktuell alltid?

I N L E D N I N G

19

09-04-14 10.04.53

1. SCENEN OCH AKTÖRERNA

Jonas Berggren, webbdesigner:

”Jag måste tänka i budskap”

Det är mörkt i kolkällaren till ett stort gammalt hus i norra delen av Vasa­ stan i Stockholm. Det konstaterar jag när dörren öppnas och jag erbjuds att komma in och ta den branta trappan ner. Väl nere på fast mark klar­ nar min syn och jag ser en modern lokal fylld av datorer, ett litet pentry och en väl till­tagen yta ämnad för fotograferingsuppdrag.

Här jobbar Jonas Berggren, webbdesigner, tillsam­ mans med en fotograf och en stylist. Jag frågar Jonas vad han tycker om sitt arbete.

– Roligt, spännande, utvecklande, blir det snabba svar­ et. Mycket händer i en teknikberoende bransch som denna och det gäller att hänga med ordentligt.

20

Webbdesign kap1.indd 20

Han fortsätter: – Det är också spännande att möta uppdrags­givaren första gången och försöka komma överens om vad webbplatsen ska göra för jobb. Vilken struktur som krävs och vilka rubriker som ska in. Jag måste tänka i budskap och inte bara i design. Det finns en enorm

WEBBDESIGN

09-04-14 10.04.57

1. SCENEN OCH AKTÖRERNA

lockelse i att börja skissa i Photoshop, som jag alltid gör. Sedan gäller det att hitta fram till ett vettigt sam­ arbete. Du vet, det där med personkemin, slitet ut­ tryck, men det är precis vad det handlar om.

Inspiration och trender – Det är viktigt att hålla sig uppdaterad om vad som händer runt om i världen och låta sig inspireras. Det roliga är att inspira­tionen i hög grad finns här hemma i Sverige. Det tycks som om det är till den digitala värl­ den kommunikationstalangerna söker sig eftersom vi vinner priser och utmärkelser i allehanda tävlingar och festivaler världen runt. Sådant rycks jag ju med av.

Jag nickar, håller med och ytterligare en fråga föds. Går det mode i webbdesign?

– Javisst, svarar Jonas, och inget fel i det eftersom det finns en härlig dynamik i förändringens vindar, mode, om du så vill. Men det gäller att akta sig för alltför flyk­ tiga trender, som ju egentligen bara är en riktning åt något håll. Dessutom kan en trendig sajt vara väldigt otrendig och gammal efter fyra veckor. Nej, jag tror mest på att försöka väva samman personligheten hos uppdragsgivaren med min egen personlighet, då blir det bra! Och, om jag får upprepa mig, inte glömma det där om att tänka i budskap och inte bara i design.

– Sedan har vi tekniken, som ju måste fungera så att ett möte kan uppstå i webbsajten. Programmeringen är ett tungt jobb men man lär sig att få fart på den till slut. Och med tillgång till Flash får vi designers också fart på hela sajten eftersom möjligheten till rörligt material, video bland annat, ökar dramatiskt.

Webbdesign kap1.indd 21

Flera roller På frågan om vilka uppdragsgivare han för närvarande jobbar med, svarar Jonas att han just börjat med en sajt för en restaurang i grannskapet (han är nästan stamgäst) och faktiskt flera sajter för fotografer.

– Det är nämligen så att jag själv är fotograf och därför känner jag väl till aktuella behov och kan förverkliga dessa i deras webbsajter. Det gäller att inte bara pre­ sentera en massa fotografier utan även skapa förtro­ ende.

Ryms verkligen två yrken i en och samma person?

Ja, kanske är detta framtiden där yrkesspecialisten ersätts av en generalist enligt ”eklipssyndromet”, som går ut på att vissa yrken skymmer eller helt enkelt konkurrerar ut andra. Låt oss ta en skrivande journalist, exempelvis, som är på väg till en intervju och av redak­ tionschefen får med sig en kamera för att ta en bild av intervjuoffret också. Vem blir snart arbetslös på den tidningen? Jo, fotografen förstås. Så illa behöver det inte gå, men många är övertygade om att i framtiden slås olika yrken ihop eller att en person klarar flera och därför är kanske Jonas yrkeskombination en trygghet.

Vi fortsätter att tala om budskap, design och teknik och Jonas delar med sig av sin erfarenhet till resten av den här boken. Timmarna går och tiden vi avsatt är slut. Jag tackar för en givande intervju, tar mig upp för den branta trappan, ut genom dörren, ut på trottoaren och på med solglasögonen.

I N L E D N I N G

21

09-04-14 10.04.57

WEBBDESIGN. BUDSKAP, FORM OCH TEKNIK

BUDSKAP, FORM OCH TEKNIK

För en framgångsrik kommunikation på webben måste du utgå från en noggrann planering av rätt budskap till rätt målgrupp, i rätt form och med rätt teknik. Du får här en mix av fakta, exempel och idéer som gör dig till en webbdesigner på Webb 2.0.

Genom boken löper också en praktisk uppgift där du steg för steg får bygga upp en webbplats för ett hotell, utifrån bokens tre block: • Budskap ger modeller för mål- och målgruppsarbete samt val av budskap.

• Form tar upp struktur, navigering, designmodeller, bild, video, ljud, typografi och färg.

• Teknik beskriver de val som man måste göra när det gäller exempelvis system för innehållshantering på sin webbplats. Du får ett bra grund för att lättare kunna ta rätt beslut om teknikval.

Webbdesign. Budskap, form och teknik riktar sig till dig som studerar webbdesign på gymnasiet eller inom någon annan utbildningsform.

Bo Bergström är art director, marknadskonsult, uppskattad föreläsare och författare till faktaböcker och läromedel, bl.a. Grafisk kommunikation. Tommie Karlsson har tidigare arbetat som webbutvecklare, och är idag verksam inom affärsutveckling på webben inom media- och finansbranschen.

Daniel Parmenvik har arbetat med webbteknik i egen verksamhet och som kursledare. Han är idag utvecklingschef inom finansbranschen. Både Tommie och Daniel har också medverkat i andra läromedel inom programmering och utveckling.

är en hel serie läromedel för gymnasieskolans Medieprogram. De kan också användas fristående och inom andra medieutbildningar, på folkhögskolor och i studieförbund: Arbeta med medier Den självkörda radioboken Det fotografiska bildspråket Filmkunskap Filmmusik

Fotografisk bild Grafisk kommunikation Information och reklam Journalistik Ljuddesign för scenen

Manus och dramaturgi för film Massmedier Medieguiden Multimedia Rörliga bilder

Text Webbdesign Visuell retorik Virtuella miljöer

BO BERGSTRÖM | TOMMIE KARLSSON | DANIEL PARMENVIK SCENEN OCH AKTÖRERNA DET STARKA BUDSKAPET DEN PERSONLIGA DESIGNEN BILDEN DE RÖRLIGA BILDERNA LJUDET TEXTEN TYPOGRAFIN FÄRGEN DEN RELEVANTA TEKNIKEN

WEBBDESIGN. BUDSKAP, FORM OCH TEKNIK

Best.nr 47-08934-5

Tryck.nr 47-08934-5-00

Webbdesign omslag.indd 1

09-04-14 14.12.54