Designspecifikation BMK BOSTON Rebecka Törngren Webbdesign med HTML och CSS 7,5hp (2IS202-Sommar14) Informatik och Media,
Innehållsförteckning 1. Övergripande information 3 1.1. Arbetstitel för sajten 3 1.2. Målet med sajten 3 1.3. Målgruppen 3 1.4. Innehåll 4 2. Struktur 4 2.1. Vilka delar 4 2.2. Sitemap 4 2.3. Mappstruktur 5 3. Layout och Design 5 3.1. Layout 5 3.2. Design 7 3.2.1 Färg och känsla 7 3.2.2 Bilder och teckensnitt 8 4. Tillägg vid slutinlämning 11 4.1 Tillägg strukturplaneringen 11 4.2 Tillägg genom tidens gång 12 4.3 Övriga kommentarer och förändringar 13 2
1. Övergripande information Sajten kommer att innehålla information om badmintonklubben BMK Boston samt aktuella händelser kopplad till denna. 1.1. Arbetstitel för sajten Titeln för sajten är BMK Boston. 1.2. Målet med sajten Sajt som ska informera klubbens medlemmar gällande händelser kopplade till badmintonklubben. Syftet är också att fånga och rekrytera nya medlemmar. 1.3. Målgruppen Målgruppen består av personer i alla åldrar och av båda könen, men de flesta befinner sig i intervallet 10-50 år och består av båda könen, dock en aning fler män än kvinnor. Detta stora åldersintervall beror på att det finns träningsgrupper from 5 år till och med motionärsgrupper utan ålderstak, som alla har intresse av en informativ webbsida. Det finns föräldrar till de yngre barnen som också behöver ha tillgång till informationen även om de själva inte är medlemmar. Förutom dessa är målgruppen också personer som ännu ej är medlemmar men som är intresserade av att bli. Gemensamt för målgruppen är att de är intresserade av sporten badminton. Jag kan alltså inte förutsätta att det finns någon djupare förståelse för teknik och måste vara medveten om den spridda användningen av olika sorters webbläsare och versioner av operativsystem. Det är därför viktigare att webbsidan ser okej ut i flera webbläsare än att den ser perfekt ut i en enda. Tre profiler för min målgrupp: Namn: Sandra Ålder: 14 Kön: Kvinna Webbläsare: Internet Explorer Arbete: Studerande Operativsystem: Windows 7 Övrigt: Sandra har hållit på med datorer sen hon föddes och har ganska bra koll på hur en webbsida generellt är uppbyggd. Hon använder sig av sina föräldrars stationära dator för att se plats och tid för samling till tävlingen i helgen. Namn: Peter Ålder: 33 Kön: Man Webbläsare: Safari Arbete: Revisor Operativsystem: Mac OS X Övrigt: Peter är inte själv medlem i klubben men han skjutsar ofta sin 6åriga son till träningen. Eftersom han har ett mycket fullspäckat schema är det bekvämt för honom att få information om plats och tid för sonens träning via webben. Namn: Johan Ålder: 16 Kön: Man Webbläsare: Google Chrome Arbete: Studerande Operativsystem: Windows XP Övrigt: Johan funderar på att börja i någon idrottsförening för att ha en hobby på sidan av skolan. En lagsport känns inte aktuell då han tycker att han redan blivit för gammal för det vid 16 års ålder. Därför sitter han en eftermiddag efter skolan och 3
strökollar sina alternativ, det är då viktigt att han får bra information om sporten och dess träningsgrupper, annars kommer detta bara rinna ur sanden. 1.4. Innehåll Sajten ska innehålla information om klubben och sporten, träningsgrupper och tider, tävlingar, medlemskap och hur man får kontakt med klubben. 2. Struktur 2.1. Vilka delar Sajten ska handla om BMK Boston och berätta om de olika träningsgrupper som finns men också om tränare, styrelse, tävlingar, länkar till andra sidor med bra information, och kontaktsida. Startsidan här finns nyheter med information som är aktuell som sedan länkar till andra sidor med mer information. Träningssidan här berättas det lite kort om varje träningsgrupp, tider, plats, tränare, ålder och vilken utrustning som krävs. Tävlingssida information om vilka tävlingar som är på kalendern under året och information om den senast aktuella tävlingen för klubben. Länkar till resultat och reseinformation. BMK Boston-sidan här står det information om klubben samt vilka som sitter i styrelsen. Medlemskapssidan sida som handlar om priser och vad ett medlemskap innebär. Här finns även länk till kontaktformuläret på kontaktsidan. Badmintonsidan information om sporten badminton, historik och rolig fakta samt en regelbok. Detta för att skapa intresse för nya medlemmar. Kontaktsida med våra kontaktuppgifter men också med ett kontaktformulär för att börja träna eller för att ställa frågor. Totalt ser jag i uppstarten att sajten kommer att innehålla 7 sidor. 2.2. Sitemap 4
2.3. Mappstruktur 3. Layout och Design 3.1. Layout Allmänt för layouten är att den kommer att vara fixerad till mitten. 5
Ovan är layouten för startsidan. Det är egentligen bara innehållet inom de röda linjerna som skiljer sig från de övriga sidorna. Här kommer sidan vara indelad i tre kolumner som står för de olika rubrikerna. När bilder läggs in blir alla i samma storlek, och man får då trycka på miniatyrerna för att få upp bilderna fullskaligt. Eventuellt kommer det att finnas två bildminiatyrer en för landskapsläge och en för porträtt. Alla kolumner kommer sedan att ha en slags arkivfunktion där man kan se gamla nyheter, länkas till ett utökat galleri eller till klubbens Facebookgrupp. Det finns dock en risk att tre kolumner kan tyckas väldigt grötigt och trångt, vilket i sin tur gör att det blir rörigt och inte används. Tanken är i så fall att Facebookkolumnen tar upp en större del av sidan och ett eventuellt galleri kommer att ligga på Facebook istället för på webbsidan. Se följande figur: Ännu en risk är min bristande kompetens, vilket gör att en koppling mellan Facebook och webbsida ännu ej är möjlig eller att jag inser att denna lösning inte är den optimala för det tänkta syftet. Om så är fallet kommer layouten se ut så här: 6
Nedan är layouten för alla de övriga sidorna på sajten: Även här kommer alla bilder som läggs in på samma sida vara av samma storlek i miniatyrer. Undernavigationen är tänkt att fungera som en extra meny under den första menyn. T ex fliken Om badminton kommer vara indelad i två stycken på samma sida Fakta/Historik och Regler. Trycker man på knappen regler blir man automatiskt nedscrollad till stycket regler. Allt som är under samma knapp i den första menyn, kommer också ha en undermeny trots att allting finns på samma sida. För att förtydliga kommer man kunna trycka på Om badminton och sen välja mellan Fakta/Historik eller Regler. Men man kan också välja att scrolla ned för att komma till regler eftersom allting egentligen ligger under sidan Om badminton. 3.2. Design 3.2.1 Färg och känsla Den känsla jag vill skapa är att det ska kännas inbjudande att vara inne på sidan, det ska kännas som att man tillhör och är en del av klubben, och är man inte medlem ska man vilja bli det. Hemsidan ska kännas trygg. En del av BMK Bostons motto är BMK Boston ska via badminton ge ungdomar en meningsfull fritid. Därför vill jag skapa trygghet och motivation med webbsidan. För att välja ett ord att beskriva den känslan jag beskrev ovan stämmer familjär in väldigt bra. Under min uppväxt har denna klubb varit som min andra familj, vilket jag vill att fler ska uppleva. Med denna känsla i bakhuvudet väljer jag följande färgschema: 7
Det är viktigt att alla känner sig välkomna och därför har jag valt ett färgschema med en könsneutral look. Att alla ska känna sig välkomna är något som BMK Boston prioriterar högt eftersom de anser att det är nyckeln till den meningsfulla fritid som mottot benämner. Förutom den könsneutrala touchen har jag hämtat inspiration från klubbens färger. De har i tidigare år haft den är typen av grönfärg som klubbfärg, och använt den på så väl klubboverall som tävlingströjor. Klubbfärgen är inte absolut, och den har växlat från grön, till kornblå och idag är den svart. Ett sista skäl till valet av den gröna färgen är att den får mig motiverad och sugen på att träna, och tycker att den fungerar mycket bra som ett komplement till den annars lätt kalla och sterila looken svart och vit. Min första tanke var att använda mig av den kornblåa färgen, då klubben idag använder sig av den på dagens webbsida, men den blev lätt tråkig och lite för lugn. Detta är en idrottsklubb och det är därför jag vill framkalla motivation och gärna adrenalin. Som tidigare nämnt är det viktigt att webbsidan samtidigt utstrålar trygghet varför jag har valt att inte använda mig av rött. Enligt föreläsning 4 vecka 2 (2014) framkallar rött passion och adrenalin vilket tordes vara ett självklart val för att framkalla det jag beskriver. Dock kan röda toner lätt framkalla stress, och återigen är det också viktigt att känna trygghet med klubben. Sammanfattning: Min känsla är att dessa färger är familjär men motiverande. 3.2.2 Bilder och teckensnitt Jag kommer att använda mig av två teckensnitt, ett för rubriker och ett för brödtexten. Det för rubriker heter Wagner modern och är en gratisfont som jag laddat ned från www.fontspace.com. Jag skulle säga att teckensnittet är tungt och utmanande vilket jag tycker stämmer överens med sporten badminton. Jag kommer 8
att använda teckensnittet Helvetica Neue LT com, 55 Roman för brödtexten då jag tycker att den är lättläst och snygg. De bilder jag kommer att använda mig av är egengjorda bilder på Photoshop, klubbens logga samt medlemmars egna foton. Självklart kommer jag behöva medlemmarnas godkännande för dessa bilder och detsamma gäller godkännandet av loggan fast från klubbens ordförande. Den design jag kommer att utgå ifrån när jag skapar min webbsida kommer att se ut som följer: (Jag vill vara noga med att poängtera att denna design kan komma att ändra sig med tidens gång och ju mer erfaren jag blir). Detta är version ett av startsidan. Tanken är att badmintonracket ska byta plats när man klickar på något av de andra fälten i menyn, och på så sätt vet man var på sajten man befinner sig. Bilderna är tagna från dagens webbsida och klubbens Facebookgrupp. Min förhoppning är som tidigare nämnt att Facebook ska kunna finnas med på webbsidan, och eftersom det här kanske blir för smått har jag i så fall tänkt att det ska kunna se ut så här om det blir som tidigare nämnt grötigt: 9
Galleriet kommer här istället att ligga på klubbens Facebooksida och endast flödet visas på sajten. Nästa bild är hur jag har tänkt mig att de övriga sidorna ska se ut: Här finns det en meny under den stora menyn, det är denna jag kallar för undernavigation i min layoutbeskrivning. Tanken är att det ska gå att scrolla på denna sida, och då kommer man i denna bild komma till Kontaktformulär. Man kan också, om man vill, trycka på knappen kontaktformulär så blir man scrollad dit direkt. 10
4. Tillägg vid slutinlämning Efter att ha arbetat med webbsajten under tio veckor har en del förändringar gjorts. Jag börjar med att komplettera förra inlämningen av designspecifikationen med kommentarer jag fått från lärare gällande strukturplaneringen från första designspecifikationen. Sedan går jag till att visa de förändringar av sajtens som har gjorts från mina egna lärdomar samt klasskamraters kommentarer. 4.1 Tillägg strukturplaneringen Med påvisning att det bör finnas en tillhörande bildtext till både mappstruktur och sitemap lägger jag här med till det: I mappen Boston (bmk boston i verkligheten) ligger alla mappar som tillhör sajten, där finns också startsidans html-fil. I html-mappen finns alla resterande html-filer. Varje sida på sajten har en egen mapp, och där ingår även filer eller bilder som finns med i html-filen. Bilder som angår innehållet ligger alltså i html-mappen medan bilder som angår utseende tillsammans med stilmallar ligger i mappen images. För sitemapen var det mycket riktigt fel att starta med en sida som heter bmk boston, den finns ju inte. Den har därför gjort om så att jag visar att man kommer in på startsidan först och kan sedan komma till de olika flikarna på sajten, det är de mörkare färgerna som visar vilka just dessa flikar är. De ljusare färgerna står för det innehåll som finns när man klickar på flikarna i huvudmenyn. 11
4.2 Tillägg genom tidens gång De förändringar jag nu ska visa är de jag själv upptäckt för att hitta en smartare lösning för att få ett effektivare innehåll. Dessa rör sitemapen. Jämför med bilden i föregående stycke med den nedan. Förklaring till siffrorna i bilden kommer här: 1. Istället för ett facebookflöde visas de senast inlagda bilderna i ett galleri. 2. Seriespelet i BMK Boston är en viktig del av tävlandet och har speciella regler och annan information som skiljer sig från övriga tävlingar, därför fick det ett eget område. 3. Boston arrangerar egna tävlingar vilka ska vara enkla att hitta för såväl egna spelare som för de som kommer och gästspelar. Genom denna flik kommer man tillrespektive tävling. 4. För någon som är helt ny inom sporten kan det vara viktigt att veta saker om de olika materialen som används, därför har ett område inom material tillkommit. 5. En ny flik på menyn som heter Arkiv har tillkommit. Detta för att kunna spara nyhetshändelser, dokument samt för att enkelt hitta bilder i galleriet. 6. Från galleriet kan man klicka på de små bilderna för att få upp de som stora i en egen sida där alla bilder från den tävlingen kommer upp. Längst upp på denna sida finns också information om vilken tävling de är ifrån. Så här ser alltså sitemapen ut idag: 12
4.3 Övriga kommentarer och förändringar I övrigt har det gjorts vissa justeringar på kodning samt utseende efter kritik från klasskamrater samt efter egna upptäckter. Justeringarna som gjorts är: Sidfotens kontrast är justerad med hjälp av fet stil på texten, jag får för mig att den syns tydligare nu. Menyn är justerad så den även ser bra ut i internet explorer. (Innan hoppade texten utanför menyraden) Ordnades med marginal på ul istället för li. Svårlästa rubriker då jag ville ha kvar fonten för min känsla med sajten löste jag detta med letter-spacing för mer luft mellan bokstäverna. 13
HTML-filerna såg röriga ut, och jag lade in mer luft i dessa. Bilder och filer kopplade till viss sida ligger i sidans mapp. Bilder kopplade till css ligger i images-mappen. Innan uppstod det förvirring då bilder som egentligen tillhörde html-filen Om_badminton låg i images, vilket de inte borde då endast bilder kopplade till stilmallen skulle ligga där. Stilmallen är nu mera validerad korrekt (grönt ljus). Alla html-sidor är nu mera validerade med grönt ljus Sparade om alla html-filer i notepad++ med utf-8 utan bom för att teckenkodningen skulle fungera korrekt, och det gör den nu. I designens första del ville jag ha ett racket med på sidan för att markera var på sajten man befann sig. Detta har jag tagit bort då jag ansåg att det blev för rörigt och försvårade mer än framhävde innehållet. Racketet är ersatt med fet stil och ett understreck istället. Det jag kan konstatera är att det var mycket bra att få kritik från andra för att se förbättringsförslag jag själv inte sett, jag fick också tips på hur jag lättare kunde lösa saker. Efter dessa förändringar är jag nöjd med sajten. Sajten är driftsatt och går att hitta på http://adornwebdesign.se/bmkboston/. 14