Veistämö Knaapi. Projektidokumentaatio

Transkriptio

1 Veistämö Knaapi Projektidokumentaatio 2015

2 1 Sisällysluettelo 1 Esittely Idea/Tarve Synopsis/ Projektin kuvaus Aikataulutus ja kustannusarvio Suunnittelu Banneri ja Logo Rakenne Värit Toteutus Kuvasisältö Verkkoteksti Muutokset / Ongelmat Validointi ja testaus Validointi Testaus eri laitteilla... 11

3 2 5 Julkaisu ja ylläpito Arviointi/yhteenveto Yhteenveto Itsearviointi Asiakasarviointi... 15

4 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ää.

5 4 1.3 Aikataulutus ja kustannusarvio Päivämäärä: Projektin vaihe: Tunnit: Asiakastapaaminen 1 h Suunnittelu 8 h Asiakastapaaminen 1 h Toteutus 17 h 24.4, 27.4, 30.4, Viimeistely, Testaus, Julkaisu 10 h Asiakastapaaminen 1 h Työtunnit yhteensä: 38 h

6 5 Kustannusarvio Kokonaistyötuntimäärä: 38h 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 Arvonlisäveroa ei ole laskettu summaan. Todellisuudessa työkustannukset eivät olisi näin suuret.

7 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

8 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.

9 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.

10 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

11 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 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ä.

12 11 4 VALIDOINTI JA TESTAUS 4.1 Validointi HTML-validaattori tuotti tuloksen 0 virhettä ja 9 varoitusta. Varoitukset koskivat otsikoiden puuttumisia. CSS-validaattori tuotti tuloksen 4 virhettä. Virheet eivät olleet huomattavia. 4.2 Testaus eri laitteilla Näkymät eri laitteilla

13 12 Yhteensopivuus selainten kanssa: Testasin sivut muutamalla selaimella. Kaikissa sivut näyttivät hyviltä ja toimivat normaalisti. Suoritin vielä automaattitarkastuksen. er-compatibility.htm

14 13 Kuva 8 Automaattitarkastuksen tulokset Laitetestaus: LAITE TULOS SAMSUNG GALAXY NOTE 2.0 / ANDROID Kaikki toimii. Soveltuu hyvin mobiilinäytölle. IPAD 4 (TABLETTI) Kaikki toimii. Soveltuu hyvin tabletin näytölle. HTC ONE S / ANDROID Kaikki toimii. Soveltuu hyvin mobiilinäytölle.

15 14 5 JULKAISU JA YLLÄPITO Julkaisimme sivut hieman sovittua aikaisemmin 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.

16 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