Asettelun suunnitteluperiaatteet: elementit ja käytännön ohjeet

Mitä asettelu tarkoittaa?

Asettelu tarkoittaa sisällön sijoittamista sivulle, ruudulle tai muulle pinnalle. Siihen kuuluvat esimerkiksi tekstipalstojen leveydet, kuvien paikat, otsikoiden koko ja elementtien väliset etäisyydet. Sommittelu on läheinen käsite, joka painottaa kokonaisuuden visuaalisia suhteita.

Elementit ovat aseteltavia osia, periaatteet niiden järjestämisen keinoja. Asettelutyyppi puolestaan kuvaa kokonaisuuden rakennetta, kuten tekstipalstaa tai korttiruudukkoa. Näitä käsitteitä ei kannata käyttää toistensa synonyymeina.

Keskeiset asettelun suunnitteluperiaatteet

Hierarkia: osoita sisällön tärkeysjärjestys

Visuaalinen hierarkia ohjaa huomiota tärkeimmästä asiasta tarkentaviin tietoihin. Sitä rakennetaan koolla, kirjainten painolla, sijoittelulla, väreillä ja välistyksellä. Jos kaikki otsikot, kuvat ja painikkeet korostuvat yhtä vahvasti, lukija joutuu itse päättelemään, mistä aloittaa.

Kontrasti: tee merkitykselliset erot näkyviksi

Kontrasti ei tarkoita pelkästään tummaa tekstiä vaalealla taustalla. Myös suuri ja pieni, paksu ja ohut sekä erilaiset muodot luovat eroja. Käytä korostuksia valikoivasti: pääotsikon pitää erottua leipätekstistä, mutta jokaisen lauseen ei tarvitse erottua muista.

Ryhmittely ja tyhjä tila: näytä, mikä kuuluu yhteen

Lähekkäin sijoitetut elementit hahmotetaan yleensä samaan kokonaisuuteen kuuluviksi. Pidä esimerkiksi kuvateksti lähellä kuvaansa ja lomakkeen ohje lähellä kenttää. Jätä eri aiheiden väliin enemmän tilaa kuin saman ryhmän sisälle.

Tyhjä tila tarkoittaa aluetta, jossa ei ole sisältöä; sen ei tarvitse olla valkoinen. Se erottaa kokonaisuuksia ja tukee hierarkiaa. Älä täytä jokaista aukkoa koristeella, jos tila auttaa jo lukijaa hahmottamaan rakenteen.

Tasaus ja toisto: rakenna johdonmukaisuutta

Tasaa toisiinsa liittyvät tekstit ja kuvat yhteisiin reunoihin tai ruudukon linjoihin. Ruudukko eli hila toimii sijoittelun apuna, vaikka se ei näy lopputuloksessa. Toista saman tehtävän elementeissä samaa tyyliä: väliotsikot, kuvatekstit ja painikkeet tarvitsevat tunnistettavan ulkoasun.

Tasapaino: huomioi elementtien visuaalinen paino

Suuri kuva tai voimakas väripinta voi hallita kokonaisuutta, vaikka muita elementtejä olisi paljon. Tasapaino ei silti edellytä peilikuvamaista symmetriaa. Epäsymmetrinenkin asettelu voi toimia, kun pääasia erottuu eivätkä muut olennaiset tiedot huku.

Mistä elementeistä asettelu rakentuu?

Elementtien luokittelu riippuu käyttötarkoituksesta. Käytännön työssä kannattaa tunnistaa ainakin seuraavat osat:

• Teksti ja typografia: otsikot, leipäteksti, kuvatekstit sekä kirjasintyypin, koon ja välistyksen valinnat.
• Kuvat ja grafiikka: valokuvat, kuvitukset, kuvakkeet ja kaaviot.
• Väri: tekstien, taustojen ja korostusten sävyt.
• Viivat ja muodot: rajaukset, erotinviivat, kehykset ja taustapinnat.
• Tekstuuri: esimerkiksi kuvituksen tai taustan näkyvä pintavaikutelma.
• Tila: marginaalit, palstavälit ja elementtien ympärille jätetyt alueet.

Kaikkia elementtejä ei tarvitse käyttää. Tekstipainotteinen ohje voi toimia ilman kuvitusta, jos otsikointi ja välistys jäsentävät sisällön. Jos tarvitsemasi kirjasintyyppi puuttuu koneelta, katso fonttien asentamisen ohje Windowsille.

Valitse asettelutyyppi sisällön mukaan

Alla oleva taulukko on käytännön valinta-apu, ei virallinen asettelutyyppien luokittelu. Rakenteita voi myös yhdistää: ruudukko voi sisältää sekä tekstipalstoja että kortteja.

Mainoksen sommittelua suunnitellessa voit etsiä vertailukohtia Facebook-mainoskirjaston käyttöohjeen avulla. Tarkastele erityisesti pääviestin, kuvan ja toimintakehotteen suhteita, älä kopioi pelkkää ulkoasua.

Näin rakennat asettelun käytännössä

