3. luento: Suunnittelutyön dokumentointi - käsikirjoitustyyppejä

Transkriptio

1 3. luento: Suunnittelutyön dokumentointi - käsikirjoitustyyppejä Projektinhallinta ja dokumentointi Käsikirjoitus ja dokumentointi Verkkopalvelun suunnittelu- ja toteutusprojektin aloitus Asiakäsikirjoitus Tuotantokäsikirjoitus Muut dokumentit Verkkopalvelun suunnittelun ja toteutuksen jokaiseen vaiheeseen liittyy oma dokumentaationsa. Dokumenttien nimet voivat vaihdella riippuen esimerkiksi yrityksestä. Nimityksiä käytetään myös ristiin. Jokaisessa projektissa tulee yhteistyökumppanin kanssa aina sopia mitä milläkin asiakirjalla ja dokumentilla kulloinkin tarkoitetaan. 1. Sisällöntuotannon puolelle ei ole vakiintunut mitään tiettyjä formaaleja dokumenttimalleja tai pohjia. Käsikirjoitus- ja dokumenttimalleja on yhtä monta kuin on tuotantoryhmääkin. 2. Vaadittavien dokumenttien tyypit ja niiden määrä riippuu tuotantoprojektin laajuudesta ja suunniteltavasta verkkopalvelutyypistä. 3. Suunnitteludokumenttien tarkoituksena on ennen kaikkea palvella työryhmän ja tilaajan tarpeita. Lisäksi suunnitteludokumentit toimivat tuottajan ja tilaajan välisen keskustelun tukena. Erilaiset dokumentit voidaan jakaa karkealla tasolla kahteen eri ryhmään: Projektin hallintaan liittyvät dokumentit: tarjoukset, tuotantosopimukset, projektisuunnitelmat, tekijänoikeussopimukset, salassapitosopimukset, palaverimuistiot, työpäiväkirjat jne. Verkkopalvelun suunnitteluun liittyvä dokumentointi: esimerkiksi käsikirjoitusvaiheen dokumentit, synopsis, konseptisuunnitelma, asiakäsikirjoitus ja tuotantokäsikirjoitus. Projektin hallinta ja dokumentointi Jo projektin alkuvaiheessa hahmotetaan projektin tehtäväluettelo, jonka pohjalta laaditaan projektisuunnitelma. Samaten projektin alkuvaiheessa sovitaan dokumentoinnin taso. Toisin sanoen mitä dokumentteja suunnittelu- ja toteutustyöstä tässä projektissa laaditaan. Dokumentointi vaatii resursseja, joten se tulee huomioida projektin taloussuunnittelussa. (Vrt. Lukkari 2004, 14; Metsämäki 2000, ) Projektisuunnitelma Projektisuunnitelma on kuvaus projektin tavoitteista ja selvitys siitä, miten tavoitteisiin päästään. Projektisuunnitelman sisältö riippuu projektin laajuudesta, projektin tyypistä (kehitys-, tuotanto- vai päivitysprojekti). Projektisuunnitelmaa päivitetään ja täydennetään projektin kuluessa. Kuvaus projektista: lähtökohta, rajaus ja tavoitteet o Lähtökohdat: Millaisia projekteja aiheesta on tehty? Millaisia kokemuksia aiemmista projekteista? Miten sitoutunut tilaaja on? 36

2 Projektin organisointi: johtoryhmä, projektiryhmä, yhteyshenkilöt, vastuuhenkilöt o Kuka päättää miten käytössä oleva aika jaetaan eri tehtäviin? o Kuka neuvottelee suoraan tilaajan kanssa? o Kuka vastaa sisällöllisestä suunnittelusta (informaatioarkkitehtuurin suunnittelusta)? o Kuka vastaa käyttöliittymän suunnittelusta? o Kuka graafisen ilmeen suunnittelusta? o Kuka vastaa teknisen toteutuksen toimivuudesta ja testauksesta? Projektin vaiheet (taulukko 3.1) Resurssit: Tehtävät ja arvio niihin käytettävästä ajasta sekä vaadittavasta osaamisesta sekä tilaajan puolelta että toteutusorganisaation puolelta Aikataulu: projektin aloitus- ja lopetusajankohdat, päätehtävien ja niiden alatehtävien aloitusja lopetusajankohdat, tarkistuspisteet yms. Projektikalenteri, jossa huomioidaan esim. pyhät ja lomat yms. Projektin ympäristö: laitteet ja ohjelmistot Riskianalyysi Budjetti Materiaalin päivitys ja versionhallinta Materiaalin tallennus ja suojaaminen Viestintäsuunnitelma Tekijänoikeudet: Kenen vastuulla sopiminen tekijänoikeuksista? Kuka maksaa esim. käytettävän musiikin teostomaksut (sisällytetäänkö budjettiin vai maksaako tilaaja erikseen). Tarvittavat vastuusopimukset. Markkinointi Taulukko 3.1: Sisällöntuotantoprojektin vaiheet. Lähde: Lukkari 2004, Myynti 2. Suunnittelu/Määrittely 3. Tuotanto 4. Ylläpito/Seuranta 1.1 Esimyynti 2.1 Esiselvitys 3.1. Aloituspalaveri 4.1 Sisäinen ja ulkoinen seuranta 1.2 Tarjouspyyntö 2.2 Ideointi 3.2 Aineiston keruu 4.2 Projektin läpikäynti ja oppiminen 1.3 Arviointi 2.3 Synopsis 3.3 Alfa versio 4.3 Asiakastyytyväisyyden seuranta 1.4 Tarjouksen teko 2.4 Rakenteen perussuunnittelu 3.4 Hyväksyntä 4.4 Sisäinen raportointi 1.5 Tarjouksen myynti 2.5 Hyväksyntä/muutokset 3.5 Beta versio 4.5 Jatkotarjous 1.6 Tilausvahvistus 2.6 Käsikirjoitus 3.6 Tarkistukset muutokset 4.6 Päivitys 1.7 Sopimus esisuunnittelusta 2.7 Tarkka rakennesuunnittelu ja hyväksyttäminen 3.7 Beta - (master) version hyväksyntä 2.8 Tuotantotarjous 3.8 Asennus palvelimelle (master painoon) 3.9 Pakkaus (offline tuotteet) 3.10 Valmis tuote Projektin seuranta Projektin etenemistä seurataan koko projektin elinkaaren ajan. Esimerkiksi lopullisen asiakäsikirjoituksen hyväksymisen jälkeen laaditaan tuotantosuunnitelma ja tarkennetaan projektisuunnitelmaa. 37

