1

Mobiili- ja verkkoviestinnän tuotannon haasteetAntti LeinoDirector / PlannerMRM Worldwide

antti@lowreality.comlowreality.blogspot.com

2

Miten web (www) toimii

• Web perustuu tietoverkkoon, jossa on insinöörien sopimat säännöt, protokollat, tietojen välittämiseen hajautetusti tietokoneiden välillä

• Web-selain on fyysikon fyysikolle kehittämä tietokoneohjelma, jolla piti alunperin välittää informaatiota fyysikoiden välillä.

• Informaatio näytetään “sivu”-käsiteen avulla.

• Sivu on tekstiä ja linkkejä muihin tiedostoihin (esim kuva-tiedotoihin)

• Sivulle voi sijoittaa linkin Flash ym tiedostoon, joka taasen näyttää kaiken halutun informaation rikkaammassa muodossa

• (x)html on hyvin yksinkertainen“ohjelmointikieli”, jota tarvitaan sivun koostamiseksi.

• Sivut sijaitsevat web-palvelintietokoneella, josta selaimet käyvät hakemassa kopiota paikallisesti tietokoneen ruudulla näytettäväksi

• Web täytti syksyllä 2006 15 vuotta.

3

Digitaalisen tuotannon erityispiirteitä

• Julkaisu- ja toteutusteknologian nuoruus

• Standardien jatkuva muutos

• Teknologialäheisyys

• Suunnittelijalla usein tuotantovastuu loppuun saakka

• Julkaisunopeus

• Leviämisnopeus ja globaalisuus

• Käytettävyyden korostuminen

• Softasuunnittelun sääntöjen mukailu

• Huomattavan paljon uudelleensuunnittelua ja päivittämistä

• Esteettömyys

• Käyttöympäristön ei-arvattavuus (ruudun koko, resoluutio, fontit, selainversio)

• Jakelu ei ole valvottavissa

• Rajoitteet taitossa (HTML, cms)

• Rajoitteet kuvan laadussa (gif, jpeg, png)

• Vierailijalla ei ole ymmärrystä sivuston koosta, 2-ulotteisuus

• Vuorovaikutus kävijän kanssa, pullin mittaminen

• Opastamisen tärkeys

4

Mobiilitoteutuksesta

• Mobiilissa sisällönvälityksen kustannukset

• Mobiilissa kustannuseriä lyhytsanomanumeroista

• SMSM/MMS/Java/XHTML -ratkaisujen eristyneisyys

• Päätelaitteiden kirjo

• Kuluttajasuoja

5

Tyypillisen web-projektin vaiheet

• Vaihe 1: Projektin määrittely

• Vaihe 2: Sisällön ja rakenteen kehittäminen

• Vaihe 3: Visuaalinen suunnittelu

• Vaihe 4: Tuotanto & laadunvarmistus

• Vaihe 5: Julkaisu & seuranta

• Iteratiivinen prosessi

• Vaiheet päällekkäisiä

6

Vaihe 1 - Projektin määrittely

7

VAIHE 1 - Projektin määrittely

• Tietojen kerääminen

• Asiakasselvitys ja vaatimukset• yleistä tietoa, tuotteet & palvelut• toimialan analyysi (jos mahdollista)• kohdeyleisö ja tavoiteltu toiminta• toivottu yleisvaikutelma

• Sisältövaatimukset

• Teknologiamahdollisuudet ja rajoitukset

• www-palvelin jonne lopputulos sijoitetaan

• markkinointi- & ylläpitoaktiviteetit

8

Keskusteluiden, selvitysten ja tutustumisen analyysin jälkeen pitäisi olla ymmärrys seuraavista asioista

• Sivuston tavoitteet – Mitkä ovat yleiset päämäärät? Mitkä ovat bisnestavoitteet? Mitä muita tavoitteita saavutetaan? Mieti seuraavia asioita: käytettävyys, sävy, havainnointi ja viesti.

