# Case-esittelyn suunnittelu: ongelma, työ ja tulos

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

Useimmat case-esittelyt ovat gallerioita, joiden alussa on kappale tekstiä. Työtä tuovat esittelyt kertovat tarinan, jonka vieras ymmärtää minuutissa. Siihen tarvitaan selkeä rakenne, kantavat kuvat ja sopivat julkaisuformaatit.

## The short version

- Hyvä case-esittely kertoo yhden tarinan kolmessa osassa: ongelma, työ ja tulos.
- Tuloksen pitäisi näkyä ensimmäisessä näkymässä tai ensimmäisellä dialla, koska moni lukija ei koskaan selaa loppuun.
- Case-esittelyn jokainen osa tarvitsee oman kuvan lähtötilanteesta luonnoksiin ja valmiiseen työhön käytössä.
- Kerro vain tuloksista, jotka voit osoittaa, ja pyydä asiakkaan lupa ennen nimen tai lukujen jakamista.
- Yhden case-esittelyn voi julkaista verkkosivuna, PDF:nä, myyntiesityksen diana ja somekarusellina, kun niillä on yhtenäinen ilme.

Vahva **case-esittelyn suunnittelu** seuraa kolmea näytöstä: ongelma, työ ja tulos. Aloita lopputuloksen kertovalla otsikolla, näytä lähtötilanteen puute, käy läpi sen muuttaneet päätökset ja todista onnistuminen valmiilla työllä oikeassa käytössä. Anna jokaiselle näytökselle oma kuva ja pidä tekstit lyhyinä. Tulevan asiakkaan pitäisi ymmärtää, mitä teit ja miksi se merkitsi, yhden näkymän selaamiseen kuluvassa ajassa.

## Hyvän case-esittelyn rakenne

Suunnittelijat, toimistot, konsultit ja ohjelmistoyritykset kirjoittavat kaikki case-esittelyjä. Toimiva rakenne on kaikille sama: lyhyt tarina, jossa on selkeä käännekohta ja jonka loppu kerrotaan sekä alussa että lopussa.

1. **Otsikko: lopputulos** ”Ruokalista, joka puolitti tilauskysymykset” toimii paremmin kuin ”Ravintolan uusi brändi”. Nimeä asiakas ja työ sen alla yhdellä rivillä.
2. **Ongelma** Mikä oli pielessä, kenelle ja miksi se oli yritykselle tärkeää. Kaksi tai kolme lausetta ja lähtötilanteen kuva.
3. **Lähestymistapa** Kaksi tai kolme ratkaisevaa päätöstä ja niiden syyt. Ei jokaista työvaihetta.
4. **Työ** Valmiit osat suurina ja asiayhteydessä: puhelimessa, hyllyllä tai kadulla.
5. **Tulos** Mikä muuttui, asiakkaan sanoin tai luvuin, joiden jakamiseen sinulla on lupa.
6. **Seuraava askel** Yksi rivi, joka kutsuu samasta ongelmasta kärsivän lukijan ottamaan yhteyttä.

> **Kysy ennen jakamista** Tarkista sopimus ja kysy asiakkaalta ennen nimen, julkaisemattoman työn tai lukujen jakamista. Jos lukuja ei saa jakaa, kuvaile muutos asiakkaan hyväksymillä sanoilla.

Valitse kirjoitettavat projektit yhtä huolellisesti. Kolme seuraavaksi haluamiisi asiakkaisiin sopivaa case-esittelyä on arvokkaampi kuin kymmenen kaiken kattavaa. Jos haluat lisää ravintolatöitä, aloita ravintolasta. Jos haluat ohjelmistoasiakkaita, aloita hallintanäkymästä, vaikka työ olisi ollut pienempi.

## Kuvat tarinan joka osaan

Seinä täynnä valmiita mallikuvia kertoo, että osaat tehdä kauniita asioita. Se ei kerro, että osaat ratkaista lukijan ongelman. Valitse joka osaan kuva, joka todistaa juuri sen asian.

| Osa | Sen todistava kuva | Vältä |
| --- | --- | --- |
| Ongelma | Vanha versio, hämmentävä näkymä tai sekava hylly | Asiakkaan vanhan työn pilkkaaminen |
| Lähestymistapa | Luonnokset, tunnelmataulu, kaksi vaihtoehtoa rinnakkain tai briiffi | Kymmenet prosessikuvat |
| Työ | Valmis työ oikeassa käytössä, sitten tärkeimmät yksityiskohdat | Vain harmaalla leijuvat mallikuvat |
| Tulos | Lyhyt asiakassitaatti, hyväksytty luku suurena tai työ arjessa | Epämääräiset väitteet ilman lähdettä |

Yksi todistava kuva osaa kohti riittää. Yli kolme kuvaa peräkkäin pysäyttää tarinan.

Laajakuvainen case-dia otsikolla Ongelma kertoo, ettei ruokalistan vegaaniannoksia löytynyt

