Upload
juho-vainio
View
87
Download
4
Embed Size (px)
DESCRIPTION
Lounais-Suomen Partiopiirin nettisivukoulutus: Sisältö selkeäksi - Käytettävyys, visuaalinen ilme ja kuvat nettisivuilla
Citation preview
SISÄLTÖ SELKEÄKSIKäytettävyys, visuaalinen ilme ja kuvat nettisivuilla
Juho “Visu” [email protected]
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
• 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
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
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
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
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
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
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
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ö
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