• Yleisön ymmärtäminen – Mikä on oletetun kävijäkunnan demografia ja sen käyttäjäprofiilit? Käyttäjäprofiili ottaa demografiset ominaisuudet ja antaa esimerkkikävijälle oikean nimen ja persoonan. Kävijöiden tekniset valmiudet?

• Aikaisempi materiaali. Jotta tiedät mitä on tehty aikaisemmin ja mitä ei kannata uudestaan tehdä.

• Sävy – minkälaista sävyä (tone-of-voice) asiakas haluaa? Mihin hän haluaa kävijän kiinnittävän huomionsa (havainnointi)? Sofitikoitu? Sliipattu? Hauska? Uskottava? Turvallinen? Edullinen? Tee selvä tulkinta tästä, koska luova toimeksianto pohjautuu siihen.

• Laajuus – mitkä ovat projektin rajat kaikista mahdollista näkökulmista (budjetti, aikataulu, luova ratkaisu, tekniset tarpeet ja koko ylipäätään)? Budjettia ei tehdä ilman tätä tietoa!

• Teknologia – mitä innovatiivisia tekniikoita asiakas odottaa käytettävän? Back-end/front-end? Tee teknisten tarpeiden määrittely. Tunnukset palvelimille.

• Ylläpito – mikä on asiakkaan näkemys sivuston tulevista päivityksistä? Muotoile jokin perusajatus, kuinka usein ja missä määrin sivustoa päivitetään. Ylläpitoselvitys antaa lisätietoa.

• Yhteydenpito – Ketkä ovat mukana projektissa?

9

Luovan tehtävänannon teko

• Projektin tiivistelmä (mitä, kenelle, miksi)

• Havainnointi/sävy/ohjeistus (toivottu)

• Viestintästrategia (asiakas)

• Kilpailutilanne (asiakas)

• Haluttu viesti yhdellä lauseella

• Sisäiseen käyttöön

10

Projektisuunnittelu

• Listaa tavoitteet ja päämäärät sekä yksityiskohdat, rajaukset ja oletukset.

• Sivujen määrä ja tuotannon koko? • Maksaako asiakas kuvat tai muun materiaalin? • Toimittaako asiakas kaiken sisältömateriaalin? Lisäkustannuslomake asiakkaan

pyytämiin muutoksiin.• Flash vai html -sivusto

• Budjetin laadinta• 10-20% puskuri yllättäviin menoihin tai ulkopuolisiin kustannuksiin.

• Aikataulujen teko

• Mitä toimitetaan ja kenelle?

• Projektitiimin kokoaminen

• Projektin testialueen toteuttaminen palvelintietokoneelle

• (Käytettävyyden testauksen suunnittelu)

• Projektin käynnistämien

11

Tuotannon projektointi

• Sivuston laajuus

• Sisältöelementtien määrä ja muoto, erityisesti animaatiot,multimedia, ohkjelmoitavat asiat, lomakkeet ja niiden käsittely

• Kuka tekee grafiikan optimoinnin?

• Kuka koostaa sivuston?

• Kuka kirjoittaa tekstit?

• Onko sivukartta ajantasalla (tai sisältösuunnitelma, käsikirjoitus)?

• Kuka julkaisee sivuston (tiedostojen siirto palvelimelle)?

• Kuka hyväksyy lopputuotoksen?

• Jokainen muutos - erityisesti taittoon liittyvät muutokset - tässä vaiheessa aiheuttaa aikatualun venymisen ja budjetin kasvun.

12

Asiakkaan hallinnasta

• Jos asiakas allekirjoitti paperin, laita se talteen. Tulosta hyväksynnän sisältävä maili.

• Pyydä mailitse vahvistus (tai lähetä pyynnöt) suulliseen hyväksyntään.

• Pidä odotukset realistisina

