Tredun ohjelmistokehittäjien kurssimateriaaleja
Verkkosivujen suunnittelu ei ole vain visuaalista koristelua. Hyvä suunnittelu tukee sivun käyttöä, ymmärrettävyyttä ja saavutettavuutta. Ohjelmistokehittäjän ei tarvitse olla graafikko, mutta hänen tulee osata rakentaa sivuja, jotka ovat selkeitä, loogisia ja miellyttäviä käyttää.
Verkkosivuja suunniteltaessa puhutaan usein kahdesta toisiinsa liittyvästä käsitteestä: UX (User Experience) ja UI (User Interface). Ne liittyvät toisiinsa, mutta tarkoittavat eri asioita.
Yksinkertaistettuna:
UX keskittyy siihen, miltä sivun käyttö tuntuu
UI keskittyy siihen, miltä sivu näyttää ja miten sitä käytetään
Molempia tarvitaan hyvän verkkosivun tekemiseen.
UX (käyttäjäkokemus) tarkoittaa kokonaisuutta, joka muodostuu siitä, kuinka helppoa, loogista ja miellyttävää sivun käyttäminen on.
UX ei ole vain visuaalinen asia, vaan ennen kaikkea toiminnallinen ja rakenteellinen.
UX-esimerkkejä:
Hyvä UX tarkoittaa usein sitä, että käyttäjä ei kiinnitä siihen erityistä huomiota – asiat vain toimivat.
UI (käyttöliittymä) tarkoittaa sivun näkyvää ja konkreettista osaa: sitä, millaisia painikkeet, tekstit, värit ja asettelut ovat.
UI vastaa siitä, miten käyttäjä on vuorovaikutuksessa sivun kanssa.
UI-esimerkkejä:
Hyvä UI auttaa käyttäjää ymmärtämään, mitä sivulla voi tehdä.
Ennen kuin mietit värejä tai asettelua, vastaa näihin kysymyksiin:
Hyvä suunnittelu tukee sivun tarkoitusta. Kaiken ei tarvitse näkyä heti, mutta tärkeimpien asioiden tulee olla helposti löydettävissä.
Verkkosivun rakenteen tulee olla looginen sekä käyttäjälle että selaimelle.
Hyvän rakenteen tunnusmerkkejä:
Rakenne tehdään HTML:llä. CSS ei saa olla ainoa syy siihen, että sisältö “näyttää oikealta”.
Sijoittelun tarkoitus on ohjata käyttäjän huomiota.
Perusperiaatteita:
Selkeä sivu näyttää usein yksinkertaiselta – se on merkki hyvästä suunnittelusta, ei huonosta.
Kaikki sisältö ei ole yhtä tärkeää.
Hyvä hierarkia kertoo käyttäjälle:
Hierarkia syntyy esimerkiksi:
Värien tehtävä on tukea luettavuutta ja käytettävyyttä.
Hyviä perusohjeita:
Usein hyvä ratkaisu on:
Sisältö luetaan, ei vain katsota.
Huomioi:
Liian pieni teksti tai liian tiheä sisältö tekee sivusta raskaan käyttää.
Kuvien tehtävä on tukea sisältöä, ei häiritä sitä.
Hyviä käytäntöjä:
Huonolaatuinen tai epäselvä kuva tekee sivusta helposti epäammattimaisen.
Sivun eri osien tulisi tuntua kuuluvan yhteen.
Johdonmukaisuutta luovat:
Jos jokin asia toimii yhdellä sivulla, sen tulisi toimia samalla tavalla muuallakin.
Verkkosivuja käytetään erilaisilla laitteilla.
Hyvä suunnittelu huomioi:
Responsiivisuus ei ole erillinen ominaisuus, vaan osa hyvää suunnittelua alusta alkaen.
Lisää materiaaleja verkosta: