DRAFT. Förbättra världen med hjälp av webbdesign Improve the world with the help of web design. Nina Mujdzic EXAMENSARBETE 2012

Transkript

1 Förbättra världen med hjälp av webbdesign Improve the world with the help of web design Nina Mujdzic EXAMENSARBETE 2012 Teknikens tillämpning med inriktning Grafisk design och Webbutveckling Postadress: Besöksadress: Telefon: Box 1026 Gjuterigatan (vx) Jönköping

2 Detta examensarbete är utfört vid Tekniska Högskolan i Jönköping inom ämnesområdet Grafisk design och Webbutveckling. Arbetet är ett led i det tvååriga högskoleprogrammet Grafisk design och Webbutveckling. Författaren svarar själv för framförda åsikter, slutsatser och resultat. Examinator: Kristin Trulsson Handledare: Kristin Trulsson Omfattning: 7,5 hp (grundnivå) Datum 18 mars 2012 Postadress: Besöksadress: Telefon: Box 1026 Gjuterigatan (vx) Jönköping

3 Abstract Abstract The link between the lack of women's rights in the world and the number of people who have created a website by the publishing tool WordPress is something that few know about. The link is the high numbers that both have. If you combine these by building a website and then link it to an organization, it can be used to make a big difference in the world. A website with the information that the customer is looking for is an important part of a company s success. If the site is user-friendly, aesthetically pleasing and satisfies the customer's needs, the business can grow and the webpage will have many visitors. The company Hollywoodhair by Sesse started 2011 with the aim to help women with hairdressing and beauty without having to pay a high price. The concept is called "at your place or my place" which means that the hairdressers can receive treatments at her home or at the customer's home. This is a concept that has made their business grow and they can no longer receive all the questions and bookings over the phone because they are too many. She needed a website. The purpose of the work is to help the client by creating a website that fulfills her and her customer s needs. I also wanted to examine whether it is possible to support an organization with the help of the site. I broke down the purpose to two questions: 1. How do you create a user-friendly and aesthetically pleasing site that attracts customers? 2. How can I use the website in order to improve the world? To make this work possible, I chose to study the customer's and the company s needs of the site with the help of surveys and discussions. I also did a deeper study of literatures on the publishing tool WordPress, CSS, blogs and ads. The result of this work became a website for Hollywoodhair by Sesse with two ads that easily could have been linked to an organization's bank account. The site was designed exactly according to the customer s and the company s wishes with the help of a survey which dealt with questions concerning what they wanted on the website and a survey which dealt with questions about what they thought about the prototype of the site. The responses from both surveys were similar which showed that the outcome of the site had fulfilled the requirements needed in order to reply my first question. My conclusion is that it is possible to build a website that attracts customers if the company chooses to listen to the customer's needs. My second conclusion is that it is possible to change the world with the help of web design. This by using a website with many visitors and ads that are connected with an organization that works to improve the world. 1

4 Sammanfattning Sammanfattning En viktig del i ett företags framgång är att ha en fungerande webbplats som visar den informationen kunden söker efter. Om webbplatsen är användarvänlig, estetiskt tilltalande och tillfredsställer kundens behov så kan företaget växa och webbplatsen få många besökare. Företaget Hollywoodhair by Sesse startade år 2011 med ambitionen att hjälpa kvinnor med det mesta inom hår- och skönhet utan att de behöver betala ett högt pris. Företagets koncept heter hemma hos dig eller mig som betyder att frisörerna kan ta emot behandlingar hemma hos sig eller hos kunden. Detta är ett koncept som har gjort att företaget växt och uppdragsgivaren kan inte längre ta emot alla frågor och bokningar via telefon då de är för många. Hon behövde en webbplats. Syftet med arbetet är att hjälpa uppdragsgivaren genom att skapa en webbplats som uppfyller hennes och hennes kunders behov. Jag vill även undersöka om det går att stödja en organisation genom att använda webbplatsen. Detta för att förbättra världen med hjälp av de verktyg jag kan erbjuda. Jag bröt ner syftet i två frågeställningar: 1. Hur skapar man en användarvänlig och estetiskt tilltalande webbplats som attraherar kunderna? 2. På vilket sätt kan jag använda webbplatsen för att få den privata sektorn att gynna biståndsarbete? För att göra arbetet möjligt valde jag att studera kundens och uppdragsgivarens behov av webbplatsen med hjälp av enkäter och diskussioner. Jag gjorde även en fördjupning i litteraturer som behandlade publiceringsverktyget WordPress, CSS, blogg och annonser. Resultatet av arbetet blev en webbplats till Hollywoodhair by Sesse med två annonser som enkelt hade kunnat kopplas till en organisations bankkonto. Webbplatsen utformades exakt efter kundens och uppdragsgivarens önskemål med hjälp av en enkät som behandlade frågor om vad de ville ha med på webbplatsen och en enkät som behandlade frågor om vad de ansåg om prototypen av webbplatsen. Svaren från båda enkäterna stämde överrens vilket visade att resultatet av webbplatsen hade uppfyllt de krav som krävdes för att besvara den första frågeställningen. Mina slutsatser är att det går att bygga upp en webbplats som attraherar kunder om företaget väljer att lyssna på kundens behov. Min andra slutsats är att det går att förändra världen med hjälp av webbdesign. Detta genom att använda sig av en webbplats med många besökare och utplacerade annonser som är kopplade till en organisation som redan jobbar för att förbättra världen. Nyckelord Webbplats, annons, organisation, WordPress och Hollywoodhair by Sesse. 2