• Kommunikoi. Jatkuvasti. Kerro missä mennään. Mitä tapahtuu seuraavaksi?

• Testipalvelin

• Monitoimittajaprojekti

13

Millainen on hyvä maksava asiakas www-projektissa?

• Hyvä asiakas- tavoitteisiin suuntautunut- keskittyy kokonaiskuvaan- vastaan asiakaskyselyyn tarkasti ja

selkeästi- ymmärtää verkkoympäristöä ja

kehitysprosessia- antaa lopullinen hyväksynnän ja

kuittauksen- on yhtä mieltä aiktaulusta ja budjetista (ja

lopputuloksesta)- vastaa maileihin ja puhelimeen- on lähestymistavalta tiimikeskeinen- toimittaa sisällön (lähes) ajallaan- on osa ratkaisua eikä osa ongelmaa

•Huono asiakas- asenne on “nopeasti-sivut-pystyyn”- vaatimukset aikataulun suhteen ovat epärealistiset

- ei tiedä, mitä sisällön pitäisi olla, mutta haluaa sen näyttävän “coolia”

- pyytää tekemään nopeasti “ensimmäisen version”, koska varsinainen versio tehdään sitten sen jälkeen

- ei pysty antamaan lopullista hyväksymistä eikä saata projektipäällikköä yhteyteen päätöksentekijöiden kanssa

- asiakasselvitykseen ei löydy aikaa, viittaa aina jo tehtyihin dokumenteihin ja lupaa toimittaa ne tiimille

- pieni budjetti, deadline nopeasti- ei kommunikoi, ei pysty tekemään päätöksiä, ei vastaa maileihin tai puheluihin

- muuttaa mieltään jatkuvasti- haluaa hoitaa itse luovan puolen “säästääkseen rahaa”

14

Roolit ja resurssit

• Visuaalinen- / käyttöliittymäsuunnittelija

• Sisältö- / informaatiosuunnittelija, copy writer

• Käyttöliittymäohjelmoija / koostaja / site builder

• Animaattori

• Tuotanto-AD

• Flash-ohjelmoija

• Tekninen ohjelmoija

• ...

15

Tuotantotyökalut

• Layout-suunnitteluun ja grafiikan tuottamiseen (gif, jpeg, png)• Adobe Photoshop

• Sivujen koostamiseen (HTML)• Macromedia Dreamweaver• Notepad, BBEdit

• Sivujen koostamiseen (Rich Media)• Macromedia Flash

• Yksittäiset animaatiot• Adobe ImageReady (gif-animaatiot)• Macromedia Flash (flash-animaatiot)

• Video- ja audiosisällöt• Finalcut Pro, Adobe Premier • etc

• Tiedostojen siirtoon (FTP, SCP...)• Fetch, Dreamweaver, BBEdit etc

• Testaukseen (kovalevyltä ja palvelimelta)• Mikä tahansa selainohjelma sekä Mac- ja PC-ympäristössä (Safari, Firefox, Internet Explorer, Opera,

Netscape ja näiden useita versioita)

16

Vaihe 2 - Sivuston rakenteenkehittäminen

17

Suunnittelu etenee isosta pieneen, kaaoksesta yksityiskohtiin

A. Sisältönäkymä (mitä kaikkea tähän palveluun/kampanjaan tehdään)

B. Sivustonäkymä (miten ylläoleva jaetaan järkeväksi kokonaisuudeksi)

C. Sivunäkymä (miten yksittäiset sivuelementit sijoitetaan eri sivuille)

18

A. Sisältösuunnitelma

• Sisältösuunnitelma = sisällön runko. Ilman tätä ei päästa eteenpäin projektissa.

• Sisältösuunnitelmassa ei ole valmista sisältöä (joskin jossain vaiheessa sekin pitää tuottaa) vaan karkea hahmotelma mitä kaikkea sivustolle tullaan sijoittamaan (sekä alustavsti ryhmiteltynä).