3 Verkkopalvelun suunnittelu- ja toteutusprojektin aloitus Dokumentit: tarjouspyyntö, tarjous, projektin esitutkimuksiin ja -kartoituksiin liittyvät raportit, synopsis, toimeksianto, konseptisuunnitelma Tarjouspyyntö ja tarjous Verkkopalvelun suunnittelu- ja toteutusprojekti lähtee liikkeelle useimmiten tarjouspyynnöstä. Kun asiakas ottaa yhteyttä verkkopalvelun suunnittelu- ja tuottajatahoon hänellä saattaa olla jo valmis synopsis ja konseptisuunnitelma, joista selviää keskeiset tuotannon laajuutta rajaavat tiedot: mitä tehdään, kenelle, miksi ja milloin. Hyvin muotoiltuun tarjouspyyntöön vastaaminen on helppoa. (Esim. Lukkari 2004, ) Tarjous Tarjous kannattaa aina tehdä kirjallisena. Tällöin tarjouksen sisällöstä voidaan tarvittaessa helposti varmistua. Tarjous on juridisesti sitova. Tarjouksen jättäjä ei voi yksipuolisesti peruuttaa tarjoustaan. Kun tilaaja on vastaanottanut tarjouksen hänellä on oikeus saada tarjottu tuotanto tarjouksessa mainitulla hinnalla ja mainituilla ehdoilla. Tarjous sitoo tarjouksen jättäjää tarjouksen voimassaolon ajan. Joissakin yksittäistapauksissa tarjous voidaan peruuttaa. Esimerkiksi silloin kun tilaajan yrityksestä saadaan viime hetkellä jotakin sellaista tietoa, jonka perusteella voidaan olettaa yhteistyön olevan eettisesti arveluttavaa tai muodostavan taloudellisesti liian suuren riskin. (Esim. Lukkari 2004, ) Tavallisempaa lienee kuitenkin se, että tilaajan tarjouspyyntö sisältää liian vähän informaatiota, jotta sen perusteella voidaan laatia tarjous. Tällöin voidaan toimia eri tavoin: Tavata tilaaja ja keskustellen selvittään, mitä tilaaja haluaa ja mitkä hänen tavoitteensa ovat. Tarvittavien lisätietojen pohjalta voidaan laatia tarjous. Laaditaan vastineeksi tiukka tarjous. Tarjotaan asiakkaalle perustoiminnallisuuden sisältävä ratkaisu, jonka pohjalta palvelukonseptia voidaan kehittää eteenpäin. Tällöin pitää kiinnittää huomiota ehtoihin, jotta toteutusvaiheessa ei tule yllätyksiä. Tarjotaan asiakkaalle esitutkimus- ja kartoitustyötä. Tarkoituksena on selvittää asiakkaan tarpeet sekä selvittää ja suunnitella tarpeeseen sopiva ratkaisu. Tällainen esitutkimusprojekti edeltää varsinaista suunnittelu- ja toteutusprojektia. Esitutkimusprojekti kannattaa pitää omana kokonaisuutenaan, jolla on oma projektisuunnitelma ja budjetti. Olennaista on laatia esitutkimusta ja kartoitusta varten suunnitelma. Millä tavalla tietoa kootaan, keneltä tietoa kerätään (mikä on perusjoukko, josta halutaan tietää jotakin), miten tieto analysoidaan ja miten tulokset raportoidaan. Suunnitelmallisuus säästää sekä aikaa että rahaa. Lähtökohtien selvittäminen (yhteiskunnan lait, normit, asetukset sekä palveluntuottajaorganisaation säännöt) Verkkopalvelun perusidea ja käyttötarkoitus Vastaavat palvelut ja niiden analysointi Taloudellisen kannattavuuden perusteet 38

4 Toimeksianto Toimeksiannossa tilaaja määrittelee minkälaisen verkkopalvelun tai sisällön hän tilaa. Toimeksianto (briefing) on lähtökohtana koko suunnittelu- ja tuotantoprosessille. Toimeksianto on tilaajan vastuulla. Usein se tehdään kuitenkin yhteistyössä, sillä toimeksiannon tulee olla riittävän yksiselitteinen ja kattava, jotta molemmat sekä tilaaja että toimittaja ovat yhtä mieltä siitä, mihin lopputulokseen pyritään. (Keränen, Lamberg & Penttinen 2003, 24.) Synopsis ensimmäinen varsinainen käsikirjoitusdokumentti Ideointivaiheen tulokset tiivistetään synopsikseen, joka on siis tiivistelmä verkkopalvelun sisällöstä ja toiminnallisuudesta. Se on eräänlainen hahmotelma tai luonnos; paperi, josta selviää palvelun sisältö ja muoto. Synopsiksen tehtävä on ennen muuta tiivistää verkkopalvelun perusideat. Synopsis ei sisällä kuvallisia tai muita yksityiskohtaisia ratkaisuja. Ne vain rajoittaisivat tulevaa kirjoittamisprosessia. Synopsis on tärkeä sekä rahoittajalle, tuottajalle, toteuttavalle työryhmälle että myös käsikirjoittajalle itselleen. Synopsis on hyvä käsikirjoittamisen vaihe, koska siinä kokonaisuus ei vielä peity yksityiskohtien alle. Hyvässä synopsiksessa keskeinen idea, perusristiriita ja rakenne ovat selvästi hahmotettavissa. (vrt. Elokuvataju.) Synopsis on elokuvatuotannossa yms. paljon käytetty suunnitteludokumentti ja soveltuu perusideansa pohjalta hyvin hypermediatuotannon ja verkkopalvelun suunnittelun työvälineeksi. Suunnittelijan tai käsikirjoittajan kirjoittamassa synopsiksessa määritellään: - aihe, - kohdeyleisö, - käyttötapa- ja tarkoitus sekä - tavoite. Tämän perusteella voidaan tehdä alustava - rakennekaavio, - sisältöjäsennys, - käyttöliittymän ominaisuus- ja toimintamäärittelyt, - toiminnallisuuden määrittely, - aikataulu ja - budjetti. Synopsiksen perusteella voi etsiä mahdollisia uusia yhteistyökumppaneita tai rahoittajia palvelulle. Synopsista voidaan käyttää myös ideoista syvennettyjen hankesuunnitelmien ajatusten julkiseen testaukseen ts. mietitään kannattako koko hankesuunnitelmaa työstää tämän valmiimmaksi. Synopsiksen laatimista auttaa, jos koittaa vastata siinä seuraaviin kysymyksiin: - Mitä ollaan tekemässä? - Tuotetaanko kokonaan uusi verkkopalvelu? - Kehitetäänkö jo olemassa olevan kaltaista verkkopalvelua? Voidaanko käyttää hyväksi tai täydentää olemassa olevaa? - Onko kyse pysyvän, suhteellisen staattisen verkkopalvelun tuottamisesta vai hyvin nopeasti muuttuvan palvelun tuottamisesta? - Mikä on palvelun/sisällön laajuus? - Millaista toiminnallisuutta ja millaisia mediaelementtejä on tarpeen tuottaa? - Onko verkkopalvelun tarkoitus olla itsenäinen vai kuuluuko se osaksi jotakin palveluprosessia? 39

