Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Transkriptio

1 Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara

2 Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat vuokaaviot käyttötapaukset -nimi -suorittaja -tarkoitus - alkutilanne - lopputilanne -kuvaus - vaihtoehdot - poikkeukset sisältö sivusto -rakenne sivu - rautalankamallit - käsikirjoitus - graafinen suunnitelma Kaiken suunnittelun taustalla on tavoite ja kohderyhmä.

3 Sisällön käsittely sisältö Sisällön käsittely: Sisältö on tärkeintä jokaisessa sivustossa/sivussa. Paraskaan tekniikka ja hieno kuvitus ei pelasta huonoa sisältöä. Hyvä sisältökään ei riitä vaan sisältö täytyy organisoida eli järjestää hyvin. Muista kohderyhmän vaikutus sisältöön ja sisällön järjestykseen. Tehtävänäsi on suunnitella ja toteuttaa pk-yrityksen wwwsivusto. sivuston tavoite ja kohderyhmä 1. Mitä asioita sivustoosi tulee? 2. Järjestä asiat loogisella tavalla. Aloita jakamalla sisältö eri osuuksiin. Tee myös alijaot osuuksien sisällä. 3. Tee sisältörunko. Voit käyttää esim. ranskalaisia viivoja tai miellekarttaa. 4. Arvioi valmis sisältörunko.

4 sivusto -rakenne Sivustokartta Sivustokartta eli sivuston rakenne Sivustokartta on kuvallinen esitys sivuston rakenteesta, kulusta sekä sisällön ja tietojen ryhmittelystä. Jokainen sivu omaan laatikkoon Linkit näkyviin (tärkeimmät) Kotisivu index.html Yritys company.html Y. Historia c_biographies.html Yhteystiedot c_contact.html Nimeämiskäytännöt: Päätä vakiotapa, jolla tiedostot nimetään. Organisatorinen nimeäminen Html-nimeäminen 1. Kotisivu 2. Yritys 2.1 Yrityksen historia 2.2 Yhteystiedot

5 6. Toteuta sivustokartta tekemäsi sisältörungon perusteella. Mieti vielä rakenteen loogisuutta. 7. Mieti ja toteuta samalla nimeämiskäytäntö. kotterot vaihtoautot jätä ilmoitus yritys Tämä on myös hyvä pohja hakemistorakenteen suunnitteluun. henkilöautot pakettiautot yhteystiedot työntekijät erikoisuudet

6 sivu - rautalankamallit - käsikirjoitus - graafinen suunnitelma Rautalankamallit Sivuston kuvallinen käsikirjoitus Tehdään luonnokset tärkeimmistä sivuista: navigointi, otsikot, tekstin sijoittelu, kuvat jne. logo Kuva etsi etsi Päänavigointi alinavigointi Asiasisältö 8. Suunnittele ja piirrä kaikista tärkeimmistä sivumalleista rautalankamallit. Tässä tehtävässä toteutetaan pieni sivusto, joten suunnitellaan kaikki mallit. 9. Numeroi tai nimeä mallit (etusivu, alasivu, sisältösivu, tietosivu...)

7 Käyttöliittymän iteratiivinen kehittäminen paperiprototyypeillä: toteuta riittävän samankaltainen prototyyppi tuotteen käyttöliittymästä kuin lopullinen palvelu testaa prototyyppiä ja analysoi tulokset tee korjaukset prototyyppiin ja testaa uudelleen kun prototyyppi on valmis, tee siitä rautalanka malli korjataan ja suunnitellaan lisää yksityiskohtia suunnitellaan tehdään paperiprototyyppi Hyödyt paperiprotoilusta: - edullista - iterointi nopeaa - helppoa, ei vaadi erikoistekniikoita - arvioinnin ja arvostelun kynnys matala ICT1TN004 analysoidaan valmis rautalankamalli

8 Käsikirjoitus Kirjoitetaan auki jokainen sivu, eli mitä tekstejä, taulukoita, kuvia jne. sivuilla on. Sivujen yhteiset osiot kuten tunnuskuvat/logot, navigoinnit riittää, että kirjoitat vain yhden kerran. Käsikirjoittamisen työvälineet: vapaamuotoinen kirjoittaminen taulukkokäsikirjoitusmenetelmä ohessa olevan esimerkin mukaisesti ICT1TN004

9 Esimerkki: Kotterot vaihtoautot netistä ilman välikäsiä 2) navigointi 1) tunnuskuva + otsikko 3) sivun otsikko 4) Tekstit, kuvat ja muu sisältö 5) Yhteistyökumppanien linkit ja mainokset