• Älä tuhlaa aikaa otsikohin ja nimeämisiin, se tehdään seuraavassa vaiheessa.

• Tee suunnitelma sisällön toimittamisesta.

19

Sisältö on aina myöhässä

• Sisältö on aina myöhässä. 99% projekteista.

• Tee suunnitelma sisällön toimittamisesta määräpäivineen.

• Kiireeellisyys on etu.

• Mitä pikemmin sisältö tulee sen parempi informaatiosuunnitelun ja visuaalisen suunnittelun kannalta.

• Tee puskuri projektisuunnitelmaan myöhästyvän sisällön varalle

• Iloitse jos sisältö tulee ajallaan.

20

Huomioitavia yksityiskohtia projektin hallintaan

• Sisällön “sisäänsyöttö” pitää suunnitella ja aikatauluttaa ja vastuuttaa.• Erityinen haaste on sisällönhallintajärjestelmän (Content Management System)

päälle toimitettavat projektit.

• Laita sisältösuunnitelmaan myös ns. toissijainen sisältö • META-, TITLE-, lomake- ja virheilmoitustekstit tuotettavaksi sekä tarvittavat

valokluvat, piirrokset, taulukot, videot, kartat ym.• Tee luettolostasi niin yksityiskohtainen kuin on tarpeen (kuka, milloin). • Pidä samalla silmällä projekti laajuutta. • Arvioi sisältösuunitelmaa ja tuotoksia joka viikko.

21

B. Sivustonäkymä (site view)

• Sivustokartta on kuvallinen esitys sivuston rakenteesta, jäsentelystä, kulusta sekä sisällön ja tietojen ryhmittelystä.

• Miksi sivustokartta (Structure Map)? • Kartta viestii, määrittelee ja selvitää rakenteen. • Se on esitys koko projekista, laajasta näkökulmasta aina moniin pienempiin

yksityiskohtiin asti.

Product News

Line1Line2Line3

Product lines

Products

Service

Support

Services

HR

Employees

Library

Databases

Resources

MainpageCompany

22

Sivukartan teosta

• Valmiista sivustokartasta tulisi ilmetä selkeästi kaikki (HTML) sivut kunkin sivuston osuuden sisällä.

• Jokainen sivu saa laatikkonsa. • Suurin osa tärkeistä linkeistä ja myös esitetty.• Sivustokartta ei ole tekninen yhteenveto eikä se ole täysin toiminnallinen näkymä

sivustoon

• Sivustokartta on perusta navigation suunnittelulle.

• Sivustokartta on tuotannon tärkeimpiä työkaluja .• Sivustokartan pitäminen ajantasalla on tärkeää, jotta siihen voidaan luotettavasti

tukeutua kuvituksen, tekstin ja koostaminen tekeminen aikana.

• Kuka tekee sivustokartan? • Informaatiosuunnittelija. Asiakas. Joskus projektipäällikkö.

• Asiakas hyväksyy sivustokartan. Kaikki muutokset siihen maksavat ja muokkavat toimitusaikataulua.

23

24

I Level

O Level

II Level

III Level

IV Level

Main page

Extra pages“TOC, Contact, Help...”

Documents“articles, content pages”

DD DD DD DD

DD DD

DVV

V DMenu

Document

ENTRY EXIT LinksDoor

Databases

Sivukartta esitys koko projekista, laajasta näkökulmasta aina moniin pienempiin yksityiskohtiin asti

25

C. Sivunäkymä (page view)

• Rautalankamallit (wireframes, storyboards) ovat sivuston kuvalliset käsikirjoitukset.• Rautalankamallit ovat käyttöliittymäsuunnittelua• Rautalankamalleissa on tietty tiedon hierarkia, mutta ne eivät sanale tarkasti,

miten ja missä jotakin pitäisi esitellä.

• Taittoluonnoksia, jotka keskittyvät kaikkeen muuhun kuin sivun visuaaliseen esitykseen

