Projektrapport Projekt - Anna Broström Keramik Kurs: Medieteknik A, VT 2013 Delkurs: Interaktiva medier och Publicering via Internet Inlämningsdatum: 2013-06-04 FIMS: Freja Krogh-Andersen, Ida Josefsson, Mathilda Gälsing, Sanna Ström
Innehållsförteckning Projektrapport Bakgrund 3 Tillägg och Plugins 3 Meta-taggar 3 Arbetssätt 3 Individuella reflektioner 4 Reflektioner och slutsats 4 Bilaga Grafisk profil 6 Personerna bakom projektet 6 2 (7)
Projektrapport Bakgrund Projekt Anna Broström Keramik är ett projektarbete av Freja Krogh-Andersen, Ida Josefsson, Mathilda Gälsing och Sanna Ström. Vi som har gjort hemsidan läser för tillfället kursen Medieteknik A vid Södertörns högskola. Uppgiften var att, som del av kurserna Interaktiva Medier samt Publicering via Internet, skapa en övningswebbsida som slutligen skulle publiceras på Internet. Tanken med arbetet är redovisa det vi har lärt inom HTML, CSS, Adobe Flash, Adobe Creative Suite och WordPress under Medieteknik A, våren 2013. I vår grupp valde vi att arbeta utifrån en verklig kund. Anna Broström är en keramiker baserad i Stockholm. Försäljningen av hennes produkter sker via återförsäljare, främst Designtorget, ett företag som tar en stor del av intäkterna. Anna Broström har en egen domän och hemsida som är inaktiv, och för tillfället använder hon Facebook som främsta kommunikationskanal. Syftet med Projekt Anna Broström Keramik är att Anna Broström, med vår hjälp, själv ska kunna sälja sina produkter online. Tanken är att Anna Broström efter projektets slut enkelt ska kunna administrera och uppdatera sin hemsida vid behov. Nuvarande adress för hemsidan är http://keramik.sannastrom.se, den tilltänkta adressen för företaget Anna Broström Keramik är http://annabrostromkeramik.se. Tillägg och Plugins Vi har använt oss av följande tillägg: Advanced Code Editor ett tillägg som underlättar vid kodeditering. Dropdown Menu Widget tillägg som möjliggör en dropdown meny till hemsida och webbshop. Per Page Widget tillägg som möjliggör enkel redigering av individuella sidor. Portfolio Slideshow tillägg som möjliggör bildspel på hemsidans startsida. (För nuvarande inaktiv). Social Sharing Toolkit tillägg som möjliggör länkar till olika sociala medier, ger interaktivitet och kopplar samman exempelvis webbsida med facebook-sida. I dagsläget har vi valt att länka till ett urval av sociala medier som vi tycker skulle kunna vara lämpliga för Anna Broströms Keramik. Facebook är det enda aktiva sociala medie-konto används i idagsläget. WooCommerce tillägg som tillhandahåller och möjliggör e-handel på hemsidan, det tillägg som vi främst har använt oss av. Meta-taggar Så här skulle vi ha kunnat meta-tagga vår hemsida: <head> <meta name="description" content="anna Broström Keramik" /> <meta name="keywords" content="keramik, koppar, skålar, krukor, presenter, design, formgivning, konsthantverk, Anna Broström, handgjort" /> </head> Arbetssätt När vi påbörjade vårt arbete valde vi att inte dela ut arbetsuppgifter, då vi ville att alla skulle få lika möjlighet att vara engagerade i arbetet. Vi har alla varit delaktiga i kodningen och uppbyggnaden av hemsidan, men har haft olika huvudansvarsområden. Sanna och Freja har huvudsakligen arbetat med bildmaterialet till hemsidan, medan Ida och Mathilda främst har arbetat med kod och text. 3 (7)
4 (7)
Individuella reflektioner Freja Krogh-Andersen Mitt första mål var att känna mig bekvämare med HTML och CSS, och även om jag i första hand inte har varit ansvarig för koden, så tycker jag ändå att det är något jag har lyckats med. Även om det gäller långt ifrån allt, så förstår jag mer av hur HTML och CSS fungerar. Mitt andra mål var att skapa en hemsida med en tilltalande grafisk profil, och även det är något jag upplever att vi har lyckats med. Om vi hade haft mer tid på oss, så hade hemsidan givetvis kunnat bli ännu bättre, men med våra förutsättningar så tycker jag att vi har lyckats bra. Dock hade jag gärna haft mer tid till fotograferingen av produktbilderna. Arbetet har varit roligt och lärorikt, och om möjligheten hade funnits så hade jag gärna fördjupat mig ännu mer. Det finns fortfarande mycket, främst med Wordpress och hur olika tillägg hänger ihop, som jag gärna hade lärt mig mer om. Ida Josefsson Jag tycker att det har varit väldigt intressant och lärorikt att arbeta med Wordpress och vårt projekt. Mitt mål innan vi började var att lära mig mer om HTML och CSS, men framförallt att förstå hur de olika delarna på en hemsida fungerar i förhållande till varandra. Jag har fått mycket mer förståelse för det här, då jag nästan uteslutande har arbetat med olika plug-in och kodning under vårt arbete. Jag har fått en bra grundförståelse för kodning och en vilja att lära mig ännu mer i framtiden om hur man bygger hemsidor från grunden. Mathilda Gälsing Tidigare har jag gjort mycket bloggdesign för blogg.se men då med många färdiga mallar som jag utgått från och experimenterat mig fram med. Jag har då inte alltid förstått vad jag gjort utan testat mig fram på mycket. Jag har aldrig jobbat i Wordpress tidigare och att börja från ett blankt tema var en stor utmaning. Det jag tycker har varit svårt är att vi varit fyra personer som suttit och jobbat med samma sida. Då har det varit svårt att veta vad man ska göra då det är lätt att man skriver över något någon annan gjort. Jag skulle vilja starta någon slags webbshop i framtiden för skojs skull, och efter det här känner jag att jag skulle klara det bra. Vissa plugins har varit svåra att hantera då det inte funnits så mycket hjälp för dem på internet. Och vissa har varit lättare då det har funnits jättemycket information. För att summera så har jag lärt mig väldigt mycket under så kort tid. Sanna Ström Jag har under projektets gång fått ökad förståelse kring kopplingarna mellan de olika dokumenten som sidan är uppbyggd av. I detta projekt har jag även insett vikten av att kunna granska element och att felsöka för att lösa problem. Tilläggen har inte varit så enkla som jag från början trott, men är ändå en bra hjälp i designen av egna hemsidor. Jag har framför allt lärt mig att söka runt bland inställningar, olika sidor, olika dokument o.s.v. för att förstå hur jag kan ändra utseende eller funktion efter önskemål. Reflektioner och slutsats En stor del av våra problem har hängt ihop med de Plugins och tillägg vi har använt oss av. WooCommerce har varit väldigt känsligt för ändringar, och har haft svårt att samarbeta med våra andra tillägg. Det var även därför vi valde att bortprioritera stora delar av drop-down menyn. Det har även funnits tillfällen då vi har velat arbeta med css:en för WooCommerce, men vi har ändå lyckats lösa det på annat sätt. Vi hade ambitionen att kunna få in möjlighet till engelsk översättning av sidan, men har inte hittat ett optimalt tillägg som snabbt och bra gör detta automatiskt. Detta var ej vår högsta prioritet i dagsläget då företaget idag inte har haft fokus på det internationella. Vi har ändå påbörjat arbetet med tillägget Q-translate för att kunna ha det klart till Anna Broströms lansering i Japan inom en 5 (7)
snar framtid. Q-translate kräver att vi själva översätter texter som blir valbara på sidan. Vi har nu istället fokuserat på att få fram en bra helhetsgrund för hemsidan med en väl fungerande webbshop. Vi är nöjda med utseendet och webbshopens funktionalitet. Vi hade gärna haft mer tid till att bygga upp en större bildbank, både med produkter och övrigt bildmaterial. Eftersom Anna Broström inte lagerhåller produkter hade vi dessvärre inte möjlighet att göra detta på så kort tid. Vi har ändå utarbetat en lättuppdaterad grund och en tydlig grafisk profil som Anna Broström kan utgå ifrån. 6 (7)
Grafisk Profil Typografi Vi har genomgående använt oss av webbsäkra, linjära typsnitt, med Helvetica Neue som primärtypsnitt och Helvetica och Arial som sekundärtypsnitt. Färger Bortsett från den blåa logotypen, så har vi huvudsakligen valt att arbeta med en neutral färgskala. Vi har arbetat med olika nyanser av svart, vitt och grått, för att låta fokus ligga på Anna Broströms produkter. Den ursprungliga tanken var att håll webbsidan väldigt enkel och ren, och vi funderade länge på att i huvudsak arbeta med en vit färg. Slutligen bestämde vi oss för att även använda oss av en svart som primärfärg, för att ge webbsidan en tydligare struktur och formspråk. Primärfärger #FFFFFF #000000 Komplementfärger #006699 #C1272D #333333 #2A2F3C #262E38 #22252E #352221 #3A1310 #761E0C Bilder Vi har själva fotograferat alla produktbilderna med en Canon EOS 5d mark II, i naturligt ljus. Efterarbetet har gjorts i Photoshop CS6 och Camera Raw. Porträttet på Anna Broström har vi, med hennes tillåtelse, tagit från facebook. Även de bilder som utgör kollaget på hemsidans startsida är hämtade ifrån facebook. Vi har bytt ut originalikonerna för vår sociala plugins mot svartvita ikoner. Ikonerna, som har skalats om, kommer ifrån http://www.endlessicons.com. Ikonerna får användas fritt, och det finns från skaparens sida inget krav om att uppge upphovsman. De grafiska symboler som används har vi själva formgivit, utifrån Anna Broströms mönster. 7 (7)
Logotyp Logotypen vi använder bygger på Anna Broströms egen signatur. Signaturen är en del av Anna Broströms varumärke, och den har använts sedan företaget start. Signaturen finns även med på botten av alla hennes produkter. När vi tog fram logotypen valde vi att arbeta med en webbsäker färg. Tanken var att färgen skulle anspela på Anna Broströms lekfulla formspråk. Vi valde att arbeta med en färg som Anna Broström själv skulle ha kunnat använda, och valet föll på en blå ton, #006699. Personerna bakom projektet Våra webbaddresser: www.mta.sannastrom.se www.mta.idajosefsson.se www.mta.frejakrogh.se www.mta.mathildag.se 8 (7)