5 Innehållsförteckning Innehållsförteckning 1 Inledning BAKGRUND OCH PROBLEMBESKRIVNING SYFTE, MÅL OCH FRÅGESTÄLLNINGAR Syfte Mål Frågeställningar Metod HUR SKAPAR MAN EN ANVÄNDARVÄNLIG OCH ESTETISKT TILLTALANDE WEBBPLATS SOM ATTRAHERAR KUNDERNA? Insamling av data Webbplats Fotografering Uppbyggnad av webbplats PÅ VILKET SÄTT KAN JAG ANVÄNDA WEBBPLATSEN FÖR ATT FÅ DEN PRIVATA SEKTORN ATT GYNNA BISTÅNDSARBETE? Annons AVGRÄNSNINGAR DISPOSITION BEGREPPSDEFINITION Teoretisk bakgrund BLOGG Inlägg CSS Deklaration WORDPRESS WordPress.com WordPress Verktyg ANNONS Annonsering på en webbplats Pay-per-click Genomförande ENKÄT DISKUSSION MED UPPDRAGSGIVARE OCH MOODBOARD WEBBPLATS Planering Uppbyggnad av prototyp Enkät om prototyp UPPBYGGNAD AV WEBBPLATS ANNONS Organisation Resultat och analys/designprocessen ENKÄT DISKUSSION MED UPPDRAGSGIVARE WEBBPLATSEN Färg och typografi Logotyp Meny Sidfot

6 Innehållsförteckning Förstasidan Undersidor UTFORMNING AV ANNONS ORGANISATION Bakgrund Annons och organisation ANALYS AV RESULTAT Hur skapar man en användarvänlig och estetiskt tilltalande webbplats som attraherar kunderna? På vilket sätt kan jag använda webbplatsen för att få den privata sektorn att gynna biståndsarbete? Diskussion RESULTATDISKUSSION/DISKUSSION AV DESIGNPROCESSEN Hur skapar man en användarvänlig och estetiskt tilltalande webbplats som attraherar kunderna? Hur kan jag använda mig av webbplatsen för att ge pengar till en organisation? METODDISKUSSION Slutsatser och rekommendationer Referenser Sökord Bilagor BILAGA 1 SAMMANSTÄLLNING AV ENKÄT BILAGA 2 - MOODBOARD BILAGA 3 SKISS PÅ WEBBPLATSENS FÖRSTASIDA BILAGA 4 SKISS PÅ WEBBPLATSENS UNDERSIDOR BILAGA 5 BILDER TILL SLIDER BILAGA 6 SAMMANSTÄLLNING AV ENKÄT