5 - Miksi on lähdetty hankkeeseen? - Mikä on hankkeen päämäärä ja tavoite? - Mihin ongelmiin koitetaan verkkopalvelulla saada ratkaisuja? - Mikä on keskeinen sisältö? - Kenelle sovellus tehdään? - Keitä käyttäjiä sovelluksella on? - Ketkä tekevät verkkopalvelun ja keiden kanssa? - Millainen on sovelluksen tyyli? - Millainen on sovelluksen rakenne? - Mediavalinnat - miten informaatio välitetään? - Kuinka verkkopalvelu aiotaan toteuttaa? Mikä sen idea on teknisesti, teknologisesti ja sisällöllisesti? - Mikä on sovelluksen käyttöympäristö? - Mitkä ovat hankkeen kustannukset ja resurssit? - Millä aikataululla tuotanto toteutetaan? - Mitkä ovat mahdolliset jatkotoimenpiteet? (vrt. Luukkonen 2000) Loppukevennys (Kymppiuutisten malliin)... ja jos joku ei saa aikaiseksi synopsista, niin voi arpoa itselleen synopsiksen aiheen synopsisgeneraattorilla Konseptisuunnitelma Erityisesti suunniteltaessa operatiivista verkkopalvelua, missä keskeisintä on erilaisten asiointi- ja toimintaprosessien suunnittelu synopsiksen ohella laaditaan myös ns. konseptisuunnitelma. Konseptisuunnitteluvaiheessa määritellään perusteet toteutettavan palvelun toiminnalle huomioiden organisaation strategiset tavoitteet. Siinä kuvataan palvelun toiminnallinen perusidea. Erityisesti tässä suunnitteluvaiheessa korostuu palveluprosessin suunnittelu. Palveluprosessin suunnittelussa tulee huomioidaan verkossa tapahtuvan palveluprosessin etenemisen lisäksi myös se, millä tavalla palveluprosessi etenee verkon ulkopuolella. Asiakäsikirjoitus Asiakäsikirjoituksen tarkoituksena on kuvata ja rajata verkkopalvelun asiasisältö. Asiakäsikirjoitus pyrkii konkretisoimaan synopsiksessa ja/tai toimeksiannossa esitettyjä asioita. Verkkopalvelun sisällön määrittelyn peruslähtökohtana on käyttötarkoitukseen soveltuva informaatioarkkitehtuuri (information architecture). Informaatioarkkitehtuuria määrittelevät verkkopalvelun tietosisältö sekä asiointi- ja toimintaprosessit. Yksinkertaistettuna asiakäsikirjoitus kertoo sisällön, sen rakenteen ja muodon, toiminnallisuuden sekä luonnokset käyttöliittymästä. (Vrt. Keränen, Lamberg & Penttinen 2003, 28; Metsämäki 2000, ) Asiakäsikirjoitus on luova prosessi, jonka eteneminen ja toteutus riippuu suuresti käsikirjoittajasta. Asiakäsikirjoituksen pohjalta tulisi kyetä muodostamaan käsitys lopullisesta verkkopalvelusta. Toisin sanoen asiakäsikirjoitus on runko, jonka ympärille varsinainen palvelu rakennetaan. Tästä syystä on tärkeätä hyväksyttää lopullinen asiakäsikirjoitus tilaajalla ennen varsinaista tuotantokäsikirjoituksen tekemistä ja tuotannon aloittamista. (Esim. Keränen, Lamberg & Penttinen 2003, 29.) 40

6 Asiakäsikirjoituksen sisältö Asiakäsikirjoitus kertoo: Mitä sisältöjä verkkopalveluun sisällytetään - miten laaja verkkopalvelu on. Miten sisältö jäsennetään (informaatioarkkitehtuuri) - millainen rakenne verkkopalvelulla on - miten rakenteessa liikutaan Mitä mediaelementtejä käytetään ja missä yhteydessä Miltä sisältö näyttää - informaation esitystapa ja - visuaalinen ulkoasu (lay-out) Asiakäsikirjoitus voi koostua useista osioista tai dokumenteista. Asiakäsikirjoituksen perusrunko muodostuu esim. seuraavista dokumenteista: Toiminnallisuuden kuvaus: käyttötapaus kaaviot (use case diagram) sekä käyttötapauskuvaukset (use case description) Sisällön hahmottaminen - Luettelo: pääasiat jaettu alakohtiin ja niiden tarkennuksiin - Kuvaus sivun sisällöstä ts. sisältökäsikirjoitus tai kuvakäsikirjoitus - Sivukartta, missä tieto on jaettu luettelon tai sisältökäsikirjoituksen pohjalta sivuiksi (sivu ymmärrettävä tässä joustavasti) - Rakenteiset dokumentit: sisältötason jäsennys (esim. ruokaohje: valmistusaineet, valmistusohje, välineet) dokumenttitason jäsennys (otsikko, tekstikappale, luettelo jne.) Erilaiset apudokumentit - materiaalipäiväkirja - käsite- ja miellekartat Rakennesuunnitelma ja liikkumisjärjestelmä Toiminnallisuuden kuvaaminen Käyttötapausta (use case) kuvattaessa kerrotaan, mitä käyttötapauksessa tapahtuu ja mistä asioista käyttäjä ja järjestelmä vaihtavat tietoa. Yleensä esitellään vuorovaikutustilanteen peruskulku. Tätä täydennetään edelleen kuvaten erilaiset muunnelmat ja poikkeustilanteet. (Esim. Schneider & Winters 1998, 14-38; Wiio 2004, ) UML -notaation avulla voidaan verkkopalvelun toiminnallisuus esittää havainnollisten kaavioiden avulla. Käyttötapauskaavio (use case diagram) soveltuu hyvin analyysi ja määrittelyvaiheessa selventämään sovelluksen ja käyttäjän välistä vuorovaikutusta. Lisätietoa UML-kevyt johdatus [online]. Turku: Turun yliopisto, 2004 [viitattu ]. Saatavissa pdfmuodossa: <URL: >. 41

