Grupp 15 Rapport projektarbete

Grupp 15 Rapport projektarbete http://student.mtstudent.se/~vt15_mta_15/wordpress/ Magnus Källström magnus01.kallstrom@student.sh.se Yvette Schudeck yvette01.schudeck@student.sh.se Elin Sigvardsson elin01.sigvardsson@student.sh.se Matilda Sjöberg matilda01.sjoberg@student.sh.se

Innehållsförteckning 1. Projektplan...s.1 1.1 Ursprunglig synopsis...s.1 1.2 Designdokument...s.1 1.3 Revidering av den ursprungliga planen...s.2 2. Arbetsbeskrivning och resultat...s.2 2.1 Arbetsbeskrivning...s.1 2.2 Synligt resultat...s.1 3. Diskussion och sammanfattning...s.2 3.1 Utvärdering av resultat...s.2 3.2 Arbetsmetoder...s.2 3.3 Lärdomar...s.2 4. Individuella reflektioner...s.3 5. Referenser...s.4

1. Projektplan 1.1 Ursprunglig synopsis Bakgrund Zamba Studio AB är ett mindre designföretag som jobbar med bland annat trycksaker, foton, utställningar, annonser och hemsidor. Kundkretsen består till stor del av återkommande projekt men de riktar sig även till nya kunder. Inom företaget finns en viss musikdel som skiljer sig från resterande verksamhet då företagets grundare, Owe Sigvardsson, är musiker. Den nuvarande hemsidan känns en aning omodern och speglar inte företagets verksamhet till fullo: http://www.zamba.se. Idé och syfte Vår idé är att bygga om Zamba Studio AB s befintliga hemsida till en snyggare och mer proffsig sida. Tanken är att hemsidan ska visa bredden på produkten och presentera innehållet på ett nytt sätt. Det är också viktigt att sidan blir responsiv. Projektets syfte är att hjälpa Zamba Studio AB att bättre nå ut med sin verksamhet. Målgrupp och konkurrens Målgruppen består av befintliga och nya beställare och kunder. Företaget jobbar mycket lokalt och därför vill vi inte att hemsidan ska vara för flashig eller likna en trendig stockholmsbyrå. Företagets främsta konkurrenter är Ord och Form i Mönsterås, Rönnfjord Utveckling AB och Effect Reklam. En av Zamba Studios främsta styrkor är att de jobbar så pass brett att de kan ta hand om hela processen från idé till tryck. Samtidigt är de ett litet företag och kan därmed hålla en personlig och nära kontakt med kunden. Detta vill vi spegla med en personlig hemsida som visar bredden på produkten och sticker ut från sina konkurrenter samtidigt som den är minimalistisk. Teknik Vi ska bygga en responsiv hemsida i publiceringsverktyget Wordpress. Sidans fokus ska ligga runt bild och relevant text. Aron Walter beskriver i Designing for Emotion (2011 s. 22-24) att kontraster kan vara ett effektivt verktyg men att det bör användas med måtta för att inte förvirra besökaren och tävla om uppmärksamhet. Därför vill vi skapa kontraster med hjälp av en enkel grafisk design som arbetar tillsammans med bild och text. Det ska dock inte vara för mycket text då beställaren vill att kunden ska behålla ett öppet sinne. Eventuellt tillkommer grafik för rörliga bilder. Övrig teknik som kommer användas är kontaktformulär och länk till karta som visar hitta hit via widget.

