Lounais-Suomen Partiopiirin nettisivukoulutus: Sisältö selkeäksi - Käytettävyys, visuaalinen ilme ja kuvat nettisivuilla

1. SISÄLTÖ SELKEÄKSI
Käytettävyys, visuaalinen ilme ja kuvat nettisivuilla
Juho “Visu” Vainio!
juho.vainio@partio.fi

2. 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

3. • 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

4. 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

5. 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

8. 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

9. 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

12. 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

13. 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

16. 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ö

18. 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