7 Sisällön hahmottaminen Sisällön hahmottamisen pohjana voi toimia asian käsitteellinen jäsennys ja/tai verkkopalvelun toimintaprosessit, joiden pohjalta laaditaan kulloistakin käyttötarkoitusta varten sopiva verkkopalvelun informaatioarkkitehtuuri. Pienissä verkkopalveluprojekteissa saattaa riittää sivukartan tasoinen esitys sisällöstä. Laajempien verkkopalveluiden ollessa kyseessä tarvitaan yksityiskohtaisempia dokumentteja. Esimerkiksi paljon tekstiä sisältävästä palvelusta laaditaan ns. sisältökäsikirjoitus ja vahvasti kuvaan tukeutuvasta palvelusta usein ns. kuvakäsikirjoitus (storyboard). (Vrt. Metsämäki 2000, ) Luettelo on sisällysluettelon tapainen luettelo, missä pääasiat on jaettu valmiiksi alakohtiin ja niiden tarkennuksiin. Sisältökäsikirjoitus koostuu tekstistä, jossa on huomioitu jo tehdyt sisältömäärittelyt. Toisinaan sisältökäsikirjoitukseen merkitään dokumenttitason jäsennys (joskus myös informaation sisältötason jäsennys). Sisältökäsikirjoitukseen merkitään usein myös kuvaideat, kuvatekstit ja ääniosiot jne.) Kuvakäsikirjoituksena tarkoituksena on koota asiat yhden perusteeman alle. Kuvakäsikirjoitus kertoo sarjakuvamaisesti piirrettynä sen, mitä esim. videossa tai animaatiossa tapahtuu. Sivukartta jakaa sisällön ja toiminnallisuudet sivutasolle. Tässä vaiheessa verkkopalvelun rakenne alkaa hahmottua. Rakenteistetut dokumentit: Sivun tasolla informaatio jaetaan ensinäkin dokumenttitasolla (esim. pääotsikko, ingressi, alemman tason otsikko, leipäteksti, kuva teksti jne.) Toiseksi informaatio voidaan jäsentää myös sisällön näkökulmasta, jolloin hahmotetaan tietosisällön informaatioelementit. Rakennesuunnitelma ja liikkumisjärjestelmä Rakenteella tarkoitetaan yksinkertaisimmillaan sitä, mitkä asiat esitetään ja missä järjestyksessä. Rakenne jäsentää verkkopalvelun informaatiosisällön ja toimii liikkumisjärjestelmän suunnittelun pohjana. Informaatiosisällön linkittäminen käyttäjän toiminnan kannalta loogisesti ja johdonmukaisesti toisiinsa on käytettävyyden kannalta erittäin tärkeätä. (Esim. Keränen, Lamberg & Penttinen 2003, ) Erillisen rakennesuunnitelman tekeminen kannattaa. Rakenne esitetään kaavioiden ja piirrosten avulla. Tarvittaessa niitä voidaan täydentää selventävillä teksteillä. Kaikkia mahdollisia tasoja ja linkityksiä ei tarvitse suunnitelmassa esittää. Kuitenkin rakennesuunnitelmasta tulisi selvitä sivuston päätasot ja tärkeimmät liikkumismahdollisuudet. (Ibid.) Materiaalipäiväkirja Verkkopalveluprojektissa voidaan hyödyntää jo olemassa olevaa aineistoa. Materiaalikartoitus kannattaa aloittaa jo hyvissä ajoin. Siitä on hyötyä etenkin asiakäsikirjoituksen tekemisessä. 42

8 Materiaalikartoituksen tarkoituksena on käydä läpi olemassa oleva materiaali ja poimia sellaiset osat, jotka voidaan hyödyntää suhteellisen helposti kuten tietokannat, piirrokset, musiikki, valokuvat. Tekstimateriaali ja videoleikkeet ovat usein sellaisia, jotka vaativat suhteellisen paljon editointia ennen verkkoympäristöön siirtämistä. Tärkeätä on pitää yllä materiaalipäiväkirjaa. Kirjaan kannattaa merkitä mitä sopivaa on löytynyt, missä tiedostomuodossa aineisto on, millaista työstöä se ehkä vaatii ennen verkossa julkaisemista sekä aineiston tekijänoikeuksien haltija ja käyttöehdot. Näin voidaan muodostaa käsitys siitä, mitä materiaalia ehkä pitää tuottaa lisää ja valmistetaanko se itse vai teetetäänkö alihankintana. Asiakäsikirjoituksen liitteet Varsinaisen asiakäsikirjoituksessa ilmenevien asioiden ohella verkkopalvelun suunnittelutyö sisältää myös muiden asioiden suunnittelua. Myös näistä tulee laatia tarvittavat suunnitteludokumentit, jotka liitetään asiakäsikirjoitukseen. Käyttöliittymä käyttöliittymän suunnitteluun liittyvät dokumentit Visuaalinen ilme näyttöjen suunnitteluun liittyvät dokumentit - Perusasettelu (lay-out) - Typografia, tekstielementtien tyyli ja sijoittelu - Kuvallinen tyyli Mediakäsikirjoitus mediasuunnitelma - Mediavalinnat: miten eri medioiden käyttö vaikuttaa sisällön jäsentämiseen ja sen esittämiseen (esim. matkapuhelimeen vain ingressit), eri mediaelementtien käyttöön sekä ulkoasuun. Tarvittaessa laaditaan erilliset asiakäsikirjoitukset mediasta riippuen. - Mediaelementtien käyttö: tekstielementtien suunnittelu, kuvan, audion ja liikkuvan kuvan käyttö. Tekniset määrittely Käyttöliittymä Verkkopalvelun käyttöliittymä koostuu yksinkertaisimmillaan toiminnallisuutta ohjaavista elementeistä (navigointilinkit). Käyttöliittymän perusteella käyttäjän tulisi kyetä muodostamaan käsitys sivuston tarjoamista palveluista ja informaatiosta sekä hahmottamaan liikkumisen pääreitit. Verkkopalvelun käyttöliittymän tulisi olla jokaisella sivulla samanlainen. Yleensä käyttöliittymästä laaditaan mallinäyttö, missä esitetään mm. päätason navigointi. Visuaalinen ilme Rakenteen ja toiminnallisuuksien ulkoinen ilme luodaan visuaalisella suunnittelulla. Visuaalinen yleisilme luo mielikuvaa verkkopalvelusta. Usein lähtökohdaksi otetaan organisaation liikemerkki ja sen värimaailma. Monilla yrityksillä on oma graafinen ohjeistonsa, jota visuaalisessa suunnittelussa tulisi noudattaa. Yleensä suunnitteluvaiheessa perusasettelu ja visuaalinen yleisilme kannattaa hahmottaa esim. kuvankäsittelyohjelman tms. avulla ja hyväksyttää se tilaajalla. (Esim. Keränen, Lamberg & Penttinen 2003, 43.) 43

