Projektrapport Ewa Kwiatkowska & Marika Johansson

Transkript

1 Projektrapport Ewa Kwiatkowska & Marika Johansson Projekt: webbplatsutveckling 15 hp Vårterminen 2011

2 Sammanfattning I den avslutande kursen för webbredaktörsprogrammet skulle vi göra ett projektarbete. Vår uppgift var att skapa en webbplats och en trycksak åt en riktig uppdragsgivare. Vi valde att samarbeta med bostadsrättsföreningen Storbragden i Malmö. I denna rapport presenterar och diskuterar vi resultatet av projektarbetet och dess olika delar. Inledningsvis går vi igenom bakgrund och syfte med arbetet och berättar lite om hur det började. Tanken med denna kurs var att knyta ihop säcken, vi skulle i projektarbetet använda oss av de kunskaper vi fått under utbildningens gång. Här presenterar vi också vår uppdragsgivare, styrelsen i bostadsrättsföreningen, och vilka önskemål och behov de hade. Det absolut viktigaste var att webbplatsen skulle hjälpa dem att skapa en bättre kommunikation med medlemmarna och ge en starkare gemenskap i föreningen. I nästa steg gör vi en grundlig problemanalys där vi tillsammans med uppdragsgivaren formulerade själva problemet. Problemformuleringen var en förutsättning för att vi skulle ha något att utgå ifrån och arbeta kring, men också för att vi lättare skulle kunna hitta en lämplig lösning. I avsnitt tre i rapporten skriver vi om kartläggning och vägval. Det var i detta skede, efter att vi identifierat problemet, dags att välja väg och försöka ta fram konkreta lösningar. För att kunna lyckas med detta var det viktigt att undersöka och förstå omgivningen och webbplatsens användare. Vi intervjuade målgruppen och tittade mycket på andra bostadsrättsföreningar och hur de valt att göra. För både trycksak och webbplats, men även för den grafiska profilen, gjorde vi sedan val baserade på önskemål och behov från uppdragsgivare och målgrupp. Det fjärde avsnittet handlar om planen för arbetet. Här berättar vi om hur vi skulle gå till väga för att genomföra projektarbetet. Vi gjorde upp ett arbetsprocesschema med planering vecka för vecka, samt ett mer detaljerat Ganttschema där vi skrev in vad vi skulle göra dag för dag. Vi går i detta avsnitt också igenom ansvarsfördelning och risker med arbetet, samt visar de skisser och den sitemap som vi gjorde för att få en överblick över hur webbplatsen skulle bli. Till sist berättar vi kort om hur vi tänkte oss kommunikationen med uppdragsgivaren. I det näst sista avsnittet beskriver vi den slutgiltiga utformningen av webbplatsen, trycksaken och den grafiska profilen. Vi beskriver hur vi gick till väga, samt diskuterar och motiverar våra val kring design, funktion och användarvänlighet utifrån målgruppen och uppdragsgivaren. Vi tar även upp vilka funktioner vi har arbetat med och den tekniska biten gällande webbplatsen. Sist i rapporten beskriver vi våra tankar och reflektioner kring arbetsprocessen, vad som gick bra och vad vi hade kunnat göra annorlunda. Vi berättar om våra erfarenheter och återknyter till planen för arbetet för att se om vi lyckades följa den. Här funderar vi också kring kommunikationen med uppdragsgivaren och hur denna fungerade. 2

3 Innehållsförteckning Sammanfattning... 2 Bakgrund... 5 Syfte... 5 Presentation av föreningen... 5 Önskemål och behov... 6 Problemanalys och problemformulering... 7 Kartläggning och vägval... 8 Målgrupp... 8 Persona... 9 Scenario Webbplats...12 Nya lösningar Trycksak...14 Grafisk profil och logotyp...14 Plan för arbetet Arbetsprocess...16 Arbetsprocesschema Ganttschema Ansvarsfördelning och risker Sitemap Prototyp Kommunikation med uppdragsgivaren...20 Resultat och diskussion Grafisk profil...20 Färgschema Typografi Logotyp Grafiska element Webbplats...26 Navigation Text och typografi Sökmotoroptimering Färg och grafik Bilder Databas och administrationssidor Kod och validering Trycksak...35 Grafiska former och element

4 Typografi Redovisning och reflektion kring arbetsprocess och kommunikation Arbetsprocessen...39 Planen för arbetet...40 Kommunikationen med uppdragsgivaren...40 Källförteckning Bilagor Bilaga 1 - Ganttschema

5 Bakgrund I slutet av vår utbildning till webbredaktör på Högskolan i Borås skulle vi göra ett projektarbete som ingick i kursen Projekt: webbplatsutveckling och omfattade 15 högskolepoäng. Projektarbetet gick ut på att skapa en webbplats och en trycksak för ett existerande företag eller en organisation. Dessutom skulle vi redovisa och diskutera arbetets olika delar i en projektrapport. 1 I januari 2011 fick Ewa en förfrågan av styrelsen i sin bostadsrättsförening om att göra en ny webbplats åt dem. Detta var av flera anledningar inte lämpligt att ta tag i just vid denna tidpunkt, men kändes istället som en utmärkt utmaning för oss att arbeta med under projektarbetet. När starten för projektarbetet närmade sig kontaktade vi föreningens styrelse och berättade att vi beslutat oss för att anta utmaningen tillsammans. Syfte Syftet med projektarbetet var att vi skulle knyta samman de olika delarna i utbildningen till en helhet. Det var naturligtvis också en förutsättning att använda de kunskaper vi fått, för att kunna utföra arbetet på ett så bra sätt som möjligt. Vi skulle inte bara skapa en ny webbplats, utan också en väl fungerande sådan som var anpassad efter målgruppens behov. Förutom webbplatsen skulle vi producera en trycksak, skriva en projektrapport och medverka i ett slutseminarium. På seminariet skulle vi redovisa arbetet muntligt för våra klasskamrater och kommentera ett annat arbete. 2 Projektarbetets syfte grundade sig inte bara i utbildningen, det fanns också ett syfte med arbetet som handlade om vår framtida anställning. De produkter vi skapade i denna kurs skulle bli som ett bevis på vår kunskap, ett gesällarbete som vi skulle kunna visa upp vid en framtida anställningsintervju. Detta innebar att vi kunde påverka möjligheterna att få det jobb vi vill ha. 3 Presentation av föreningen Bostadsrättsföreningen Storbragden ligger i området Östra Sorgenfri i Malmö och är en mellanstor förening bestående av 67 lägenheter och 2 butikslokaler. Lägenheterna har ett till tre rum. Storbragden är en fristående förening som har funnits sedan 1946 och är medlem i SBC (Sveriges BostadsrättsCentrum). Föreningens nuvarande webbplats skapades för 5-6 år sedan när de blev medlemmar i SBC. Då fanns det inte något specifikt syfte med den, och nu flera år senare har föreningens nuvarande styrelse insett att de vill ha en webbplats som ska vara mer användarvänlig och fungera bättre än den gör idag. 1 Buse, Jan 2011: 3. 2 Ibid: 3. 3 Ibid: 3. 5

6 Det var föreningens ordförande Patrik Ekström och vice ordförande Lena Nilsson, som kontaktade oss angående webbplatsen och som blev våra uppdragsgivare. Det senaste året har styrelsen arbetat aktivt med att fräscha upp, renovera och göra en rad olika förändringar för att förbättra livskvaliteten för medlemmarna och fastigheten. Det har aldrig skett så mycket på så kort tid förut. Som en del i detta arbete tycker Patrik och Lena också att en ny och fräschare webbplats är en viktig pusselbit. Önskemål och behov Patrik och Lena ville ha en webbplats som var mer skräddarsydd efter föreningens behov. Huvudsyftet med webbplatsen skulle vara att skapa en kommunikation med medlemmarna och göra dem mer delaktiga i föreningen. Något som Patrik och Lena återkommande poängterade var att de ville att den nya webbplatsen skulle hjälpa till att skapa en gemenskap och samhörighet. Viktigt var även att förmedla information på ett sätt så att medlemmarna skulle kunna ta del av den och bli engagerade. Eftersom kommunikationen var för dålig från båda håll ville uppdragsgivaren ha en mer spännande och levande webbplats. En annan viktig sak var att de ville kunna kommunicera med omvärlden och visa att de finns. Exempelvis tyckte Patrik att det skulle vara smidigt att kunna hänvisa till webbplatsen när mäklare kontaktar dem. Webbplatsens funktionalitet var också viktig. Den måste kunna fungera för alla, både den webbkunniga 20-åringen och den 75-årige pensionären. Men det var inte bara funktionaliteten för användarna som var viktig utan även för styrelsen själva. Patrik och Lena ville att webbplatsen skulle vara lätt att uppdatera så att de själva skulle kunna sköta den. Detta för att webbplatsen skulle vara aktuell och kännas meningsfull för användarna att besöka. Något som Patrik och Lena tyckte var extra viktigt var att webbplatsen skulle förmedla rätt känsla. De poängterade särskilt känslor som trygghet (tryggt boende), ordning och reda samt gemenskap, och förklarade att för dem spelade det första intrycket stor roll. Mer specifika önskemål var: Information om föreningen Information om leverantörer Stadgar Ordningsregler Årsredovisning (inklusive förvaltningsberättelse och underhållsplan) Bragdbladet (föreningens informationsblad) Nyheter Information om fritidslokalen Kontaktuppgifter Information för mäklare Förslagslåda (där medlemmarna kan skriva till styrelsen på ett enkelt sätt) En länk med vanliga frågor 6

7 Föreningen hade en domän som var registrerad sedan flera år tillbaka. Patrik och Lena ville gärna att vi använde denna eftersom de var nöjda med namnet, men även för att den redan var betald för nästkommande år. Domännamnet är Vi tyckte att det lät som en bra idé att använda denna domän eftersom den var klar att börja användas. Innan vi tog den i bruk så kontrollerade vi dock så att allting fungerade och att webbhotellet hade stöd för databaser, för att vara säkra på att uppdragsgivarens önskemål kunde tillgodoses. När vi frågade Patrik och Lena om trycksaken så hade de först inte något specifikt önskemål. Men sedan kom det fram att de gärna ville marknadsföra den nya webbplatsen och kunde tänka sig en folder eller liknande med information. Denna hade de då för avsikt att dela ut till alla medlemmar i föreningen, och även till nyinflyttade. Gällande trycksakens utformning fick vi ganska fria händer. Det enda som de egentligen hade som krav var att den skulle vara i ett lätthanterligt format. Mer om trycksaken berättar vi under rubrikerna Trycksak (sid. 14) och Trycksak (sid ). Storbragden har ingen logotyp och inte heller någon grafisk profil. På den nuvarande webbplatsen finns föreningens namn i sidhuvudet tillsammans med SBC:s logotyp enligt deras färdiga mall. När vi berättade att det ingick i vårt projektarbete att ta fram en grafisk profil åt dem blev de jätteglada. Problemanalys och problemformulering Problemformuleringen är av stor betydelse och en förutsättning för att kunna hitta en lösning. Samtidigt är det viktigt att inte blanda ihop ett problem med ett annat. Om man vill hitta den optimala lösningen måste man tänka på att varje problem är unikt. 4 För att kunna formulera ett problem måste man först analysera det och ta reda på vad det handlar om. Man utforskar alltså problemet. 5 I vårt fall var det styrelsen som kontaktade oss eftersom de hade sett ett problem med föreningens nuvarande webbplats. Vi visste därför redan i ett tidigt skede vad problemet handlade om och hur uppdragsgivaren såg på det. Men för att bilda oss en egen uppfattning utforskade vi det ändå på egen hand. Detta gjorde vi också för att få ett konkret underlag att utgå från och för att kunna identifiera olika risker och svårigheter med projektet. 6 Föreningens styrelse kontaktade oss alltså för att de ville ha en ny webbplats. De tyckte att den nuvarande var alldeles för statisk, tråkig och svår att uppdatera. Patrik och Lena berättade för oss att det stora problemet, så som de såg det, var att det saknades kommunikation och engagemang i föreningen. De ville ha en mer aktiv webbplats som skapade gemenskap och samhörighet. 4 Marttala, Anders & Karlsson, Åke 2011: Ibid: Ibid: 21. 7