7 Inledning 1 Inledning Vägen till framgång har många valmöjligheter men för att bli ett stort framgångsrikt företag i dagens samhälle behövs en webbplats som innehåller all den information kunden söker efter. Därför ska jag som examensarbete i min utbildning Grafisk design och Webbutveckling bygga en webbplats till företaget Hollywoodhair by Sesse för att hjälpa dem att utöka sin marknad men även för att underlätta deras arbete. För att hjälpa fler personer än bara ägaren av Hollywoodhair by Sesse har jag valt att skänka pengar till en senare vald organisation med hjälp av annonsering på webbplatsen. En undersökning görs på vad kunden och uppdragsgivaren vill ha och sammanställs sedan för forma en webbplats efter deras behov. 1.1 Bakgrund och problembeskrivning Uppdragsgivaren Serve Vaysi har ett nystartat företag som växer väldigt fort. Företaget använder sig i dagens läge av Facebook för att informera om nyheter till sina kunder men ägaren anser att det inte längre är tillräckligt och behöver nu ett annat forum där hon lättare kan nå ut till sina kunder samtidigt som hon kan öppna möjligheten för nya kunder att kontakta henne utan att ge ut sitt telefonnummer. Hon gav mig uppgiften att skapa en webbplats till hennes företag. Företaget Hollywoodhair by Sesse är en enskild firma som ägs av frisören Serve Vaysi som startade företaget sommaren 2011 i syfte att hjälpa andra kvinnor inom hår och skönhet. Hon specialiserar sig på hårförlängningar, något som är väldigt populärt och som därför fått hennes företag att växa i rekordfart. Affärsidén bygger på att vara flexibel genom att gå hem till sina kunder för att utföra arbetet där. På så sätt gör hon tjänsten så tillgänglig som möjligt. I dagsläget är uppdragsgivaren i behov av en webbplats som kan ge den information som nya och gamla kunder önskar men även en webbplats som är estetiskt tilltalande. Detta för att effektivisera hennes arbete genom att ge henne möjligheten att lägga mindre tid på att ge information via telefon och få mer tid till att utföra sitt arbete. Jag har valt att ta möjligheten att kombinera uppgiften med en insamling till valfri organisation i syfte att få uppdragsgivaren att hjälpa till utan att behöva betala något själv. 5

8 Inledning 1.2 Syfte, mål och frågeställningar Syfte Mitt syfte som designer av gränssnittet är att hjälpa uppdragsgivaren att utöka sin marknad med hjälp av de verktyg som jag kan erbjuda. Jag vill använda alla kunskaper jag har fått under den här utbildningens gång. Detta gör jag både praktiskt och teoretiskt för att se vad jag är kapabel till när det gäller att utföra ett riktigt arbete utanför utbildningen. Jag vill även utöka webbplatsens användning genom att använda mig av pay-per-clickannonser där pengarna går till en utvald organisation. Mitt syfte med webbplatsen är att kombinera en tilltalande layout med annonser och ständiga uppdateringar för bästa möjliga resultat Mål Målet är uppnått när både jag och uppdragsgivaren anser att webbplatsen uppfyller kravspecifikationen vi har kommit överrens om men även när webbplatsen innehåller en annons som är kopplad till en organisation Frågeställningar 1. Hur skapar man en användarvänlig och estetiskt tilltalande webbplats som attraherar kunderna? 2. På vilket sätt kan jag använda webbplatsen för att få den privata sektorn att gynna biståndsarbete? 6

9 2 Metod Inledning Under detta avsnitt kommer jag att beskriva vilka metoder jag har använt för att besvara mina frågeställningar. De rubriker som behandlas är datainsamling och webbplats. 2.1 Hur skapar man en användarvänlig och estetiskt tilltalande webbplats som attraherar kunderna? Insamling av data Här beskrivs datainsamlingen jag gjorde med hjälp av enkät och diskussion med uppdragsgivaren Enkät Den viktigaste delen med mitt examensarbete var att uppfylla de behov kunderna har, då de är de som får företaget att växa. Därför skapade jag en enkät med frågor angående deras bild av varumärket (se bilaga 1). Enkäten placerades på olika hår- och skönhetsforum för blivande kunder men gavs även till uppdragsgivarens nuvarande kunder så att hela målgruppen kunde nås. Svaren på frågorna medförde förståelse för hur kunderna önskar att användarvänligheten och designen på hemsidan skulle utformas. De analyserades och sammanställdes för att sedan användas som grund för moodboarden och prototypen av webbplatsen Diskussion med uppdragsgivare För att webbplatsen skulle uppfylla allas önskemål diskuterade jag med uppdragsgivaren om vilka funktioner hon önskade att webbplatsen skulle ha, vilka delar av varumärket den skulle förmedla samt vilka önskemål hon hade med layouten. Uppdragsgivaren fick även reflektera över sambandet mellan kundernas och hennes egna önskemål. Därefter tog hon del av mina personliga åsikter för att få ett så bra resultat som möjligt. Utifrån detta valde vi tillsammans ut flera bilder som vi sammanställde till en moodboard (se bilaga 2). Den visade vilken känsla som skulle förmedlas till besökaren av webbplatsen. Moodboarden baserades på enkätsammanställningen samt uppdragsgivarens personliga åsikter Webbplats I detta moment beskrivs metoderna kring fotografering och uppbyggnad av webbplats Fotografering Ett önskemål som framgick i enkätsammanställningen var att webbplatsen borde innehålla inspirerande bilder som relaterade till varumärket (se bilaga 1). Jag och 7

