FOLKUNIVERSITETET Bildmanér för Webb3 Vår referens: Fredrik Suter Version 1. Stockholm 2010.04.08 Ringvägen 100 SE-118 60 Stockholm Tel +46 (0)8 501 103 00 www.ottoboni.se 1 (11)
I korthet Ett viktigt fokus med nya Webb3 är att den ska bli mer visuell och på så sätt skapa en mer inspirerande och lustfyllt besök som gör att vi uppfyller en av Folkuniversitetets övergripande drivkrafter: mer säljande. Urvalet av bilder för Webb3 är då avgörande för hur vi uppnår detta. Det vi vill sträva efter är att välja ut bilder på ett konsekvent sätt gällande tema, kvalitet, format och sedan namnge och strukturera dessa på ett gemensamt sätt. Presentation av bilder Bilderna som väljs ut kommer presenteras i ett liggande format på toppen av de sidor som ni skapar. För varje sida som skapas ska ambitionen vara att välja ut en passande bild. Alla sidor använder sig av denna typ av toppbild med några få undantag, (bl a Startsidan och Ortssidan som istället har en bildsnurra där flera bilder kan väljas ut, också de i liggande format). Till detta tillkommer också s k moduler som man använda för presentera vissa budskap i bilder, text och listningar. Nedan är ett exempel på hur en som valts ut kommer presenteras på en sida. 2 (11)
Exempel på ämnesområdessida för Språkkurser med toppbild. 3 (11)
Manér Vi vill att känslan i bilderna ska visa upp ett levande, aktivt, personligt Folkuniversitetet där lärande och interaktion mellan människor står i fokus. Följande teman och fokus är utgångspunkten: Plats/Sammanhang Visa upp platser där Folkuniversitetet har verksamhet Inblick/detaljer Visa upp detaljer som ger inblick och skapar intresse Människor Ge ett ansikte och aktivitet till det vi presenterar Interaktion Visa upp det mänskliga mötet där flera människor interagerar På riktigt Bilderna ska kännas autentiska och trovärdiga Nedan är exempel: Plats/Sammanhang Visa upp platser där verksamhet sker 4 (11)
Inblick/detaljer Visa upp detaljer som ger en inblick i kursen/erbjudandet Människor Ge ett ansikte och ett liv till kursen/informationen/erbjudandet 5 (11)
Interaktion Visa upp det mänskliga mötet där flera människor interagerar Urval Följande punkter är bra att ha med sig i urvalet av bilder: Relevans Enhetligt Liggande framför stående Kvalitet Relevans Hur relevant är bilden för sammanhanget? Det är viktigt att bilderna uppfattas som passande och tillför något till sidans innehåll. Enhetligt Försök att arbeta med urvalet av bilder på ett sätt över hela webbplatsen. Det kommer ge besökaren en mer enhetlig upplevelse och bygger ett starkare varumärke. Ha gärna någon som koordinerar aktiviteten och följer det löpande. Liggande framför stående Liggande bilder gör sig bättre på sidan. Det går också att använda stående bilder, exempelvis kan ansiktsbilder bättre lämpa sig för stående format. I den stående bilden kommer det då att läggas till en svart marginal på höger och vänster sida så att den presenteras i samma format som övriga bilder. 6 (11)
Kvalitet Tänk på kvaliteten på bild d v s vilken upplösning har bilden och hur ser färger och skärpa ut i bilden. Högupplösta bilder föredras i PNG eller JPG-format. För minimumformat, se format-delen där vi visar det största formatet som en bild kommer presenteras i. En bild ska inte vara mindre än detta. Format Nedan är en översikt över de format som kommer användas på webbtjänsten för sidor och listningar. Bildformatet är i proportionerna 16:9. När en bild laddas upp via EPiServer CMS kommer den automatiskt skalas till de storlekar som visas i bilden, givet att den är större eller lika stor som maximala storleken. För stående bilder kommer svarta marginaler läggas till på höger och vänster sida för att bilden den maximala bredden. För bilder som är liggande i andra format, exempelvis 4:3 kommer bilden skalas till bredden medan höjden kommer variera. 7 (11)
8 (11)
Tillvägagångssätt I första steget föreslår vi att ni utifrån den nuvarande strukturen som vi tagit fram på webbtjänsten skapar en mappstruktur på en gemensam server där bilder placeras för respektive sida som kommer skapas. Ni kan också lägga till de undersidor som finns på ortsnivå som ni vet kommer skapas och göra bildurval för detta. Bilderna lyfts sedan över från mappstrukturen till EpiServers bildbank i samband med att arbetet med att publicera innehåll görs under maj månad av redaktörerna. Ytterligare bildinnehåll Utöver detta kan ni även börja tänka utifrån de moduler som kan användas. Vi tänker då på: Bildspel Bildpuff Vittnesmål Bildspel Bildspelet visas på startsidan och landningssidan för ortssidor. Om endast en bild väljs för en ortssida så visas inte bildspelet utan endast en bild. För ett bildspel ska minst fem bilder väljas ut med tillhörande budskap i form av rubrik och ingress. Bildpuff Bildpuffen läggs i högerkolumnen på exempelvis en informationssida. Bildpuffen är enkel modul som består av en bild som länkar till en sida på webbplatsen. För att arbeta enhetligt med bildpuffen får ni en photoshop-fil där ni kan skapa ut bilder med samma typsnitt och bakgrundsfärg. Det går också att skapa andra typer av bilder för puffen självklart. 9 (11)
Vittnesmål Vittnesmål är en modul som både kan användas i trespalt för startsida och ortssida samt i enspalt i högerkolumnen. Modulen visar upp en övergripande rubrik, exempelvis Deltagare berättar och sedan en uppsättning bilder med tillhörande rubrik och länktext. Modulen kan läggas på exempelvis en informationssida i högerkolumnen och länka till annan sida. Vittnesmål i trespalt för startssida Vittnesmål för högerkolumnen 10 (11)
Skolor: Gymnasier, kompletterande utb. Sidans bild i innehållskolumnen är samma som för övriga sidor: maxbredd 600px, höjd dynamisk. Gäller även för bildspel och Flash. I bildspelet bör alla bilder vara exakt lika stora för bästa utseende. Bilder som visas i fullbredd: bredd 940px, höjd dynamisk. Bildspel i fullbredd visas inte korrekt i MS Internet Explorer. Använd ej förrän detta är löst. Bilder i listning; även personallistning: 80 X 80px eller större men med samma höjd och bredd (kvadrat). Skolans symbol/logga i modul: Rekommenderad maxhöjd 40px. Bilden börjar i högerkant, och indrag ska göras i själva bilden. Bakgrundsbild: Kan vara vilken storlek som helst, beroende på om den ska repeteras x y, både och eller inte repeteras alls. Formatet beror alltså på vilken typ av bakgrund som ska användas. 11 (11)