8 När vi utforskade webbplatsen utefter det problem Patrik och Lena beskrivit kunde vi tydligt se vad de menade. Det fanns ett huvudsyfte med den nya webbplatsen som vi bröt ner i mindre delar på olika nivåer. Vi upptäckte att allt egentligen hängde ihop i en enda lång spiral, det ena ledde till det andra som ledde till det tredje och så vidare. Bättre kommunikation och gemenskap skulle i längden skapa en bättre trivsel och stämning, vilket i sin tur troligen skulle leda till större engagemang. Allt detta skapar en stabil förening som i sin tur säkert skulle underlätta för föreningen att vid behov hitta nya potentiella köpare till lägenheterna. En populär förening är alltid mer attraktiv. Att se syften såhär på olika nivåer gör det lättare att hitta det riktiga syftet, och det ger en möjlighet att hitta fler kreativa lösningar. Att förstå syftet är en förutsättning för att överhuvudtaget kunna sätta realistiska mål. 7 Det är också en förutsättning för att kunna gå vidare i arbetet och välja väg, något vi berättar mer om i följande avsnitt Kartläggning och vägval. Kartläggning och vägval När vi nu hade formulerat problemet var det dags att välja väg och hitta lösningar. Vi utgick från den problemanalys vi gjort för att mer specifikt kunna gå in på detaljer och ta fram konkreta lösningar. Det var i detta läge därför av stor betydelse att studera och förstå omgivningen. 8 För att göra detta studerade vi andra bostadsrättsföreningars webbplatser. Vi undersökte bland annat hur de valt att lösa olika funktioner och problem, vilka formgivningsmodeller de utgått ifrån och hur de strukturerat sina sidor. För att förstå omgivningen ville vi ta reda på vem som använder webbplatsen. Därför gjorde vi en rad olika målgruppsintervjuer, vilket vi berättar mer om här nedan under rubriken Målgrupp. I vägvalsfasen utgick vi givetvis även från uppdragsgivarens olika önskemål, vilket vi berättar mer om under rubrikerna Webbplats (sid ), Trycksak (sid. 14) och Grafisk profil och Logotyp (sid ) lite längre ner. Målgrupp Utifrån vår egen efterforskning kom vi fram till att den primära målgruppen var föreningens medlemmar. När vi pratade med uppdragsgivaren kom det fram information som exempelvis att det bor många ensamstående i föreningen, väldigt få barnfamiljer och att det är fler yngre än äldre. Vid noggrannare undersökning av den nuvarande webbplatsen såg vi att det även fanns en sekundär målgrupp i form av potentiella köpare av lägenheter. Vid diskussioner med Patrik och Lena kunde vi också konstatera att det fanns ytterligare en sekundär målgrupp, nämligen mäklare. För att lära känna målgruppen och deras behov intervjuade vi några olika medlemmar i föreningen. 9 Vi försökte att välja intervjupersoner som var så representativa som möjligt för målgruppen. När vi förberedde målgruppsintervjuerna och formulerade de frågor vi 7 Marttala, Anders & Karlsson, Åke 2011: Ibid: Wackå, Fredrik 2009: 29. 8

9 skulle ställa utgick vi från Wackås frågor. 10 Vi frågade bland annat i vilka situationer de besökte webbplatsen och vilka aktiviteter de utförde då. Det är verkligen viktigt att förstå sin målgrupp och deras behov för att kunna skapa en god kommunikation mellan dem och webbplatsen. 11 Det var enormt intressant att höra vad medlemmarna i bostadsrättsföreningen hade för önskemål och synpunkter angående den nya webbplatsen. Generellt ville de att sidan skulle vara lätt att hitta på, tydlig och enkel. Mer specifika önskemål som kom upp var att lätt kunna hitta telefonnummer till kontaktpersoner och entreprenörer, hitta information om vad som är på gång i föreningen, kunna ge förslag och synpunkter på förbättringar av webbplatsen och hitta information om renoveringar. Primär målgrupp: medlemmar i föreningen, år och 55 år >, män och kvinnor. Sekundär målgrupp 1: potentiella köpare, är, män och kvinnor. Sekundär målgrupp 2: mäklare, män och kvinnor. Persona Det kan vara svårt att föreställa sig användarna och de exakta situationer då de besöker webbplatsen. För att göra dem mer levande och underlätta för oss i skapandet av webbplatsen gjorde vi några personas, så kallade låtsasanvändare. 12 Vi valde att skapa två personas eftersom åldersspannet är så pass stort för den primära målgruppen. Detta gjorde att de tillsammans representerade målgruppen på ett bra sätt. Vi märke vid målgruppsintervjuerna att medlemmarna befann sig i helt olika stadier i livet. Men även om de hade många olika behov så fanns det en del gemensamma önskemål. Eftersom den primära målgruppen är webbplatsens främsta användare valde vi att fokusera på dem. Detta var viktigt för att kunna tillfredställa deras behov i första hand och göra webbplatsen värdefull för dem Wackå, Fredrik 2009: Redish, Janice 2007: Ibid: Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. 2006:

10 Christina 67 år pensionerad operasångerska bor i Malmö kommer från Norge ensamstående sedan 5 år tillbaka har inga barn Jag gillar hemsidor som är översiktliga, där man lätt kan se var man ska trycka. I helgen tittade jag till och med på norsk tv på datorn. Christina lever ett lugnt och tillbakadraget liv i sin lägenhet i Malmö, och njuter av att vara pensionär. Hon köpte lägenheten redan på 60-talet tillsammans med sin dåvarande make Björn. När de separerade för ungefär fem år sedan blev det Christina som fick bo kvar, ett val hon aldrig ångrat. Då var lägenheten inredd i en äldre stil som var modern på den tiden, men nu har Christina låtit renovera kök och själv tapetserat om i både sovrum och vardagsrum. Christina trivs utmärkt i sin tvårumslägenhet, men när hon känner att det blir lite instängt åker hon gärna till stugan på landet. Där tillbringar hon hela somrarna med att påta i trädgården och laga trasiga saker. Hemma i Malmö är teater ett stort intresse. Hon har själv haft en lång och fantastisk karriär som operasångerska, huvudsakligen på Malmö Opera. Karriären avslutade hon när hon var på topp, men hon ställer fortfarande upp i olika operaföreställningar när det behövs inhoppare. Intresset för opera har funnits sedan länge och ligger henne ännu väldigt varmt om hjärtat. För sju år sedan köpte Christina sin första dator, men hon anser sig fortfarande vara en ganska ovan datoranvändare. Huvudsakligen använder hon den till att kommunicera med sin syster. Systern bor i Norge och eftersom de inte träffas så ofta tycker Christina att Skype är ett utmärkt sätt för dem att hålla kontakt med varandra. Dessutom betalar hon räkningar, skickar mail, slår upp saker och tittar på norsk tv via datorn. På fritiden finner Christina också stort nöje i att vara ute och cykla. Det finns gott om fina parker i Malmö att ta sig runt i, men favoriten är ändå turen till sjön när hon är i stugan. På senare år har även styrketräning blivit ett intresse, eller kanske mer ett måste för att stärka musklerna i kroppen. Även om Christina idag är en glad och pigg pensionär så inser hon att hon inte kommer att bli yngre. 10

11 Martin 26 år snickare bor i Malmö, är nyinflyttad ensamstående har inga barn Jag tycker inte om krångliga och svårnavigerade hemsidor, de irriterar mig. Då går jag vidare till någon annan sida istället där jag snabbare hittar det jag letar efter. Martin jobbar som snickare på ett snickeri i utkanten av Malmö, där han spenderar långt mer än åtta timmar per dag. Eftersom han stortrivs med sitt jobb så gör det honom inte något. Tidigare bodde Martin i Svedala, en mindre ort utanför staden, där han är uppväxt. För ett halvår sen flyttade han in till Malmö eftersom många av hans kompisar redan bor här. Martin trivs väldig bra i sin bostad även om alla saker inte riktigt har kommit på plats än. Området han bor i tycker han känns mysigt och det verkar finnas många olika saker att hitta på. På fritiden umgås Martin gärna med sina vänner och tycker om att titta mycket på film. Oftast är det action som gäller och både en och två filmer kan hinnas med under en kväll. När han annars får en ledig stund över tar han gärna sin longboard och åker ner till Ribersborgsstranden. Här kan Martin åka runt i flera timmar och bara njuta av att vara ledig, titta på folk och kanske ta en glass i solen. Martin är en van datoranvändare och är dagligen ute på Internet. Han har en kraftfull stationär dator som är kopplad till en 46" tv. Perfekt för mycket filmtittande! När Martin är ute på nätet brukar han betala räkningar, kolla nyheter och ladda ner filmer. Han har också nyligen blivit medlem i Facebook, mest för att kunna hålla koll på vad som händer i umgängeskretsen och bli inbjuden till olika fester. För Martin är det viktigt att en webbplats är tydlig och lättnavigerad. Han har varken tid eller tålamod med krångliga, svåröverskådliga och plottriga webbplatser. Då blir han bara irriterad och lämnar webbplatsen direkt. Nu när Martin har flyttat till en egen lägenhet och bor närmre sina vänner hoppas han kunna komma ut och träffa mer folk. Han drömmer om att hitta en flickvän som delar hans intressen och som han kan ha roligt tillsammans med. Scenario Scenarios är små korta berättelser som ger en känsla om webbplatsens användare, hur deras liv ser ut och vad det är de vill utföra på sidan. På samma sätt som personas ger liv till de uppgifter vi samlat in om målgruppen, ger scenarios liv till de uppgifter och mål 11

12 som användarna har på webbplatsen. 14 Scenarios är innehållsrika berättelser som fokuserar mer på vad användarna vill göra på webbplatsen än hur de vill göra det. 15 Eftersom vi gjorde två personas valde vi också att skapa var sitt scenario åt dem. 16 Christina Christina har precis avslutat ett samtal med sin syster via Skype. Som vanligt har de pratat i flera timmar om allt mellan himmel och jord. Systern Lykke berättade bland annat om sina sysslor i bostadsrättsföreningen i Holmenkollen där hon bor. Nu var det snart dags för deras årliga sommarfest som hon varit med och planerat. Christina börjar genast fundera på sitt eget engagemang i sin bostadsrättsförening. Hon känner att systern har inspirerat henne och att det skulle vara jätteroligt att få vara med och kunna påverka sitt boende. Efter separationen från sin make känner hon att hon har både tid och ork att bry sig om annat utanför hemmet. Efter det långa samtalet känner Christina sig torr i munnen och går ut i köket för att hämta ett glas vatten. Medan hon släcker törsten får hon syn på informationsbladet på kylen om föreningens nya hemsida. Hon ställer ifrån sig glaset, tar ner bladet och läser vidare. Eftersom hon inte varit inne och tittat på hemsidan tidigare känner hon en stor nyfikenhet. Här kanske jag kan sätta mig in i vad styrelsearbetet innebär, tänker hon. Kanske jag till och med kan hitta ett telefonnummer så jag kan ringa dem. Martin Martin kommer hem efter en lång dag på jobbet. Klockan är redan sju på kvällen men solen skiner fortfarande. Han häller upp en stor kall öl, tar med sig datorn och går ner på gården där han sätter sig på en bänk. Han hinner inte mer än att starta datorn innan han hör Weezers låt My name is Jonas från mobilen. Det är kompisen Tobbe som ringer och undrar om de ska käka något tillsammans och kanske hitta på något senare på kvällen. Även om Martin känner sig trött efter en tuff arbetsdag så tycker han att förslaget är kanon och erbjuder sig att de kan vara hos honom. När de efter några skratt senare lägger på surfar han in på föreningens hemsida där han tidigare hittat mycket vettig information. Han har för sig att han sett en länk med tips på nöjen och matställen i området. Denna länk skulle ju vara skitbra att använda nu, tänker han. Hoppas jag hittar något snabbt. Webbplats I vägvalsfasen gällande webbplatsen utgick vi, som vi nämnde i avsnittet Kartläggning och vägval (sid. 8), bland annat ifrån uppdragsgivarens olika önskemål. På grund av arbetets omfattning blev vi tvungna att revidera deras ursprungliga lista, vi hade varken tid eller kunskap att tillgodose alla deras önskemål. Listan finner ni under rubriken Önskemål och behov (sid. 6). 14 Redish, Janice 2007: Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. 2006: Redish, Janice 2007:

13 Patrik och Lena hade från början ett önskemål om att ha med en förslagslåda på webbplatsen där medlemmarna lätt skulle kunna kontakta dem och komma med förslag. När vi tillsammans diskuterade detta så insåg de att det kanske inte var en så bra idé. Patrik och Lena ville inte uppmana medlemmarna att komma med förslag eftersom de då kände att det skulle innebära alldeles för mycket jobb för dem. Däremot tyckte de naturligtvis fortfarande att det var viktigt att exponera deras kontaktuppgifter. Vi föreslog att vi kunde skapa en mailadress genom vilken de kunde hålla kontakt med medlemmarna. Som det var innan hade de sina privata kontaktuppgifter utlagda på webbplatsen, vilket de inte var helt nöjda med. De funderade också på om det kanske skulle vara bra att ha med en länk där användarna kunde få svar på vanliga frågor. Eftersom tanken med den nya webbplatsen var att den skulle bli mer användarvänlig och anpassad efter målgruppen så kom vi överens om att det inte behövdes några vanliga frågor. Vid närmre eftertanke kom Patrik och Lena på att det faktiskt inte var så många som hade just vanliga frågor. I de flesta fall handlade det om mer specifika och väldigt individuella saker som medlemmarna frågade om. Utöver detta så ville Patrik och Lena gärna se fler bilder på webbplatsen och efterfrågade därför ett sätt att kunna visa dessa på. Nya lösningar För att skapa en webbplats som uppfyllde både uppdragsgivarens och målgruppens behov hade vi en rad olika förslag på lösningar. Vid mötet med styrelsen presenterade vi våra idéer om hur vi skulle kunna skapa en mer kommunikativ webbplats. Patrik och Lena var mycket positiva och tyckte om de flesta av lösningarna, de gav oss klartecken att fortsätta arbetet. Ett förslag var att ha med en karta för att lättare hitta föreningens geografiska position. Denna funktion var i första hand tänkt för mäklare och köpare. Ett andra förslag var att ta fler bilder från fastigheten och dess omgivning för att skapa en mer positiv och trygg känsla på webbplatsen. Bilderna tänkte vi oss dels kunde presenteras i någon form av fotogalleri, men också finnas utplacerade på webbplatsens övriga sidor. Ett tredje förslag var att ha med en sida om nöjen i närheten för att hjälpa främst nya medlemmar att bli bekanta med omgivningen. Reviderad lista på specifika önskemål: Information om föreningen Information om leverantörer Fler bilder Stadgar Ordningsregler Årsredovisning (inklusive förvaltningsberättelse och underhållsplan) Bragdbladet (föreningens tidning) Nyheter Information om fritidslokalen Kontaktuppgifter (även mailadress direkt till föreningen) Information för mäklare Nöjen i området Kartfunktion 13

14 Trycksak Varken vi eller vår uppdragsgivare hade någon tydlig bild av trycksaken från början. Däremot hade de två specifika krav. De ville ha ett informationsblad som berättade om den nya webbplatsen, och de ville att det skulle vara i ett lätthanterligt format. Som vi tidigare nämnde i avsnittet Önskemål och behov (sid. 6) såg Patrik och Lena en möjlighet att med hjälp av trycksaken kunna marknadsföra den nya webbplatsen för medlemmarna. Patrik och Lena tänkte sig en upplaga på 120 exemplar för att kunna dela ut ett till varje hushåll och få några över att kunna ge till nya lägenhetsinnehavare i framtiden. För att skapa ett lätthanterligt informationsblad bestämde vi oss för att formatet skulle vara antingen A4 eller A5. Vi kontaktade Krontryck i Eslöv för att rådgöra med dem gällande papperskvalitet och format. Vi frågade också bland annat om prisuppgifter och hur lång tid de behövde på sig för att trycka. Zandra Lindell, som blev vår kontaktperson på prepressavdelningen på tryckeriet föreslog att vi skulle välja digitaltryck, eftersom det var lämpligt för vår mindre upplaga. Detta var en metod som var relativt billig och snabb, vilket var något vi hade efterfrågat. Zandra föreslog ett papper som heter 130g Silk, ett halvmatt och bestruket papper. Hon tyckte att detta var ett lämpligt pappersval för denna typ av trycksak eftersom det gav bra färgåtergivning. Dessutom uppfyllde dess ytskikt och tjocklek vårt krav på att vara annorlunda och sticka ut i mängden. Zandra gav oss även flera tips på tänkvärda saker inför vårt arbete med trycksaken. Vi fick bland annat veta vilken ICC-profil som var lämplig att använda, att de hade en som vi kunde ladda ner från deras webbplats, och vilken upplösning eventuella bilder skulle ha. Efter en del funderande fram och tillbaka bestämde vi oss till sist för att göra informationsbladet i formatet A4. Vi ansåg att detta var det mest lätthanterliga formatet på grund av att det är så vanligt. Ett annat skäl var att textinnehållet skulle få plats utan att det blev trångt och såg hoptryckt ut, vilket också skulle göra det lättare för målgruppen att läsa informationen och ta den till sig. Förutom Patrik och Lenas två krav fick vi fria händer att arbeta med trycksaken. Eftersom informationen på trycksaken var given var det layouten vi fick jobba mest med. När vi väl bestämt oss för formatet så jobbade vi med en del olika förslag. Vi hade många vägval att välja mellan och många beslut att ta. Vi tyckte främst att det var svårt att hitta rätt lösning för layouten av textelementen och utformningen av dessa. När vi hade arbetat fram ett förslag som kändes bra visade vi detta för Patrik och Lena som gav sina synpunkter. Vi rådfrågade också lärare på skolan för att få höra vad de tyckte och förhoppningsvis få lite konstruktiv kritik att arbeta utifrån. Resultatet av trycksaken berättar vi om längre fram i avsnittet Trycksak (sid ). Grafisk profil och logotyp Föreningen hade ingen logotyp sedan innan, inte heller några bestämda typsnitt, färger eller symboler, de hade helt enkelt ingen grafisk profil alls. Arbetet med den grafiska designen inleddes därför med en blank och tom canvas, vi började alltså från början. 14

15 Patrik och Lena blev båda glatt överraskade när vi berättade att det ingick i vårt arbete att ta fram en logotyp. Vi pratade om fördelarna med att ha en logotyp och det tog inte lång tid innan de själva började fundera kring i vilka sammanhang de kunde använda den. De såg stora fördelar med att använda logotypen i allt sitt material, inte bara på webbplatsen utan också på exempelvis korrespondensmaterial. Detta skulle ge ett enhetligt och positivt intryck av föreningen och skapa en känsla av samhörighet, 17 vilket skulle underlätta för medlemmarna att känna igen den. I början av arbetet med den grafiska profilen gick det trögt, eftersom vi kände att vi inte hade så mycket att gå efter. Hur skulle vi förmedla de känslor som uppdragsgivaren tidigare uttryckt? Det enda vi egentligen kunde utgå ifrån var dessa känslor och det syfte vi tidigare fastställt med webbplatsen. För oss kändes detta som väldigt abstrakta vägledare och stöttepelare. För att komma vidare i arbetet valde vi att jobba med den grafiska profilens olika delar i en viss ordning. För oss kändes det mest naturligt att börja med att bestämma färger. Därefter letade vi fram typsnitt för webbplatsen. Vi tittade även en del på typsnitt för trycksaken, valde ut några kandidater, men bestämde oss för att ta det slutgiltiga beslutet kring detta när vi visste hur trycksaken skulle se ut. När färgerna och typsnitt var definierade blev det lättare att jobba med logotypen. Innan vi började arbeta med att ta fram logotypen tittade vi runt på nätet och undersökte hur andra bostadsrättsföreningars logotyper såg ut. Vi kunde snabbt konstatera att endast ett fåtal föreningar hade en riktig logotyp, i de flesta fall var bara namnet satt i ett typsnitt med större grad. Efter några skisser fram och tillbaka kom vi fram till ett förslag som vi visade för Patrik och Lena. Patrik gillade loggan direkt men Lena hade vissa synpunkter gällande typsnittets storlek. Hon tänkte sig att BRF skulle stå i gemener och Storbragden i versaler. Det var såhär Lena föreställde sig namnet i skrift. Vi tog fram ett nytt förslag på logotypen, men när Lena fick se detta ändrade hon åsikt och höll med om att det första förslaget var bättre. Hon tyckte inte om den senaste logotypen eftersom den såg alldeles för stor och klumpig ut, samtidigt som hon tyckte att den skrek för mycket. Vi var själva eniga om att den första logotypen var bättre eftersom den hade en skönare balans och mjukare framtoning. I slutändan var vi alla överrens om att välja det första logotypförslaget varefter arbetsprocessen kunde fortsätta. Plan för arbetet Några veckor innan kursen startade skrev vi en presentation om föreningen som vi skickade till handledare Jan Buse. Redan efter några dagar fick vi till svar att uppdragsgivaren var godkänd. Det första vi gjorde när kursen startade var att ta fram en plan för arbetsgången. För att strukturera projektarbetet och få med alla moment gjorde vi ett överskådligt arbetsprocesschema vecka för vecka och ett mer detaljerat Ganttschema som visade dag för dag. 17 Bergstöm, Bo 2009:

16 Arbetsprocess Att utarbeta det övergripande arbetsprocesschemat var en obligatorisk uppgift som skulle beskriva arbetets olika delar och när vi beräknade att vara färdiga med dem. 18 Vårt schema inkluderade alla moment för både webbplats och trycksak, men även planering och förberedande arbete både för projektrapporten och seminariet. Det var ett preliminärt schema som kom att revideras något under arbetsprocessens gång. Arbetsprocesschema Vecka 12 Projektplan, arbetsprocesschema 13 Aktivitet Utforska föreningen och dess nuvarande webbplats, kartläggning av konkurrenter, möte med uppdragsgivare & målgrupp, brainstorming, syfte, målgruppsanalys, personas, scenario, start projektrapport 14 Grafisk profil, kontakta tryckeri, start utformning av trycksak, sitemap, prototyp 15 Start kodning av webbplats, databasfunktion 16 Insamling av material (skriva/redigera texter, fotografera) 17 Arbetet fortsätter 18 Arbetet fortsätter 19 Arbetet fortsätter 20 Webbplatsen och projektrapporten färdig - inlämning 21 Trycksaken färdig, förbereda presentation, förbereda kommentarer på annat arbete 22 Presentation av arbetet på seminarium Figur 1. Arbetsprocesschema. Ganttschema För att nå målet med projektarbetet på bästa och mest effektiva sätt gjorde vi upp ett detaljerat Ganttschema där vi satte upp milstolpar som i sin tur bröts ner till aktiviteter. Vi planerade aktiviteterna utefter det förhållande de hade till varandra, exempelvis gällande omfattning och den ordning de behövde utföras i. Vi tidsuppskattade även varje aktivitet dag för dag. 19 Många av aktiviteterna planerades även att utföras parallellt. Ganttschemat finns under Bilagor (sid. 44) som Bilaga 1. Ansvarsfördelning och risker För att få ut så mycket som möjligt av vårt grupparbete, och kunna utnyttja tiden på bästa sätt, så delade vi upp arbetet mellan oss. I inledningsfasen av arbetet gjorde vi ändå många av aktiviteterna tillsammans, som till exempel att fasställa syfte, göra målgruppsanalys och ta fram en grafisk profil. Här kände vi att vi behövde varandras hjälp för att bolla idéer. När vi sedan till exempel kodade webbsidorna så delade vi upp arbetet. I alla projekt finns risker. En risk är en oväntad händelse som av någon anledning försenar projektet. 20 För att hantera riskerna så gott vi kunde försökte vi analysera dem 18 Buse, Jan 2011: Maurin Söderholm, Hanna & Lassi, Monica 2011: Marttala, Anders & Karlsson, Åke 2011:

17 och bli medvetna om vilka de var. Den största risken vi såg var tiden. Det var svårt att förutse hur lång tid de olika aktiviteterna skulle ta och därför var detta något som skulle kunna försinka oss i arbetet. En annan risk vi identifierade var sjukdom. Om arbetet skulle bli försenat på grund av sjukdom så var vår plan att kompensera i efterhand, exempelvis genom att arbeta fler timmar per dag eller eventuellt arbeta under helger. Sitemap En sitemap är en typ av diagram som ger en överskådlig bild av webbplatsens struktur. Sitemaps används huvudsakligen till att ge en förståelse kring informationsstrukturen, designens uppbyggnad och i viss mån även navigationsstrukturen och webbplatsens flöde. 21 Vi skapade även sitemappen för att lättare kunna få feedback på innehållet och strukturen när vi kommunicerade med arbetsgivaren. Figur 2. Ursprunglig sitemap. 21 Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. 2006:

18 Figur 3. Slutgiltig sitemap. Prototyp När vi hade strukturen klar för oss gjorde vi prototyper på startsidan och sidorna för fotogalleri, stadgar och andrahandsuthyrning (figur 4-7). Vi ritade upp enkla skisser över layouten och de olika element vi tänkte oss skulle finnas med. Fördelen med prototyper är att de går snabbt att ta fram och att de sedan kan användas för att få feedback från både uppdragsgivare och användare. Våra skisser var en form av low-fidelity prototyper. Detta innebär att skisserna inte har den slutgiltiga designen utan är mycket enkla och rena, de kan gärna göras med papper och penna. 22 Det är i detta skede viktigt att fokusera på rätt saker, exempelvis webbplatsens struktur, och inte färg, form eller typsnitt Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. 2006: Ibid:

19 Figur 4. Prototyp startsida. Figur 5. Prototyp stadgar. Figur 6. Prototyp andrahandsuthyrning. Figur 7. Prototyp Fotogalleri. 19

20 Kommunikation med uppdragsgivaren Vi planerade in ett längre möte med uppdragsgivaren i inledningsstadiet av projektarbetet. Här tänkte vi oss att vi skulle gå igenom uppdraget, göra en problemanalys och se vilka deras behov var. Sedan var tanken från vår sida att träffas ungefär varannan vecka för att stämma av arbetet. Eftersom Ewa bor i bostadsrättsföreningen så utgick vi ifrån att hon smidigt skulle kunna få tag på uppdragsgivaren vid behov. Kommunikationen skulle även skötas genom telefonsamtal och mail. Hur detta fungerade beskriver vi i slutet av rapporten under rubriken Kommunikation med uppdragsgivaren (sid ). Resultat och diskussion I detta avsnitt beskriver vi den slutgiltiga utformningen av webbplatsen, trycksaken och den grafiska profilen. Vi beskriver hur vi gick till väga, samt diskuterar och motiverar våra val kring design, funktion och användarvänlighet utifrån målgruppen och uppdragsgivaren. Vi tar även upp lite kring vilka funktioner vi har arbetat med och den tekniska biten gällande webbplatsen. Grafisk profil Den grafiska profilen var en stor och viktig del av vårt projektarbete eftersom den utgjorde fundamentet både för webbplatsen och för trycksaken. Här nedan berättar vi om den grafiska profil som vi skapade och dess olika delar: färgschema, typsnitt, logotyp och grafiska element. Färgschema Vi skapade färgschemat utifrån både uppdragsgivarens och målgruppens tankar och önskemål. Patrik och Lena pratade om känslorna trygghet, gemenskap samt ordning och reda, det var såhär de ville att webbplatsen skulle upplevas. Det blev sedan vår uppgift att uttrycka dessa känslor i färg och skapa ett färgschema. I målgruppsintervjuerna var det flera av medlemmarna som berättade att de associerade grönt med föreningen, de tyckte att denna färg skulle passa in bra i sammanhanget. För att skapa färgschemat använde vi oss av Adobe Kuler (figur 8). 24 Vi valde att utgå från färgcirkeln och målgruppens tankar kring grön färg. Inte bara av de anledningar vi nämnde i stycket ovan, utan också för att den gröna färgen symboliserar en del av de känslor vi ville förmedla. Karaktäristiska känslor för grönt är bland annat harmoni, balans, uppriktighet, lugn, välmående och avslappning. 25 Utöver den ljusgröna färgen valde vi också att ha med en mörkgrön färg. Tanken var att dessa båda nyanser skulle komplettera varandra, grönt blev huvudfärg och ljusgrönt blev själva basfärgen. Den beiga färgen valde vi för att den återfinns i fastighetens fasad. Brunt kändes som en lämplig färg som tillsammans med grönt och beiget skapade en harmonisk enhet, färgerna är närliggande i färgcirkeln och viskar till varandra. 26 Den bruna går också igen i Jansson, Helena 2010: Bergstöm, Bo 2009:

21 fasaden och naturen runtomkring fastigheten, samtidigt som den utstrålar pålitlighet, värme, lugn och vänskap. 27 Den turkosa färgen tog vi med för att skapa någon form av kontrast. Vi ville också ge liv i färgschemat eftersom uppdragsgivaren hade uttryckt en önskan om en levande webbplats. Dessa fem färger bildar tillsammans ett analogt färgschema då de följer efter varandra i färgcirkeln. 28 Även om färgerna kanske inte är helt tydligt analoga så är de närliggande, huvudsakligen i färgcirkelns övre del. Det som skulle kunna skapa förvirring är att den bruna och turkosa färgen nästan ligger mitt emot varandra och därför även är komplementärfärger. Men det är precis detta som vi upplever skapar den levande känsla vi är ute efter. För att färgschemat inte skulle göra designen spretig valde vi att hålla oss till dessa fem färger. 29 Figur 8. Färgschema med färgkoder. Typografi På webbplatsen valde vi typsnittet Verdana. Verdana är en sanserif, ett typsnitt utan fötter. Det har öppna och breda teckenformer med ett jämnt och luftigt intryck, vilket leder till god läsbarhet. Detta gör att Verdana passar bra i både löpande text och 27 Jansson, Helena 2010: Landmér, Rebecca 2010a: Ibid: 2. 21

22 rubriker. 30 Verdana är också ett bra exempel på ett skärmanpassat typsnitt, 31 vilket vi såg som en föredel. Vi bestämde oss för att använda Verdana på hela webbplatsen, både i rubriker och i brödtext. Däremot så tänkte vi oss att typsnittet, vid behov, mycket väl skulle kunna användas i olika utföranden enligt nedan (figur 9-11). Figur 9. Typsnittsprov Verdana Regular. Figur 10. Typsnittsprov Verdana Italic. Figur 11. Typsnittsprov Verdana Bold. Även för trycksaken valde vi Verdana. Detta blev det enda typsnittet eftersom det fungerade bra både för brödtext och för rubrik. Vi ville hålla intrycket rent och enkelt som möjligt och tyckte att samma typsnitt skapade igenkänning. Mer om typografi för webbplatsen och trycksaken berättar vi under rubrikerna Text och typografi (sid.28-29) och Typografi (sid ). Logotyp Det främsta syftet med en logotyp är att den ska gå hand i hand med företagets affärsidé och vision. 32 Vår utmaning var att få logotypen att förknippas med en bostadsrättsförening. Logotypen vi skapade består av tre olika element, förkortningen BRF för bostadsrättsförening, namnet Storbragden och en figur i form av ett hus. Storbragden satte vi i typsnittet Nyala. Vi fastnade för detta typsnitt eftersom det ger en seriös, pålitlig och rejäl känsla med karaktär samtidigt som de runda formerna förmedlar lugn och trygghet. Serifferna påminner om takåsar som ger associationer till hus. Vi spärrade och knep några av bokstäverna i ordet, vilket resulterade i att vi med en optisk utjämning gav det en mer harmonisk ordbild. 33 Förkortningen BRF fick typsnittet Verdana. Dess raka linjer hjälpte till att skapa balans i logotypen. Vi valde att skriva ut förkortningen av bostadsrättsförening eftersom vi annars tyckte att ordet hade blivit för långt och då tagit för mycket uppmärksamhet från Storbragden. När vi undersökte andra bostadsrättsföreningars webbplatser kunde vi konstatera att BRF är en väletablerad förkortning. Vi ansåg därför att det, för målgruppen, inte borde råda någon 30 Bergstöm, Bo 2009: Bergstöm, Bo 2009: Ibid: Bergstöm, Bo 2009: 138, Hellmark, Christer 2004:

23 tvekan om vad det betyder. Vi skrev förkortningen i versaler för att skapa kontrast mot Storbragden. För att ge liv åt logotypen ville vi ha med någon form av figur, och det första vi kom att tänka på var ett tak. Taket förknippades med fastigheten som i sin tur förde tankarna till föreningen. Efter att ha bollat idéer fram och tillbaka beslutade vi oss till sist för att göra ett miniatyrhus. Tillsammans med BRF blev det tydligt att logotypen tillhörde en bostadsrättsförening. Huset skapade vi av tre former, en triangel, en rektangel och en kvadrat. Tack vare att vi placerade formerna i det mönster vi gjorde och nära varandra fick de utseendet av ett hus. Här utnyttjade vi närhetens lag. 34 Färgerna är naturligtvis hämtade från färgschemat (figur 8). Taket blev brunt av den enkla anledningen att det kändes mest naturligt. Sedan valde vi den ljusgröna basfärgen för den största av de två kvarvarande ytorna. Dörren gjorde vi turkos för att skapa kontrast och liv åt logotypen. Nedan (figur 12) syns bilder på hur vår arbetsprocess kring loggan såg ut och vilka förslag vi jobbade med. Figur 12. Skisser på olika logotyper. 34 Landmér, Rebecca 2010b: 6. 23

24 Grundlogotyp Tanken är att grundlogotypen i färg ska användas så långt det är möjligt. Detta gäller både för webbplatsen och för olika trycksaker. Det viktiga är att bakgrunden alltid är vit eller väldigt ljust grön. I vissa fall skulle det kunna fungera med en mycket ljus grå bakgrundsfärg då logotypen ska exponeras på webben, men absolut inte för tryck. Vi tänker oss att den bruna, gröna och turkosa färgen skulle förändras om pappersfärgen för trycksaker är annan än vit. Figur 13. Grundlogotyp. Svart logotyp Den svarta logotypen används när det av någon anledning inte går att återge en logotyp i färg. För denna logotyp är det inte lika viktigt att bakgrundsfärgen är vit. Logotypen kan användas på vilken bakgrundsfärg som helst, så länge det finns en tydlig konstrast och att logotypen framhävs. Man skulle även kunna tänka sig att denna kan tryckas med lite mer effekt, exempelvis lackad mot en matt bakgrund. Figur 14. Svart logotyp. Inverterad logotyp Logotypen kan även användas i inverterad form, vit text mot svart bakgrund. Denna är också tänkt för de tillfällen då det inte går eller helt enkelt passar att använda grundlogotypen. Denna logotyp kan förutom svart bakgrund dessutom återges med annan bakgrundsfärg. Exempelvis skulle denna variant vara lämplig om logotypen ska exponeras mot ett fotografi med mörk bakgrund. Figur 15. Inverterad logotyp. 24