10 Inledning uppdragsgivaren valde att en fotografering skulle göras. Vi utgick från moodboarden när planeringen bakom den gjordes. Två modeller kontaktades och fotograferades i fotostudion på Tekniska Högskolan i Jönköping Uppbyggnad av webbplats Alla tidigare delar i projektet var förberedande moment inför uppbyggnaden av webbplatsen. Det som var mest avgörande var uppdragsgivarens önskemål om att få redigera webbplatsen själv när jag var klar med den. Det innebar att den skulle göras i publiceringsverktyget WordPress. Innan jag började använda verktyget gjorde jag en skiss på hur den skulle se ut (se bilaga 3). Skissen beskrev typsnitt, färger, bilder och funktioner som baserades på litteraturstudier, enkäten, moodboarden och diskussionen med uppdragsgivaren eftersom hon inte hade en grafisk manual att utgå från. Hon hade även tidigare sagt vilka underrubriker som skulle vara med och vad de skulle innehålla. Skissen gjordes i Adobe Photoshop CS4 och skickades sedan till uppdragsgivaren för granskning. Därefter skapade jag en webbdomän i Hollywoodhair by Sesses namn. På den domänen installerade jag WordPress och började arbeta med kodningen CSS för att få webbplatsens gränssnitt att likna skissen så mycket som möjligt. Jag använde mig även av plugins för att få in ett bildgalleri med fotografierna jag tagit men även för att få in de senaste nyheterna på förstasidan. 2.2 På vilket sätt kan jag använda webbplatsen för att få den privata sektorn att gynna biståndsarbete? Här beskrivs metoden för att förbättra världen med hjälp av webbplatsen Annons För att svara på den frågeställningen valde jag att försöka samla in pengar till en organisation med hjälp av annonsering på webbplatsen. Jag fördjupade mig i litteraturstudier för att ta reda på hur den skulle vara utformad. Därefter tog jag hjälp av företaget Comission Junction 1 för att få en länk till en annons. Det var viktigt att annonsen relaterade till innehållet på webbplatsen och inte störde användarvänligheten. Annonsen kopplades till organisationens bankkonto och generade på så sätt pengar varje gång en besökare klickade på den. 2.3 Avgränsningar Jag kommer under arbetets gång att specialisera mig på webbplatsens gränssnitt och inte på eventuell programmering bakom. Annonserna på webbplatsen kommer inte att skapas utav mig utan de kommer att hämtas från ett företag som redan erbjuder den tjänsten

11 Inledning Enkäterna kommer endast behandla frågor som har i syfte att ge svar på målgruppens önskemål om webbplatsens gränssnitt och funktioner. Jag kommer inte att göra en större undersökning av organisationen som annonsen ska kopplas till. 2.4 Disposition Rapporten börjar med att beskriva vilka metoder som använts för att besvara frågeställningarna i Metod. Därefter beskrivs en del av datainsamlingen i Teoretisk bakgrund där läsaren får ta del av kunskap byggd på litteraturstudier. Det ger möjligheten att förstå och analysera rapporten. För att läsaren ska begripa projektet förklaras hela arbetsprocessen i Genomförande. Svaren på frågeställningarna behandlas i Resultat och analys. Här beskrivs resultaten utifrån genomförandet. Avsnittet avslutas med en analys utifrån mina frågeställningar. I Diskussion reflekterar jag över de positiva samt negativa aspekter mina metodval har inneburit. Till sist visar jag mina slutsatser och mina åsikter på hur man kan gå vidare i arbetet i Slutsatser och rekommendationer. 2.5 Begreppsdefinition Facebook: Ett socialt nätverk online. Bloggare: En person som skriver inlägg på en blogg. MySQL: En databastyp som samlar data som lagrats elektronisk. Php: Ett programmeringsspråk. Tutorials: En form av handledning som visar steg för steg hur en uppgift skall utföras. Hanledningen visualiseras med hjälp av bilder eller videofilmer av personen som skapat den. Youtube: är en webbplats med videoklipp som laddas upp av dess användare 2. Användarna kan ladda upp, dela och titta på videoklipp som laddats upp av andra användare. Slider: En funktion som används för bildvisning. Funktionen används på webbplatser. Lorem ipsum: En text med slumpvalda bokstäver som används som utfyllnadstext på webbplatser för att få webbplatsen att se mer verklig ut då besökare oftast distraheras av tomma webbplatser utan text

