MmK PHOTO. Projektidokumentaatio

Transkriptio

1 MmK PHOTO 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... 14

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

5 4 1.3 Aikataulutus ja kustannusarvio Päivämäärä: Projektin vaihe: Tunnit: Asiakastapaaminen 1 h Suunnittelu, layout vaihtoehdot 2 h 3 h Sivuston toteutus 16 h Asiakastapaaminen (sähköposti) 1 h 24.4., 27.4., 28.4., Rakenteen muutos ja viimeistely 15,5 h Työtunnit yhteensä: 38,5 h

6 5 Kustannusarvio Kokonaistyötuntimäärä: 38,5 h ,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 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 Arvonlisäveroa ei ole laskettu summaan. Todelliset työkustannukset eivät ole noin korkeat.

7 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

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

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

10 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 Sivusto ei kaivannut muita tekstejä, säilyttääksemme puhtaan ilmeen.

11 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

12 11 4 VALIDOINTI JA TESTAUS 4.1 Validointi HTML-validaattori tuotti tuloksen 0 virhettä ja 3 varoitusta. Varoitukset koskivat sisällön otsikointia. CSS-validaattori tuotti tuloksen 0 virhettä. 4.2 Testaus eri laitteilla Näkymät eri laitteilla

13 12 Yhteensopivuus selainten kanssa:

14 13 Laitetestaus: LAITE TULOS SAMSUNG GALAXY NOTE 2.0 / ANDROID Kaikki toimii IPAD 4 (TABLETTI) Kaikki toimii HTC ONE S / ANDROID Kaikki toimii 5 JULKAISU JA YLLÄPITO Sivu julkaistiin minun omistaman domainin alle. Sivusto siirtyy aikaisintaan 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.

15 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