# Diojen suunnittelu: 15 sääntöä muistettaviin esityksiin

[Canonical HTML page](https://gradiently.design/fi/guide/slide-design-tips)

Huonot diat eivät yleensä ole rumia. Ne ovat täysiä ja pienitekstisiä ja yrittävät korvata puheen sen tukemisen sijaan. Nämä viisitoista sääntöä korjaavat sen suunnilleen tarvitsemassasi järjestyksessä.

## The short version

- Diojen suunnittelun tärkein sääntö on yksi ajatus per dia, kokonaisena lauseena otsikossa.
- Tavallinen diakoko on 16:9 eli 1920×1080 pikseliä. Jotkin vanhat projektorit käyttävät yhä 4:3-kokoa 1600×1200.
- Diatekstin tulee olla luettavaa huoneen takaosasta. 1920×1080-dialla se tarkoittaa noin 36 pikselin leipätekstiä tai suurempaa.
- Esitys näyttää yhtenäiseltä, kun joka dia käyttää samaa taustajärjestelmää, kahta fonttia ja yhtä ruudukkoa.
- Lähetettävä esitys tarvitsee enemmän sanoja per dia kuin puheen kanssa esitettävä.

Hyvä **diojen suunnittelu** alkaa yhdestä säännöstä: yksi ajatus per dia. Kerro ajatus lyhyenä lauseena yläosassa ja tue sitä yhdellä kuvalla, kaaviolla tai muutamalla suurella sanalla. Siirrä yksityiskohdat puheeseen tai liitteeseen. Rakenna koossa 16:9, 1920×1080 pikseliä, käytä samaa taustajärjestelmää ja kahta fonttia kauttaaltaan. Esityksistä tulee rauhallisempia, nopeampia seurata ja helpompia muistaa. Loput kattavat alla olevat viisitoista sääntöä.

## Rakenne: säännöt 1:stä 4:ään

1. **1. Yksi ajatus per dia** Jos dia kertoo kaksi asiaa, se on kaksi diaa. Diat ovat ilmaisia, huomio ei.
2. **2. Kirjoita otsikot lauseiksi** ”Liikevaihto kasvoi nopeimmin pohjoisessa” voittaa otsikon ”Alueellinen liikevaihto”. Selaajan pitäisi ymmärtää tarina pelkistä otsikoista.
3. **3. Tee runko ennen ohjelmiston avaamista** Kirjoita otsikot ensin listaksi. Jos lista ei kerro tarinaa, mikään sommittelu ei kerro.
4. **4. Tiedä, esitetäänkö vai lähetetäänkö esitys** Puheen tukena oleva esitys voi olla niukka. PDF:nä lähetettävän on toimittava yksin, joten siinä on enemmän sanoja selkeässä hierarkiassa.

Laajakuvadia Q3-katsaus, jossa on kuusi aihetta: esimerkki liian täydestä diasta

Otsikkona pelkkä tunniste ja kuusi aihetta yhdellä dialla. Yleisö lukee eteenpäin ja lakkaa kuuntelemasta.

Laajakuvadia, jossa Rekrytointi on nyt pullonkaulamme on suurena liukuvärillä

Yksi ajatus lauseena. Puhuja selittää, dia saa asian jäämään mieleen.

## Dian koko ja asettelu: säännöt 5:stä 7:ään

**5. Rakenna suhteessa 16:9.** Lähes kaikki näytöt, projektorit ja videopuhelut ovat nyt laajakuvia, joten 1920×1080 on oletus. Käytä 4:3-kokoa 1600×1200 vain, jos tiedät tilassa olevan vanhan projektorin. Kuvasuhteen vaihtaminen valmiissa esityksessä rikkoo asettelut, joten päätä ensin.

- 16:9 1920×1080: 1920 × 1080
- 4:3 1600×1200: 1600 × 1200
- Karuselli 1080×1350: 1080 × 1350

Kaksi diakokoa mittakaavassa ja 4:5-pystymuoto, jota tarvitset esityksen julkaisemiseen karusellina.

**6. Käytä ruudukkoa ja leveitä marginaaleja.** Pidä sisältö vähintään 80 tai 100 pikselin päässä jokaisesta 1920×1080-dian reunasta. Kohdista otsikot samaan paikkaan joka dialla, jotta mikään ei hypi eteenpäin klikatessa.

**7. Jätä kolmannes diasta tyhjäksi.** Tila tekee tärkeästä asiasta ilmeisen. Jos dia tuntuu täydeltä, se on liian täysi. [Visuaalinen hierarkia](https://gradiently.design/fi/guide/visual-hierarchy) kertoo, miksi katse tarvitsee tilaa asian löytämiseen.

## Diojen typografia: säännöt 8:sta 10:een

**8. Tee tekstistä suurempaa kuin tuntuu sopivalta.** Huoneen takaosassa tai kannettavan pienessä ikkunassa katsova tarvitsee suuren tekstin. 1920×1080-dialla nämä koot ovat hyvä lähtökohta.

| Teksti | Koko 1920×1080-dialla | Huomiot |
| --- | --- | --- |
| Suuri väite | 120:stä 200:aan px | Yksi lyhyt rivi osion avaukseen |
| Dian otsikko | 64:stä 96:een px | Yksi tai kaksi riviä |
| Leipäteksti ja luettelot | 36:sta 48:aan px | Esitettäessä ei alle noin 32 px |
| Tunnisteet ja lähteet | 24:stä 28:aan px | Pieni mutta luettava kannettavalla |

Pikselikoot laajakuvapohjalle. Jos ohjelmisto käyttää pisteitä 13,33 tuumaa leveässä diassa, jaa luvut kahdella saadaksesi karkean vastineen.

**9. Kaksi fonttia, ei enempää.** Otsikko- ja leipätekstifontti samalla tavalla joka dialla. [Esitysfontit](https://gradiently.design/fi/guide/typography-for-presentations) tarjoaa testattuja pareja.

**10. Tiivistä luettelot katkelmiksi tai poista ne.** Kolme lyhyttä kohtaa on yläraja. Vielä parempi on muuttaa lista kolmeksi diaksi tai yhdeksi kaavioksi.

## Värit ja taustat: säännöt 11 ja 12

**11. Käytä yhtä taustajärjestelmää.** Valitse pohja ja pidä siitä kiinni: ehkä rohkea versio otsikko- ja osiodioihin, rauhallisempi sisältödioihin. Joka dialla vaihtuva tausta saa esityksen tuntumaan kootulta eikä suunnitellulta. [Esitystaustat](https://gradiently.design/fi/guide/presentation-backgrounds) tarjoaa ideoita.

- Otsikko- ja osiodiat: `radial-gradient(circle at 85% 15%, #8b5cf6 0%, #3b0764 40%, #0c0a1d 85%)`
- Rauhalliset sisältödiat: `linear-gradient(180deg, #0c0a1d 0%, #160f2e 100%)`
- Vaalea sisältö kirkkaisiin tiloihin: `linear-gradient(180deg, #f7f5fb 0%, #ece7f6 100%)`

Kolmiosainen järjestelmä samasta väriperheestä: valaistu avaus, lähes tasainen sisältöpohja ja vaalea vaihtoehto.

**12. Kontrasti on välttämätön.** Projektori haalistaa värejä, ja moni katsoo himmeältä kannettavalta. Pidä teksti selvästi [WCAG-kontrastin](https://gradiently.design/fi/guide/color-contrast-accessibility) vähimmäisarvojen yläpuolella äläkä sijoita sitä liukuvärin tai kuvan kirkkaimpaan kohtaan.

## Kuvat, kaaviot ja lopetus: säännöt 13:sta 15:een

**13. Yksi kuva suurena.** Yksi dian täyttävä valokuva voittaa neljä pikkukuvaa. Rajaa harkiten ja aseta otsikko kuvan rauhalliseen kohtaan.

**14. Anna jokaisen kaavion vastata yhteen kysymykseen.** Kirjoita vastaus otsikkoon, korosta sen todistava pylväs tai viiva ja harmaannuta loput.

### Vältä

- Suoraan taulukosta liitettyä kaaviota
- Selitteitä, jotka yleisön täytyy purkaa
- Eri kirkasta väriä jokaisessa sarjassa
- Otsikkoa, joka vain nimeää kaavion

### Tee näin

- Rakenna kaavio esityksen väreillä
- Kirjoita tunnisteet suoraan viivoille tai pylväille
- Yksi korostus asiaan, harmaa taustatietoon
- Otsikko kertoo, mitä kaavio näyttää

**15. Lopeta pyyntöön, älä sanaan ”Kiitos”.** Viimeinen dia jää kysymysten ajaksi näkyviin, usein minuuteiksi. Käytä se yhteen asiaan, jonka haluat yleisön tekevän tai muistavan, ja yhteystietoihin. [Pitch-esityksen suunnittelu](https://gradiently.design/fi/guide/pitch-deck-design) ja [puhe-esityksen diat](https://gradiently.design/fi/guide/public-speaker-slides) näyttävät vahvoja lopetuksia sijoittajille ja lavoille.

Jos rakennat esityksen Gradientlyssä, sääntö 11 hoituu itsestään. Studiossa on esityssivut, ja yksi Mark kantaa samaa taustaa jokaisella dialla siirtäen rauhallisimman alueensa sanojen taakse. Designer voi asetella ensimmäiset luonnokset kuvauksesta. Prolla viet esityksen PDF:nä ja muutat tärkeimmät diat somejulkaisujen kokoon yhdessä vaiheessa.

## FAQ

### Mikä on paras diakoko?

16:9 eli 1920×1080 pikseliä lähes kaikille nykyaikaisille näytöille. Käytä 4:3-kokoa 1600×1200 vain vanhoille projektoreille.

### Kuinka monta sanaa dialla pitäisi olla?

Puheen tukena mahdollisimman vähän: lauseotsikko ja muutama tukeva sana. PDF:nä lähetettävä esitys voi sisältää enemmän.

### Mitä fonttikokoa käytän dioissa?

1920×1080-dialla otsikot noin 64:stä 96:een pikseliä ja leipäteksti 36:sta 48:aan, ei juuri alle 32:n.

### Kuinka monta fonttia esityksessä käytetään?

Kahta: yksi otsikoihin ja yksi leipätekstiin johdonmukaisesti joka dialla.

### Mitä esityksen viimeisellä dialla pitää olla?

Pääviesti tai toimintakehote ja yhteystiedot, koska dia jää näkyviin kysymysten ajaksi.