Webbdesign för lajvhemsidor

av Jojjon Hamrén

Inledning

Så du ska arrangera ett lajv? Kul! Och nu behöver du göra en hemsida, för att kunna nå ut till potentiella deltagare och dela information till de som redan är intresserade.

Jag har valt att dela in den här texten i tre huvuddelar, där samtliga är viktiga komponenter för helheten.

  • Design
  • Teknologi
  • Innehåll

Mål och målgrupp

Innan du börjar behöver du ställa dig frågan: Vad är målet med min hemsida? Är det till exempel att hitta nybörjare och få dem att anmäla sig till lajvet?

När vi är inne på nybörjare så behöver du också fundera på vem din målgrupp är. Att säga “min målgrupp är nybörjare” räcker tyvärr inte, för vad är en nybörjare? Var bor din målgrupp? Vilken ålder har de? Kön? Fritidsintressen? Hur använder de internet? Var surfar de?

Större företag har möjlighet att göra undersökningar för att ta reda på detta, men eftersom de flesta arrangörer sitter och gör sina lajv ideellt så växlar jag ner och tycker att det kan räcka med att du försöker besvara frågorna så gott du kan själv. Fundera också på vad din målgrupp har för krav, syften och förväntningar när de besöker din hemsida. Tänk ut både en primär (i första hand) och sekundär (i andra hand) målgrupp och skriv ner för dig själv vad du kommer fram till så att du kan ha med dig svaren under hela tiden du jobbar med hemsidan.

Design

Ja, visst är det en smaksak om vad som tilltalar vem, men det finns några principer och begrepp som ändå är bra att känna till. Det finns ett antal olika teorier och utgångspunkter, men först och främst vill jag nämna: KISS – Keep it simple, stupid. Om du kan ta bort något så gör det. Här återkommer din målgrupp, att inte se vad du tycker är passande, utan vad de som du vill nå ut till är intresserade av att se.

Du är gissningsvis ute efter att förmedla en känsla av lajvet i din hemsida? Ja, det är möjligt, men låt det inte ta över! Visst kan gröna skogar passa ett Fantasy-lajv, men är det vad din målgrupp skulle vilja ha? Sticker du ut ur mängden på det sätt som du är ute efter?

Som sagt finns det olika principer och gestaltningslagar beroende på vilken teori som du utgår ifrån. Gestaltningslagar eller gestaltningspsykologi har att göra med hur människans hjärna skapar samband och mönster. Jag generaliserar några så du kan få en övergripande blick.

Hierarki ser vi dagligen när vi läser texter som innehåller rubriker. Det som är större syns före det som är mindre eller det som har en skarp och tydlig färg syns mer framför det som har en blek färg och som smälter in i bakgrunden. Även mindmaps är en typ av hierarki, samt flödeskartor där vi exempelvis tydligt ser var vi börjar med vår blick och var vi ska rikta den.

Skala/Proportion har likhet med hierarki då det handlar vilket förhållande designelement av olika storlek har till varandra. Vi ser det till exempel i gyllene snittet där element i närheten av varandra skapar en relation. Genom att se till att vissa delar är större eller mindre så kan vi styra var uppmärksamheten ska dras till eller från.

gyllenesnittet
Gyllene snittet

Enhet/Harmoni kan i korthet beskrivas med att element arrangeras så att det ger intrycket för betraktaren av att vara ett mönster eller en helhet. Kontinuitet ger känslan av att ett visst mönster ska fortsätta. Att kombinera färger som ligger nära varandra ser vi exempelvis ofta i inredningsdesign när det kommer till tapeter, golv och tyger som ska fungera tillsammans, vilket i sig är en slags harmoni. För att fortsätta på samma exempel så kan rytmik (också en typ av enhet/harmoni) synas i att kuddar, mattor och liknande följer samma färg eller mönster, eller om du ställer ljusstakar intill varandra som är av samma modell, men olika storlekar.

Balans brukar beskrivas av symmetri eller asymmetri. Från utgångspunkten bör de visuella elementen ta upp lika mycket uppmärksamhet. Antingen kan man göra detta symmetriskt genom att elementen är likadana på båda sidor, eller asymmetriskt genom att elementen ser olika ut på balanspunktens sidor, men att de visuellt kräver samma uppmärksamhet och därmed ändå skapar balans. Balans kan även skapas radiellt genom att placera elementen i en cirkulär form.

Dominans/Betoning – även här återkommer storlek och färger. En visuell hierarki kan betonas genom att bryta ett visst mönster. Exempelvis kan i ett element med cirklar en fyrkant placeras för att visa var betoningen ska vara, eller att samma mönster har svarta cirklar och betoning sker genom att en cirkel har en annan färg.

Likhet/Kontrast – ljus och mörker, svart och vitt eller komplementfärger. Även linjer där färg och form varieras kan skapa en kontrasteffekt.