12 Inledning Google Adsense: Google AdSense är ett gratis och enkelt sätt för webbutgivare av alla storlekar att tjäna pengar genom att visa riktade Google-annonser på sina webbplatser 3. Google AdSense består av en webbplats som erbjuder länkar till annonser till privatpersoner och företag. Facebookplugin: Ett verktyg som kopplar Facebook med en webbplats. Px: Är förkortning för ordet pixel och används oftast som storlek på typsnitt. Sans-serif: Ett typsnitt utan serifer

13 Teoretisk bakgrund 3 Teoretisk bakgrund Under detta avsnitt kommer fyra huvudämnen att behandlas. Syftet med den teoretiska bakgrunden är att läsaren i efterhand ska förstå och ha möjlighet till att analysera rapporten utan problem. De fyra huvudämnena är blogg, CSS, WordPress och annons. 3.1 Blogg En blogg är en loggbok, journal eller dagbok på webben. Varje gång en text skrivs så publiceras den och hamnar längst upp på webbplatsen. Under den finns användarens andra skrivna texter, ofta sorterade efter datum eller kategori. Till höger om texten finns ett arkiv där läsaren eller användaren kan välja antingen kategori eller datum för att se allt som skrivits inom det området. En blogg skapas med hjälp av ett online publiceringsverktyg eller en online bloggtjänst där användaren kan välja layout och tillhörande verktyg 4. Varje text tillhör en kategori som behandlar ett visst ämne. Användaren kan välja om denne endast vill behandla ett ämne eller flera olika för varje ny text. En annan möjlighet som många bloggare använder sig av är annonsering på bloggen. Med hjälp av detta kan man tjäna pengar på sin blogg. För varje läsare som klickar på en annons som finns på bloggen går en viss summa till skribenten. Detta används flitigt i bloggvärlden då många bloggare starkt marknadsför sin blogg för att få fler läsare och på så sätt mer pengar. På senare år har även begreppet bloggvärlden kommit fram som omfattar alla skribenter som skriver inlägg på en webbplats, bloggalor där bloggare får ta emot priser för sina bloggar och själva blogg-sidan Inlägg Texten som skrivs kan betraktas som ett dagsboksinlägg och kallas för inlägg. För att webbplatsen ska användas som en blogg så krävs det att inläggen uppdateras regelbundet. Privatpersoner använder bloggen som ett hjälpmedel för att publicera inlägg relaterade till deras intressen och åsikter men professionella bloggare kan använda funktionen för att marknadsföra sig själva genom att skapa en opinion. Ett inlägg består av en titel, texten som skribenten skrivit, datum, kategori och ett fält för kommentarer. I kommentar-fältet kan användaren välja om denne vill att läsarna ska kunna skriva vad de tycker om inlägget. Bloggare skriver ofta i varandras kommentar-fält för att marknadsföra sin egen blogg 6 (se bild 1). 4 April Hodge Silver, Hasin Hayder (2009) WordPress 2.7 Complete. Birmingham: Packt Publishing

14 Teoretisk bakgrund Bild CSS Ordet står för engelskans Cascading style sheet som kan översättas till det svenska ordet stilmall. Det skrivs på engelska och är ett stilmallsspråk som beskriver utseendet för ett strukturerat webbdokument. CSS används främst för att ändra och anpassa utseendet på webbplatser. Det som i första hand kan påverkas är färger, textstorlek, bakgrund, bilder och layout. Detta gör att skaparen av webbplatsen kan använda sin stilmall på sin webbplats och på så sätt presentera sin information med den design som önskas. Skaparen kan också välja att använda samma stilmall på andra webbsidor och får då samma design på dessa. CSS använder sig av deklarationer som består av egenskaper och värden Deklaration En deklaration är en regel i CSS-dokumentet som visar hur något ska se ut i det strukturerade webbdokumentet. Den har egenskaper och värden. Egenskaperna kan exempelvis vara ett typsnitt eller en bild. Värdet visar sedan vilka inställningar egenskapen har. Exempel på inställningar är om vilken färg egenskapen ska ha eller hur stort typsnitt den ska ha (se bild 2). 7 Charles Wyke-Smith, översättning Elsie Formgren, Sten Sundström (2006) Stila med CSS : en guide för designers. Sundyberg: Pagina 12

