MmK PHOTO 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... 9 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... 13 6 Arviointi/yhteenveto... 13 6.1 Yhteenveto... 13 6.2 Itsearviointi... 14 6.3 Asiakasarviointi... 14
3 1 ESITTELY 1.1 Idea/Tarve Valokuvaaja Miamaija Kurtakko tarvitsi Portfolio-tyyliset nettisivut väyläksi esitelläkseen valokuviaan ja tavoittamaan mahdolliset uudet asiakkaat. 1.2 Synopsis/ Projektin kuvaus Miamaija Kurtakko teki minulle tarjouspyynnön suullisesti. Aloitimme yhteistyön hänen hyväksyttyään kustannusarvioni. Asiakas toivoi nettisivujen rakenteen ja värien olevan yksinkertaisia ja hillittyjä. Päädyimme kahdeksan sivun rakenteeseen. Sivuston suurimpana kohderyhmänä ovat valokuvapalveluja haluavat henkilöt, ikään katsomatta. Sivuston koodasin HTML5-kieltä käyttäen paikallisesti, jonka jälkeen tein siirron alustavasti oman domainini alle odottamaan Kurtakon omaa domainia. Suunnittelin ja toteutin Miamaijalle myös käyntikortit. Käyntikorttien dokumentointi löytyy täältä.
4 1.3 Aikataulutus ja kustannusarvio Päivämäärä: Projektin vaihe: Tunnit: 23.2.2015 Asiakastapaaminen 1 h 13.3.2015 9.4.2015 Suunnittelu, layout vaihtoehdot 2 h 3 h 10. 13.4.2015 Sivuston toteutus 16 h 24.4.2015 Asiakastapaaminen (sähköposti) 1 h 24.4., 27.4., 28.4., 30.4.2015 Rakenteen muutos ja viimeistely 15,5 h Työtunnit yhteensä: 38,5 h
5 Kustannusarvio Kokonaistyötuntimäärä: 38,5 h 2 5 15,5 16 Asiakastapaamiset Suunnittelu Toteutus Viimeistelyt Kustannusarviossa ehdotin Kurtakolle 24 /vuosi (+ALV) maksavaa webhotellia Webbiseltä. Asiakas hyväksyi ehdotukseni ja päätimme ottaa kyseisen paketin. Asiakkaan henkilökohtaisten syiden takia pystymme vasta 10.5.2015 tilaamaan domainin, joten julkaisimme sivuston alustavasti minun domainin alle. Kustannusarvioympyrästä näkee työtuntien jakautumisen. Kokonaistyötuntimäärä oli 38,5 tuntia, joten 70 tuntipalkalla, projektin työkustannukset ovat 2695. Arvonlisäveroa ei ole laskettu summaan. Todelliset työkustannukset eivät ole noin korkeat.
6 2 SUUNNITTELU 2.1 Banneri ja Logo Sain asiakkaalta valmiin pohjan logosta. Sovimme, että teen bannerin logoa käyttäen. Asiakas halusi vaihtaa logon Angeltears-fontin Dream orphans-fonttin, joten tein Adobe Photoshoppia käyttäen kokonaan uuden logon ja bannerin. Ehdotin asiakkaalle myös flash-banneria, josta tein ensimmmäisen vedoksen. Päädyimme lopulta hylkäämään idean käytettävyyden ja asiakkaan mielipiteen takia. Kuva 1 Asiakkaan toimittama logo Kuva 2 Muokattu logo Kuva 3 Lopullinen banneri
7 2.2 Rakenne Suunnittelimme ensimmäisessä asiakastapaamisessa rakenteen, joka pysyy helppokäyttöisenä. Suunnittelin Adobe Illustratorilla rautalankamallin, johon asiakas pyysi muutaman muutoksen. Kuva 4 Rakennekaavio, sivukartta Kuva 5 ja 6 Ensimmäinen ja toinen rautalankamalli.
8 2.3 Värit Väriteemana ovat valkoisen ja harmaan sävyt. Korosteväriksi suunnittelimme petrolin vihreää, mutta jätimme sen kuitenkin pois pysyäksemme yksinkertaisessa, mutta tyylikkäässä värimaailmassa.
9 3 TOTEUTUS 3.1 Kuvasisältö Kaikki kuvat sain asiakkaalta. Kuvien käyttöoikeudet pysyivät hänellä. Muokkasin kuvista pienempiä versioita pikakuvakkeita varten. Muokkasin kuvat Adobe Photoshopilla. Kuva 8 Kuvanmuokkaus esimerkit 3.2 Verkkoteksti Asiakas toimitti minulle kuvatekstit 27.4.2015. Sivusto ei kaivannut muita tekstejä, säilyttääksemme puhtaan ilmeen.
10 3.3 Muutokset / Ongelmat Tein sivuston alkuperäisen suunnitelman mukaan, mutta asiakas toivoi vielä radikaaleja muutoksia projektin loppuvaiheessa. Rakenne muutettiin yksinkertaisemmaksi. Kahdeksan sivua supistettiin neljään. Taustavärit poistettiin ja haettiin tyylikkyyttä yksinkertaistamalla. Sivusto muutettiin kansainväliseksi ja tekstit vaihdettin englanninkielisiksi. Muutoksia tuli hyvin paljon alkuperäiseen suunnitelmaan verrattuna. Kuva 9 Muokattu rakennekaavio, sivukartta
11 4 VALIDOINTI JA TESTAUS 4.1 Validointi HTML-validaattori http://validator.w3.org/ tuotti tuloksen 0 virhettä ja 3 varoitusta. Varoitukset koskivat sisällön otsikointia. CSS-validaattori https://jigsaw.w3.org/css-validator/ tuotti tuloksen 0 virhettä. 4.2 Testaus eri laitteilla Näkymät eri laitteilla
12 Yhteensopivuus selainten kanssa: http://www.powermapper.com/products/sortsite/checks/browsercompatibility.htm
13 Laitetestaus: LAITE TULOS SAMSUNG GALAXY NOTE 2.0 / ANDROID 4.4.2 Kaikki toimii IPAD 4 (TABLETTI) Kaikki toimii HTC ONE S / ANDROID 4.1.1 Kaikki toimii 5 JULKAISU JA YLLÄPITO Sivu julkaistiin 28.4.2015 minun omistaman domainin alle. Sivusto siirtyy aikaisintaan 10.5.2015 asiakkaan omalle domainille. Ylläpito siirtyy Miamaija Kurtakolle. Opetin hänelle henkilökohtaisesti, kuinka sivuja päivitetään. 6 ARVIOINTI/YHTEENVETO 6.1 Yhteenveto Sivujen käytettävyys on ajateltu loppuun asti. Vauvasta vaariin eri-ikäiset käyttäjät osaavat suunnistaa sivuilla niiden yksinkertaisen sivustorakenteen vuoksi. Responsiivisuuden takia sivusto toimii myös eri laitteilla. Ulkoasu on selkeä ja tyylikäs.
14 6.2 Itsearviointi Haastavinta projektissa oli tyhjästä aloittaminen ja responsiivisuus. Mielestäni projekti sujui silti kaikilta osin hyvin ja sain tuotettua juuri asiakkaan haluamat sivut. Visuaaliseen toteutukseen olen tyytyväinen. Sivut toimivat ja ovat asiakkaan näköiset, mikä oli tavoitteena. Aikataulussa pysyttiin sovitusti. Asiakas oli helposti tavoiteltavissa ja sain aina vastaukset kysymyksiini. 6.3 Asiakasarviointi Susan kanssa oli helppo työskennellä yhdessä. Hänellä oli rikkaita ideoita ja hän myöskin otti toiveeni avosylin vastaan. Koska olen itsekkin opiskellut web-kurssia aikoinani, yhteinen ammattisanasto helpotti kommunikaatioitamme, koska tiesimme aina mistä puhuttiin, oli kyseessä sitten indexit, paddingit tai footterit. Nettisivuista ei tullut täysin sellaisia kuin olin kuvitellut, vaan paremmat; sivut ovat raikkaat ja simppelit, olematta kumminkaan tylsät. Valokuvat saavat oman estradinsa valkoisella pohjalla. Lopputulokseen olen enemmän kuin tyytyväinen. Susa teki upeaa työtä ja asiakastapaamisissa hän oli asiallinen ja selvästikkin hän tiesi mistä puhui. Täyden kympin suoritus! -Miamaija Kurtakko/ MmK Photo