1.1 fortsättning... Användbarhet Våra mål för användarupplevelsen är följande: Hemsidan ska kännas professionell och trovärdig Hemsidan ska vara visuellt tilltalande Hemsidan ska göra besökaren nyfiken på verksamheten Funktioner och egenskaper/kravspecifikation Visuellt tilltalande - Då det rör sig om ett företag som delvis jobbar med grafisk design är det viktigt att hemsidan blir visuellt tilltalande. Lätt att navigera - Att eventuella kunder snabbt hittar vad de letar efter med få klick. Responsiv - Eftersom den mobila användningen av smartphones och surfplattor ökar drastiskt är det viktigt att designa webbplatser så att de anpassar sig efter enheten som används (Niederst Robbins 2012, s. 34). Därför ska vi anpassa Zamba Studios sida så att den blir tillgänglig på flera olika enheter (stor skärm, mobil och surfplatta). Kontakt - Tydlig flik för kontakt där det ska finnas kontaktformulär och en karta med hitta hit. Tydlighet - Vi vill presentera verksamheten tydligare redan på första sidan med en slagkraftig presentation. Musikdelen som i dagsläget presenteras på hemsidan skapar en viss förvirring om vad företaget egentligen gör och därför vill vi lyfta bort denna del från hemsidan. Istället gör vi en om oss flik där Owe presenteras och på denna sida länkar vi till en extern hemsida för musiken. Portfolio - Portfolio presenteras direkt under respektive tjänst efter en kort förklaring av tjänsten. Widgets - Möjlighet att dela hemsidan på facebook och en brevikon som tar dig till sidan för kontakt. Eventuellt tillkommer fler ikoner här.

1.2 Designdokument Logga - Företaget har en färdig logga som vi kommer använda oss av. Loggan är i typsnittet Bookman och finns i både ljus och mörk. Vi kommer troligtvis använda oss av den mörka versionen. Färger - Företagets befintliga grafiska profil utgår ifrån svart, grått och vitt. Svart dominerar på den nuvarande hemsidan som är väldigt mörk. Vi vill ljusa upp hemsidan och göra den mer stilren för att representera verksamheten bättre. Företaget identifierar sig inte med grälla färger och därför håller vi oss till diskreta färger. Främst arbetar vi i gråskalor men enstaka inslag av dova färger kan förekomma, exempelvis vid hovring över menyval. Detta skapar en subtil effekt som gör hemsidan lättare att interagera med. Just sådana subtila effekter med hjälp av hovring är något som Dan Cederholm (2010) belyser som ett bra verktyg i CSS då man skapar interaktiva webbsidor. De gråa färgerna i bakgrunden kan beskrivas som viskande, vilket enligt Bo Bergström (2012, s. 260) innebär att de går ton i ton, denna typ av färgsättning uppfattas ofta som harmonisk. Eftersom vi ville ha en sida som kändes lätt och ljus, i kontrast till den nuvarande mörka och tunga sidan, kändes viskande färger i gråa ljusa nyanser bra. Typsnitt - Då loggan är i typsnittet Bookman undviker vi detta typsnitt i övrig text. Till brödtexten använder vi i första hand det sans-serifa typsnittet PT-sans som har en bra läsbarhet på webben (Hellmark 2004). Dessutom används detta på företagets befintliga hemsida och kan kännas igen av återkommande kunder. Brödtexten kommer främst vara mörk text på ljus bakgrund. När det gäller rubriker och menyval kan ljus text mot mörk bakgrund förekomma. Vår fall-back font är Arial. Form - Hemsidan ska byggas med enkla former. Vi vill gärna lägga in någon enkel grafisk form för att skapa lite asymmetri och göra sidan mer levande. Olika block/rutor och de grafiska formerna ska skiljas genom subtila färgnyanser utan skarpa kanter. Övrigt - För att besökaren hela tiden ska känna igen sig på sidan kommer sidans header innehålla logga samt menyval och ligga statisk på samtliga sidor. Den undre delen av sidan ska vara rörlig på de sidor där allt inte får plats på förstasidan.

1.2 Fortsättning... Flödesschema Grafisk skiss Visuellt styrschema