15 Teoretisk bakgrund Bild Wordpress WordPress är en webbapplikation som används för att skapa och underhålla en webbplats eller blogg. WordPress benämns också som ett publiceringsverktyg då stora delar av konceptet innebär att människor ska skapa och publicera information på internet på ett enkelt sätt. Användaren har tillgång till verktyg för inlägg, kommentarer, teman, kategorier och mycket mer. Applikationen bygger på en öppen källkod som innebär att ingen äger den och att den är tillgänglig för alla att använda. Wordpressapplikationen är inget program som används på datorn utan den finns på internet utan kostnad 8. WordPress skapades av Matt Mullenweg och Mike Little år , då var det en liten applikation med få användare. Idag har applikationen ett flertal utvecklare och över 70 miljoner Wordpress-sidor. I augusti 2011 stod WordPress-verktyget bakom 22 % av alla nya hemsidor som byggts i världen. 10 För att förstå hur man skapar en WordPress-sida behöver man veta att det finns två olika typer av applikationen och skillnaden mellan dessa WordPress.com WordPress.com är ett gratis bloggverktyg som alla kan använda sig av. Det enda kravet är att man blir medlem. I bloggverktyget kan du göra simpla saker som att skapa nya inlägg och ändra teman. Dock är användaren väldigt begränsad då det kostar pengar att använda större tilläggstjänster. Tjänsterna kan vara att ändra sitt CSS Stylesheet eller skapa ett nytt tema. Webbadressen blir inte personlig utan ser ut så här: WordPress På webbplatsen WordPress.org kan WordPress laddas ner. Men istället för att ha applikationen på sin dator så laddar man upp den på sin webbserver. Det 8 Hodge Silver och Hayder (2009)

16 Teoretisk bakgrund krävs att servern stödjer webbkodningen php och att den har MySQL som är en databastyp. Det finns även många webbhotell som erbjuder en installation av WordPress så att du inte behöver ladda ner det för att sedan ladda upp det. När man är klar loggar man in via webbhotellet och har tillgång till en oändlighet av funktioner 12. WordPress har en likadan layout som WordPress.com men har fler funktioner och kan användas av lite mer avancerade användare. Här kan man inte bara bygga bloggar utan även fullfärdiga webbplatser. Användaren får själv ändra sin php sida och CSS:en som tillhör. Det finns även många plugins och teman färdiga att installera som skapas varje dag av andra användare. Under februari 2012 hade över 8 miljoner personer installerat WordPress 3.3 världen över Verktyg Teman Temat på webbplatsen/bloggen är den färdiga designen och layouten som användaren får välja. Användaren kan i efterhand ändra koden bakom temat om denne önskar Plugins Med hjälp av plugins kan användaren installera funktioner på sin webbplats/blogg utan att behöva skapa något själv från grunden och på så sätt få ut mer av WordPress. Det fungerar både för dem som inte kan koda men även för dem som har kunskaper i programmering men inte vill lägga ner tid på att programmera något som redan finns färdigt. Användaren kan även här redigera koden bakom sitt plugin i efterhand. Plugins skapas och programmeras av andra användare som sedan laddas upp för att allmänheten ska ha tillgång till dem gratis. Några exempel på plugins som användare kan installera på sin webbplats är bildgalleri, stöd för videoklipp och skydd mot spamning WordPress MU WordPress Multiuser blog tillåter användare att skapa egna intressegrupper som alla kan bidra till. Detta genom att låta andra än administratören av bloggen skriva inlägg på bloggen. På WordPress.com och på WordPress får endast administratören skriva inlägg och läsarna är begränsade till kommentar-fältet. Genom WordPress MU kan intressegruppen ha flera skribenter, layoutskapare och administratörer på samma sida. På så sätt skapas något liknande en onlinetidning Hodge Silver och Hayder (2009)