• Niissä kuvataan navigointi, tekstin sijoittelu, graafinen jaottelu, olennaisimmat otsikot ja monet muut elementit joita sivulla tullaan tarvitsemaan.

• Sisältävät raa’an information, jota sivulle halutaan esiintyvän• Voivat olla hyvinkin tarkkoja sisältäen jo lopullinen sisällön (tekstit, linkkinimet

etc)

• Luonnokset tehdään tärkemmistä sivuista

26

27

Vaihe 3 - Visuaalinen suunnitttelu

28

VAIHE 3 - Visuaalinen suunnittelu

• Verkkosuunnittelun erottaa perinteisen graafisen suunnittelun lopputuotteista yksi selkeä tekijä: sivusto ei ole kolmiuloitteinen, sitä ei voi pitää käsissään, sitä ei voi käännella.

• Koneen ääreen asettuva kävijä ei tiedä sivuston kokoa. • Eksyminen sivustolle on sääntö kuin poikkeus.• Käyttäjälle suunnittelu vaatii sekä käytännöllistä että innovatiivista ajattelua

• Käyttöympäristö ei ole suunnittelijan kontrollissa• Päätelaitteen resoluutio• Käytetty selainohjelma• Kirjasintyypit, värit• Selainlaajennukset - erityisesti flash

• Käyttäjäkeskinen tavoite joka www-projektin lopputuloksessa on käytön helppous. Jopa markkinointiväen mielestä.

29

Visuaalisen suunnittelun yhdistäminen informaatiosuunnitteluun

• Visuaalinen design huomioi informaatiosuunnittelun, (1) jalostaa sitä, (2) ideoi esitystavalle mieleenpainuvan ja (3) käytettävän muodon antaen (4) lopullisen graafisen käyttöliittymän.

• Täydellinen maailma: informaatiosuunnittelu tehdään ensin, sisältö toimitetaan valmiiksi ja sitten alkaa luomisprosessi.

• Tosimaailma on harvoin näin lineaarinen. Asiakas haluaa nopeasti nähdä jotain tuttua.

• Rakenntta ja ulkoasua tehdään melkein aina samanaikaisesti.• Mutta varsinaista taittoa ei kannata tehdä loppuun ennen kuin sisältö- ja

informaatiosuunnitttelu on 99,9% valmis.

30

Kokeile. Mieti. Lainaa. Iteroi.

• Kuten harvoin graafisessa suunnittelussa – www-sivuston ulkoasu ei synny kertarykäisyllä.

• Salli iteraatiot, mutta aseta määräajat.

• Kerro se myös asiakkaalle.

• Aikataulusta:• nopeimmat miettivät 4-5 leiskaa päivässä, mutta keskimäärin visualisti pystyy

tekemään yhden ehdotuksen 2-3 päivässä• projektipäällikön tulee huolehtia, ettei visualisti käytä tuntikausia parannellen ja

hioen asiakkaan tapaamista varten ennen informaatiosuunnittelun valmistumista.

31

Huomioita taitosta

• Älä ahda informaatiota sivulle, anna taitolle tilaa hengittä

• Visuaalinen hierarkia

• Vältä 3-uloitteisuutta. 2,5D riittää.

• Näytön koko 1024x768 vai 800x600 – 955x600 vai 760x420 pikseliä

• Venyvä layout

• Keskimääräinen katseluetäisyys on 50cm

• Ruudulta on edelleen raskas lukea – lyhyet ja kompaktit kappaleet

• 6-7 sanaa riviä kohden

• Käyttäjät osaavat vierittää sivua alaspäin, eivät oikealle

• Käyttäjät klikkaavat kaikkea mitä voi kuvitella klikattavan etsiessään linkkejä eteenpäin

32

Ruuturesoluution ollessa 1024 x 768 pikseliä, on turva-alue 952 x 528 pikseliä

33

34