9 Perusasettelu (lay-out) määrittelee verkkopalvelun visuaalisen ulkoasun. Siinä sommitellaan tekstit, kuvat sekä muut mediaelementit tasapainoisesti. Typografialla tarkoitetaan tekstin visuaalisen ilmeen suunnittelua. Tekstin ulkoasuun vaikuttavat kirjasinleikkaus (fontti), kirjasinkoko sekä kirjasintyyli eli kirjasimen ulkoasu (lihavointi, kursiivi jne.). Kullekin tekstielementille valitaan sopiva typografia. Tekstielementtien sijoittelussa käytetään apuna tekstin välistystä (tyhjä tila), tasausta ja palstoitusta. Visuaalisessa ohjeistuksessa on yleensä mallinäyttöjen ohella tietoja käytetyistä väreistä, marginaaleista sekä typografiat, koristekuvat, logot ja informaatioelementtien sijoittelu jne. Esimerkkejä Osa esimerkeistä liitteenä. Esimerkki 1. Sisällön jäsentämisessä voi toimia apuna esim. käsite- tai miellekartta. Saavutettavuus verkkopalveluissa.. Kuva gif-muodossa. Esimerkki 2: Ruoka-allergiat. Pirkanmaan Allergia- ja Astmayhdistys. Luettelo. Esimerkki 3: Storyboard, kuvasuunnitelma. Elokuvantaju, Taideteollinen korkeakoulu Esimerkki 4: Kuvakäsikirjoitus. Tietokoneanimaatio. Teknillinen korkeakoulu Esimerkki 5: Asiakäsikirjoitus ja rakennekaavio (pieni sivusto) Esimerkki 6: Mallinäyttö Tuotantokäsikirjoitus Kun tilaaja on hyväksynyt lopullisen asiakäsikirjoituksen, se laajennetaan tuotantosuunnitelmaksi. Tuotantosuunnitelman keskeisin dokumentti on tuotantokäsikirjoitus. Se on yleensä tarkka tekijöille laadittu ohje tuotantoon liittyvistä asioista. Tuotantokäsikirjoituksen pohjalta määritellään rakenne, laajuus, mediaelementit, visuaalinen ulkoasu ja materiaalin tuottaminen. (Esim. Lukkari 2004, ) Perusideana on se, että kukin tuotantoon osallistuva saa ohjeistuksen oman työnsä tueksi. Esim. äänisuunnittelija pystyy toteuttamaan tarvittavat äänet. Pääosin sisältö on jo olemassa kun siirrytään tuotantokäsikirjoitusvaiheeseen. Tuotantokäsikirjoitus ohjaa verkkopalvelun tekijää "kokoamaan" lopullisessa asiakäsikirjoituksessa määritellyllä tavalla. Tuotantokäsikirjoitus toimii myös dokumenttina tehdyistä ratkaisuista. Hyvin tehty ja kommentoitu tuotantokäsikirjoitus sisältää arvokasta tietoa seuraavaa projektia varten. Tuotantokäsikirjoitusta ei yleensä esitellä tilaajalle. 44

10 Tuotantokäsikirjoitus pitää sisällään seuraavat asiat: Mediaelementtien tuotanto-ohjeet - Videoiden, kuvien, äänen tuotanto-ohjeet, pakkausmenetelmät - Animaatioiden ja videoiden kuvakäsikirjoitukset - Tiedostomuodot ja ohjelmalisäkkeet (plug-in) Verkkopalvelun rakenne, rakenteessa liikkuminen, toiminnallisuus - Tuotannollisia ohjeita - Materiaalin varmuuskopiointi - Materiaalin hallinta tuotantovaiheessa (aineistojen sijainti) - Käytetyt tiedostomuodot - Käytetyt ohjelmistot, versiot, ohjelmointikielet jne. Visuaaliset ohjeet: - Perusasettelu (lay-out) - Kuvakoot - Tiedostomuodot - Värimäärät - Väripaletit, pakkausmuodot Liitteeksi tuotantokäsikirjoitukseen liitetään myös tekninen määrittelydokumentti. Tuotantokäsikirjoitus laaditaan usein lomakkeen muotoon esim. "screen-by-screen" lomake. Myös ruutusuunnittelua käytetään. Tällöin asiakäsikirjoitus "kasvatetaan " vähitellen ruutusuunnitelmasta sarakemalliseksi tuotantokäsikirjoitukseksi. Esimerkki 7: Screen-by-screen tuotantokäsikirjoitus. Helsingin kauppakorkeakoulu Esimerkki 8: Ruutusuunnitelmaan pohjautuva sarakamallinen käsikirjoitus. Lisätietoa Jaakkola, M. Multimedian tuotantoprosessi [online]. Helsinki: Helsingin liiketalouden ammattikorkeakoulu, 2003 päivitetty [viitattu ]. Ruutusuunnitelma. Saatavissa www-muodossa: <URL: >. Muut dokumentit Palaverimuistiot Projektin palavereista kannattaa aina laatia muistiot; tiivis kuvaus siitä mitä päätettiin ja sovittiin. Palaverimuistion tekemiseen ei kannata uhrata kohtuuttomasti aikaan. Etenkin tuotantoryhmän sisäisissä palavereissa riittää usein tiivis listaus esim. ranskalaisin viivoin. (vrt. Lukkari 2004, ) Asiakaspalavereista kannattaa aina laatia muistio ja lähettää se asiakkaalle. Muistio toimii tukena myös tilaajan suuntaan; tilaaja on tietoinen siitä, missä vaiheessa toteutus on ja millaisia kannanottoja tai päätöksiä tilaajalta mahdollisesti seuraavaksi odotetaan. 45

