• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Online Tuotantoprosessi2007
 

Online Tuotantoprosessi2007

on

  • 1,353 views

 

Statistics

Views

Total Views
1,353
Views on SlideShare
1,347
Embed Views
6

Actions

Likes
1
Downloads
7
Comments
0

3 Embeds 6

http://www.linkedin.com 3
https://www.linkedin.com 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Online Tuotantoprosessi2007 Online Tuotantoprosessi2007 Presentation Transcript

    • Mobiili- ja verkkoviestinnän tuotannon haasteet Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.blogspot.com
    • 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.
    • 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
    • Mobiilitoteutuksesta
      • Mobiilissa sisällönvälityksen kustannukset
      • Mobiilissa kustannuseriä lyhytsanomanumeroista
      • SMSM/MMS/Java/XHTML -ratkaisujen eristyneisyys
      • Päätelaitteiden kirjo
      • Kuluttajasuoja
    • 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ä
    • Vaihe 1 - Projektin määrittely
    • 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
    • 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?
    • 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
    • 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
    • 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.
    • 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
    • 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”
    • 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
      • ...
    • 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)
    • Vaihe 2 - Sivuston rakenteen kehittäminen
    • 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)
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    •  
    • Sivukartta esitys koko projekista, laajasta näkökulmasta aina moniin pienempiin yksityiskohtiin asti I Level O Level II Level III Level IV Level Main page Extra pages “ TOC, Contact, Help...” Documents “ articles, content pages” D D D D D D D V V ENTRY EXIT Links Door Databases V D Menu Document
    • 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
    •  
    • Vaihe 3 - Visuaalinen suunnitttelu
    • 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ä.
    • 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.
    • 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.
    • 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
    • Ruuturesoluution ollessa 1024 x 768 pikseliä, on turva-alue 952 x 528 pikseliä
    •  
    • Vaihe 4 - Tuotanto & laadunvarmistus
    • 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
    • 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?
    • Tiedostorakenteesta päättäminen 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
    • 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.
    • 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
    • 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?
    • 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)
    • 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
    • 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.
    • 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
    • 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
    • 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?
    • 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.
    • 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.
    • Vaihe 5 - Julkaisu & seuranta
    • 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
    • Verkkoaineiston tuotanto Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.blogspot.com