Ongelmadia: asia sanotaan suoraan asiakkaan näkökulmasta yhdellä rivillä.

Samantyylinen laajakuvadia otsikolla Tulos ja tekstillä Tilauskysymykset puolittuivat samalla liukuvärillä

Tulosdia samalla tyylillä. Lopputulos on otsikkona, lähde sen alla.

Yllä oleva esimerkki on keksitty rakenteen havainnollistamiseksi, mutta huomaa tuloksen alla oleva lähderivi. Lähteistetty luku tuntuu näytöltä, yksinäinen luku markkinoinnilta. [Visuaalinen hierarkia](https://gradiently.design/fi/guide/visual-hierarchy) auttaa päättämään, mitä näyttää suurena.

## Case-esittelyn sommittelu verkkosivulla

Portfoliossa tai yrityssivustolla case-esittely on pitkä sivu. Useimmat kävijät lukevat ensimmäisen näkymän, silmäilevät otsikot ja katsovat kuvat. Suunnittele juuri siihen.

### Vältä

- Koko näytön pääkuva ilman sanoja
- Tulos piilossa aivan alhaalla
- Pitkät kappaleet kuvien välissä
- Jokainen kuva samankokoisena
- Ei yhteydenottotapaa lopussa

### Tee näin

- Otsikko, asiakas ja lopputulos ensimmäisessä näkymässä
- Lyhyt koostelaatikko: asiakas, rooli, aikataulu ja tulos
- Otsikot, jotka kertovat tarinan yksinään silmäiltyinä
- Suuret pääkuvat, pienemmät yksityiskohtakuvat
- Selkeä seuraava askel ja linkki seuraavaan case-esittelyyn

Yhtenäinen tausta osien väleissä, sitaateissa ja tulospaneeleissa pitää pitkän sivun yhtenä kokonaisuutena ja antaa silmälle lepoa kuvien välissä. [Suunnittelijan portfoliovinkit](https://gradiently.design/fi/guide/designer-portfolio-tips) ja [kehittäjän portfolio](https://gradiently.design/fi/guide/developer-portfolio-design) käsittelevät ympäröivää sivustoa.

## Yksi case-esittely useassa muodossa

Case-esittely vaatii liikaa työtä julkaistavaksi vain kerran. Sama tarina voi olla verkkosivu, tarjouksen PDF-liite, kaksi myyntiesitysdiaa ja LinkedIn- tai Instagram-karuselli. Jokainen tarvitsee oman kokonsa.

- Dia 1920×1080: 1920 × 1080
- A4-PDF 2480×3508: 2480 × 3508
- Karuselli 1080×1350: 1080 × 1350
- Behance-kansi 1616×1264: 1616 × 1264

Neljä paikkaa yhdelle case-esittelylle mittakaavassa. Tarina pysyy samana, rajaus ja sanamäärä muuttuvat.

- **Karuselli:** yksi dia näytöstä kohti sekä kansi ja yhteystietodia. [LinkedIn-karusellit](https://gradiently.design/fi/guide/linkedin-thought-leader-content) näyttää muodon.
- **Myyntiesitys:** ongelmadia ja tulosdia yllä olevan parin tavoin.
- **PDF:** kahdesta neljään A4- tai Letter-sivua. [Yhden sivun esittely](https://gradiently.design/fi/guide/one-pager-design) auttaa yksisivuisissa koosteissa.
- **Portfoliosivustot:** alustalle sopiva kansi, kuten [Behance-kansikoko](https://gradiently.design/fi/guide/behance-cover-size).

Gradiently auttaa, koska Mark piirtyy uudelleen joka koossa. Suunnittele case-esittely kerran, ja Pro muuttaa sen kaikkiin muotoihin yhdellä toiminnolla. Tausta ja typografia pysyvät samoina diassa, PDF:ssä ja karusellin sivuilla.

## FAQ

### Mitä case-esittelyyn pitäisi kuulua?

Lopputuloksen kertova otsikko, ongelma, lähestymistapasi, valmis työ asiayhteydessä, tulos ja seuraava askel lukijalle.

### Kuinka pitkä designin case-esittelyn pitäisi olla?

Riittävän pitkä näyttämään käännekohdan, ei pidempi. Useimmat hyvät esittelyt voi silmäillä minuutissa ja lukea kokonaan viidessä.

### Voinko kirjoittaa case-esittelyn ilman tulostietoja?

Kyllä. Käytä asiakkaan sitaattia tai hänen hyväksymäänsä kuvausta muutoksesta. Älä koskaan keksi lukuja.

### Mihin case-esittelyn tulos kuuluu?

Otsikkoon tai ensimmäiseen näkymään ja uudelleen tarkemmin loppuun. Moni lukija ei pääse sivun loppuun.

### Missä muodossa case-esittely kannattaa tehdä?

Pääpaikka on verkkosivu. Lisäksi PDF tarjouksiin, diat myyntiesityksiin ja karuselli someen, kaikki samalla tyylillä.