Det finns även något som kallas för grids. Den närmaste svenska översättningen jag har stött på är rutnät. Jämför det med papperet som du skrev matematik i under skoltiden – du skapar dock ditt rutnät själv för att ha en ram som helt enkelt styr var du placerar innehållet på din sida.

Som du märker liknar en del principer varandra, jag rekommenderar varmt att söka runt på Pinterest (https://www.pinterest.se/) för mer inspiration och exempel!

lajvdesign
Från: http://www.coolinfographics.com/blog/2015/2/3/the-6-principles-of-design.html

Färgval

Det finns även när det gäller färger en djungel av vägar att gå. Här behöver du ta en tankeställare när det gäller tillgänglighet för alla – hur ser din sida ut om besökaren är färgblind? Ungefär åtta procent av europeiska män har någon nivå av färgblindhet – vanligen problem med rött och grönt. (https://nei.nih.gov/health/color_blindness/facts_about).

Paletton (http://paletton.com/) är ett konstnadfritt verktyg där du online kan testa olika färgkombinationer, inklusive hur det ser ut med olika typer av färgblindhet.

Färger har olika symbolik. Det finns en viss kulturskillnad beroende på var du befinner dig i världen, men generellt kan exempelvis rött symbolisera kärlek och värme, men det är också en varningsfärg.

Varma färger ligger åt hållet gult, rött och orange medan kalla färger ligger mer åt blått.

Typografi

Min lärare i typografi älskade att beskriva teckensnitt med mänskliga egenskaper och stilar. Helvetica som en soldatarmé med prydliga uniformer som kom trampande i ett välformat led.

Teckensnitt fungerar olika bra beroende på om du ser på en skärm eller om texten du läser är utskriven. Generellt rekommenderar jag att du hellre väljer att göra texten för stor hellre än att den blir för liten, då detta gör skillnad när du läser via en skärm. Sans seriff-teckensnitt (dvs teckensnitt utan de små “fötterna”) är oftast lättare att läsa på skärm, även om det finns seriffer som fungerar.

webbdesignfont
Teckensnittet på den undre raden är en seriff och de röda ringarna visar var serifferna är

Några vanliga rekommenderade teckensnitt för skärm är Verdana (sans seriff) och Georgia (seriff).

Vissa säger att comic sans är lättare att läsa för dyslektiker, huruvida det stämmer eller inte har jag inte hittat några tydliga källor på. Det finns annars ett typsnitt som är utvecklat för att vara lättare att läsa vid dyslexi (https://www.dyslexiefont.com/en/dyslexie-font/). Detta är gratis för hemmabruk.

Val av bilder

Jag vill lägga tryck i att du behöver fundera på vad dina bilder representerar – vem, vad, vilka är det som syns? Varierar till exempel kön och etnicitet? Vad händer på bilderna och representerar det ditt lajv?

Jag utgår från att bilderna kommer vara pixelbilder, det vill säga att de är uppbyggda av små prickar.  Dessa prickar är de du ser om du zoomar in väldigt nära på en bild till sist och ser suddiga rutor. Pixlar har att göra med upplösningen av bilden, och viktigt att veta är att högupplösta bilder tar längre tid att ladda, vilket gör din sida långsammare. Högupplöst bild = väldigt många små pixlar att ladda. Upplösning mäts i begreppet ppi, det vill säga pixels per inch.

Jag rekommenderar filformatet JPEG, då det tar väldigt lite utrymme och kan läsas in av de flesta typer av skärmar.

Det finns ett antal bra sidor att hitta gratis bilder som du kan använda. Vissa kräver att du anger källa, andra inte.

Några exempel:

Du kan även använda delar av https://www.flickr.com/ där du kan välja att filtrera bilder med olika creative commons-licenser, vilket innebär att användaren som har laddat upp bilden kan ha valt en cc-licens där du får använda bilden fritt. För mer information om vad creative commons innebär så kan du surfa in på http://www.creativecommons.se/

Sverok hade tidigare en bildbank, men vid skrivandet av den här texten så är den tillfälligt stängd.

Teknologi

Jag tänker inte ge dig en fullständig kurs i hur du kodar en hemsida (bifogar lite länkar i slutet dock), men det här är ändå en bit som behöver nämnas.

Först och främst behöver din hemsida någonstans att vara och där kan du antingen köpa server och webbadress från väldigt många olika ställen, eller så kan du skapa en sida gratis. Exempel på serviceleverantörer som kostar är one.com, loopia och binero. Gratistjänster är bland annat wordpress, wix och google sites. De flesta tjänster erbjuder dessutom olika typer av verktyg eller program som hjälper dig att bygga din hemsida om du inte vill sköta kodningen själv.

Idag surfar de flesta via mobiltelefon eller surfplatta och jag vill därför belysa hur viktigt det är att din hemsida är responsiv, det vill säga att den anpassar sig efter användarens webbläsare. Om du någonsin har surfat via din telefon och kommit in på en sida där allting ser väldigt litet ut och du kanske måste zooma in för att komma åt meny eller länkar, så är det antagligen en statisk sida som är anpassad efter att enbart fungera för den som läser via datorn.

För de flesta frågor inom hemsidesprogrammering så rekommenderar jag varmt http://w3schools.com, som både har kurser som du själv kan gå igenom, samt en validator (ett testrum) där du kan kontrollera om det finns exempelvis koder som inte är avslutade.

Be gärna en eller flera kompisar att kolla på lajvets hemsida innan du släpper den offentligt! Då kan du förhoppningsvis få stavfel rättade, eller upptäcka om något verkar se konstigt ut eller inte fungera!

Innehåll

Kampanjer tenderar att samla på sig väldigt mycket information, men hur mycket av den här informationen behöver du ha på hemsidan? Kom ihåg: KISS!

Eftersom även innehåll är beroende av målgrupp så kommer jag ge väldigt generella förslag. Viktigt är att det är lätt att komma åt den allra viktigaste informationen så snabbt som möjligt, det vill säga när (datum), var (plats) och hur.

Skriv en så kallad elevator pitch, det vill säga en kort text som skulle kunna vara en beskrivning av lajvet som du berättar för någon under tiden som du står tillsammans med någon i en hiss.

Hur många rubriker innehåller din meny? Och hur många underrubriker vill/kan du sätta på denna? Jag föredrar personligen att alltid ha med en huvudflik som heter “Praktiskt” och antingen ha undermenyer på den, eller låta allting som faller under praktiskt ligga i en löpande text, lite beroende på hur mycket information det är.

Vad som blir vanligare på lajvhemsidor nuförtiden, är att arrangörer skriver en vision och/eller en innehållsförteckning där de inkluderar både vad deltagaren kan förvänta sig av lajvet och arrangören, samt vad arrangören förväntar sig av deltagaren. Detta kanske räknas mer som lajvdesign än just design för hemsidan, men jag vill ändå trycka på det här då det tydligt besvarar frågan “Är det här ett lajv för mig?” oavsett vilken målgrupp som läser!

Behöver du en sida för regler? Om inte annat bör det framgå i innehållsförteckningen vad som är accepterat beteende! Kommer du ha metatekniker? Då kanske de behöver förklaras.

En sida med kontaktinformation tycker jag ska ingå även om du försöker ha så lite som möjligt! Där kan du även presentera vilka som är delaktiga i lajvprojektet på olika sätt, vad de har för ansvarsområde och kanske även en bild för igenkänning?

Och ännu en gång nämner jag målgrupp. Vill du locka nybörjare? Då kanske det behövs en sida med “Vad är lajv?” för den som är helt oinsatt, eller oroliga föräldrar som inte förstår vad det är deras barn vill ge sig iväg på. Till förstagångslajvaren kan det vara bra att du inkluderar “Tänk på”-information med exempelvis packlista.

Avslutningsvis tycker jag absolut att du ska se till att all information som står på hemsidan finns tillgängligt i ett nedladdningsbart dokument!

Sammanfattning

Bär alltid med dig frågan “Varför?” när du skapar hemsidan för ditt lajv. Se vad ditt mål är och tänk på vad din målgrupp skulle uppskatta. Det finns en hel del verktyg där ute som kan stötta dig i utvecklingen av din hemsida.

Sociala medier? Ja, men bara om du har tid, ork och möjlighet att sköta om de kanalerna! Det ger ingenting att både finnas på Facebook, Instagram, Google+, Twitter och så vidare, om du inte håller dina sidor uppdaterade och aktuella!

Källförteckning

Litteratur

Bergström, Bo (2009). Effektiv visuell kommunikation: om nyheter, reklam och profilering i vår visuella kultur. 7., [utvecklade] uppl. Stockholm: Carlsson

Johansson, Kaj, Lundberg, Peter & Ryberg, Robert (2006). Grafisk kokbok 3.0: guiden till grafisk produktion. 3., rev. uppl. Malmö: Arena i samarbete med Kapero grafisk utveckling

Niederst Robbins, Jennifer (2007). Learning Web design: a beginner’s guide to (X)HTML, style sheets, and web graphics. 3rd ed. Sebastopol, CA: O’Reilly

Webb

Creative Commons. http://www.creativecommons.se/

Dyslexie font. https://www.dyslexiefont.com/en/dyslexie-font/

Flickr. https://www.flickr.com/

Pinterest. https://www.pinterest.se/

Pixabay. https://pixabay.com/

The ultimate guide to image resolution. http://www.creativebloq.com/graphic-design/what-is-dpi-image-resolution-71515673/2

W3schools.com. https://www.w3schools.com/

W3C Markup Validator Service. https://validator.w3.org/

Wikimedia Commons. https://commons.wikimedia.org/wiki/Main_Page

jojjon

 

 

 

Jojjon Hamrén är en lajvarrangör med kandidatexamen i grafisk design och kommunikation.

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut /  Ändra )

Google+-foto

Du kommenterar med ditt Google+-konto. Logga ut /  Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut /  Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut /  Ändra )

Ansluter till %s