25 Grafiska element Som ett grafiskt element valde vi att ha med huset som finns i logotypen. Det kan förutom originalutförandet även visas enfärgat med fyllnadsfärg eller med konturfärg. Det viktiga är att färgerna kommer från färgschemat. Vi gjorde även ett alternativt grafiskt element av huset där vi placerade tre hus i olika storlekar och färg med överlappning. Detta element fick namnet Tre Hus. För denna grafiska form valde vi husen med konturfärg för att även få fram den rektangulära och kvadratiska formen, med hjälp av linjerna, där husen möts. De tre husen är ett fast grafiskt element och ska enbart återges enligt illustrationen nedan (figur 18). Tanken med just denna grafik var att husen skulle representera att det finns många olika hushåll i föreningen, vissa större och andra mindre. Vi placerade husen med lite överlappning för att symbolisera att alla hushållen är under samma tak, i en och samma fastighet. Detta i sin tur skulle återspegla den känsla av gemenskap som är ett av nyckelorden för föreningen. Figur 16. Originalhuset från logotypen. Figur 17. Huset i olika fyllnadsfärger från färgschemat. Figur 18. Tre Hus. Figur 19. Huset i olika konturfärger från färgschemat. 25

26 Webbplats En webbplats kan skapas utefter flera olika designmodeller. Vi valde att göra Storbragdens webbplats enligt modellen hästskon, som är relativt enkel. 35 Hästskon pekar neråt och bildas av en kolumn på vänster respektive höger sida, samt sidhuvudet som löper här emellan. Att modellen redan används på många webbplatser gör att vi klassar den som vanlig. Detta känns som en fördel då vi tror det kommer att underlätta för användarna att lätt lära känna sidan och hitta vad de letar efter. Eftersom vi valde att designa webbplatsen efter hästskomodellen, med sina två kolumner vid sidorna, så fick vi automatiskt ett utrymme i mitten (figur 20). Vi var noggranna med att skapa vita ytor mellan dessa tre kolumner för att det inte skulle se trångt och rörigt ut. 36 De vita ytorna gav också rymd och andrum åt designen, vilket underlättar för användaren att få en överblick över sidan. 37 Figur 20. Skärmdump av webbplatsens startsida. 35 Landmér, Rebecca 2010d: Beaird, Jason 2007: Ibid: 8. 26

27 Navigation Länkar är som drivmedel för en webbplats. De är viktiga och essentiella för att den överhuvudtaget ska fungera. 38 Därför la vi ner mycket tid i inledningsstadiet av vårt arbete med webbplatsen på just länkarna och navigationen. Vi funderade kring vad länkarna skulle ha för namn, var navigationen skulle placeras, samt hur den skulle se ut. Eftersom det var väldigt mycket information som skulle få plats på webbplatsen medförde det att vi behövde skapa en ganska omfattande navigationsmeny. För att länkarna skulle kunna presenteras på ett smidigt sätt valde vi att placera huvudnavigationen längs med webbplatsens vänstra sida. Om man väljer att lägga sin navigation längs med en sida så är det vanligast att välja just den vänstra, detta kan nästan räknas som standard. 39 Vi följde detta råd för att återigen utnyttja fördelen av att användarna känner igen sig och för att underlätta för dem. En annan anledning till att vi valde just denna sidgående navigationsmeny var att den ger en större och mer flexibel yta att arbeta med. 40 Om ytterligare en eller flera länkar skulle behöva läggas till i framtiden så skulle de få plats eftersom navigationen bygger neråt. Det var däremot inte lika självklart hur vi skulle presentera underlänkarna till sidan För medlemmar. Eftersom detta skulle bli huvudlänken där medlemmarna hittade all viktig information om sin bostadsrättsförening så blev det även här många länkar. Vi funderade först på om en drop-down lista skulle kunna fungera, men bestämde oss sedan för en enklare och (enligt oss) mer stilren variant som vi tyckte passade sidans övriga känsla. Vi lät underlänkarna dyka upp i en ny lista under huvudlänken, vilket resulterade i en konsekvent design. Detta kändes dessutom som en funktion vi visste hur vi skulle hantera, som var lätt att både skapa och kontrollera. För att användaren lätt ska kunna hitta de viktigaste länkarna ska dessa finnas above the fold. Detta innebär att de ska synas på sidan utan att användaren först ska behöva scrolla sig neråt. För att kontrollera detta testade vi sidan på skärmar med olika upplösningar, och kunde konstatera att även i de lägre upplösningarna var det viktigaste innehållet synbart. 41 Vi vill ändå påpeka att vi inte är helt nöjda med lösningen för underlänkarna och kommer eventuellt att jobba på en bättre funktion i framtiden. En sak som är värd att tänka på ur navigationssynpunkt är att många användare faktiskt hittar till en webbplats via en sökmotor, och då kan ingången till webbplatsen vara vilken av dess sidor som helst. Därför är det extra viktigt att visa användaren var på webbplatsen de befinner sig. 42 Vi valde att visa detta genom att markera länken för respektive sida i fet stil, samt att dra in den 15 pixlar från vänster. Detta gäller både huvudlänkarna och underlänkarna till sidan För medlemmar. Navigationsmenyn gjorde vi i den mörkgröna färgen från färgschemat (se figur 8). När man för muspekaren över länkarna ville vi att man tydligt skulle se detta och därför skiftar länkarna till fet stil och ljusgrön färg. 38 Wackå, Fredrik 2009: Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. 2006: 683; Beaird, Jason 2007: Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. 2006: Ibid: Redish, Janice 2007:

28 Förutom i webbplatsens navigationsmeny finns det också en del länkar insprängda i textinnehållet på sidorna. Dessa länkar är mörkgröna och understrukna men blir ljusgröna när muspekaren förs över, dessutom ändrar de färg till turkos när användaren har klickat på dem. Text och typografi Som vi berättade ovan i avsnittet Typografi (sid ) använde vi typsnittet Verdana i både brödtext och i rubriker på webbplatsen. Verdana är ett skärmanpassat typsnitt som har en hög läsbarhet och ger ett luftigt intryck. 43 Som vi nämnde innan under rubriken Målgrupp (sid. 8) så sa flera av medlemmarna under intervjuerna att de var viktigt att webbplatsen skulle vara tydlig och enkel. Här tänkte vi att ett lättläst och luftigt typsnitt säkert kunde vara behjälpligt. Eftersom vissa sidor på webbplatsen innehåller mycket information så var det också extra viktigt med ett lättläst typsnitt. I och med att uppdragsgivaren ville att webbplatsen skulle uppmana till engagemang i föreningen, och även förmedla en känsla av gemenskap och tryggt boende, så försökte vi hålla språket enkelt, informativt, rakt och vänligt. Om språket hade varit för krångligt eller för formellt så tänkte vi oss att det skulle vara svårare att engagera sig. Det var viktigt att användarna lätt kunde hitta den information de sökte i texterna. Vi försökte också att använda ordval som personerna som bor i föreningen själva använder när vi skrev texterna. 44 Exempel på ett uttryck från medlemmarna är i huset, en fras som ofta används när de pratar om fastigheten. Vi tänkte att det skulle vara enklare att nå ut till medlemmarna om vi använde samma ord som de. Texterna är olika långa på olika sidor. Till vissa undersidor hade inte uppdragsgivaren så mycket information för oss att lägga upp. På sidor med mycket text försökte vi att göra det mer överskådligt genom att använda punktlistor och dela upp innehållet under olika rubriker. Vi eftersträvade också att göra korta meningar och informativa rubriker. Allt för att det skulle bli lättare för användaren att hitta det han sökte och lättare att förstå texten. För att texten skulle bli mer lättläst gjorde vi den vänsterjusterad, vilket är det bästa alternativet för texter på webben. Den raka vänsterkanten tillsammans med den lite mer ojämna högerkanten gör texten varierad och intressant utan att minska läsbarheten. 45 Vi använde oss av tre olika rubriknivåer i olika storlek på webbplatsen. Rubrikerna på första nivån (h1) fick den ljusgröna basfärgen från färgschemat så att de skulle synas ordentligt. Färgen gav också ett mer harmoniskt och mjukare helhetsintryck åt sidan än om rubrikerna hade varit svarta. Storleken på brödtexten satte vi till 0.7em (cirka 8,5 punkter). Samma sak gjorde vi för brödtexten i nyhetsrutan. Mäklartexten längst ner till vänster på sidan fick en helt egen position. Det här gjorde vi för att den skulle dra uppmärksamheten till sig och vara lätt för mäklare att hitta. På det sättet fick mäklare ett eget litet utrymme på sidan där de uppmanas att besöka de länkar som kan vara av intresse för dem. Detta var ett extra viktigt önskemål från uppdrags- 43 Bergstöm, Bo 2009: Redish, Janice 2007: Lynch, Patrick J. & Horton, Sarah 2008: 214; Bergström, Bo 2009:

29 givaren eftersom de ville minimera antalet samtal från mäklare, och hoppades på att mäklarna kunde hitta svar på de flesta av sina frågor på webbplatsen. Sökmotoroptimering För att lyckas med sökmotoroptimering finns det flera olika saker att ta hänsyn till. Det som bör ägnas mest tid är utformningen av sidtitlarna. Varje sida ska ha sin egen unika titel innehållande ett eller två nyckelord. 46 Titlarna ska väldigt kort sammanfatta vad sidan handlar om. 47 När vi bestämde titlar gick vi från det specifika till det mer generella, vilket innebär att sidans specifika beskrivning kommer först. Det är viktigt att de specifika orden kommer tidigt i titeln eftersom denna har ett begränsat utrymme hos sökmotorerna, och det är inte alltid som slutet av titeln syns. Detta mönster följde vi för alla sidor utom startsidan där vi skrev föreningens namn först, eftersom det är den första sidan som användarna kommer till. 48 I sidornas metatagg lade vi in en beskrivning som har till uppgift att beskriva sidornas innehåll mer omfattande än vad sidtiteln kan göra. Beskrivningen syns i sökresultaten under titeln och är viktig eftersom den ska locka användaren att klicka på länken. Beskrivningen ska av dessa anledningar naturligtvis också vara unik för varje sida. 49 Även om nyckelorden i metataggen inte längre har samma betydelse som tidigare så är de ändå bra att ha med. Vi valde att lägga in nyckelord mest för att sidorna ska vara förbereda för framtiden. Exempelvis kan de vara bra om uppdragsgivaren längre fram skulle vilja ha med en sökfunktion på webbplatsen. 50 En annan sak som är värd att jobba med när det gäller sökmotoroptimering är rubriker. Korta och informativa huvudrubriker (h1-taggar) som sammanfattar sidans innehåll ger en bra grund. 51 Huvudrubriken är den som är mest väsentlig eftersom denna kommer överst i hierarkin av rubriker. Sökmotoralgoritmerna fäster större vikt vid rubriker än brödtext, de rankas efter placering i koden. 52 Vi namngav rubriker, filnamn, länknamn (i huvudnavigationen) och sidtitlar med samma namn för respektive sida. Vi försökte också att använda sådana ord som kändes naturliga för våra användare. 53 Vi jobbade även med beskrivande alt-texter för bilderna och beskrivande namn på filerna. 54 När det gäller läknamnen på bilderna i fotogalleriet var vi medvetet inte lika noggranna. Dessa fick siffror eftersom vi ansåg att längre namn inte fick plats och att namnen hade blivit väldigt upprepande då många av bilderna föreställer samma sak. Dessutom hade vi ändå med en text under varje bild som berättar om bilden. 46 Wackå, Fredrik 2009: 78; Jones, Kristopher B. 2010: Johansson, Niklas 2009: Wackå, Fredrik 2009: Ibid: 82; Jones, Kristopher B. 2010: Wackå, Fredrik 2009: Johansson, Niklas 2009: Jones, Kristopher B. 2010: Wackå, Fredrik 2009: Johansson, Niklas 2009:

30 Vi skapade en XML-sitemap med hjälp av en sitemap-genererare. 55 En XML-sitemap är ett XML-dokument som används av sökmotorernas spindlar för att se vilka sidor en webbplats består av. Spindeln kontrollerar också när sidorna uppdaterades senast, hur ofta de uppdateras och i vilken ordning de prioriteras. Detta är viktigt för att webbplatsen ska indexeras på rätt sätt. 56 Innan vi placerade sitemapen i Storbragdens rotmapp gjorde vi om den till en HTML-fil. Sitemapen fick denna filändelse eftersom det då är lättare för sökmotorer att känna igen att den är en sitemap. 57 Färg och grafik Ovan (sid ) i avsnittet Färgschema berättade vi om de färger vi tagit fram i den grafiska profilen. Dessa blev väldigt naturliga att utgå ifrån när vi började jobba med webbplatsen. Vi ville göra det lätt för medlemmarna att associera vissa utvalda färger med bostadsrättsföreningen. Detta var en stor anledning till att vi överhuvudtaget skapade ett färgschema och att vi också valde att återkomma till det. Huvudfärgen på webbplatsen blev grönt, precis som för trycksaken. Trycksaken berättar vi mer om under rubriken Trycksak (sid ). Både den ljusa och den mörkgröna färgen finns representerade på webbplasten, den mörka framförallt i navigationen och den ljusa i de rektangulära färgplattorna. All bakgrund fick en svag ton av den ljusgröna färgen. Även turkost finns med som mindre inslag på vissa ställen. Förutom färger från färgschemat använde vi svart till merparten av brödtexten, vilket vi tyckte gav ett klassiskt och lättläst intryck. Logotypen är en viktig del av föreningens ansikte utåt och bör därför synas i sidhuvudet, vilken är den yta som ger webbplatsen dess identitet. 58 Vi placerade logotypen i det övre vänstra hörnet eftersom detta är allmänt vedertaget. Vi gjorde också logotypen som en länk tillbaka till startsidan då 99 procent av användarna förväntar sig att finna en hem - länk här. 59 Som ett grafiskt element räknar vi den illustration av de tre husen (figur 18) som finns på startsidan och på sidan för fotogalleriet. Husen placerade vi på sidan för att återkoppla till det hus som finns i logotypen. Under rubriken Grafiska element ovan (sid. 25) berättade vi om tanken bakom de tre husen. I slutet av arbetet med webbplatsen valde vi att justera designen för Tre Hus. För att detta grafiska element inte skulle bli för dominant gjorde vi konturerna tunnare. På så vis tyckte vi även att balansen på sidorna kändes bättre, de fyllda formerna i huset i logotypen hör ihop med de gröna färgplattorna medan de tre husen hör ihop med den gröna linjen under sidhuvudet. Som grafik räknar vi också denna gröna horisontella linje som löper under logotypen, i nederkant av sidhuvudet. Denna tog vi med för att göra sidhuvudet extra synligt och för att skapa en avskiljare mot resten av sidan. Som vi berättade ovan i avsnittet Webbplats (sid. 26) så var vi noggranna med att skapa fria vita ytor i designen. Ett sätt som vi gjorde detta på var att begränsa antalet Jones, Kristopher B. 2010: Lynch, Patrick J. & Horton, Sarah 2008: Ibid:

31 grafiska element. Vi ville helt enkelt skapa en ren och enkel design. Vita ytor är lika viktiga som andra element i layouten och bör uppskattas och användas medvetet. 60 För att ytterligare stärka föreningens nya identitet valde vi att placera huset från logotypen (figur 16) som en ikon som syns i webbläsaren, i den flik där sidans titel presenteras. Ikonen syns även till vänster om webbplatsens URL, i adressfältet. Detta fungerar för tillfället bara i Mozilla Firefox, men vi arbetar med att få det att fungera även i Internet Explorer. Bilder Redan i början av arbetet kände vi att bilder var ett givet inslag som skulle göra webbplasten levande. Detta fick vi bekräftat av uppdragsgivaren som uttryckte att bilder skulle kunna hjälpa till att förmedla den viktiga känslan av gemenskap som de ville ha. Bilderna var ett projekt i sig. Samtidigt som vi var säkra på att de skulle finnas med så ville vi inte ha vilka bilder som helst. Vi gick igenom länk för länk och försökte tänka ut passande motiv för varje sida. Så långt det var möjligt eftersträvade vi att ha med något grönt inslag i varje bild för att de bättre skulle passa in i webbplatsens övriga design. Eftersom vi inte var säkra på att vi skulle hinna med att ta alla bilder själva så tog vi lite hjälp. En fotograf i föreningen tog utomhusbilderna och fotografierna från grillkvällen fick vi från Lena, en av våra uppdragsgivare. Annars tog vi i princip de andra bilderna själva. Det enda fotografi vars upphovsman vi inte känner är det som finns på sidan Hitta hit. Naturligtvis kontaktade vi denna person och frågade om det var okej att vi använde bilden, vilket det var. Eftersom fotografier räknas som ett konstnärligt verk i upphovsrättslagen så innebär det att upphovsmannen har rätt att bli namngiven i de sammanhang som fotografiet används. 61 Vi ville inte ha med bildtexter under varje bild eftersom vi tyckte att detta störde designen för mycket. Istället valde vi att skriva ut namnen på upphovsmännen på sidan Fotogalleri. För att få så bra kvalitet som möjligt valde vi att göra alla bilder i JPEG-format, vilket även gav en rimlig filstorlek. 62 Ett av bedömningskriterierna för projektarbetet var att allt material på webbplatsen ska gå snabbt och problemfritt att ladda upp, vilket vi lättare kunde uppnå med bilder som tog mindre utrymme. 63 Dock så kunde vi konstatera att vi inte riktigt visste hur denna sida skulle fungera för en användare med långsam uppkoppling och om det antal bilder vi valt att ha med tog upp för mycket plats i en sådan situation. Det enda vi visste var att huvudmålgruppen är föreningens medlemmar och att de har en snabb uppkoppling på 100 MB. Därför såg vi inte vår okunskap i detta fall som ett större problem. En annan sak vi gjorde för att uppnå kriteriet om att sidan skulle gå snabbt att ladda upp, var att vi specificerade bredd och höjd på alla IMG-taggar i HTMLkoden Lynch, Patrick J. & Horton, Sarah 2008: Olsson, Henry 2009: Lynch, Patrick J. & Horton, Sarah 2008: Buse, Jan 2011:

32 Alla bilder är placerade på respektive positioner av en särskild anledning. Bilderna som ligger i den högra spalten positionerade vi här för att dra blicken från den övre vänstra hörnan där logotypen finns, ner till sidans högra hörn. På så vis vandrar ögat fram och tillbaka över sidan. Den osynliga diagonalen som bildas här emellan knyter, tillsammans med det återkommande färgschemat i logotypen och bilderna, samman elementen och designen. 65 För att förstärka den diagonala linjen försökte vi i de bilder vi själva tagit placera föremålen så att de skulle bilda en synlig diagonal. Databas och administrationssidor Ett av önskemålen från uppdragsgivaren, som vi berättade om i avsnittet Önskemål och behov (sid. 6), var att de själva skulle kunna ändra informationen på webbplatsen. Detta innebar att vi var tvungna att ta fram en administrationslösning som de smidigt och lätt skulle kunna använda. I inledningsstadiet av projektarbetet funderade vi på att lära oss hur man skapade webbplatser i ett CMS-system. Men efter mycket eftertanke bestämde vi oss ändå för att välja den väg vi redan lärt oss, nämligen att jobba mot en databas. Vi ansåg helt enkelt att det innebar en för stor risk för projektarbetet om vi skulle försöka lära oss ett nytt system. Dessutom hade vi ingen aning om hur lång tid det skulle ta att lära sig eller om det skulle bli bra, och vilka konsekvenserna skulle komma att bli. Vi skapade därför en databas som vi kopplade till Storbragdens webbplats. Detta blev vårt sätt att lösa problemet så att vår uppdragsgivare skulle kunna administrera sin nya webbplats. Figur 21. Flödesschema över databasen. 65 Landmér, Rebecca 2010a:

33 Figur 22. Skärmdump av redigeringssidan för nyheter. Beskrivning av databasen Databasen består av tre tabeller, en för användarna, en för nyheterna och en för övrigt textinnehåll. Än så länge är det bara de två första tabellerna som fungerar, den tredje valde vi att vänta med då vi insåg att vi helt enkelt inte skulle hinna bli klara med den. Denna funktion kommer vi att jobba vidare med efter att projektarbetet är inlämnat. Tanken från vår sida var alltså att Patrik och Lena i alla fall skulle kunna redigera nyheterna. Det finns en Logga in -länk på alla webbplatsens sidor för att de oavsett vilken sida de befinner sig på ska kunna gå in och redigera. Vi placerade länken längst ner i sidfotens högra hörn för att den skulle vara relativt undangömd. Detta var en länk som inte behövde synas för användare utan administrationsbefogenhet. När de loggar in kommer de till en startsida för administrationssidorna där de kan de välja mellan att redigera nyheter och att redigera textinnehåll (se figur 21). På denna startsida finns naturligtvis också möjlighet att gå tillbaka till själva webbplatsen, via en länk som heter tillbaka till webbplatsen. Inne på nyhetssidan finns idag två saker att göra (figur 22). De kan lägga till en ny nyhet genom att fylla i ett formulär med rubrik, nyhetsinnehåll och publiceringsdatum. Om något av fälten skulle ha missats att fyllas i när de klickar på spara så kommer det upp ett rött meddelande som berättar detta. Samtidigt stannar den text de redan fyllt i kvar i fälten för att underlätta så att de inte behöver fylla i dem en gång till. När nyheten framgångsrikt sparats meddelas även detta genom ett rött meddelande. 33

34 Under formuläret där nya nyheter läggs in listas alla nyheter så att de kan se vilka som redan finns. Det andra de kan göra på nyhetssidan är att ta bort nyheter. Då måste de välja en nyhetsrubrik i drop-down listan innan de klickar på ta bort. När vi efter projektarbetet kommer att jobba vidare med administrationsfunktionerna skulle vi även vilja lägga in ett säkerhetsmeddelande som dyker upp när de klickar på ta bort - knappen, med en fråga om de verkligen vill ta bort nyheten. Under hela redigeringsfasen har Patrik och Lena möjlighet att gå tillbaka ut till webbplatsen och kontrollera resultatet. Detta kan de göra utan att de måste logga ut och in hela tiden. Det finns en länk även här på nyhetssidan som heter tillbaka till webbplatsen. När de sedan är på webbplatsen och ska gå tillbaka till administrationssidan så står det administrera istället för logga in i sidfoten. Då kommer de åter till startsidan för administrationssidorna och behöver bara klicka på redigera nyhet. I efterhand kommer vi även att försöka oss på en smidig lösning för att Patrik och Lena ska kunna uppdatera och redigera det andra textinnehållet på webbplatsen. Vi skulle även vilja få med en funktion så att de kan redigera en befintlig nyhet. Till dess kommer vi att stå till tjänst med den hjälpen, vilket inte kommer att bli något problem. Kod och validering Vi har skapat 27 filer varav 2 är programmerade i PHP-kod, resterande är i XHTML-kod som även inkluderar en del avsnitt med PHP. Vi använde oss av PHP-kod för att kunna göra sidorna dynamiska. All kod har vi skrivit själva, förutom vissa delar av PHP:n. Vi strukturerade först upp PHP-koden enligt liknande mönster som vi gjort i ett tidigare arbete, och försökte utifrån det lösa så mycket vi kunde. När det tog stopp fick vi hjälp, i form av tips och råd på hur vi skulle lösa problemet, av Marikas bror som verkligen var en räddande ängel vid flertalet tillfällen. Vi strävade hela tiden efter att skriva så korrekt semantisk kod som möjligt. För att försäkra oss om kodens kvalitet validerade vi alla våra sidor. Detta gjorde vi via W3Schools valideringsverktyg för CSS-kod och XHTML-kod. 66 Under arbetets gång stötte vi på vissa element och attribut som inte var så bra att använda, av olika anledningar. Dessa bytte vi ut till mer korrekta alternativ, eller tog bort dem helt och hållet. Det enda som i dagsläget inte går igenom valideringen är det kodavsnitt i filen karta som handlar om själva kartan. Koden är hämtad från Google Maps varifrån kartan länkas in ifrån. 67 Eftersom vi inte skrivit koden själva så vågade vi inte heller göra några stora förändringar i den. Vi ville ha med en kartfunktion för att tillgodose behoven för målgruppen och vi tyckte att funktionen från Google Maps var bra och användarvänlig. Vi valde att behålla den då vi ansåg att om koden kommer från Google, som är ett så stort företag som vi anser vet vad de gör, så borde koden fungera. Förutom PHP-, XHTML- och CSS-kod så skapade vi också en fil med JavaScript-kod, photogallery.js. Denna kod innehåller flera olika funktioner som i slutänden bara har en gemensam uppgift, nämligen att sköta fotogalleriet. Som vi nämnde under rubriken Webbplats (sid ) hade uppdragsgivaren efterfrågat någonstans att visa bilder och därför tyckte vi att det var lämpligt med ett fotogalleri. Då våra kunskaper fortfarande 66 och