11 Projektin alkuvaiheessa kannattaa sopia siitä, millainen käytäntö muistioiden laatimisessa otetaan käyttöön. Palaverimuistiossa on yleensä seuraavanlaiset asiat: Projektin nimi, paikka ja päiväys Osallistujat Käsitellyt asiat Päätetyt asiat Jatkotoimenpiteet: kuka tekee mitäkin ja mihin mennessä? Työpäiväkirjat Työpäiväkirja toimii työn seurantana ja kommentoinnin apuvälineenä. Vapaamuotoiseen päiväkirjaan on hyvä merkitä mitä on tehty, miksi tiettyihin ratkaisuihin on päädytty, miten ajankäyttö onnistui, mitä ongelmia mahdollisesti esiintyi ja miten ne ratkaistiin. (Vrt. Lukkari 2004, 108.) Verkkopalvelun suunnitteluun ja toteutukseen liittyy monia muitakin dokumentteja. Esimerkiksi tekniset määrittelydokumentit, käyttäjien ohjeet, ylläpidon sekä sisällöntuotannon ja -hallinnan ohjeistukset jne. Yhteenveto tarvittavista dokumenteista Ulla Lukkari (2004) on koonnut taulukon, johon on koottu verkkopalvelun sisällöntuotannossa käytettävät dokumentit sisällön ja tarkoituksen mukaan. (Lukkari 2004, 109.) Dokumentti Palaverimuistio Tarjous Projektisuunnitelma Konseptisuunnitelma Synopsis Asiakäsikirjoitus Tuotantokäsikirjoitus Työpäiväkirja Tarkoitus Dokumentti siitä, mistä projektipalaverissa on puhuttu, mitä päätetty ja miten työskentelyä jatketaan. Juridisesti sitova myynnin väline, väline organisaation ulkoisessa viestinnässä. Kuvaus projektin tavoitteista ja toimet niiden saavuttamiseksi: kuka, mitä, miksi, koska, kenelle, miten, millä riskillä? Tarkennus projektisuunnitelmaan ja erittely sisällöstä, tuotteesta, käyttäjistä, aikataulusta, resursseista ja alustavasta budjetista. Tiivistelmä projektin sisällöstä, tavoitteista, laajuudesta: mitä, kenelle, miksi ja miten? Toimii pohjana asiakäsikirjoitukselle. Kuvaus työryhmälle ja tilaajalle tuotteen sisällöstä, rakenteesta, toiminnallisuudesta, ulkoasusta, mediaelementeistä jne. Toimii pohjana tuotantokäsikirjoitukselle. Ohjeistus työryhmälle tuotannon toteuttamiseksi. Sisältää tekniset ja visuaaliset määrittelyt, mediamuodot, toiminnallisuuden, tarkan rakenteen, aineistot jne. Työryhmän dokumentti, joka sisältää selitykset mitä on tehty ja miksi. Poikkeamat sekä perustelut ratkasiui8lle. 46

12 Lähteet: Keränen, V., Lamberg, N. & Penttinen, J Digitaalinen viestintä. Jyväskylä: Docendo Finland Oy. Lukkari, U Digitaalisen sisältötuotantoprojektin hallinta. Helsinki: Edita Publishing Oy. Metsämäki, M Verkkopalvelun suunnittelu. Helsinki: Edita Oy. Schneider, G. & Winters, J.P Applying Use Cases. A Practical Guide. Reading (MA.): Addisson-Wesley Longman Inc. Wiio, A Käyttäjäystävällisen sovelluksen suunnittelu. Helsinki: Edita Publishing Oy. 47

13 Bobby Wave Accessibility eaccessibility (tuotteen ominaisuutena) Universal Usability (tuotteen ominaisuutena) Accessible Design, Adaptable design, Barrier Free Design (suunnittelun tavoitteena) Universal Design Inclusive Design (suunnittelun tavoitteena) Design for All (suunnittelun tavoitteena) W3C ISO standardi Vammaisjärjestöjen suositukset JHS:n suositukset EU direktiivit Ihmisoikeudet Perustuslaki Toimintaprosessit Tekninen toteutus Sisältö Heuristiikat Käyttäjäarviointi Asiantuntija-arviointi Automaattiset välineet Ulkoasu Välineiden puute Kriteerien puutteellisuus Arvioijien tieto- ja taitotaso Järjestöjen suositukset Erilaiset säädökset Kohteet Arviointitavat Adaptiivinen toteutus Yksi kaikille toteutus Eettisyys ja tasavertaisuus Palvelun tai informaation saatavuus Erityisryhmät Käyttötilanne Haasteet Mukana myös käytettävyys Arviointi Säädökset ja suositukset Arvioinnin tulokset Palaute Toteutus Käyttäjä Arviointinäkökulma Ohjaavat suunnittelua Arviointi ohjaa suunnittelua Teoreettinen näkökulma 2004 Hypermedian jatko-opintoseminaari Sokeus Vaikea heikkonäköisyys Heikkonäköisyys Värisokeus Kuurous Heikkokuuloisuus Saavutettavuus verkkopalveluissa Vanhukset Lapset Suunnittelussa huomioidaan vaatimukset, jotka liittyvät käyttäjiin, käyttötarkoitus, päätelaitteisiin ja informaatiosisältöön. Suunnittelunakokulma Näköaistin rajoitukset Kuuloaistin rajoitukset Toteutuksen näkökulma Ikä Suunnittelu ohjaa toteutusta Käyttäjät Adaptiivinen sisaltö Räätälöity ratkaisu Yksi versio "kaikille" Puhekyvyttömyys Äänivirheet Äänihäiriöt Änkytys Puheen tuottamisen ja ymmärtäminen Dysartria Afasia Lihasheikkous Pakkoliikkeet Dyspraksia Dysfasia Halvaantuminen Oppimisen ja Motoriikka Tuntoaistin puuttuminen Koordinointiongelmat Raajojen puuttuminen Liikkeiden jäykkyys omaksumisen tarve Oppimistyylit Tieto- ja taitotaso Kognitiiviset tekijät Käyttötilanne Päätelaitteet Käyttötarkoitus CC/PP UAProf Menetelmät Erilaiset päätelaitteet Erilaiset käyttäjät Erilaiset käyttötilanteet Rajoittavia tekijöitä Muut Monikanavajulkaiseminen Transcoding Hahmottamisongelmat Lukihäiriö (dyslexia) Muistihäiriö Kirjoitushäiriö (dysgrafia) Tarkkaavaisuuden häiriöt Keskittymisvaikeudet Mielenterveysongelmat Taipumus eplileptisiin kohtauksiin Kehitysvamma Informaatiolukutaito Kulttuuriset tekijät Kielitaito Tietotekniset taidot Mobiili Pimeä, sumuinen tai savuinen tila (näkö) Meluisa, pakotettu hiljaisuus (kuulo) Suojapuku tms. vaatetus (liikkeiden koordinointi) Alkoholin tms. vaikutuksen alainen, paniikki (kognitiiviset kyvyt) Mediaelementit Informaatiosisältö Informaatioarkkitehtuuri Vaadittava toiminnallisuus Laitteen ominaisuudet esim. näytön koko Verkkoyhteys Sovellukset Rakenteiset dokumentit Ohjelmallisesti toteutettu Ontologiat XML Rakenteinen tieto CSS Tyylikielet XSL esim. PHP Tietokannat

