Veistämö Knaapi Projektidokumentaatio 2015
1 Sisällysluettelo 1 Esittely... 3 1.1 Idea/Tarve... 3 1.2 Synopsis/ Projektin kuvaus... 3 1.3 Aikataulutus ja kustannusarvio... 4 2 Suunnittelu... 6 2.1 Banneri ja Logo... 6 2.2 Rakenne... 7 2.3 Värit... 8 3 Toteutus... 9 3.1 Kuvasisältö... 9 3.2 Verkkoteksti... 10 3.3 Muutokset / Ongelmat... 10 4 Validointi ja testaus... 11 4.1 Validointi... 11 4.2 Testaus eri laitteilla... 11
2 5 Julkaisu ja ylläpito... 14 6 Arviointi/yhteenveto... 14 6.1 Yhteenveto... 14 6.2 Itsearviointi... 14 6.3 Asiakasarviointi... 15
3 1 ESITTELY 1.1 Idea/Tarve Veistämö Knaapi yrityksen omistaja Mika Valli tarvitsi yritykselleen nettisivut tuodakseen palvelunsa ihmisten löydettäväksi. 1.2 Synopsis/ Projektin kuvaus Mika Valli teki minulle tarjouspyynnön suullisesti. Sovimme aloittavamme yhteistyön, hänen hyväksyttyään kustannusarvioni. Asiakas toivoi nettisivujen rakenteen olevan yksinkertainen, joten päädyimme neljän sivun rakenteeseen. Värimaailmaksi ehdotin puunvärejä, jonka asiakas hyväksyi. Sivujen suurimpana kohderyhmänä on keski-ikäiset miehet. Julkaisualustana toimii Wordpress. Teemaksi valitsin Simple Shopin, jota aloin työstää.
4 1.3 Aikataulutus ja kustannusarvio Päivämäärä: Projektin vaihe: Tunnit: 19.3.2015 Asiakastapaaminen 1 h 26.3.2015 9.4.2015 13.4.2015 Suunnittelu 8 h 15.4.2015 Asiakastapaaminen 1 h 20.-22.4.2015 Toteutus 17 h 24.4, 27.4, 30.4, 4.5.2015 Viimeistely, Testaus, Julkaisu 10 h 4.5.2015 Asiakastapaaminen 1 h Työtunnit yhteensä: 38 h
5 Kustannusarvio Kokonaistyötuntimäärä: 38h 10 3 8 17 Asiakastapaamiset Suunnittelu Toteutus Viimeistelyt Kustannusarviossa ehdotin Vallille 24 /vuosi (+ALV 24 %) maksavaa webhotellia Webbiseltä. Myöhemmin kuitenkin suosittelin hänelle päivitettävyyden kannalta suurempaa webhotellipakettia, jotta pystyisin tuottamaan sivut hallintajärjestelmällä. Valli oli asiasta samaa mieltä kanssani. Kustannusarvioympyrästä näkee tuntien jakautumisen. Kokonaistyötuntimäärä oli 38 tuntia, joten 70 tuntipalkalla projektin työkustannukset ovat 2660. Arvonlisäveroa ei ole laskettu summaan. Todellisuudessa työkustannukset eivät olisi näin suuret.
6 2 SUUNNITTELU 2.1 Banneri ja Logo Bannerin suunnittelin Adobe Photoshopilla. Annoin asiakkaalle kaksi erilaista versiota. Kuva 1 Ensimmäinen ja asiakkaan valitsema banneri Kuva 2 Vaihtoehtoinen banneri Asiakas päätyi ensimmäiseen versioon bannerista, koska se erottui paremmin sivujen taustasta. Logon suunnittelin omatoimisesti asiakkaan myöhempää käyttöä varten. Kuva 3 Logo
7 2.2 Rakenne Asiakas halusi pysyä mahdollisimman yksinkertaisessa rakenteessa. Kuva 4 Rakenne kaavio, sivukartta Suunnittelin Adobe Illustratorilla kaksi rautalankamallia, joista oli tarkoitus havainnollistaa värimaailma sekä vaaka- ja pystynavin eroa asiakkaalle. Valli valitsi vaakanavin ja oli tyytyväinen kuvassa näkyvään rakenteeseen.
8 Kuva 5 Vaakanavillinen rautalankamalli Kuva 6 Pystynavillinen rautalankamalli 2.3 Värit Väriteemana toimii pääasiallisesti puunsävyt. Korosteväriksi valitsimme sukupuolineutraalin turkoosin tuomaan hieman eloa sivuihin.
9 3 TOTEUTUS 3.1 Kuvasisältö Osa kuvista tuli asiakkaalta ja osan kävin itse kuvaamassa veistämöllä. Luovutin kuvieni käyttöoikeudet Vallille. Muutaman kuvan oli ottanut Maija Männistö tehdessään lehtiartikkelia Vallista. Näihin kuviin saimme käyttöoikeudet. Osa asiakkaan kuvista oli puhelimella otettuja, jotka lisäsin huonosta kuvalaadusta huolimatta muokkauksen jälkeen sivuille. Muokkasin kuvat Adobe Photoshopilla niiden käyttötarkoituksista riippuen. Kuva 7 Esimerkkejä muokkauksista
10 3.2 Verkkoteksti Sovimme asiakkaan kanssa, että asiakas tuottaa tekstit, jonka jälkeen muokkaan ja oikoluen ne verkkoteksteiksi. Sivustoa luodessa käytin Lorem Ipsum tekstiä havainnollistamaan tekstien sijainteja. 3.3 Muutokset / Ongelmat Sivustolle murtauduttiin ja lisättiin tietoturvariskialttiita tiedostoja 19.4.2015. Sivusto laitettiin karanteeniin webhotellin toimesta. Jouduin aloittamaan sivujen toteutuksen alusta, jottei tiedostoihin jäänyt haitallisia piilotiedostoja. Kävimme asiakastapaamiset enimmäkseen sähköpostin kautta. Muutokset eivät olleet suuria; kuvien paikkojen vaihtoa sekä loppuviimeistelyjä.
11 4 VALIDOINTI JA TESTAUS 4.1 Validointi HTML-validaattori http://validator.w3.org/ tuotti tuloksen 0 virhettä ja 9 varoitusta. Varoitukset koskivat otsikoiden puuttumisia. CSS-validaattori https://jigsaw.w3.org/css-validator/ tuotti tuloksen 4 virhettä. Virheet eivät olleet huomattavia. 4.2 Testaus eri laitteilla Näkymät eri laitteilla
12 Yhteensopivuus selainten kanssa: Testasin sivut muutamalla selaimella. Kaikissa sivut näyttivät hyviltä ja toimivat normaalisti. Suoritin vielä automaattitarkastuksen. http://www.powermapper.com/products/sortsite/checks/brows er-compatibility.htm
13 Kuva 8 Automaattitarkastuksen tulokset Laitetestaus: LAITE TULOS SAMSUNG GALAXY NOTE 2.0 / ANDROID 4.4.2 Kaikki toimii. Soveltuu hyvin mobiilinäytölle. IPAD 4 (TABLETTI) Kaikki toimii. Soveltuu hyvin tabletin näytölle. HTC ONE S / ANDROID 4.1.1 Kaikki toimii. Soveltuu hyvin mobiilinäytölle.
14 5 JULKAISU JA YLLÄPITO Julkaisimme sivut hieman sovittua aikaisemmin 24.4.2015. Ylläpito siirtyi Mika Vallille. Päivityksen ohjeet lähetin asiakkaalle sähköpostitse. 6 ARVIOINTI/YHTEENVETO 6.1 Yhteenveto Sivuston käytettävyys on otettu huomioon selkeydessä ja yksinkertaisuudessa. Käyttäjän on helppo suunnistaa sivuilla, iästä tai internetin käyttökokemuksesta riippumatta. Sivuston ulkoasu on nuorenkin käyttäjän silmään trendikäs. 6.2 Itsearviointi Projektin toteutuksessa oli kaiken kaikkiaan paljon mutkia matkassa, mutta kaikista selviydyttiin kunnialla. Olen tyytyväinen sivuston visuaaliseen toteutukseen. Aikataulussa pysyttiin sovitusti. Asiakas oli helposti tavoiteltavissa ja yhteistyö sujui mutkattomasti.
15 6.3 Asiakasarviointi Hoidit homman hienosti, ehdotit millainen sivusto minun kannattaa ottaa ja millaisia asioita sivuilla näkyy! Pyysit kuvia ja kävit itse ottamassa kuvia, joita sivuille voi laittaa! Asia tulee sivuilta esille mitä teen. Olen tyytyväinen sinun työpanokseen! Kiitos! Mika Valli / Veistämö Knaapi