2. Arbetsbeskrivning och synligt resultat 2.1 Arbetsbeskrivning Efter planeringsfasen inleddes arbetsprocessen med att vi installerade Wordpress och läste på lite om Quark, det aktuella temat. Efter den inledande föreläsningen om Wordpress skapade vi ett childtheme och började kolla på vad som kan göras med plugins eller widgets och vad som behöver göras med hjälp av CSS. Fortsatt har det varit ett löpande arbete med CSS, widgets, plugins, inställningar i wordpress, rapportering samt kontakt med beställare och insamling av material. Arbetet har till största del utförts i grupp där vi suttit gemensamt i datorsalen. På så sätt har alla varit mer eller mindre delaktiga i projektets olika delar och det har även underlättat vår kommunikation. Förkunskaper har självklart varit till hjälp i kodningen men det har också varit en hel del problemlösning via verktyget inspektera element och andra sökningar på nätet. Vi upptäckte snabbt att gruppen låg på varierande kunskapsnivå gällande de rent tekniska bitarna. Yvette och Magnus som hade den bästa förkunskapen i CSS har varit ledande i själva kodningen. Även Matilda har varit delaktig i kodning och tagit större ansvar över dokumentation till projektplan, lägesrapporter och projektrapport. Elin har jobbat mer med content på sidan, såsom insamling av material, copy och bildredigering. Alla har agerat bollplank åt varandra vilket underlättat problemlösning. Samtliga i gruppen har arbetat med widgets, plugins och inställningar i Wordpress. Alla har också varit delaktiga i beslut gällande sidans grafiska layout. 2.2 Synligt resultat Arbetet har skett genom en iterativ process. Till att börja med gjordes flertalet skisser inom gruppen. Vi valde ut de bästa och gjorde lo-fi prototyper i pappersform som utvärderades av en utomstående testrupp om 4 personer. Utifrån synpunkterna från den första utvärderingen gjorde vi en hi-fi prototyp som visades på seminarie två. Den färdiga sidan har blivit utvärderad av beställaren själv samt tre utomstående personer. Under den sista utvärderingen fick vi endast positiv respons. Resultatet är en responsiv hemsida som matchar de designdokument vi skapade i planeringsfasen. Hemsidan känns personlig samtidigt som den är stilren och proffsig i förhållande till Zamba Studios nuvarande sida. Vi upplever att vi möter den kravspecifikation och de mål vi satt för användarupplevelse. Beställaren själv är mycket nöjd med resultatet och kommer att använda sidan. Det Owe själv behöver göra är att aktivera spamskydd, exempelvis Akismet. Vi har inte gjort detta då man behöver registrera ett konto hos Akismet. Framöver kommer sidan dessutom flyttas från Södertörns server till Zambas eget webbhotell.

3. Diskussion och sammanfattning 3.1 Resultat Vi är mycket nöjda med resultatet av hemsidan. I stort sett har allting blivit som vi ville och de få ändringar som gjorts har varit medvetna val, exempelvis att skippa widgets. Vi är också nöjda med att hemsidan inte känns eller ser ut som en typisk wordpress sida. 3.2 Arbetsmetoder Alla i gruppen har lagt ner tid och energi i arbetet även om vi delat upp det på olika sätt. Det har fungerat väldigt bra att sitta gemensamt då detta underlättade kommunikationen. Genom att vi suttit tillsammans har vi haft möjlighet att lära oss av varandra och hjälpa till med problemlösning trots våra varierande förkunskaper. Något som fungerat mindre bra var att de med högre teknisk kunskapsnivå ibland kännt sig lämnade med de problem som ingen annan kunnat lösa. I det stora hela är vi dock väldigt nöjda med resultatet och de metoder vi använt för att ta oss dit. 3.3 Lärdomar Några av de rent tekniska lärdomarna vi tar med oss från projektet är följande: Hur användbart verktyget inspektera element är. Hur man lägger rätt detaljer på rätt sida med hjälp av korrekt selektor. Hur flexibelt Wordpress är om man anpassar sidan med CSS via childtheme. Det var bara en i gruppen som använt childtheme innan. Att hela tiden kontrollera sidan på olika skärmstorlekar och med olika webbläsare. Vi tar också med oss några lärdomar om att arbeta med ett projekt i grupp: Vikten av att i ett tidigt stadie sätta upp förhållningsregler inom gruppen och att anpassa oss efter dessa och varandra. Att vi har tjänat mycket på att befinna oss på samma plats rent fysiskt. Detta har underlättat kommunikationen samtidigt som vi kunnat bolla idéer, problem och lära oss av varandra. Även om vi haft en fungerande kommunikation hände det att vi ibland gjorde samma saker samtidigt. Av detta lär vi oss att ha en ännu bättre kommunikation och hela tiden uppdatera varandra om vad vi sitter med för stunden.