14 Esimerkki 2: Luettelo on sisällysluettelon tapainen luettelo, missä pääasiat on jaettu valmiiksi alakohtiin ja niiden tarkennuksiin. Ruoka-allergiat. Pirkanmaan Allergia- ja Astmayhdistys. 1. Tietoa 1.1. tietoa ruoka-allergioista ruoka-allergia ja yliherkkyys kananmuna-allergia maitoallergia vehnä-ruis-ohra-allergia muut ruoka-allergiat ristiallergiat 1.2. allergiaruoan ABC lasten ja aikuisten ruoka-allergioiden eroja lista kielletyistä ruoka-aineista ruokaostoksilla ruoka-aineiden valinta ruoanvalmistus vinkkejä maustamiseen ruokailu kodin ulkopuolella sallitut ja kielletyt ruoka-aineet -lomake kahden viikon ruokalista voinko käyttää? 1.3. tuotteita ruoka-allergiselle viljavalmisteet leivät ja leivonnaiset korvaavat maitovalmisteet lihavalmisteet muut valmisteet 1.4. hyödyllisiä linkkejä 2. Ruokaohjeita 2.1. kananmuna-allergisille pääruoat jälkiruoat suolaiset leivonnaiset makeat leivonnaiset 2.2. maitoallergiselle pääruoat jälkiruoat suolaiset leivonnaiset makeat leivonnaiset jne.

15 Pirkanmaan allergia- ja astmayhdistys ry AMT Sivuston asiakäsikirjoitus: tammi- helmikuu 2004 Osio: etusivu Taso Nro Tiedostonimi Sisältö Linkit Muuta 1 #1 index.htm Etusivu on jaettu kolmeen kenttään taulukoilla! 1.palsta: neuvonta ja yhteystiedot, jonka alla lyhyt ajankohtainen toivotus ja valokuva tms. 2. palsta: Ajankohtaista: ensinnäkin yleinen ingressi tulossa olevista asioista ja teemoista. Tämän alla lista seuraavista tulossa olevista tapahtumista - niistä lyhyt ingressi (mitä, milloin, missä) sekä linkit lue lisää >> Vuoden teema: lyhyt kuvaus kuluvan vuoden teemasta ja linkki syvemmälle sivustoon, missä asiasta kerrotaan lisää 3. palsta: Päätason navigointi Kuvat: 1. Ajankohtaan liittyvä ilmeikkyyttä tuova koristekuva 2. Allergia- ja Astmaliiton logo : allergia_liitto_iogo3.gif Linkit 2. tason sivuille: yhdistys, neuvonta, tapahtumat, allergia ja astma, ruoka-allergiat ja yhteystiedot Muut linkit: Sivun ajankohtaisista tapahtumista linkki "lue lisää" tapahtumakalenteriin aina kunkin tapahtumatyypin omalle sivulle. Linkki mahdollisen kuvagallerian kotisivulle (jos käytetty gallerian valokuvia sivulla) Linkki: Allergia- ja Astmaliiton sivulle (liito logo) Sivun alalaitaan linkki sivulle, missä kerrotaan sivuston tekijänoikeuksista ja teknisestä toteutuksesta Päivitetty AMT Nro 1: Tyylitiedosto: etusivu.css Muuta: Sivulla jokin ajankohtainen valokuva tai piirros elävöittämässä sivuston ilmettä. Joko eikaupalliseen käyttöön ilman erillistä lupaa käytettäviä valokuvia kuvagallerioista kuten FreeFoto.com tai omaa tuotantoa. Allergia- ja astmaliiton logo: saatu liitolta lupa käyttää tietyin ehdoin. Ks. dokumentti nro 001 1

16 Pirkanmaan allergia- ja astmayhdistys ry AMT Osio: yhdistys Taso Nro Tiedostonimi Sisältö Linkit Muuta 2 #2 yhdistys.htm Lyhyt kuvaus yhdistyksen toiminta-ajatuksen pääkohdista (sekä lyhyet kuvaukset osion alasivujen sisällöstä) Kuvat: Allergia- ja Astmaliiton logo: allergia_liitto_iogo3.gif 3 #2.1 toiminta_ajatus. htm Yhdistyksen toiminta-ajatus: vaikuttaminen Pirkanmaalla. Lisäksi lyhyet selvitykset yhdistyksen keskeisistä toimintatavoista esim. kotieläimetön luokat ja päiväkodit, allergiakodit, pujotalkoot. Myös selvitys yhdistyksen maantieteellisestä toiminta-alueesta (kartta tms.) Kuvat: Allergia- ja Astmaliiton logo: allergia_liitto_iogo3.gif 3 #2.2 hallitus.htm Hallituksen jäsenet TULOSSA: puheenjohtajan terveiset (kun teksti saadaan valmiiksi se lisätään tälle sivulle) Linkit etusivulle ja 2. tason sivuille: neuvonta, tapahtumat, allergia ja astma, ruoka-allergiat ja yhteystiedot Linkit 3. tason sivuille: toimintaajatus, hallitus, jäsenetuudet Muut linkit: Allergia- ja Astmaliiton sivulle (liito logo) Linkit etusivulle ja 2. tason sivuille: yhdistys, neuvonta, tapahtumat, allergia ja astma, ruokaallergiat, yhteystiedot Linkit 3. tason sivuille: hallitus, jäsenetuudet Muut linkit: Allergia- ja Astmaliiton sivulle (liito logo) linkit Tampereen kaupungin kotieläimettömät luokat yms. sivuille - ei löydy!!! Linkki Pirkanmaan liiton sivuilla olevaan karttaan. Linkit etusivulle ja 2. tason sivuille: yhdistys, neuvonta, tapahtumat, allergia ja astma, ruokaallergiat ja yhteistiedot Linkit 3. tason sivuille: toiminta- Nro 2 Tyylitiedosto: etusivu.css Nro 3 Tyylitiedosto: etusivu.css Nro 4 Tyylitiedosto: etusivu.css 2