35 var rätt färska och vi inte kände oss så säkra på alla bitar än ville vi göra något som var relativt enkelt, men som ändå såg vettigt ut ur estetisk synvinkel. Vi sökte runt på nätet efter smidiga lösningar och fastnade för ett fotogalleri som skapades med hjälp av JavaScript. 68 Vi hämtade koden från ett exempel men fick sedan modifiera den efter våra egna behov. Exempelvis så kunde den ursprungliga koden bara hämta id från en div, vilket vi ändrade eftersom vi behövde ha olika divar för olika grupper av bilder. Även om vi valde en relativt enkel kod som vi tyckte oss förstå, så fick vi vägledning och tips för att kunna göra de modifieringar som krävdes för att galleriet skulle fungera för vårt ändamål. Vi anpassade Storbragdens webbplats huvudsakligen efter webbläsaren Mozilla Firefox, eftersom vi båda har denna webbläsare som standard på våra datorer. Vi är dock väl medvetna om att det finns en rad andra webbläsare, inte bara för PC utan även för Macintosh. Efter att ha undersökt en del om olika webbläsare, kunde vi konstatera att de vanligaste PC idag är Mozilla Firefox och Internet Explorer, lite beroende på var i världen man befinner sig. Med detta i åtanke valde vi att testa vår webbplats i Internet Explorer och vi laddade ner programvaran IETester 69 där vi kunde kontrollera webbplatsen i samtliga versioner av Internet Explorer. I versionerna IE7 till och med version IE10 fick vi tillfredställande resultat. I IE5.5 och IE6 blev sidfoten tjockare, men även om några fler skillnader syntes så kvarstod ändå de viktigaste funktionerna. Trycksak Det första vi gjorde innan vi började jobba med trycksaken var att titta runt för att se hur andra liknande trycksaker såg ut. Vi sökte på informationsblad på Google och fick fram en massa olika exempel. Här kunde vi se många likheter men även väldigt skilda sätt att designa och lösa uppgiften på. Vi fastnade speciellt för de varianter som var enkla och väldisponerade med tydliga former och färger. Vi visste att innehållet i texten skulle handla om webbplatsen eftersom detta var ett av styrelsens två krav från början. Därutöver fick vi inga andra riktlinjer från uppdragsgivaren att gå efter. Vi fick nu helt enkelt använda de kunskaper vi lärt oss om textproduktion för att skriva en informerande text som passade målgruppen. När vi funderade kring kravet insåg vi att det hade ett ännu större syfte än vi först tänkt. Vår uppgift var inte bara att skriva en målgruppsanpassad text om webbplatsen, utan också att göra innehållet så pass lockande att medlemmarna faktiskt skulle vilja besöka den nya webbplatsen. Vi gjorde en lista över vad som var viktigt att ha med för att vi själva lättare skulle kunna få en överblick över textinnehållet och se i vilken ordning det borde komma. Vi använde oss av principen att ta med det viktigaste innehållet först. Detta gjorde vi för att väcka läsarnas intresse och lusten att även läsa resten av texten. 70 I brödtexten berättade vi först att det finns en ny webbplats, att föreningen fått en grafisk profil och en logotyp som de kommer att få se mycket av framöver. Därefter skriver vi om vilken nytta medlemmarna kommer att ha av webbplatsen. Och till sist lite om bakgrunden till den Ehrenberg-Sundin, Barbro, Lundin, Kerstin, Wedin, Åsa & Westman, Margareta 2008:

36 nya webbplatsen, varför den har skapats och att det inte inneburit några kostnader för föreningen. Läsarna uppmanas också att besöka webbplatsen och får reda på adressen till den. Vi sammanställde också en punktlista med olika aktiviteter som de skulle kunna utföra på webbplatsen för att ytterligare peka på dess användningsområden. Vi hade hela tiden i tankarna att göra texten lättläst. Det var viktigt att bara ha med det allra nödvändigaste, koncentrera oss på vad som verkligen var intressant för medlemmarna och förmedla det i korta och enkla meningar. För att tydligt visa vem avsändaren var avslutade vi brödtexten med Med vänliga hälsningar, styrelsen. Figur 23. Trycksaken informationsblad om webbplatsen. 36

37 När vi hade tagit fram ett förslag (figur 23) som vi var nöjda med och fått det godkänt av uppdragsgivaren påbörjade vi arbetet med att tryckanpassa InDesign-filen. Zandra Lindell på Krontryck hade informerat oss om att det inte var så noga med ICC-profilen vid digitaltryck, bara det var en ISO-standard Fogra av något slag. Vi valde att använda oss av ICC-profilen Coated Fogra 27 eftersom vi redan hade den som standard i vår Adobe Creative Suite. Vi skickade den tryckanpassade pdf-filen till tryckeriet så att de kunde ta fram ett provtryck åt oss. När provtrycket var färdigt bokade vi in ett möte så vi kunde komma dit och känna på pappret och se så att allt såg bra ut. Vi blev väldigt förvånade över hur bra vi tyckte att färgerna återgavs, det var en enorm skillnad på vår egen utskrift från skrivaren där hemma. Faktum var att slutresultatet blev väldigt likt utseendet i InDesign när vi använde funktionen Simulate Paper Colour för att simulera en tryckt version. När vi var på tryckeriet blev det som ett riktigt studiebesök. Vi fick möjlighet att se hur de jobbar och blev guidade runt bland alla olika typer av tryckpressar, skärmaskiner och gigantiska häftapparater. Det var verkligen en upplevelse. Framförallt var det roligt att se i vilken tryckpress just vår trycksak skulle produceras. Eftersom vi blev väldigt nöjda med provtrycket gav vi klartecken redan vid besöket att de kunde trycka vår beställning. Redan dagen efter var informationsbladen färdigtryckta och de levererades till föreningen tre dagar senare. Grafiska former och element När vi tittade på andra informationsblad såg vi en gemensam nämnare, nästan alla hade någon form av logotyp. Vi lade också märke till att den i de allra flesta fall var placerad i nederkant, vilket var anledningen till att vi också gjorde det. Vi ville skapa en känsla av igenkänning och detta verkade vara ett vanligt förekommande sätt att designa ett informationsblad på. Till trycksaken valde vi ut det grafiska elementet Tre Hus (figur 18) från den grafiska profilen. De tre sammanhängande husen fick bli en blickfångare i det övre vänstra hörnet. Tanken var att förmedla den symbolik av gemenskap och sammanhållning i föreningen som var viktig för vår uppdragsgivare, vilken vi berättade om ovan i avsnittet Önskemål och behov (sid. 6). Som vi berättade under rubriken Färg och grafik (sid. 30) så ändrade vi, i slutskedet av projektarbetet, webbdesignen av Tre Hus till ett grafiskt element med lite tunnare linjer. Detta gjorde att vi funderade på om vi hade skickat trycksaken på produktion för tidigt, eftersom det innebar att vi inte kunde göra samma förändringar för husen i den. Vi kom fram till att vi var nöjda med resultatet av trycksaken som den var. I arbetsprocessen hade vi redan provat att ha tunnare konturlinjer på husen, och konstaterat att dessa inte passade in här. Vi tyckte att de tre husen passade bättre i något tjockare konturer då det knöt ihop designen med den gröna färgplattan. En återkommande del av den grafiska designen var den kvadratiska formen från husets nedre vänstra sida. Denna form lät vi återspeglas i trycksakens huvudinnehåll, i mitten, genom att vi placerade rubriken, brödtexten och den gröna informationsrutan efter en yttre kvadratisk ram. 37

38 Typografi Vi bestämde oss för att använda det linjära typsnittet Verdana även för texten på trycksaken. Vi provade först med olika antikvor men konstaterade att vi tyckte likheten med litterär text blev för stor. Det gav helt enkelt inte det intryck av enkelhet som vi eftersträvade. Valet föll på Verdana eftersom det var typsnittet som skulle användas på webbplatsen och vi tyckte att det var bra att hålla oss till samma eftersom det skapade igenkänning. Rubriken satte vi till 24,5 punkter för att den skulle sträcka sig över hela innehållets bredd. På så sätt skapade vi en tydligare ram runt innehållet tillsammans med spalten för brödtexten och den gröna plattan. För att rubriken skulle sticka ut men ändå passa in i designen gjorde vi den i den gröna basfärgen från färgschemat (se figur 8). En vanlig storlek för brödtext är någonstans mellan 9-12 punkter, eftersom man då kan räkna med att de flesta kan läsa texten. 71 Vi satte brödtexten i 11 punkter. Vi tyckte att 12 punkter blev för stort och vi fick en känsla av att det såg mindre professionellt ut, medan 10 punkter troligen skulle minska läsbarheten för målgruppens äldre generation. Kägeln, eller radavståndet, ska aldrig vara mindre än graden. Det vanligaste är därför att man gör den ca 20 procent större än textstorleken. 72 Eftersom det i slutänden trots allt är ögat som bör avgöra textens läsbarhet så satte vi brödtextens kägel ännu lite större, 15 punkter. 73 Detta tyckte vi gav ett luftigt och lättläst intryck. Brödtexten placerade vi i två spalter. Merparten av texten lade vi i den vänstra spalten som vi också gjorde lite bredare. Det fanns tre anledningar till spalternas olika bredder. För det första tyckte vi att radlängden blev mer lagom för texten till vänster. Till en början var raderna lika breda, men genom att ha rader med minst tecken skapades en behaglig rytm i läsningen. 74 För det andra gjorde sig den gröna plattan bakom punktlistan bättre när den blev lite smalare, eftersom den då inte såg så knubbig ut. Den sista anledningen var att vi upplevde en bättre balans i innehållet när det nästan placerades enligt gyllene snittet. Gyllene snittet ligger exakt där punktlistans punkter bildar en vertikal linje. Vår handledare Jan Buse uppmärksammade oss på att marginaljusterad text skulle kunna förstärka den rektangulära designen i vår grafik. Vi provade detta och kunde bara instämma. Vi valde därför att marginaljustera texten i spalterna, förutom punktlistan. Marginaljusterad text är vanligt i allt från böcker och tidningar till kataloger och broschyrer. Att sätta texten såhär kan göra den boxig och stängd, 75 men för oss var detta inget negativt utan snarare precis det vi var ute efter. På så vis knöt vi återigen an till den rektangulära formen. För att undvika en alltför gluggig text jobbade vi väldigt mycket med meningarna. Vi tog bort och la till ord, bytte ut ord och flera gånger fick vi formulera om hela meningar för att få allt att se bra ut. Samtidigt var vi hela tiden tvungna att tänka på att inte förstöra meningarna och dess betydelse, det var ju trots allt viktigt att texten förmedlade rätt information med rätt känsla. 71 Hellmark, Christer 2004: Ibid: Bergstöm, Bo 2009: Hellmark, Christer 2004: Bergstöm, Bo 2009:

39 Punktlistan skapade vi för att ge en tydlig överblick över några av de olika aktiviteterna som användarna skulle kunna utföra på den nya webbplatsen. Vi gjorde punktlistan vänsterställd för att det helt enkelt såg mycket bättre ut än att även ha den marginaljusterad. Dessutom blev det lättare att läsa meningarna om orden låg med mer normalt avstånd mellan varandra. Redovisning och reflektion kring arbetsprocess och kommunikation Avslutningsvis i rapporten beskriver vi våra reflektioner och tankar kring vårt arbete och arbetsprocessen, vad som gick bra och vad vi hade kunnat göra annorlunda. Vi berättar om våra erfarenheter och återknyter till planen för arbetet för att se om vi lyckades följa den. Här funderar vi också kring kommunikationen med uppdragsgivaren och hur denna fungerade. Arbetsprocessen Vi valde att jobba i grupp, ett beslut som vi inte ångrar. Det kändes otroligt bra att ha stöd av varandra, att kunna bolla idéer tillsammans och att hjälpas åt genom hela processen. Det var ett tufft arbete med mycket att göra och därför underlättade det enormt att vara två. Vi tror inte att vi hade hunnit göra så mycket som vi gjort om vi jobbat ensamma. Överlag var vi väldigt nöjda med arbetsprocessen. Precis som i tidigare projektarbeten vi gjort tillsammans valde vi att samarbeta med många av momenten. Vi var väl bekanta med detta arbetssätt och visste att det fungerade för oss. Det kändes väldigt nyttigt för oss att se gästföreläsningen av Eva-Lena Johnsson. Att få tips och råd från någon som redan gått igenom samma process var enormt värdefullt. Föreläsningen gav oss inspiration och hjälpte oss att från början kunna strukturera arbetet på ett smidigt sätt. Detta tillsammans med alla rekommendationer vi fick från lärarna gjorde att vi var väl förberedda när projektarbetet startade. Vi kände att det var detta som gjorde att arbetsprocessen gick så bra som den gjorde. Innan projektarbetet startade var vi båda oroliga och kände en ovisshet inför trycksaksproduktionen. Eftersom vi inte hade haft kontakt med något tryckeri innan blev vi förvånade över att det inte alls var så svårt som vi hade trott. Hela processen med trycksaken fungerade väldigt lätt och smidigt. Detta berodde säkert på att vi dels var väl förberedda, men även på att vi fick ett trevligt bemötande och bra hjälp från tryckeriet. När vi hade gjort upp strukturen för webbplatsen så blev det väldigt många sidor att skapa, vilket till en början gjorde oss lite stressade. Vi tog därför fram grunden för startsidan tillsammans men delade sedan upp resterande sidor mellan oss. När stommen för alla sidor var skapad arbetade vi med innehållet tillsammans. Detta var en lösning som gjorde att vi snabbt kom framåt i arbetet och där vi utnyttjade fördelen av att vara två. Vi kände oss lite besvikna över att vi inte hann göra färdigt alla administrationsfunktionerna innan inlämningsdagen. Samtidigt tyckte vi att det inte fanns något vi 39

40 kunde ha gjort annorlunda för att arbetsprocessen skulle gått smidigare och snabbare. I så fall hade vi fått skapa en mindre webbplats med färre sidor, vilket inte var något alternativ eftersom Patrik och Lena hade en viss mängd information de ville ha med. Sammanfattningsvis är vi stolta och nöjda över resultatet av projektet och det vi åstadkommit. Vi har fått mycket beröm från vår uppdragsgivare, som även de är oerhört nöjda med informationsbladet och glada över sin nya webbplats. Enligt dem blev detta över deras förväntan och mycket bättre än de trodde från början. Planen för arbetet I början av projektarbetet gjorde vi upp ett Ganttschema, som vi nämnde under rubriken Ganttschema (sid. 16), där vi gav en detaljerad beskrivning över vår arbetsprocess. Planen för arbetet ändrades en del under projektets gång. Bland annat så justerade vi tidsaspekterna för vissa moment eftersom en del saker tog längre tid att göra medan andra blev färdiga snabbare. Både trycksaken och sökmotoroptimeringen slutfördes tidigare än vad vi hade räknat med, medan arbetet med databasen blev lite mer utdraget. Däremot arbetade vi inte mer med databasen än vad vi hade planerat utan bara över en längre tid. Anledningen till att vi lyckades hålla tidsschemat med databasen var att vi prioriterade bort vissa delar av den, som vi istället bestämde oss för att slutföra efteråt. Om vi hade valt att göra allt som vi i början hade tänkt oss gällande databasen, så skulle vi troligen inte ha blivit klara med projektarbetet i tid. Det var med hjälp av den detaljerade planeringen i Ganttschemat som vi kom igång tidigt med projektet och kunde arbeta snabbt och effektivt. Den enda gången vi kände oss stressade och osäkra var i mitten av projektarbetet när vi jobbade med databasen och JavaScript-funktionerna. Anledningen var att vi ännu inte behärskade detta programmeringsspråk och att vi därför kände att vi inte riktigt hade kontroll över projektet. Naturligtvis hade vi inget annat val än att jobba på och ta oss förbi detta hinder, vilket vi gjorde med hjälp av Marikas bror. Redan den första veckan började vi strukturera upp rapporten och skriva så smått. Detta var tack vare att våra lärare vid flera tillfällen poängterade vikten av att komma igång med den så fort som möjligt. I slutet av arbetet kände vi oss väldigt nöjda med att vi hade följt denna rekommendation, eftersom vi då slapp känna oss stressade över rapportskrivandet. Tre veckor innan projektarbetet skulle vara inlämnat bestämde vi oss för att förlänga våra arbetsdagar. Från att ha jobbat ungefär sju timmar per dag skulle vi nu istället jobba tio timmar per dag. Vi ville vara på den säkra sidan och inte riskera att behöva stressa den sista veckan, vilket visade sig fungera utmärkt. Sista veckan kunde vi därför ägna oss åt att gå igenom projektets alla delar och göra småjusteringar, men framförallt granska rapporten. Vi listade allt vi hade kvar att göra och bockade av en sak i taget, på så sätt kunde vi vara säkra på att vi verkligen fått med allt vi ville. Kommunikationen med uppdragsgivaren I rapportens avsnitt Kommunikation med uppdragsgivaren (sid. 20) berättade vi om hur vi tänkte oss att kommunikationen skulle gå till. När arbetet var avslutat, och med 40

41 facit i hand, så kände vi att vi hade varit lite överambitiösa med att planera in möten där vi skulle träffa Patrik och Lena. Vi hade det första stora mötet på bostadsrättsföreningens kontor, där vi tillsammans diskuterade och bollade idéer om den nya webbplatsen. Detta var ett mycket intressant möte där vi fick veta allt om vad de hade för förväntningar på arbetet, men också vilka deras behov och önskemål var. Mötet kändes som helt rätt inledning på vårt samarbete. Kommunikationen efter stormötet blev inte riktigt som vi hade planerat. Vi hade inga fler möten där vi alla fyra medverkade. Även om Marika bara bor 40 minuter från Ewa, och bostadsrättsföreningen, så tyckte vi att det skulle bli alldeles för tidsödande att träffas så många gånger i verkligheten. Istället träffades vi vid några tillfällen via vårt grupprum i Connect Pro, där Patrik och Lena var hemma hos Ewa. Resten av kommunikationen skedde via mail och telefonsamtal. Innan vi avslutade varje etapp i arbetet var vi i kontakt med Patrik och Lena för att stämma av och få ett godkännande så att vi kunde gå vidare. På så sätt visste vi hela tiden att allt var okej och att vi inte skulle få några stora överraskningar i slutet. Detta såg vi naturligtvis som en stor fördel och vår avsikt var att på detta vis försöka minska riskerna med arbetet. Vi kunde bara konstatera att detta var ett bra sätt för oss att kommunicera. De uppgifter och det material vi bad om var de snabba att återkomma med. Vi upplevde därför aldrig några problem med kommunikationen ur denna synvinkel heller. 41

42 Källförteckning Adobe Systems Incorporated (2008). Kuler. [ ] Beaird, Jason (2007). The principles of beautiful web design. Melbourne: Sitepoint. Bergström, Bo (2009). Effektiv visuell kommunikation: om nyheter, reklam och profilering i vår visuella kultur. Stockholm: Carlsson Bokförlag. Buse, Jan (2011). Projekthandbok. Borås: Högskolan i Borås. Core Services (2011). The Most Advanced Web Development Tool for IE. DebugBar. [ ] Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. (2006). The Design of Sites: Patterns for Creating Winning Web Sites. 2. ed. Harlow: Prentice Hall Ehrenberg-Sundin, Barbro, Lundin, Kerstin, Wedin, Åsa & Westman, Margareta (2008). Att skriva bättre i jobbet: en basbok om brukstexter. Stockholm: Norstedts Juridik. Google (2011). Google Maps. [ ] Hellmark, Christer (2004). Typografisk Handbok. Stockholm: Ordfront förlag. Jansson, Helena; gästlärare vid institutionen för biblioteks- och informationsvetenskap/bibliotekshögskolan, Högskolan i Borås (2010). Färg och loggor, föreläsning Johansson, Niklas (2009). Sökmotoroptimering: konsten att hamna högt i sökmotorer och få fler nöjda besökare. Bokstavligt Förlag. Jones, Kristopher B. (2010). Search Engine Optimization: Your Visual Blueprint for Effective Internet Marketing. Indianapolis, IN: Wiley Publishing. Landmér, Rebecca; adjunkt vid institutionen för biblioteks- och informationsvetenskap/bibliotekshögskolan, Högskolan i Borås (2010a). Färglära och visuell kommunikation, föreläsning Landmér, Rebecca; adjunkt vid institutionen för biblioteks- och informationsvetenskap/bibliotekshögskolan, Högskolan i Borås (2010b). Grafisk formgivning, föreläsning Landmér, Rebecca; adjunkt vid institutionen för biblioteks- och informationsvetenskap/bibliotekshögskolan, Högskolan i Borås (2010c). Grafiska profiler och färg, föreläsning Landmér, Rebecca; adjunkt vid institutionen för biblioteks- och informationsvetenskap/bibliotekshögskolan, Högskolan i Borås (2010d). Layout: sidarkitektur och grid, föreläsning

43 Lynch, Patrick J. & Horton, Sarah (2008). Web Style Guide: Basic Design Principles for Creating Web Sites. New Haven: Yale University Press. Marttala, Anders & Karlsson, Åke (2011). Projektboken: metod och styrning för lyckade projekt. Lund: Studentlitteratur. Maurin Söderholm, Hanna & Lassi, Monica; doktorander vid institutionen för biblioteksoch informationsvetenskap/bibliotekshögskolan, Högskolan i Borås (2011). Webbplatsutveckling som projekt upplägg och genomförande, föreläsning Nordberg, Johan ( ). Bygg ett eget fotoalbum med JavaScript och CSS. Datorn i Fokus. [ ] Olsson, Henry (2009). Copyright: Svensk och internationell upphovsrätt. Stockholm: Norstedts Juridik. Redish, Janice (2007). Letting Go of the Words: Writing Web Content that Works. Amsterdam: Elsevier/Morgan Kaufmann. Wackå, Fredrik (2009). Webbredaktörens handbok: Skapa värdefullt innehåll för webb och intranät. Stockholm: No Digit Media. Westergren, Jim ( ). XML-Sitemap. SEO-Guide.se. [ ] W3C (2010). Check the markup (HTML, XHTML, ) of Web documents. Markup Validation Service. [ ] W3C (2009). Granska Cascading Style Sheets (CSS) och (X)HTML-dokument med formatmallar. CSS Validation Service. [ ] W3Schools (2011). HTML Images - Set Height and Width of an Image. HTML Images. Learn HTML / HTML Images [ ] XML Sitemaps (2011). Build your Site Map online. XML Sitemap Generator. [ ] 43

44 Bilagor Bilaga 1 - Ganttschema 44

45 Fortsättning Ganttschema 45