Vaihe 4 - Tuotanto &laadunvarmistus

35

VAIHE 4 - Tuotanto & laadunvalvonta

• Tuotannon tavoitteet ovat yksinkertaiset: tehdään sivusto, joka näyttää samanlaiselta ja toimii samalla tavoin kaikille käyttäjille.

• Arvioi projektin tila ennen tuotantoa. • Ollaanko budjetissa ja aikataulussa? • Onko sisältö valmis? Tekstit sisältösuunnitelman mukaisesti kirjoitettu ja oikoluettu?

Videot kuvattu ja käsitelty sopivana formaattiin? Ääniefektit tehty?• Onko testiympäristä teknisesti kunnossa?

• Verkon dynamo on HTML (XHTML+ CSS). • Varmista että tuotantotiimissä on ihmisiä, jotka osaavat toteuttaa mitä on suunniteltu.

• Lopulliset päätökset:• Toiminallisuudet ja ominaisuudet• Visuaaliset yksityiskohdat ja taitto• Erotetaanko sisältö esitystavasta• Optimoitavat selaimet• Tiedostorakenne• Nimeäminen (otsikot sisällössä, tiedostojen nimet ja hakemistot)• Palvelintiedot

36

Laajuus: odotukset vs. realiteetit.

• Ollaanko sivustokartan kokoisessa tilanteessa ?• vai onko projekti levinnyt käsiin? • Onnistuuko graafinen tuotanto aikataulussa? • Kuinka paljon pitääkin tuottaa uutta sisältöä?• Ovatko graafiset mallipohjat valmiit ?• Dynaamisten osien liittäminen staattiseen front-endiin?

• Tiedostorakenne on yllättävän tärkeä yksityiskohta• Sivuston kasvun hallitseminen• Ylläpitäminen• Suorat osoitteet alahakemistoihin• Ovatko kuvat hakemistossa juuritasolla vai jokaisen osion kuvat omassa

kansioissaan?• Onko asiakkaalla toiveita esim käyttää vanhaa tiedostorakennetta?

37

Kuinka paljon kasvua on odotettavissa 2-3 vuoden sisällä? Kuinka sivusto kasvaa – aiheen, ajankohdan ym mukaan?

Vanhentunneen sisällön arkistointi alihakemistoihin. Tyylioppaaseen tiedot tiedostorakenteesta

Välittääkö asiakas??? Ei todennäköisesti

Tiedostorakenteesta päättäminen

38

Tuotanto - graafiikat

• Kuvien optimointi Photoshopissa on ehdottoman tärkeää jotta päästää hyvään, laadukkaaseen lopputulokseen.

• Viipaloinnissa erotaan graafisesta mallipohjasta (leiskasta) useammaksi kuvatiedostoksi Photoshopissa

• Viipaleet yhdistetäään koostamisen yhteydessä takaisin sivuksi tai Flash-esitykseksi.

