Mobiili- ja verkkoviestinnän tuotannon haasteet Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.bl...
Miten web (www) toimii <ul><li>Web perustuu tietoverkkoon, jossa on insinöörien sopimat säännöt, protokollat, tietojen väl...
Digitaalisen tuotannon erityispiirteitä <ul><li>Julkaisu- ja toteutusteknologian nuoruus </li></ul><ul><li>Standardien jat...
Mobiilitoteutuksesta <ul><li>Mobiilissa sisällönvälityksen kustannukset </li></ul><ul><li>Mobiilissa kustannuseriä lyhytsa...
Tyypillisen web-projektin vaiheet <ul><li>Vaihe 1: Projektin määrittely </li></ul><ul><li>Vaihe 2: Sisällön ja rakenteen k...
Vaihe 1 -  Projektin määrittely
VAIHE 1 - Projektin määrittely <ul><li>Tietojen kerääminen </li></ul><ul><li>Asiakasselvitys ja vaatimukset </li></ul><ul>...
Keskusteluiden, selvitysten ja tutustumisen analyysin jälkeen pitäisi olla ymmärrys seuraavista asioista <ul><li>Sivuston ...
Luovan tehtävänannon teko <ul><li>Projektin tiivistelmä (mitä, kenelle, miksi) </li></ul><ul><li>Havainnointi/sävy/ohjeist...
Projektisuunnittelu <ul><li>Listaa tavoitteet ja päämäärät sekä yksityiskohdat, rajaukset ja oletukset. </li></ul><ul><li>...
Tuotannon projektointi <ul><li>Sivuston laajuus </li></ul><ul><li>Sisältöelementtien määrä ja muoto, erityisesti animaatio...
Asiakkaan hallinnasta <ul><li>Jos asiakas allekirjoitti paperin, laita se talteen. Tulosta hyväksynnän sisältävä maili.  <...
Millainen on hyvä maksava asiakas www-projektissa? <ul><li>Hyvä asiakas </li></ul><ul><ul><li>- tavoitteisiin suuntautunut...
Roolit ja resurssit <ul><li>Visuaalinen- / käyttöliittymäsuunnittelija </li></ul><ul><li>Sisältö- / informaatiosuunnitteli...
Tuotantotyökalut <ul><li>Layout-suunnitteluun ja grafiikan tuottamiseen (gif, jpeg, png) </li></ul><ul><ul><li>Adobe Photo...
Vaihe 2 -  Sivuston rakenteen kehittäminen
Suunnittelu etenee isosta pieneen, kaaoksesta yksityiskohtiin <ul><ul><li>A. Sisältönäkymä  (mitä kaikkea tähän palveluun/...
A. Sisältösuunnitelma <ul><li>Sisältösuunnitelma = sisällön runko . Ilman tätä ei päästa eteenpäin projektissa.  </li></ul...
Sisältö on aina myöhässä <ul><li>Sisältö on aina myöhässä.  99% projekteista.   </li></ul><ul><li>Tee suunnitelma sisällön...
Huomioitavia yksityiskohtia projektin hallintaan <ul><li>Sisällön “sisäänsyöttö” pitää suunnitella ja aikatauluttaa ja vas...
B. Sivustonäkymä (site view) <ul><li>Sivustokartta on kuvallinen esitys sivuston rakenteesta, jäsentelystä, kulusta sekä s...
Sivukartan teosta <ul><li>Valmiista sivustokartasta tulisi ilmetä selkeästi kaikki (HTML) sivut kunkin sivuston osuuden si...
 
Sivukartta esitys koko projekista, laajasta näkökulmasta aina moniin pienempiin yksityiskohtiin asti I Level O Level II Le...
C. Sivunäkymä (page view) <ul><li>Rautalankamallit (wireframes, storyboards) ovat sivuston kuvalliset käsikirjoitukset. </...
 
Vaihe 3 -  Visuaalinen suunnitttelu
VAIHE 3 - Visuaalinen suunnittelu <ul><li>Verkkosuunnittelun erottaa perinteisen graafisen suunnittelun lopputuotteista yk...
Visuaalisen suunnittelun yhdistäminen informaatiosuunnitteluun <ul><li>Visuaalinen design huomioi informaatiosuunnittelun,...
Kokeile. Mieti. Lainaa. Iteroi. <ul><li>Kuten harvoin graafisessa suunnittelussa – www-sivuston ulkoasu ei synny kertarykä...
Huomioita taitosta <ul><li>Älä ahda informaatiota sivulle, anna taitolle tilaa hengittä </li></ul><ul><li>Visuaalinen hier...
Ruuturesoluution ollessa 1024 x 768 pikseliä, on turva-alue 952 x 528 pikseliä
 
Vaihe 4 -  Tuotanto & laadunvarmistus
VAIHE 4 - Tuotanto & laadunvalvonta <ul><li>Tuotannon tavoitteet ovat yksinkertaiset: tehdään sivusto, joka näyttää samanl...
Laajuus: odotukset vs. realiteetit. <ul><li>Ollaanko sivustokartan kokoisessa tilanteessa ? </li></ul><ul><ul><li>vai onko...
Tiedostorakenteesta päättäminen Kuinka paljon kasvua on odotettavissa 2-3 vuoden sisällä? Kuinka sivusto kasvaa – aiheen, ...
Tuotanto - graafiikat <ul><li>Kuvien optimointi Photoshopissa on  ehdottoman tärkeää jotta päästää hyvään, laadukkaaseen l...
Tuotanto - koostaminen <ul><li>Koostaminen tapahtuu joko HTML:n tai Flashin (animointi/ohjelmointi) avulla. </li></ul><ul>...
Laadunvarmistus <ul><li>Sivusto on valmis. Laadunvarmistuksen aika. </li></ul><ul><li>Tuotantoa ei koskaan saa päästää läp...
Taiton toteutustekniikat <ul><li>Taulukko  - taitto toteutetaan HTML:n taulukkorakenteen avulla <TABLE> </li></ul><ul><li>...
Graafisten mallipohjien teko <ul><li>Graafinen mallipohja on hyväksytty ulkoasu. </li></ul><ul><li>Käytetään optimointiin ...
Graafiset mallipohjat ovat tuotannon raaka-ainetta <ul><li>Mallipohja on master-dokumentti joka optimoidaan ja viipaloidaa...
Tyyliopas <ul><li>Graafisen mallipohjan jälkeen kirjoitetaan tyyliopas tuotannon suunnittelijoille ja ylläpitäjille. </li>...
Tyyliopas #2 <ul><li>Täydennä tyyliopas julkaisun jälkeen ylläpitoa varten. Lisää mahdollisesti ohjeet kuvituksen käytöstä...
Pikatestejä projektin hallintaan  <ul><li>Pikatesti: käyttäjät eivät lue, he silmäilevät. Siirrä tuoli taaksepäin, siriste...
Testaus <ul><li>Visuaalinen suunnittelu ei kaipaa selityksiä. Mutta entä testaus? </li></ul><ul><li>Aivan liian usein test...
www-proto <ul><li>Proton avulla voi kehitellä visuaalista suunnitelmaa, viilata informaatiosuunnittelua, huomaat sisällön ...
Vaihe 5 -  Julkaisu & seuranta
VAIHE 5: Julkistus & seuranta <ul><li>Tuotantoympäristön pystytys tai palvelintilan hankinta </li></ul><ul><li>Tiedostonsi...
Verkkoaineiston tuotanto Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.blogspot.com
Upcoming SlideShare
Loading in...5
×

Online Tuotantoprosessi2007

1,088

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,088
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Online Tuotantoprosessi2007

  1. 1. Mobiili- ja verkkoviestinnän tuotannon haasteet Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.blogspot.com
  2. 2. Miten web (www) toimii <ul><li>Web perustuu tietoverkkoon, jossa on insinöörien sopimat säännöt, protokollat, tietojen välittämiseen hajautetusti tietokoneiden välillä </li></ul><ul><li>Web-selain on fyysikon fyysikolle kehittämä tietokoneohjelma, jolla piti alunperin välittää informaatiota fyysikoiden välillä. </li></ul><ul><li>Informaatio näytetään “sivu”-käsiteen avulla. </li></ul><ul><li>Sivu on tekstiä ja linkkejä muihin tiedostoihin (esim kuva-tiedotoihin) </li></ul><ul><li>Sivulle voi sijoittaa linkin Flash ym tiedostoon, joka taasen näyttää kaiken halutun informaation rikkaammassa muodossa </li></ul><ul><li>(x)html on hyvin yksinkertainen“ohjelmointikieli”, jota tarvitaan sivun koostamiseksi. </li></ul><ul><li>Sivut sijaitsevat web-palvelintietokoneella, josta selaimet käyvät hakemassa kopiota paikallisesti tietokoneen ruudulla näytettäväksi </li></ul><ul><li>Web täytti syksyllä 2006 15 vuotta. </li></ul>
  3. 3. Digitaalisen tuotannon erityispiirteitä <ul><li>Julkaisu- ja toteutusteknologian nuoruus </li></ul><ul><li>Standardien jatkuva muutos </li></ul><ul><li>Teknologialäheisyys </li></ul><ul><li>Suunnittelijalla usein tuotantovastuu loppuun saakka </li></ul><ul><li>Julkaisunopeus </li></ul><ul><li>Leviämisnopeus ja globaalisuus </li></ul><ul><li>Käytettävyyden korostuminen </li></ul><ul><li>Softasuunnittelun sääntöjen mukailu </li></ul><ul><li>Huomattavan paljon uudelleensuunnittelua ja päivittämistä </li></ul><ul><li>Esteettömyys </li></ul><ul><li>Käyttöympäristön ei-arvattavuus (ruudun koko, resoluutio, fontit, selainversio) </li></ul><ul><li>Jakelu ei ole valvottavissa </li></ul><ul><li>Rajoitteet taitossa (HTML, cms) </li></ul><ul><li>Rajoitteet kuvan laadussa (gif, jpeg, png) </li></ul><ul><li>Vierailijalla ei ole ymmärrystä sivuston koosta, 2-ulotteisuus </li></ul><ul><li>Vuorovaikutus kävijän kanssa, pullin mittaminen </li></ul><ul><li>Opastamisen tärkeys </li></ul>
  4. 4. Mobiilitoteutuksesta <ul><li>Mobiilissa sisällönvälityksen kustannukset </li></ul><ul><li>Mobiilissa kustannuseriä lyhytsanomanumeroista </li></ul><ul><li>SMSM/MMS/Java/XHTML -ratkaisujen eristyneisyys </li></ul><ul><li>Päätelaitteiden kirjo </li></ul><ul><li>Kuluttajasuoja </li></ul>
  5. 5. Tyypillisen web-projektin vaiheet <ul><li>Vaihe 1: Projektin määrittely </li></ul><ul><li>Vaihe 2: Sisällön ja rakenteen kehittäminen </li></ul><ul><li>Vaihe 3: Visuaalinen suunnittelu </li></ul><ul><li>Vaihe 4: Tuotanto & laadunvarmistus </li></ul><ul><li>Vaihe 5: Julkaisu & seuranta </li></ul><ul><li>Iteratiivinen prosessi </li></ul><ul><li>Vaiheet päällekkäisiä </li></ul>
  6. 6. Vaihe 1 - Projektin määrittely
  7. 7. VAIHE 1 - Projektin määrittely <ul><li>Tietojen kerääminen </li></ul><ul><li>Asiakasselvitys ja vaatimukset </li></ul><ul><ul><li>yleistä tietoa, tuotteet & palvelut </li></ul></ul><ul><ul><li>toimialan analyysi (jos mahdollista) </li></ul></ul><ul><ul><li>kohdeyleisö ja tavoiteltu toiminta </li></ul></ul><ul><ul><li>toivottu yleisvaikutelma </li></ul></ul><ul><li>Sisältövaatimukset </li></ul><ul><li>Teknologiamahdollisuudet ja rajoitukset </li></ul><ul><li>www-palvelin jonne lopputulos sijoitetaan </li></ul><ul><li>markkinointi- & ylläpitoaktiviteetit </li></ul>
  8. 8. Keskusteluiden, selvitysten ja tutustumisen analyysin jälkeen pitäisi olla ymmärrys seuraavista asioista <ul><li>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. </li></ul><ul><li>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? </li></ul><ul><li>Aikaisempi materiaali. Jotta tiedät mitä on tehty aikaisemmin ja mitä ei kannata uudestaan tehdä. </li></ul><ul><li>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. </li></ul><ul><li>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! </li></ul><ul><li>Teknologia – mitä innovatiivisia tekniikoita asiakas odottaa käytettävän? Back-end/front-end? Tee teknisten tarpeiden määrittely. Tunnukset palvelimille. </li></ul><ul><li>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. </li></ul><ul><li>Yhteydenpito – Ketkä ovat mukana projektissa? </li></ul>
  9. 9. Luovan tehtävänannon teko <ul><li>Projektin tiivistelmä (mitä, kenelle, miksi) </li></ul><ul><li>Havainnointi/sävy/ohjeistus (toivottu) </li></ul><ul><li>Viestintästrategia (asiakas) </li></ul><ul><li>Kilpailutilanne (asiakas) </li></ul><ul><li>Haluttu viesti yhdellä lauseella </li></ul><ul><li>Sisäiseen käyttöön </li></ul>
  10. 10. Projektisuunnittelu <ul><li>Listaa tavoitteet ja päämäärät sekä yksityiskohdat, rajaukset ja oletukset. </li></ul><ul><li>Sivujen määrä ja tuotannon koko? </li></ul><ul><ul><li>Maksaako asiakas kuvat tai muun materiaalin? </li></ul></ul><ul><ul><li>Toimittaako asiakas kaiken sisältömateriaalin? Lisäkustannuslomake asiakkaan pyytämiin muutoksiin. </li></ul></ul><ul><ul><li>Flash vai html -sivusto </li></ul></ul><ul><li>Budjetin laadinta </li></ul><ul><ul><li>10-20% puskuri yllättäviin menoihin tai ulkopuolisiin kustannuksiin. </li></ul></ul><ul><li>Aikataulujen teko </li></ul><ul><li>Mitä toimitetaan ja kenelle? </li></ul><ul><li>Projektitiimin kokoaminen </li></ul><ul><li>Projektin testialueen toteuttaminen palvelintietokoneelle </li></ul><ul><li>(Käytettävyyden testauksen suunnittelu) </li></ul><ul><li>Projektin käynnistämien </li></ul>
  11. 11. Tuotannon projektointi <ul><li>Sivuston laajuus </li></ul><ul><li>Sisältöelementtien määrä ja muoto, erityisesti animaatiot,multimedia, ohkjelmoitavat asiat, lomakkeet ja niiden käsittely </li></ul><ul><li>Kuka tekee grafiikan optimoinnin? </li></ul><ul><li>Kuka koostaa sivuston? </li></ul><ul><li>Kuka kirjoittaa tekstit? </li></ul><ul><li>Onko sivukartta ajantasalla (tai sisältösuunnitelma, käsikirjoitus)? </li></ul><ul><li>Kuka julkaisee sivuston (tiedostojen siirto palvelimelle)? </li></ul><ul><li>Kuka hyväksyy lopputuotoksen? </li></ul><ul><li>Jokainen muutos - erityisesti taittoon liittyvät muutokset - tässä vaiheessa aiheuttaa aikatualun venymisen ja budjetin kasvun. </li></ul>
  12. 12. Asiakkaan hallinnasta <ul><li>Jos asiakas allekirjoitti paperin, laita se talteen. Tulosta hyväksynnän sisältävä maili. </li></ul><ul><li>Pyydä mailitse vahvistus (tai lähetä pyynnöt) suulliseen hyväksyntään. </li></ul><ul><li>Pidä odotukset realistisina </li></ul><ul><li>Kommunikoi. Jatkuvasti. Kerro missä mennään. Mitä tapahtuu seuraavaksi? </li></ul><ul><li>Testipalvelin </li></ul><ul><li>Monitoimittajaprojekti </li></ul>
  13. 13. Millainen on hyvä maksava asiakas www-projektissa? <ul><li>Hyvä asiakas </li></ul><ul><ul><li>- tavoitteisiin suuntautunut </li></ul></ul><ul><ul><li>- keskittyy kokonaiskuvaan </li></ul></ul><ul><ul><li>- vastaan asiakaskyselyyn tarkasti ja selkeästi </li></ul></ul><ul><ul><li>- ymmärtää verkkoympäristöä ja kehitysprosessia </li></ul></ul><ul><ul><li>- antaa lopullinen hyväksynnän ja kuittauksen </li></ul></ul><ul><ul><li>- on yhtä mieltä aiktaulusta ja budjetista (ja lopputuloksesta) </li></ul></ul><ul><ul><li>- vastaa maileihin ja puhelimeen </li></ul></ul><ul><ul><li>- on lähestymistavalta tiimikeskeinen </li></ul></ul><ul><ul><li>- toimittaa sisällön (lähes) ajallaan </li></ul></ul><ul><ul><li>- on osa ratkaisua eikä osa ongelmaa </li></ul></ul><ul><li>Huono asiakas </li></ul><ul><ul><li>- asenne on “nopeasti-sivut-pystyyn” </li></ul></ul><ul><ul><li>- vaatimukset aikataulun suhteen ovat epärealistiset </li></ul></ul><ul><ul><li>- ei tiedä, mitä sisällön pitäisi olla, mutta haluaa sen näyttävän “coolia” </li></ul></ul><ul><ul><li>- pyytää tekemään nopeasti “ensimmäisen version”, koska varsinainen versio tehdään sitten sen jälkeen </li></ul></ul><ul><ul><li>- ei pysty antamaan lopullista hyväksymistä eikä saata projektipäällikköä yhteyteen päätöksentekijöiden kanssa </li></ul></ul><ul><ul><li>- asiakasselvitykseen ei löydy aikaa, viittaa aina jo tehtyihin dokumenteihin ja lupaa toimittaa ne tiimille </li></ul></ul><ul><ul><li>- pieni budjetti, deadline nopeasti </li></ul></ul><ul><ul><li>- ei kommunikoi, ei pysty tekemään päätöksiä, ei vastaa maileihin tai puheluihin </li></ul></ul><ul><ul><li>- muuttaa mieltään jatkuvasti </li></ul></ul><ul><ul><li>- haluaa hoitaa itse luovan puolen “säästääkseen rahaa” </li></ul></ul>
  14. 14. Roolit ja resurssit <ul><li>Visuaalinen- / käyttöliittymäsuunnittelija </li></ul><ul><li>Sisältö- / informaatiosuunnittelija, copy writer </li></ul><ul><li>Käyttöliittymäohjelmoija / koostaja / site builder </li></ul><ul><li>Animaattori </li></ul><ul><li>Tuotanto-AD </li></ul><ul><li>Flash-ohjelmoija </li></ul><ul><li>Tekninen ohjelmoija </li></ul><ul><li>... </li></ul>
  15. 15. Tuotantotyökalut <ul><li>Layout-suunnitteluun ja grafiikan tuottamiseen (gif, jpeg, png) </li></ul><ul><ul><li>Adobe Photoshop </li></ul></ul><ul><li>Sivujen koostamiseen (HTML) </li></ul><ul><ul><li>Macromedia Dreamweaver </li></ul></ul><ul><ul><li>Notepad, BBEdit </li></ul></ul><ul><li>Sivujen koostamiseen (Rich Media) </li></ul><ul><ul><li>Macromedia Flash </li></ul></ul><ul><li>Yksittäiset animaatiot </li></ul><ul><ul><li>Adobe ImageReady (gif-animaatiot) </li></ul></ul><ul><ul><li>Macromedia Flash (flash-animaatiot) </li></ul></ul><ul><li>Video- ja audiosisällöt </li></ul><ul><ul><li>Finalcut Pro, Adobe Premier </li></ul></ul><ul><ul><li>etc </li></ul></ul><ul><li>Tiedostojen siirtoon (FTP, SCP...) </li></ul><ul><ul><li>Fetch, Dreamweaver, BBEdit etc </li></ul></ul><ul><li>Testaukseen (kovalevyltä ja palvelimelta) </li></ul><ul><ul><li>Mikä tahansa selainohjelma sekä Mac- ja PC-ympäristössä (Safari, Firefox, Internet Explorer, Opera, Netscape ja näiden useita versioita) </li></ul></ul>
  16. 16. Vaihe 2 - Sivuston rakenteen kehittäminen
  17. 17. Suunnittelu etenee isosta pieneen, kaaoksesta yksityiskohtiin <ul><ul><li>A. Sisältönäkymä (mitä kaikkea tähän palveluun/kampanjaan tehdään) </li></ul></ul><ul><ul><li>B. Sivustonäkymä (miten ylläoleva jaetaan järkeväksi kokonaisuudeksi) </li></ul></ul><ul><ul><li>C. Sivunäkymä (miten yksittäiset sivuelementit sijoitetaan eri sivuille) </li></ul></ul>
  18. 18. A. Sisältösuunnitelma <ul><li>Sisältösuunnitelma = sisällön runko . Ilman tätä ei päästa eteenpäin projektissa. </li></ul><ul><li>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ä). </li></ul><ul><li>Älä tuhlaa aikaa otsikohin ja nimeämisiin, se tehdään seuraavassa vaiheessa. </li></ul><ul><li>Tee suunnitelma sisällön toimittamisesta. </li></ul>
  19. 19. Sisältö on aina myöhässä <ul><li>Sisältö on aina myöhässä. 99% projekteista. </li></ul><ul><li>Tee suunnitelma sisällön toimittamisesta määräpäivineen. </li></ul><ul><li>Kiireeellisyys on etu. </li></ul><ul><li>Mitä pikemmin sisältö tulee sen parempi informaatiosuunnitelun ja visuaalisen suunnittelun kannalta. </li></ul><ul><li>Tee puskuri projektisuunnitelmaan myöhästyvän sisällön varalle </li></ul><ul><li>Iloitse jos sisältö tulee ajallaan. </li></ul>
  20. 20. Huomioitavia yksityiskohtia projektin hallintaan <ul><li>Sisällön “sisäänsyöttö” pitää suunnitella ja aikatauluttaa ja vastuuttaa. </li></ul><ul><ul><li>Erityinen haaste on sisällönhallintajärjestelmän (Content Management System) päälle toimitettavat projektit. </li></ul></ul><ul><li>Laita sisältösuunnitelmaan myös ns. toissijainen sisältö </li></ul><ul><ul><li>META-, TITLE-, lomake- ja virheilmoitustekstit tuotettavaksi sekä tarvittavat valokluvat, piirrokset, taulukot, videot, kartat ym. </li></ul></ul><ul><ul><li>Tee luettolostasi niin yksityiskohtainen kuin on tarpeen (kuka, milloin). </li></ul></ul><ul><ul><li>Pidä samalla silmällä projekti laajuutta. </li></ul></ul><ul><ul><li>Arvioi sisältösuunitelmaa ja tuotoksia joka viikko. </li></ul></ul>
  21. 21. B. Sivustonäkymä (site view) <ul><li>Sivustokartta on kuvallinen esitys sivuston rakenteesta, jäsentelystä, kulusta sekä sisällön ja tietojen ryhmittelystä. </li></ul><ul><li>Miksi sivustokartta (Structure Map)? </li></ul><ul><ul><li>Kartta viestii, määrittelee ja selvitää rakenteen. </li></ul></ul><ul><ul><li>Se on esitys koko projekista, laajasta näkökulmasta aina moniin pienempiin yksityiskohtiin asti. </li></ul></ul>
  22. 22. Sivukartan teosta <ul><li>Valmiista sivustokartasta tulisi ilmetä selkeästi kaikki (HTML) sivut kunkin sivuston osuuden sisällä. </li></ul><ul><ul><li>Jokainen sivu saa laatikkonsa. </li></ul></ul><ul><ul><li>Suurin osa tärkeistä linkeistä ja myös esitetty. </li></ul></ul><ul><ul><li>Sivustokartta ei ole tekninen yhteenveto eikä se ole täysin toiminnallinen näkymä sivustoon </li></ul></ul><ul><li>Sivustokartta on perusta navigation suunnittelulle. </li></ul><ul><li>Sivustokartta on tuotannon tärkeimpiä työkaluja . </li></ul><ul><ul><li>Sivustokartan pitäminen ajantasalla on tärkeää, jotta siihen voidaan luotettavasti tukeutua kuvituksen, tekstin ja koostaminen tekeminen aikana. </li></ul></ul><ul><li>Kuka tekee sivustokartan? </li></ul><ul><ul><li>Informaatiosuunnittelija. Asiakas. Joskus projektipäällikkö. </li></ul></ul><ul><li>Asiakas hyväksyy sivustokartan. Kaikki muutokset siihen maksavat ja muokkavat toimitusaikataulua. </li></ul>
  23. 24. 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
  24. 25. C. Sivunäkymä (page view) <ul><li>Rautalankamallit (wireframes, storyboards) ovat sivuston kuvalliset käsikirjoitukset. </li></ul><ul><ul><li>Rautalankamallit ovat käyttöliittymäsuunnittelua </li></ul></ul><ul><ul><li>Rautalankamalleissa on tietty tiedon hierarkia, mutta ne eivät sanale tarkasti, miten ja missä jotakin pitäisi esitellä. </li></ul></ul><ul><li>Taittoluonnoksia, jotka keskittyvät kaikkeen muuhun kuin sivun visuaaliseen esitykseen </li></ul><ul><ul><li>Niissä kuvataan navigointi, tekstin sijoittelu, graafinen jaottelu, olennaisimmat otsikot ja monet muut elementit joita sivulla tullaan tarvitsemaan. </li></ul></ul><ul><ul><li>Sisältävät raa’an information, jota sivulle halutaan esiintyvän </li></ul></ul><ul><ul><li>Voivat olla hyvinkin tarkkoja sisältäen jo lopullinen sisällön (tekstit, linkkinimet etc) </li></ul></ul><ul><li>Luonnokset tehdään tärkemmistä sivuista </li></ul>
  25. 27. Vaihe 3 - Visuaalinen suunnitttelu
  26. 28. VAIHE 3 - Visuaalinen suunnittelu <ul><li>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. </li></ul><ul><ul><li>Koneen ääreen asettuva kävijä ei tiedä sivuston kokoa. </li></ul></ul><ul><ul><li>Eksyminen sivustolle on sääntö kuin poikkeus. </li></ul></ul><ul><ul><li>Käyttäjälle suunnittelu vaatii sekä käytännöllistä että innovatiivista ajattelua </li></ul></ul><ul><li>Käyttöympäristö ei ole suunnittelijan kontrollissa </li></ul><ul><ul><li>Päätelaitteen resoluutio </li></ul></ul><ul><ul><li>Käytetty selainohjelma </li></ul></ul><ul><ul><li>Kirjasintyypit, värit </li></ul></ul><ul><ul><li>Selainlaajennukset - erityisesti flash </li></ul></ul><ul><li>Käyttäjäkeskinen tavoite joka www-projektin lopputuloksessa on käytön helppous. Jopa markkinointiväen mielestä. </li></ul>
  27. 29. Visuaalisen suunnittelun yhdistäminen informaatiosuunnitteluun <ul><li>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 . </li></ul><ul><li>Täydellinen maailma: informaatiosuunnittelu tehdään ensin, sisältö toimitetaan valmiiksi ja sitten alkaa luomisprosessi. </li></ul><ul><li>Tosimaailma on harvoin näin lineaarinen. Asiakas haluaa nopeasti nähdä jotain tuttua. </li></ul><ul><ul><li>Rakenntta ja ulkoasua tehdään melkein aina samanaikaisesti. </li></ul></ul><ul><ul><li>Mutta varsinaista taittoa ei kannata tehdä loppuun ennen kuin sisältö- ja informaatiosuunnitttelu on 99,9% valmis. </li></ul></ul>
  28. 30. Kokeile. Mieti. Lainaa. Iteroi. <ul><li>Kuten harvoin graafisessa suunnittelussa – www-sivuston ulkoasu ei synny kertarykäisyllä. </li></ul><ul><li>Salli iteraatiot, mutta aseta määräajat. </li></ul><ul><li>Kerro se myös asiakkaalle. </li></ul><ul><li>Aikataulusta: </li></ul><ul><ul><li>nopeimmat miettivät 4-5 leiskaa päivässä, mutta keskimäärin visualisti pystyy tekemään yhden ehdotuksen 2-3 päivässä </li></ul></ul><ul><ul><li>projektipäällikön tulee huolehtia, ettei visualisti käytä tuntikausia parannellen ja hioen asiakkaan tapaamista varten ennen informaatiosuunnittelun valmistumista. </li></ul></ul>
  29. 31. Huomioita taitosta <ul><li>Älä ahda informaatiota sivulle, anna taitolle tilaa hengittä </li></ul><ul><li>Visuaalinen hierarkia </li></ul><ul><li>Vältä 3-uloitteisuutta. 2,5D riittää. </li></ul><ul><li>Näytön koko 1024x768 vai 800x600 – 955x600 vai 760x420 pikseliä </li></ul><ul><li>Venyvä layout </li></ul><ul><li>Keskimääräinen katseluetäisyys on 50cm </li></ul><ul><li>Ruudulta on edelleen raskas lukea – lyhyet ja kompaktit kappaleet </li></ul><ul><li>6-7 sanaa riviä kohden </li></ul><ul><li>Käyttäjät osaavat vierittää sivua alaspäin, eivät oikealle </li></ul><ul><li>Käyttäjät klikkaavat kaikkea mitä voi kuvitella klikattavan etsiessään linkkejä eteenpäin </li></ul>
  30. 32. Ruuturesoluution ollessa 1024 x 768 pikseliä, on turva-alue 952 x 528 pikseliä
  31. 34. Vaihe 4 - Tuotanto & laadunvarmistus
  32. 35. VAIHE 4 - Tuotanto & laadunvalvonta <ul><li>Tuotannon tavoitteet ovat yksinkertaiset: tehdään sivusto, joka näyttää samanlaiselta ja toimii samalla tavoin kaikille käyttäjille. </li></ul><ul><li>Arvioi projektin tila ennen tuotantoa. </li></ul><ul><ul><li>Ollaanko budjetissa ja aikataulussa? </li></ul></ul><ul><ul><li>Onko sisältö valmis? Tekstit sisältösuunnitelman mukaisesti kirjoitettu ja oikoluettu? Videot kuvattu ja käsitelty sopivana formaattiin? Ääniefektit tehty? </li></ul></ul><ul><ul><li>Onko testiympäristä teknisesti kunnossa? </li></ul></ul><ul><li>Verkon dynamo on HTML (XHTML+ CSS). </li></ul><ul><ul><li>Varmista että tuotantotiimissä on ihmisiä, jotka osaavat toteuttaa mitä on suunniteltu. </li></ul></ul><ul><li>Lopulliset päätökset: </li></ul><ul><ul><li>Toiminallisuudet ja ominaisuudet </li></ul></ul><ul><ul><li>Visuaaliset yksityiskohdat ja taitto </li></ul></ul><ul><ul><li>Erotetaanko sisältö esitystavasta </li></ul></ul><ul><ul><li>Optimoitavat selaimet </li></ul></ul><ul><ul><li>Tiedostorakenne </li></ul></ul><ul><ul><li>Nimeäminen (otsikot sisällössä, tiedostojen nimet ja hakemistot) </li></ul></ul><ul><ul><li>Palvelintiedot </li></ul></ul>
  33. 36. Laajuus: odotukset vs. realiteetit. <ul><li>Ollaanko sivustokartan kokoisessa tilanteessa ? </li></ul><ul><ul><li>vai onko projekti levinnyt käsiin? </li></ul></ul><ul><ul><li>Onnistuuko graafinen tuotanto aikataulussa? </li></ul></ul><ul><ul><li>Kuinka paljon pitääkin tuottaa uutta sisältöä? </li></ul></ul><ul><ul><li>Ovatko graafiset mallipohjat valmiit ? </li></ul></ul><ul><ul><li>Dynaamisten osien liittäminen staattiseen front-endiin? </li></ul></ul><ul><li>Tiedostorakenne on yllättävän tärkeä yksityiskohta </li></ul><ul><ul><li>Sivuston kasvun hallitseminen </li></ul></ul><ul><ul><li>Ylläpitäminen </li></ul></ul><ul><ul><li>Suorat osoitteet alahakemistoihin </li></ul></ul><ul><ul><li>Ovatko kuvat hakemistossa juuritasolla vai jokaisen osion kuvat omassa kansioissaan? </li></ul></ul><ul><ul><li>Onko asiakkaalla toiveita esim käyttää vanhaa tiedostorakennetta? </li></ul></ul>
  34. 37. 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
  35. 38. Tuotanto - graafiikat <ul><li>Kuvien optimointi Photoshopissa on ehdottoman tärkeää jotta päästää hyvään, laadukkaaseen lopputulokseen. </li></ul><ul><li>Viipaloinnissa erotaan graafisesta mallipohjasta (leiskasta) useammaksi kuvatiedostoksi Photoshopissa </li></ul><ul><ul><li>Viipaleet yhdistetäään koostamisen yhteydessä takaisin sivuksi tai Flash-esitykseksi. </li></ul></ul><ul><li>HTML-mallipohjat , joita kierrätetään tuotannossa. </li></ul><ul><ul><li>Näihin laitetaan valmiiksi kaikki globaalit standardit (navigointi, taitto (TABLE tai DIV), ALT- ja META-tekstit, dokumentin sisäinen kommentointi. </li></ul></ul><ul><ul><li>Tyylitiedostot (CSS) mikäli käytetään tehdään tässä yhteydessä </li></ul></ul><ul><li>Testaa mallipohja. </li></ul>
  36. 39. Tuotanto - koostaminen <ul><li>Koostaminen tapahtuu joko HTML:n tai Flashin (animointi/ohjelmointi) avulla. </li></ul><ul><li>Sivujen täyttäminen (tai CMS:n testaus) </li></ul><ul><li>Kevyt skriptaus yleensä javaskriptin avulla </li></ul><ul><li>Ohjelmoitavatkin sivut (.asp, .php etc) vaativat yleensä yhden tai useamman HTML-dokumentit johon skriptaus toteutetaan. </li></ul><ul><li>Lisää muut mediat osaksi sivua </li></ul><ul><li>Vahdi tiedostojen kokoa. Yli 100 ktavun html-sivut ovat todennäköisesti liian raskaat. </li></ul><ul><li>Nyrkkisääntönä: yksi html-sivupohja valmistuu noin päivässä kun aloitetaan tyhjältä pöydältä. </li></ul><ul><li>Käsinkoodaus vai editori? </li></ul><ul><li>Versionhallinta </li></ul>
  37. 40. Laadunvarmistus <ul><li>Sivusto on valmis. Laadunvarmistuksen aika. </li></ul><ul><li>Tuotantoa ei koskaan saa päästää läpi ennen laadunvarmistusta </li></ul><ul><ul><li>Rikkinäiset linkit. Placeholder-tekstit ja –kuvat. </li></ul></ul><ul><ul><li>Toiminnallisuuksen bugit. </li></ul></ul><ul><ul><li>Väärin sijoitettu sisältö. </li></ul></ul><ul><li>Sivuston testausympäristön tulee olla tarkalleen sama kuin lopullinen tuotantoympäristö </li></ul><ul><li>Löydöksien priorisointi ja korjaaminen. </li></ul><ul><li>HUOM: pilkun siirtäminen printtimainoksessa on hetken homma. Nettisivulla se vaatii uutta koostamista, joka on pidempi kuin hetki (yleensä). </li></ul><ul><li>Mieti projektoidessa olisiko parempi tehdä vaiheittain ja testata palasina? </li></ul>
  38. 41. Taiton toteutustekniikat <ul><li>Taulukko - taitto toteutetaan HTML:n taulukkorakenteen avulla <TABLE> </li></ul><ul><li>Layerit (kerrokset) - taitto tyylitiedostojen avulla <DIV> </li></ul><ul><li>Kehykset - samassa sivunäkymässä useita HTML-tiedostoja <FRAMESET> </li></ul><ul><li>Flash - taitto yhtenä (tai useampana) sovellustiedostona (.swf) </li></ul>
  39. 42. Graafisten mallipohjien teko <ul><li>Graafinen mallipohja on hyväksytty ulkoasu. </li></ul><ul><li>Käytetään optimointiin ja (HTML)-tuotantoon </li></ul><ul><li>Huomaa että esitetty ehdotus poikkeaa yleensä aavistuksen siitä mitä lopullinen toteutus on – CSS-taitto ei ole sama kuin PhotoShop-taitto. Kerro siitä asiakkaalle. </li></ul><ul><li>Tee lopulliset graafiset elementit, jotka tukevat aikaisemmin sovittuja toiminallisuuksia. </li></ul><ul><li>> navigation on/off/over -tilat </li></ul><ul><li>> painonapit on/off/over-tilat </li></ul><ul><li>> placeholder tai alternative-kuva flashille tai videolle </li></ul>
  40. 43. Graafiset mallipohjat ovat tuotannon raaka-ainetta <ul><li>Mallipohja on master-dokumentti joka optimoidaan ja viipaloidaan prosessin seuraavassa vaiheessa. </li></ul><ul><ul><li>Säilytä PhotoShop-versio kerroksineen. </li></ul></ul><ul><ul><li>Jokaiselle sivupohjalle ei välttämättä tarvita omaa graafista mallipohjaa (tosin asiakas usein haluaa sellaisen nähdä  ) </li></ul></ul><ul><ul><li>Jos pohjia on paljon, tee taulukko johon listaa pohjan tiedostonimen ja sivut, joihin sivustossa pohjaa käytetään. </li></ul></ul><ul><li>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). </li></ul><ul><li>Tarkista että tuotannosta löytyvät halutut ja tarvittavat kirjasinleikkauset. </li></ul><ul><li>Pienissä projekteissa suunnittelija toimii samalla tuotanto-graafikona/animaattorina. </li></ul>
  41. 44. Tyyliopas <ul><li>Graafisen mallipohjan jälkeen kirjoitetaan tyyliopas tuotannon suunnittelijoille ja ylläpitäjille. </li></ul><ul><li>Jokainen sivu sivustossa on erilainen mutta niillä on yhtenäisiä elementtejä. </li></ul><ul><li>Johdonmukaisuuden säilyttäminen on ensisijianen tavoite. </li></ul><ul><li>Määrittele tyylioppaassa: </li></ul><ul><ul><li>sivujen palstojen leveydet </li></ul></ul><ul><ul><li>mouseover-tilat </li></ul></ul><ul><ul><li>linkkien värit </li></ul></ul><ul><ul><li>muut värimääritykset </li></ul></ul><ul><ul><li>fontit </li></ul></ul><ul><ul><li>otsikko ja leipätekstikoot </li></ul></ul><ul><ul><li>kuvakoot </li></ul></ul><ul><ul><li>animaatioiden toteutus </li></ul></ul>
  42. 45. Tyyliopas #2 <ul><li>Täydennä tyyliopas julkaisun jälkeen ylläpitoa varten. Lisää mahdollisesti ohjeet kuvituksen käytöstä ja kuvitustyylistä muutamalla lauseella. </li></ul><ul><li>Tee asiakkasta varten visuaalinen esitys valituista tyyleistä. </li></ul><ul><li>CSS tyylitiedostot </li></ul><ul><li>Interaktioiden ohjeistus (painikkeet, nuolet, lomakkeet etc) </li></ul><ul><li>Käytetyt standardit toistuville elementeille </li></ul><ul><li>Käsittele designin erityiskohdat </li></ul>
  43. 46. Pikatestejä projektin hallintaan <ul><li>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? </li></ul><ul><li>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? </li></ul><ul><li>Oletko tarkistanut designin 800x600 pikselin resoluutiolla (just in case)? </li></ul><ul><li>Oletko tarkistanut ehdotuksen sekä PC:llä että Macillä? </li></ul><ul><li>Oletko tarkistanut aiheuttaako fonttikoon muutos desgnin hajomisen? </li></ul><ul><li>Oletko tarkistuttanut ehdotetun designin tuotanto-puolella? On se toteuttamiskelpoinen? Onko se viipaloitavissa? </li></ul>
  44. 47. Testaus <ul><li>Visuaalinen suunnittelu ei kaipaa selityksiä. Mutta entä testaus? </li></ul><ul><li>Aivan liian usein testaus on edelleen se välttämätön paha joka tehdään n. sadasta eri syystä. </li></ul><ul><li>Oletukset tulee testata. Toimii paperilla mutta entä käytännössä? </li></ul><ul><li>Suositus : tee protosivusto. Se voi olla rautalankamallisen laajennus tai sisältää ehdotettua visuaalista ilmettä. </li></ul><ul><li>Leiska on tehty Photoshopissa viimeisen päälle. Yleensä koodattuna välistykset, fontit, marginaalit eivät ole 100% samat. </li></ul><ul><ul><li>Selitä tämä projektin alussa tilaajalle. </li></ul></ul><ul><ul><li>Näytä myös miten kirjasinkoon muuttaminen vaikuttaa leiskaan. </li></ul></ul>
  45. 48. www-proto <ul><li>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. </li></ul><ul><li>Testausta vaativia: </li></ul><ul><ul><li>monimutkaiset kehysrakenteet (frames) </li></ul></ul><ul><ul><li>toiminnalliset mouseover-valikot (javascript) </li></ul></ul><ul><ul><li>sijoittelu- ja kokospesifit pop-up ikkunat </li></ul></ul><ul><ul><li>tyylipojat ja selainspesifit kohtelut </li></ul></ul><ul><ul><li>yksinkertaiset ostoskoritoiminnot </li></ul></ul><ul><ul><li>kaikki mikä vaatii kevyttä skriptausta </li></ul></ul><ul><li>Testaus: Internet Explorer, Safari, Firefox, Opera, Netscape -selaimilla </li></ul><ul><li>Toiminnallisuuksen oletusten testaaminen visuaalisen suunnittelun aikana antaa mahdollisuuden korjata ongelmat ennen kuin design on valmis. </li></ul><ul><li>Testauksen avulla tuotannon ihmiset sitoutetaan edessä olevaan tehtävään. </li></ul>
  46. 49. Vaihe 5 - Julkaisu & seuranta
  47. 50. VAIHE 5: Julkistus & seuranta <ul><li>Tuotantoympäristön pystytys tai palvelintilan hankinta </li></ul><ul><li>Tiedostonsiirtoyhteys www-palvelimelle (FTP, SCP) </li></ul><ul><ul><li>Kuka? </li></ul></ul><ul><ul><li>Milloin? </li></ul></ul><ul><ul><li>Testaus vielä kerran, jotta sivut ja kuvat näkyvät, linkit ja animaatiot ja lomakkeet toimivat </li></ul></ul><ul><ul><li>Siirrä “etusivu” viimeisenä kun muu sivusto on happotestattu (index.html, default.asp ym tiedosto) </li></ul></ul><ul><li>Trafiikin mittaus (esim Google Analytics) </li></ul><ul><li>Mitä jäi seuraavaan vaiheeseen </li></ul><ul><li>Hakukoneoptimointi, SEO </li></ul><ul><li>Sivuston markkinointi </li></ul>
  48. 51. Verkkoaineiston tuotanto Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.blogspot.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×