10 Sivu: index.html, Kotterot Oy:n kotisivu Sivun idea: Kotterot Oy:n kotisivu, kerrotaan liikeidea ja linkit muille sivuille. Osio 1) Tunnuskuva ja otsikko Sisältö Kotterot.gif Kotterot OY 2) Navigointi kotisivu vaihtoautot jätä ilmoitus - yritys 3) Sivun otsikko Kotterot vaihtoautot netistä ilman välikäsiä 4) Tekstit, kuvat ja muu sisltö Kotterot Oy:n sivuilta löydät nopeasti ja edullisesti sinulle sopivan vaihtoauton. Autojen välitys tapahtuu suoraan myyjältä ostajalle ilman turhia välikäsiä. Palvelun kautta voit myös jättää autosi myyntiin ja odotella kotona takkatulen ääressä yhteyden ottoa autosi oston merkeissä. Kuva: kottero2.jpg Huom. Jos tekstit ovat pitkiä, niistä kannattaa tehdä erillinen liite.

11 Graaffinen suunnitelma Tee sivustosi ulkoasusta visuaalinen suunnitelma, josta ilmenee sivuston visuaalinen teema, jonka lähtökohtana on kohderyhmä ja sivuston tavoite selaimen kohdeikkunan koko, katseltavana ja maksimoituna käytätkö venyviä sivuja vai kiinteää leveyttä (ja korkeutta) kaikkien rakenneosien tarkat paikat, koot ja värit kaikkien tekstien (pääotsikko, alaotsikot, leipätekstit, kuvatekstit, linkit aktiivisena ja passiivisena ja muut tarvittavat tekstit) fontit, koot, värit, välistykset ja harvennukset. Graafisen suunnitelman työvälineet: vapaamuotoinen kirjoittaminen ohjeen 1 mukaan ohjeen 2 mukaan käyttäen leiskasuunnitelmia

12 Ohje 1 1. Yleiskuvaus sovelluksen teemasta 2. Sovelluksen yleinen ulkoasu 2.1 Näyttökoko suunnittelun lähtökohtana oleva sivun peruskoko kannanotto mukautuvuuteen 2.2 Tausta taustan yleisilme 2.3 Tekstit pääotsikko alaotsikot leipäteksti kuvatekstit linkit tausta fontti väri koko muuta huomioitavaa

13 Ohje 1 jatkuu 2.4 Kuvat ja grafiikka kuvien yleisilme animaatiot grafiikat: viivat ym. 2.5 Taulukot Taulukoiden ulkoasu: taustat, tekstit, kehykset 2.6 Luettelot Luetteloiden ulkoasu 2.7 Navigointiratkaisu Perusnavigoinnin esittely 2.8 Muut elementit 3. Yksittäisten sivujen poikkeukset 4. Suunnitteluleiskoja Leiskoja perussivuista, joista näkyy sovelluksen ulkoasusuunnittelun lisäksi sommittelu.

14 Ohje 2 1. Yleiskuvaus sovelluksen teemasta 2. Näyttökoko suunnittelun lähtökohtana oleva sivun peruskoko kannanotto mukautuvuuteen Muut asiat voit esittää hyväksi käyttäen leiskoja.

15 Ohje 2 jatkuu: 3. Komponenttien mitat ja paikat Sivun leveys 900 px Sivu keskitetään Liikemerkki: 200x78 px Oikean reunat kuvat: 75x68 px 10px 153px 200px 230px 15px 10px 240px 8em 10em

16 Tausta valkoinen: rgb(255,255,255) Ohje 2 jatkuu: 4. Komponenttien värit, viivojen paksuudet Border: 1px solid rgb(0,0,0) rgb(255,255,255) rgb(172,205,21) rgb(255,255,255)

17 Ohje 2 jatkuu: 5. Typografia Sivuston perusfontti: font-family: Tahoma, Arial, Helvetica, sans-serif color: rgb(0,0,0) Murupolku: font-size:0.7em hover: color: #0066cc h1: oletus h3: oletus Navigointi: color: rgb(255,255,255) hover: color: rgb(0,102,204).ollaan color:rgb(0,0,0) p: oletus Linkit tekstissä: -oletus -hover color: rgb(0,122,201) background-color: rgb(255,255,255)

18 Ohje 2 jatkuu: 6. Listat, taulukot ja muut elementit Listat Oletus Taulukot border: 1px solid rgb(0,122,201) border-collapse:collapse td, th padding:5px tekstin ja reunan välinen tila 5px vertical-align:top tekstit aina alkaa solun yläreunasta text-align:left tekstit sijoitetaan vasempaan reunaan Esittele kaikki sivustosi elementit