17 Teoretisk bakgrund 3.4 Annons En annons är ett objekt företag använder i marknadsföringssyfte för att nå ut till sin målgrupp. Annonsen kan bestå av text, bild, animeringar, ljud och kan placeras i tidningar samt på hemsidor. Bakom varje annons ligger det väldigt mycket planering om hur layouten ska se ut, vilken målgrupp den ska nå ut till och hur man påverkar de som tar emot annonsens budskap Annonsering på en webbplats Den vanligaste typen av annonsering på webbplatser kallas för banner. Det är en rektangulär bild som oftast placeras under webbplatsens innehåll. När besökaren på webbplatsen klickar på annonsen så hamnar denne på annonsörens webbplats. Det finns många typer av utformningar av bannerannonser. Deras syfte är att locka webbplatsbesökaren att titta på annonsen och detta kan det göra med snabba animationer, starka färger och högt ljud. Exempel på dessa är när vissa bannerannonser använder sig av spel som besökaren måste spela för att få slut på ljudet som de hör. Bannerannonser kan även förflytta sig och byta form samtidigt som webbplatsen visas. I många fall används annonserna som ett byte mellan olika företag. Ett trägårdsföretag kan ha en annons på sin webbplats som ett designföretag har gjort och tvärtom. Detta för att synas så mycket som möjligt på internet Pay-per-click Pay-per-click avser annonsering på webbplatser där varje klick på en annons genererar pengar. Det fungerar genom att administratören av webbplatsen väljer ett företag som erbjuder pay-per-click tjänsten, får en länk till annonsen från dem och placerar ut den på sin webbplats. Sedan väljer administratören vilket konto pengarna ska gå till. Nästa gång en besökare klickar på annonsen så förs pengar över till det konto administratören valt Anna Gernandt, Tobias Meschke (2006) Vad får dig att klicka?: en studie om utformning av bannerannonser i förhållande till målgrupp. Stockholms universitet, Samhällsvetenskapliga fakulteten, Företagsekonomiska institutionen Eric Giguere (2005) Make easy money with Google : using the AdSense advertising program. Berkeley, Calif: Peachpit Press

18 4 Genomförande Genomförande Under detta avsnitt kommer jag att behandla alla moment som utförts under projektets gång. Jag gjorde i första hand en plan över hur jag skulle gå tillväga för att genomföra projektet. Därefter samlade jag in information via litteraturstudier. Jag skrev frågor till en enkät som skickades till personer som var intresserade av hår- och skönhet. När jag fick svar på enkäten diskuterade jag dessa med uppdragsgivaren som fick ge sina synpunkter på utformningen av webbplatsen. Därefter skapades en prototyp av webbplatsen och annonser kopplades till den. Det sista steget i projektarbetet var att analysera resultatet av prototypen och förändra den så att den blev en riktig webbplats. Rapportskrivandet har med hjälp av litteraturstudierna pågått under hela projektarbetet. 4.1 Enkät En enkät skickades ut som behandlade frågor som har i syfte att ge svar på målgruppens önskemål om webbsidans gränssnitt och funktioner. Enkäten gavs i första hand till uppdragsgivarens kunder under kundbesök. De gav i sin tur vidare enkäten till sina vänner som är intresserade av uppdragsgivarens tjänster. För att få så många svar som möjligt skickades enkäten ut på ett forum med hår- och skönhet som huvudämne. På så sätt fick jag som designer av webbplatsen svar på vad som behövdes och vilka önskemål nuvarande och nya kunder har kring den. Enkäten gjordes online på en webbplats som heter SurveyMonkey 18, där man kunde forma en enkät med egna inställningar. Enkäten innehöll svarsalternativ i både kryss- och kommentarform. Frågorna som ställdes baserades på litteraturstudier och var noggrant utvalda av mig samt uppdragsgivaren. De behandlade vad man relaterar till varumärket, hur webbplatsen skulle se ut och vilka funktioner som behövdes på den. Med en onlineenkät kunde man enkelt skicka den vidare utan något pappersarbete eller kostnader. Däremot så kunde uppdragsgivaren skriva ut enkäten om hon önskade. Enkäten bearbetades och sammanställdes för att användas i designarbetet. 4.2 Diskussion med uppdragsgivare och moodboard När jag analyserat svaren från enkäten så tog jag fram frågor till uppdragsgivaren för att få fram hennes önskemål med webbplatsen. Dessa frågor i samband med enkäten och litteraturstudier skulle svara på den första frågeställningen. Vad vill du förmedla med ditt varumärke via webbplatsen? Vilka färger och former anser du ska kopplas till varumärket? Vilka funktioner vill du ha på webbplatsen? Vilket mål har du med webbplatsen?