4. Individuella reflektioner Matilda Jag har lagt ned ca 30h/vecka i projektarbetet. Det mesta av arbetet har skett i skolan men jag har också gjort en del skrivande och rapportering hemifrån. Jag har tagit stort ansvar över de olika delrapporterna och den slutgiltiga rapporten samt stämt av gentemot tidsplanen. Detta har lett till att jag tagit någon form av projektledarroll rent planeringsmässigt. Jag har också varit delaktig i CSS-kodning efter bästa förmåga. När det gäller kodningen har jag lärt mig en hel del av Yvette och Magnus men också genom egna försök och sökningar på nätet. Jag tycker att jag till stor del har uppfyllt mina kunskapsmålen då jag lärt mig jättemycket om CSS och Wordpress som verktyg. Även om jag skulle ha svårt att bygga en lika fin hemsida helt på egen hand vet jag vad som går att göra i Wordpress och kan ta mig en lång väg på egen hand. Jag har också fått det helhetsperspektivet som jag önskade, det vill säga hur man skapar en hemsida från idé till färdig produkt Elin Då jag kom med idén för projektet, blev min huvudsakliga roll att ha kontakt med kunden och se till att vårt arbete mötte kundens krav. Jag var mycket engagerad och involverad i den visuella designen av sidan, då det kreativa och visuella är mitt främsta intresseområde. Jag har haft ansvar för att samla in material och hantera bilderna som ligger på hemsidan och har även skrivit ny copy samt presentationstexter. Jag har skapat en favicon och jobbat med bildhantering i photoshop. Vi har hittat naturliga roller i gruppen, och jag skulle vilja saga att min roll blev som AD/projektledare, medan den tekniska biten togs om hand av de som var mer intresserade av det. Vår grupp har fungerat mycket bra, vi har alla varit engagerade och har lagt ned ungefär lika mycket tid, trots att vi arbetat med olika områden. När jag utvärderar mina individuella kunskapsmål, ser jag att jag kanske inte lärt mig så mycket mer om kodning, men däremot om vad det innebär att arbeta i grupp med ett projekt, och tillsammas lyckas uppnå satta krav och mål. Detta har varit intressant och nyttig lärdom för mig, då jag tidigare har frilansat och mestadels arbetat ensam med mina projekt. Jag har även fått friska upp mitt minne i Wordpress, och känner att jag nu har fått en övergripande kunskap om hur det fungerar. Den viktigaste kunskapen jag har fått med mig från projektet är skapandet av designen på hemsidan, både visuellt och funktionellt. Det var mycket intressant och givande att arbeta med ett skarpt projekt, och jag vet nu hur en designidé kan jobbas fram med hjälp av skisser, utvärderingar och prototyper.

Yvette Jag har främst arbetat med hemsidans CSS men jag har också flyttat/lagt till html kod i olika PHP-filer för att få fram ett önskat resultat. Hemsidans utseende skapades utifrån från Hi-fi skissen jag skapade tidigare i planeringsprocessen. Något jag hade velat lära mig mer om vore PHP, då det är en stor del av Wordpress. Jag känner ändå att jag lärt mig mycket mer om möjligheterna inom Wordpress och jag känner att jag idag skulle kunna skapa min egen hemsida med hjälp av detta verktyg. Då vi har mötts som grupp nästintill dagligen har jag därför också arbetat samtliga dagar. Jag anser även att resten av gruppen arbetat lika engagerat. Vi har övervägande haft en god kommunikation, något jag lärt mig att värdesätta högt. En nackdel med att ha erfarenheter sen tidigare inom CSS var att jag ofta kunde hamna med dem olösliga problemen vilket kunde resultera i att jag satt väldigt länge med något som sen inte blev av. Men det gjorde också att jag fick en bättre förståelse i hur CSS fungerar, bland annat de olika selektorerna. Men som grupp gav vi inte upp, och efter en hel del experimenterande kunde jag, tillsammans med Matilda och Magnus tillslut komma på nya lösningar. Jag upplever även att jag fått en större förståelse över processen idé till färdig produkt. Magnus Mina huvudsakliga arbetsuppgifter under projektets gång har varit CSS-kodning. Verktyget granska komponent har jag använt flitigt under projektets gång och det har varit till stor hjälp. När något ska ändras med CSS har vi därför först experimenterat med detta verktyg för att sedan föra över koden till vårt child theme när resultatet var till belåtenhet. Jag har också varit med och påverkat det visuella utseendet på sidan, då vi i grupp har diskuterat färgval, layout och dylikt. Gruppen har setts kl. 10 i princip varje vardag och jag uppskattar att vi arbetat ungefär 30 timmar i veckan med projektet. När det gäller målen jag satte upp i början av projektet så tycker jag att de är uppfyllda. Under projektets gång har jag fått mycket bättre koll på WordPress samt utvecklat mina CSS kunskaper och fått vara kreativ och påverka hemsidans layout.