1. Määrittele tehtävä. Kirjoita, mitä lukijan pitää ymmärtää tai tehdä. Päätä myös julkaisupinta ja käyttötilanne.
2. Järjestä sisältö. Erota pääviesti, sitä tukevat tiedot ja lisätiedot. Poista sisältö, joka ei palvele tehtävää.
3. Luonnostele rakenne. Sijoita tekstialueet ja kuvat ilman yksityiskohtaista koristelua. Valitse palstat tai ruudukko.
4. Rakenna hierarkia. Tee pääasiasta selvästi näkyvämpi kuin täydentävistä tiedoista. Ryhmittele liittyvät asiat ja yhtenäistä tasaukset.
5. Tarkista oikealla sisällöllä. Kokeile pitkiä otsikoita ja todellisia kuvia. Tarkista digitaalinen asettelu myös kapealla näytöllä ja suurennetulla tekstillä.

Esimerkki: sekavan tapahtumajulisteen korjaaminen

Kuvitteellisessa julisteessa tapahtuman nimi, esittelyteksti, paikka ja ilmoittautumisohje ovat samanlaisia tekstilaatikoita. Koristekuva on näyttävä, mutta lukija ei helposti löydä tapahtuman käytännön tietoja.

Korjaa ensin tärkeysjärjestys: nosta tapahtuman nimi pääotsikoksi ja sijoita ajankohta sekä paikka lähelle sitä. Erota ilmoittautumisohje omaksi kokonaisuudekseen ja pienennä koristekuvan painoarvoa. Lopuksi yhtenäistä tekstien vasemmat reunat ja lisää ryhmien väliin tilaa.

Samaa ryhmittelyn ajatusta voi soveltaa pienempään kokonaisuuteen, kuten sähköpostin allekirjoituksen luomiseen: nimi, yhteystiedot ja mahdollinen kuva tarvitsevat selkeän keskinäisen järjestyksen.

Digitaalisen asettelun kontrasti ja saavutettavuus

Visuaalisesti selkeä sivu ei vielä ole kokonaan saavutettava. Myös otsikkorakenteen, lukujärjestyksen ja kuvien tekstivastineiden on toimittava. Papunetin saavutettavuuden tarkistuslista auttaa tarkastelemaan näitä erikseen.

W3C:n WCAG 2.2 -ohjeen AA-tason tekstikontrastin vähimmäisarvot ovat seuraavat. Arvot on tarkistettu tutkimusaineistosta 30.9.2026; tarkista ajantasaiset määritelmät alkuperäisestä ohjeesta.

• Tavallinen teksti: kontrastisuhde taustaan vähintään 4,5:1.
• Suurikokoinen teksti: kontrastisuhde vähintään 3:1. Suurikokoisen tekstin alaraja on 18 pt normaalipainoisena tai 14 pt lihavoituna.

Ohjeessa on poikkeuksia esimerkiksi logoteksteille ja pelkälle koristeelliselle tekstille. Käyttöliittymäkomponenttien ja niiden tilojen tunnistamiseen tarvittavien visuaalisten osien kontrastivaatimus on lähtökohtaisesti 3:1 viereisiin väreihin nähden; se ei tarkoita jokaisen koristeellisen reunan mittaamista.

Kelan värien saavutettavuusohje muistuttaa myös, ettei väri saa olla ainoa tiedon välittämisen keino. Kirjoita esimerkiksi virheilmoitus tekstinä sen sijaan, että merkitset kentän vain punaiseksi. Kontrastiohjeet eivät yksin ratkaise palvelun kaikkia saavutettavuusvaatimuksia.

Tarkistuslista: löydä tavalliset ongelmat

• Kaikki kilpailee huomiosta: vähennä korostuksia ja valitse selkeä pääasia.
• Liittyvät tiedot näyttävät irrallisilta: tuo ne lähemmäs toisiaan ja erota ryhmä muusta sisällöstä.
• Kokonaisuus näyttää levottomalta: tarkista yhteiset reunat, välistykset ja toistuvien elementtien tyylit.
• Teksti hukkuu kuvaan: muuta tekstin sijoittelua tai taustaa ja mittaa kontrasti.
• Mobiilinäkymä sekoittaa järjestyksen: tarkista sekä näkyvä että ohjelmallinen lukujärjestys.
• Sivu on täynnä mutta vaikea lukea: poista tarpeettomia elementtejä ennen kuin pienennät tekstiä.

Yhteenveto ja seuraava askel

• Arvioi asettelua sen tehtävän, ei sääntölistan pituuden perusteella.
• Valitse rakenne sisällön määrän ja käyttötilanteen mukaan.
• Tarkista luettavuus ja saavutettavuus ennen julkaisua.

Ota oma luonnoksesi esiin, nimeä sen pääviesti ja korjaa tarkistuslistasta ensin kohta, joka eniten vaikeuttaa tiedon löytämistä.

Lähteet

• Nielsen Norman Group – Principles of Visual Design in UX
• Figma – Graphic design principles
• W3C – Web Content Accessibility Guidelines 2.2
• Kela Design System – Värien saavutettavuus
• Papunet – WCAG 2.2 -tarkistuslista