19 Genomförande Vilka åsikter har du på svaren från enkäten? Med hjälp av svaren fick vi fram en diskussion som behandlade färg, form och användarvänlighet. För att illustrera den grafiska biten valde vi ut ett antal färger, miljöer och frisyrer som vi ansåg speglade den bild uppdragsgivaren vill visa av varumärket men även den bild kunderna har av det. Bilderna fann vi på internet med hjälp av sökord som vi sammanställde från enkäten och uppdragsgivarens personliga önskemål. Genom att använda detta skapades en moodboard (se bilaga 2). 4.3 Webbplats Under detta avsnitt beskriver jag min process runt skapandet av webbplatsen. Till en början beskriver jag planeringen för att avsluta med en mer djupgående beskrivning av hur jag använde mig av verktyget WordPress Planering När jag sammanställt all datainsamling började jag planera uppbyggnaden av webbplatsen. Jag gjorde en lista på vilka färger, bilder, funktioner och underrubriker som skulle vara med eftersom jag hade fått svaret från enkäten, diskussionen med uppdragsgivaren och moodboarden. Jag använde punktlistan för att påbörja skisser av webbplatsens framsida och undersidor. Flera olika skissförslag gjordes och presenterades för uppdragsgivaren. Hon fick välja det som hon ansåg representerade varumärket mest (se bilaga 3, 4). Därefter gjordes en tidsplanering på när prototypen skulle vara klar för granskning och slutdatumet för webbplatsen sattes Fotografering Även i detta moment så användes moodboarden, enkäten och diskussionen med uppdragsgivaren som bakgrund till planeringen. Önskemålen på fotografierna var att de skulle ge en inbjudande känsla till webbplatsen samt förstärka företagets varumärke. Dock skulle fotografierna inte fotas i en frisörmiljö och visa företagets praktiska sida utan endast stärka webbplatsens gränssnitt och på så sätt attrahera kunderna. Även fotograferingen utgick från utvalda nyckelord. Färger: varma, röd, orange eller gul Frisyrer: stora lockar Kläder: ljusa Miljö: natur eller hollywood Rekvisita: spegel och läppstift För att spegla varumärket valdes två kvinnliga modeller med lockigt och blont hår. De fick ta del av moodboarden och enkätsvaren för att förstå vilket budskap som skulle förmedlas. Därefter bokade jag en systemkamera och en fotostudio på den 17

20 Genomförande Tekniska Högskolan i Jönköping. Jag använde mig av mina kunskaper jag fått under kursen Bild och Fototeknik (3,5 hp) och Grafisk design 2 (7,5 hp) för att fotografera och redigera bilderna. Fotograferingen skedde med hjälp av systemkameran och ett stativ ur olika vinklar för att få ett brett utbud att arbeta med. Vikten lades på modellernas hår för att relatera till företaget. Den största delen av redigeringen bestod av att placera ett filter med varma färger över varje bild för att få den färg kunderna önskade på webbplatsen. Storleken på bilderna anpassades även för sliderfunktionen på förstasidan. All redigering gjordes i programmet Adobe Photoshop CS4 (se bilaga 5) Uppbyggnad av prototyp Här följer stegen i uppbyggnaden av prototypen Installation För att ha möjlighet att bygga webbplatsen var jag tvungen att fördjupa mig i publiceringsverktyget WordPress. Detta gjorde jag via litteraturstudier och tutorials på videokanalen Youtube 19. Därefter hämtade jag publiceringsverktyget från WordPress.org och skapade en webbdomän som jag installerade det på. När installationen var klar började jag med att göra publiceringsverktyget användarvänligt för företaget. Det gjordes med hjälp av specifika inloggningsuppgifter samt en installation av svenska som språk i verktyget Tema och gränssnitt Nästa steg var att välja ett tema att utgå ifrån när jag skapade gränssnittet. Det valdes ut med hjälp av enkätsvarens önskemål om en slider och nyheter på förstasidan. Temat blev Themia Lite 20. Det anpassades sedan till skissens färger och gränssnitt med hjälp av ändring av dåvarande CSS kod men även ny CSS kod skapad av mig. Därefter skapades en logotyp som var anpassad efter skissens färger och layout av den orsaken att företaget inte hade någon innan. Den lades på webbplatsen tillsammans med alla underrubriker som tidigare bestämts. Under alla underrubriker skapades en sidomeny som relaterade till förstasidan med hjälp av samma färg och stil. I sidmenyn lades olika funktioner som baserades på datainsamlingen. Varje webbsida hade även en likadan fotnot för att hela webbplatsen skulle vara enhetlig. En annan faktor för enhetlighet var alla undersidors bakgrund. De använde samma layout och färg men skilde på funktioner. Temat hade ett förutbestämt typsnitt som användes på webbplatsen tillsammans med de nya färgerna