• HTML-mallipohjat, joita kierrätetään tuotannossa. • Näihin laitetaan valmiiksi kaikki globaalit standardit (navigointi, taitto (TABLE tai

DIV), ALT- ja META-tekstit, dokumentin sisäinen kommentointi.• Tyylitiedostot (CSS) mikäli käytetään tehdään tässä yhteydessä

• Testaa mallipohja.

39

Tuotanto - koostaminen

• Koostaminen tapahtuu joko HTML:n tai Flashin (animointi/ohjelmointi) avulla.

• Sivujen täyttäminen (tai CMS:n testaus)

• Kevyt skriptaus yleensä javaskriptin avulla

• Ohjelmoitavatkin sivut (.asp, .php etc) vaativat yleensä yhden tai useamman HTML-dokumentit johon skriptaus toteutetaan.

• Lisää muut mediat osaksi sivua

• Vahdi tiedostojen kokoa. Yli 100 ktavun html-sivut ovat todennäköisesti liian raskaat.

• Nyrkkisääntönä: yksi html-sivupohja valmistuu noin päivässä kun aloitetaan tyhjältä pöydältä.

• Käsinkoodaus vai editori?

• Versionhallinta

40

Laadunvarmistus

• Sivusto on valmis. Laadunvarmistuksen aika.

• Tuotantoa ei koskaan saa päästää läpi ennen laadunvarmistusta• Rikkinäiset linkit. Placeholder-tekstit ja –kuvat. • Toiminnallisuuksen bugit. • Väärin sijoitettu sisältö.

• Sivuston testausympäristön tulee olla tarkalleen sama kuin lopullinen tuotantoympäristö

• Löydöksien priorisointi ja korjaaminen.

• HUOM: pilkun siirtäminen printtimainoksessa on hetken homma. Nettisivulla se vaatii uutta koostamista, joka on pidempi kuin hetki (yleensä).

• Mieti projektoidessa olisiko parempi tehdä vaiheittain ja testata palasina?

41

Taiton toteutustekniikat

• Taulukko - taitto toteutetaan HTML:n taulukkorakenteen avulla <TABLE>

• Layerit (kerrokset) - taitto tyylitiedostojen avulla <DIV>

• Kehykset - samassa sivunäkymässä useita HTML-tiedostoja <FRAMESET>

• Flash - taitto yhtenä (tai useampana) sovellustiedostona (.swf)

42

Graafisten mallipohjien teko

• Graafinen mallipohja on hyväksytty ulkoasu.

• Käytetään optimointiin ja (HTML)-tuotantoon

• Huomaa että esitetty ehdotus poikkeaa yleensä aavistuksen siitä mitä lopullinen toteutus on – CSS-taitto ei ole sama kuin PhotoShop-taitto. Kerro siitä asiakkaalle.

• Tee lopulliset graafiset elementit, jotka tukevat aikaisemmin sovittuja toiminallisuuksia.

• > navigation on/off/over -tilat

• > painonapit on/off/over-tilat

• > placeholder tai alternative-kuva flashille tai videolle

43

Graafiset mallipohjat ovat tuotannon raaka-ainetta

• Mallipohja on master-dokumentti joka optimoidaan ja viipaloidaan prosessin seuraavassa vaiheessa.

• Säilytä PhotoShop-versio kerroksineen.• Jokaiselle sivupohjalle ei välttämättä tarvita omaa graafista mallipohjaa (tosin

asiakas usein haluaa sellaisen nähdä )• Jos pohjia on paljon, tee taulukko johon listaa pohjan tiedostonimen ja sivut,

joihin sivustossa pohjaa käytetään.

• Graafiset mallipohjatiedostot siirretään tuotantoon kerrostettuina PhotoShop- (Fireworks-) tiedostoina. Nimeä kerrokset. Mukaan printti avuksi (rautalankamallit eivät ole tarkka taittosuunnitelma, ainostaan esitys mitä tietoa sivulla tulee olemaan).

• Tarkista että tuotannosta löytyvät halutut ja tarvittavat kirjasinleikkauset.

• Pienissä projekteissa suunnittelija toimii samalla tuotanto-graafikona/animaattorina.

44

Tyyliopas

• Graafisen mallipohjan jälkeen kirjoitetaan tyyliopas tuotannon suunnittelijoille ja ylläpitäjille.

• Jokainen sivu sivustossa on erilainen mutta niillä on yhtenäisiä elementtejä.

• Johdonmukaisuuden säilyttäminen on ensisijianen tavoite.

• Määrittele tyylioppaassa:• sivujen palstojen leveydet• mouseover-tilat• linkkien värit• muut värimääritykset• fontit• otsikko ja leipätekstikoot• kuvakoot• animaatioiden toteutus

45

Tyyliopas #2

• Täydennä tyyliopas julkaisun jälkeen ylläpitoa varten. Lisää mahdollisesti ohjeet kuvituksen käytöstä ja kuvitustyylistä muutamalla lauseella.

• Tee asiakkasta varten visuaalinen esitys valituista tyyleistä.

• CSS tyylitiedostot

• Interaktioiden ohjeistus (painikkeet, nuolet, lomakkeet etc)

• Käytetyt standardit toistuville elementeille

• Käsittele designin erityiskohdat

46

Pikatestejä projektin hallintaan

• Pikatesti: käyttäjät eivät lue, he silmäilevät. Siirrä tuoli taaksepäin, siristele silmiäsi. Pystytkö samaan selville, mistä pitäisi klikata?

• Pikatesti: nappaa käytävältä kolleega, anna hänelle tehtävksi löytää linkki johonkin asiaan sivustolla layoutistasi ja aikaa 10 sekuntia. Onnistuuko hän?

• Oletko tarkistanut designin 800x600 pikselin resoluutiolla (just in case)?

• Oletko tarkistanut ehdotuksen sekä PC:llä että Macillä?

• Oletko tarkistanut aiheuttaako fonttikoon muutos desgnin hajomisen?

• Oletko tarkistuttanut ehdotetun designin tuotanto-puolella? On se toteuttamiskelpoinen? Onko se viipaloitavissa?

47

Testaus

• Visuaalinen suunnittelu ei kaipaa selityksiä. Mutta entä testaus?

• Aivan liian usein testaus on edelleen se välttämätön paha joka tehdään n. sadasta eri syystä.

• Oletukset tulee testata. Toimii paperilla mutta entä käytännössä?

• Suositus: tee protosivusto. Se voi olla rautalankamallisen laajennus tai sisältää ehdotettua visuaalista ilmettä.

• Leiska on tehty Photoshopissa viimeisen päälle. Yleensä koodattuna välistykset, fontit, marginaalit eivät ole 100% samat.

• Selitä tämä projektin alussa tilaajalle. • Näytä myös miten kirjasinkoon muuttaminen vaikuttaa leiskaan.

48

www-proto

• Proton avulla voi kehitellä visuaalista suunnitelmaa, viilata informaatiosuunnittelua, huomaat sisällön puutteet (liikaa, liian vähän, puuttuu kokonaan, on väärän muotoista) ja testata uudelleen ja uudelleen.

• Testausta vaativia:• monimutkaiset kehysrakenteet (frames)• toiminnalliset mouseover-valikot (javascript)• sijoittelu- ja kokospesifit pop-up ikkunat• tyylipojat ja selainspesifit kohtelut• yksinkertaiset ostoskoritoiminnot• kaikki mikä vaatii kevyttä skriptausta

• Testaus: Internet Explorer, Safari, Firefox, Opera, Netscape -selaimilla

• Toiminnallisuuksen oletusten testaaminen visuaalisen suunnittelun aikana antaa mahdollisuuden korjata ongelmat ennen kuin design on valmis.

• Testauksen avulla tuotannon ihmiset sitoutetaan edessä olevaan tehtävään.

49

Vaihe 5 - Julkaisu & seuranta

50

VAIHE 5: Julkistus & seuranta

• Tuotantoympäristön pystytys tai palvelintilan hankinta

• Tiedostonsiirtoyhteys www-palvelimelle (FTP, SCP)• Kuka?• Milloin?• Testaus vielä kerran, jotta sivut ja kuvat näkyvät, linkit ja animaatiot ja lomakkeet

toimivat• Siirrä “etusivu” viimeisenä kun muu sivusto on happotestattu (index.html,

default.asp ym tiedosto)

• Trafiikin mittaus (esim Google Analytics)

• Mitä jäi seuraavaan vaiheeseen

• Hakukoneoptimointi, SEO

• Sivuston markkinointi

51

Verkkoaineiston tuotanto

Antti LeinoDirector / PlannerMRM Worldwide

antti@lowreality.comlowreality.blogspot.com