l-sp nettisivukurssi: sisältö selkeäksi
DESCRIPTION
Lounais-Suomen Partiopiirin nettisivukoulutus: Sisältö selkeäksi - Käytettävyys, visuaalinen ilme ja kuvat nettisivuillaTRANSCRIPT
![Page 1: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/1.jpg)
SISÄLTÖ SELKEÄKSIKäytettävyys, visuaalinen ilme ja kuvat nettisivuilla
Juho “Visu” [email protected]
![Page 2: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/2.jpg)
Käsiteltävät aihealueet• Toimiva rakenne ja käytettävyys nettisivuilla
› sisällön asettelu › värit› typografia
• Teeman valitseminen tarpeen mukaan
• Kuvat verkkoon
![Page 3: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/3.jpg)
• Tarvittava sisältö helposti löydettävissä, päätelaitteesta riippumatta
• Sisältö ja asettelu mietitty loppukäyttäjä edellä › mitä jäsen hakee ensimmäisenä sivulta? › entä retkelle/leirille/purjehdukselle haluava? › entä vanhemmat ja muu taustayhteisö?
• Visuaalisesti miellyttävä, elementit tasapainossa › luo varmemman vaikutelman sisällöstä › selkeyttää sisällön lukemista
Toimiva rakenne
![Page 4: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/4.jpg)
Mieti millä luetaan• Verkkoliikenteestä mobiililaitteiden käyttäjiä
nykyään noin 27%, kannattaa siis ottaa se huomioon sivuja rakentaessa
• Näytön koon mukaan järjestäytyvä sisältö auttaa nopeassa tiedonhaussa
![Page 5: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/5.jpg)
Otsake!› sivun nimi ja tunnus
Valikko
Sisältö!› tekstit › kuvat
Sivupalkki!› widgetit › kalenteri
› viimeisimmät postaukset yms.
Otsake
Valikko
Sisältö
Sivupalkki
Työpöydällä Mobiilissa
![Page 6: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/6.jpg)
![Page 7: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/7.jpg)
![Page 8: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/8.jpg)
Päävalikko | Sivujen navigaatio
Tulevat tapahtumat
Tiedotteita, uutisia
Kuvakaruselli!Mainoksia ja nostoja
Logo/tunnus HakuUlkoiset palvelut, esim. SP
Taustakuva!Kannattaa valita rauhallinen tai jopa yksivärinen
![Page 9: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/9.jpg)
Värit verkossa• Verkossa väriyhdistelmien kanssa toimivat lähes
samat säännöt kuin printissä
• Värit merkitään pääsääntöisesti heksakoodeina, esim. valkoinen #ffffff ja musta #000000
• Partiolle on määritetty tietyt väripaletit printteihin, niitä kannattaa kuitenkin mukauttaa omaan tarpeeseen ja hieman kirkastaa näyttöjä varten
• Väripaletteja voi luoda esim. Adobe Kulerilla
![Page 10: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/10.jpg)
![Page 11: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/11.jpg)
![Page 12: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/12.jpg)
Typografia ja fontit• Kannattaa suosia selkeitä, päätteettömiä fontteja
jotka löytyvät kaikista järjestelmistä, esim. › Arial, Verdana, Helvetica
• Myös muita fontteja on mahdollista käyttää, näitä ns. webfontteja löytyy esim. Google Fontseista: › Open Sans› Ubuntu
![Page 13: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/13.jpg)
Wordpressin teemoitus• Wordpressille löytyy lukuisia käyttäjien
suunnittelemia teemoja osoitteessa wordpress.org/themes
• Valinta kannattaa tehdä käyttötarpeen mukaan, lähtökohtaisesti ns. kikkailusivuja kannattaa välttää
• Kätevästi muokattavissa oleva teema on esim. valmiiksi asennettu Twenty Twelve tai Skeleton
![Page 14: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/14.jpg)
![Page 15: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/15.jpg)
![Page 16: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/16.jpg)
Kuvat sivuilla• Netissä kuvat vetävät parhaiten mukaan sisältöön
ja viestivät sen laadusta
• Jos sivuilla on pitkiä tekstejä kuva auttaa keventämään ja selkeyttämään sisältöä
• Partiosivuilla kuvilla halutaan viestiä että partio on hauska harrastus kaiken ikäisille, ei sotilaallinen järjestö
![Page 17: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/17.jpg)
![Page 18: L-SP Nettisivukurssi: Sisältö selkeäksi](https://reader033.vdocuments.pub/reader033/viewer/2022042715/559b66a81a28ab313c8b476a/html5/thumbnails/18.jpg)
Kuvat verkkoon• Kun halutaan kuvia verkkoon niin niiden kokoa
kannattaa pienentää ja laatua hieman heikentää › tavoitekuvakoko maksimissaan noin 1 MB
• Ilmaisia kuvankäsittelyohjelmia esim. GIMP sekä selaimella toimiva Pixlr
• Lisää vinkkejä kuvaamiseen ja kuvien valintaan Kiva kuva -koulutuksessa