5. Referenser Böcker: Niederst Robbins, Jennifer (2007). Learning Web design: a beginner s guide to (X)HTML, style sheets, and web graphics. 3rd ed. Sebastopol, CA: O Reilly Bergström, Bo (2015). Effektiv visuell kommunikation: om nyheter, reklam och profilering i vår visuella kultur. 9., [rev.] uppl. Stockholm: Carlsson Walter, A (2011) Designing for Emotion, A book Apart, New York Hellmark, Christer (2004). Typografisk handbok. 5. uppl. Stockholm: Ordfront Wroblewski, Luke. (2011). Mobile first. New York: A Book Apart Cederholm, Dan (2010). CSS3 for Web Designers. New York: A Book Apart Preece, Jennifer, Rogers, Yvonne & Sharp, Helen (2002). Interaction design: beyond human-computer interaction. New York: Wiley Webbresurser: Wordpress Support [Elektronisk] Tillgänglig https://wordpress.org/support/ Hämtad: Löpande 2015-05-18-2015-05-28 W3Schools [Elektronisk] Tillgänglig https://www.w3schools.com Hämtad: Löpande 2015-05-18-2015-05-28 Stack Overflow [Elektronisk] Tillgänglig https://www.stackoverflow.com Hämtad: Löpande 2015-05-18-2015-05-28 Lea Verou Beveled Corners & negative border-radius with CSS3gradients [Elektronisk] Tillgänglig http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ Hämtad: 2015-05-20 Föreläsningar: Nico Arnold Wordpress Child Theme/Templates 2015-05-18 Nico Arnold Wordpress Templates/Grid/JavaScript 2015-05-20

Plugins/tillägg Franken, A (version 4.3) All in one Favicon [Elektronisk] Tillgänglig http://www.techotronic.de/plugins/all-in-one-favicon/ Hämtad 2015-05- 19 Nicholas, M (version 4.4.4) Clean and Simple Contact Form [Elektronisk] Tillgänglig http://www.megnicholas.co.uk/wordpress-plugins/clean-andsimple-contact-form/ Hämtad 2015-05-25 Labs, M (version 3.3.2) Meta Slider [Elektronisk] Tillgänglig https://www. metaslider.com Hämtad 2015-05-19 PepLamb (version 1.2.6) Linkable Title Html and Php Widget [Elektronisk] Tillgänglig http://peplamb.com/linkable-title-html-and-php-widget/ Hämtad 2015-05-22 Archetyped (version 2.4.0) Simple Lightbox [Elektronisk] Tillgänglig http://archetyped.com/tools/simple-lightbox/ Hämtad 2015-05-27 Trewartha, A (version 0.57) Widget Logic [Elektronisk] Tillgänglig https://wordpress.org/plugins/widget-logic/ Hämtad 2015-05-25 Baldelomar, C (version 1.39) WP Canvas Gallery [Elektronisk] Tillgänglig http://webplantmedia.com/starter-themes/wordpresscanvas/features/gallery/ Hämtad 2015-05-26 WP Google Maps (version 6.1.7) WP Google Maps [Elektronisk] Tillgänglig http://www.wpgmaps.com Hämtad 2015-05-25 Ram, N (version 2.0.5) WP Responsive Menu [Elektronisk] Tillgänglig http://magnigenie.com/wp-responsive-menu-mobile-menu-plugin-wordpress/ Hämtad 2015-05-28 Material på sidan: Bilder samt loggor från Zamba Studio AB med tillstånd.