17 Pirkanmaan allergia- ja astmayhdistys ry AMT Kuvat: ajatus, jäsenetuudet Allergia- ja Astmaliiton logo: allergia_liitto_iogo3.gif Muut linkit: Hallituksen jäsenet hallituksen_jasenia.jpg (Tiina Kangas) Allergia- ja Astmaliiton sivulle (liito logo) 3 #2.3 jasenetuudet.ht m Jäseneksi liittyminen (miten, mitä maksaa ). Sivuille ei tule omaa jäseneksi liittymislomaketta, vaan linkki liiton sivuilla olevalle lomakkeelle. Jäsenetuuksista kertominen. mm. vuokraus ja myytävät artikkelit Kuvat: Allergia- ja Astmaliiton logo: allergia_liitto_iogo3.gif Linkit etusivulle ja 2. tason sivuille: yhdistys, neuvonta, tapahtumat, allergia ja astma, ruokaallergiat, yhteystiedot Linkit 3. tason sivuille: toimintaajatus, hallitus Muut linkit: Allergia- ja Astmaliiton sivulle (liito logo) linkki Allergia- ja Astmaliiton sivuilla olevaan jäsenlomakkeeseen Nro 5 Tyylitiedosto: etusivu.css HUOM! Tarpeen mukaan 4. tason sivuja esim. myytävät artikkelit Osio: neuvonta Taso Nro Tiedostonimi Sisältö Linkit Muuta 2 #3 neuvonta.htm Neuvontaa antavien henkilöiden yhteystiedot, ajat sekä kuvat Kuvat: Allergia- ja Astmaliiton logo: allergia_liitto_iogo3.gif Terhin kuva terhi2.jog Outin kuva outi2.jpg Niinan kuva niina,jpg Linkit etusivulle ja 2. tason sivuille: yhdistys, tapahtumat, allergia ja astma, ruoka-allergiat ja yhteystiedot Muut linkit: Allergia- ja Astmaliiton sivulle (liito logo) Korostettu linkki Ruoka-allergiat sivulle Nro 6 Tyylitiedosto: neuvonta.css 3

18 Pirkanmaan allergia- ja astmayhdistys ry AMT Linkki 3. tason sivulle > lastenhoito.htm Korostettu linkki yhteystiedot sivulle 3 #3.1 Lastenhoito.htm Kuvaus Nääsvillen kanssa käynnistetystä lastenhoitopalvelusta Linkit etusivulle ja 2. tason Nro sivuille: yhdistys, tapahtumat, Tyylitiedosto: allergia ja astma, ruoka-allergiat ja Kuvat: neuvonta.css yhteystiedot Nääsville ry:n logo naasville_logo.gif Muut linkit: RAY:n logo RAYntuella2.gif (RAYn sivulla kehotus käyttää logoa RAYm rahoittamasta projektista kerrottaessa ) TULOSSA: Tampereen kaupungin virallinen tunnus tampere_logo.gif (kysyttä lupaa Tampereen kaupungin viestintätoimisto Arja Eder ) Allergia- ja Astmaliiton sivulle (liito logo) Osio: tapahtumakalenteri Taso Nro Tiedostonimi Sisältö Linkit Muuta 2 #4 tapahtumat.htm Tapahtumakalenteri (vrt. Jäsentiedotteen mukaan) ja linkit eteenpäin alasivuille kutakin tapahtumaa koskeviin tarkempiin tietoihin. H2 tason otsikot kuukausittain Kuvat: Allergia- ja Astmaliiton logo: allergia_liitto_iogo3.gif Linkit etusivulle ja 2. tason sivuille: yhdistys, neuvonta, allergia ja astma, ruoka-allergiat, yhteystiedot Linkit 3. tason sivuille: yleisöluennot, kurssit, vertaistoiminta, liikunta, virkistys, kokoukset ja arkisto Muut linkit: Allergia- ja Astmaliiton sivulle (liito Nro 8 Tyylitiedosto: tapahtumat.css 4

19 Pirkanmaan allergia- ja astmaliitto Kotisivujen rakenteen luonnos 3 muokattu #1 etusivu numerot viittaavat asiakäsikirjoitukseen #2 yhdistys #3 neuvonta #4 tapahtumakalenteri #5 allergia ja astma #6 ruokaallergiat #2.1 toimintaajatus #4.1 yleisluen- not #5.1 vinkkejä allergisille #6.1 tietoa ruokaallergioista #2.2 hallitus #4.2 kurssit ja muu koulutus #5.2 ääkärin palsta #6.2 termistö #2.3 jäsenetuud et #4.3 vertaistoiminta #6.3 vinkkejä #2.4 yhteystiedot #4.4 liikunta #6.4 ohjeita #4.5 virkistys #6.5 tuotteita #4.6 sääntömäärä inen kokous #4.7 arkisto

20 Tunniste: Verdana, Arial, Helvetica size=120% bold väri:#4b599b taustaväri #C7E9F4 kuvanauha koko 700 x 43 pikseliä Pääotsikko H1 väri:#4b599b Verdana, Arial, Helvetica Alaotsikko H4 väri:#4b599b Verdana, Arial, Helvetica Lisäinfo size=80% väri:# Arial, Helvetica Leipäteksti size=defaulkt väri:# Arial, Helvetica

21 Lilan sävyjä CC6699 RGB 204, 102, 153 CC3399 CD69C9 D8BFD8 C71585 RGB 204,51,153 RGB 205, 105, 201 Orchid RGB 216, 191, 216 Thistle RGB 199,21, 133 Medium Violet Red

22 Sinisen sävyjä 0099CC RGB 0, 153, 204 B0C3D3 4682B4 6495ED 87CEEB RGB 176,196,222 Light Steel Blue RGB 70,130, 180 Steel Blue RGB 100,149, 237 CornFlower Blue RGB 135,206, 235 SkyBlue

23 Ruutusuunnitelma Jäsenetuudet (jasenetuudet.html) Kuvaus Visual Teksti Navigointi Kommentit Muuta Sivulla kerrotaan jäsenetuudet, jäsenmaksu ja maksutavat Peruslayout Tyyliopas, liite 1 Kuva nro 14 Kuva nro 14 vaihdettu kuvaan nro 16. hyväksytty AMT, JK, KA H1 Pääotsikko: Jäsenetuudet H2 Jäsenyys tarjoaa mielenkiintoisia etuuksia leipäteksti nro 98 /massa98.rtf Sivuston perusnavigointi Polku Lisäksi: linkki tulostusversioon :teksti98.pdf AMT: kuva nro 14 liian tumma: vaihdettava JK: ehdotus: tilalle kuva nro 16 leipäteksti massa98.rtf hyväksytty KA