# Casestudy ontwerpen: toon het probleem, het werk en het resultaat

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

De meeste casestudy’s zijn een galerij met een alinea erboven. De winnende vertellen een verhaal dat een vreemde in een minuut kan volgen. Dat vraagt een heldere structuur, beelden die het dragen en een formaat voor elke plek waar je publiceert.

## The short version

- Een goede casestudy vertelt één verhaal in drie delen: het probleem, het werk en het resultaat.
- Het resultaat hoort op het eerste scherm of de eerste slide te staan, omdat veel lezers nooit tot het einde scrollen.
- Elk onderdeel van een casestudy verdient een eigen beeld, van een voorbeeld van vroeger tot processchetsen en het afgewerkte werk in gebruik.
- Beweer alleen resultaten die je kunt tonen, en vraag de opdrachtgever om toestemming voordat je hem noemt of cijfers deelt.
- Eén casestudy kun je publiceren als webpagina, PDF, slide in een pitchdeck en sociale carrousel als ze één consistente look delen.

Een sterke **casestudy** volgt drie aktes: het probleem, het werk en het resultaat. Open met een kop die de uitkomst noemt, laat zien wat er eerst mis was, loop door de beslissingen die het veranderden en bewijs dan dat het werkte met het afgewerkte stuk in echt gebruik. Geef elke akte een eigen beeld en houd de woorden kort. Een potentiële opdrachtgever moet in de tijd die één scherm scrollen kost begrijpen wat je deed en waarom het ertoe deed.

## De structuur van een goede casestudy

Ontwerpers, bureaus, consultants en softwarebedrijven schrijven allemaal casestudy’s, en de vorm die werkt is steeds dezelfde. Hij leest als een kort verhaal met een duidelijk keerpunt, en zet het einde zowel aan het begin als aan het eind.

1. **Kop: de uitkomst** “Een menu dat bestelvragen halveerde” wint van “Rebranding restaurant”. Noem de opdrachtgever en het werk in een regel eronder.
2. **Het probleem** Wat er mis was, voor wie, en waarom het voor het bedrijf telde. Twee of drie zinnen en een beeld van vroeger.
3. **De aanpak** De twee of drie beslissingen die het verschil maakten, en waarom. Niet elke stap die je zette.
4. **Het werk** De afgewerkte stukken, groot en in context getoond: op een telefoon, op een schap, in een straat.
5. **Het resultaat** Wat er veranderde, in de woorden van de opdrachtgever of in cijfers die je mag delen.
6. **De volgende stap** Eén regel die een lezer met een vergelijkbaar probleem uitnodigt contact op te nemen.

> **Vraag het eerst** Controleer je contract en vraag de opdrachtgever voordat je hem noemt, onuitgebracht werk toont of cijfers publiceert. Kun je geen cijfers delen, beschrijf de verandering dan in woorden die hij goedkeurt.

Kies met dezelfde zorg welke projecten je uitschrijft. Drie casestudy’s die passen bij de opdrachtgevers die je hierna wilt, zijn meer waard dan tien die alles bestrijken wat je ooit deed. Wil je meer restaurantwerk, begin dan met het restaurant; wil je softwareklanten, begin dan met het dashboard, ook al was het een kleinere klus.

## Beelden bij elk deel van het verhaal

Een muur van afgewerkte mockups vertelt de lezer dat je mooie dingen kunt maken. Hij vertelt niet dat je hun probleem kunt oplossen. Koppel elk onderdeel aan een beeld dat het punt van dat onderdeel bewijst.

| Onderdeel | Beeld dat het bewijst | Vermijd |
| --- | --- | --- |
| Probleem | De oude versie, een verwarrend scherm, een rommelig schap | Het oude werk van de opdrachtgever bespotten |
| Aanpak | Schetsen, een moodboard, twee opties naast elkaar, de briefing | Tientallen procesfoto’s |
| Werk | Het afgewerkte stuk in echt gebruik, daarna de belangrijkste details | Alleen zwevende mockups op grijs |
| Resultaat | Een kort citaat van de opdrachtgever, een goedgekeurd cijfer groot gezet, het werk in het wild | Vage beweringen zonder bron |

Eén bewijzend beeld per onderdeel is genoeg. Meer dan drie afbeeldingen achter elkaar en het verhaal loopt vast.

Een breedbeeld casestudyslide met de titel Het probleem, die stelt dat gasten de vegan gerechten op een menu niet konden vinden

Een probleemslide: de kwestie duidelijk gezegd, vanuit de klant, in één regel.

Een bijpassende breedbeeldslide met de titel Het resultaat, met de kop Bestelvragen gehalveerd op hetzelfde kleurverloop

De resultaatslide in dezelfde stijl. De uitkomst is de kop, met de bron eronder.

Het voorbeeld hierboven is verzonnen om de vorm te tonen, maar kijk naar de bronregel onder het resultaat. Een cijfer met bronvermelding leest als bewijs; een cijfer alleen leest als marketing. [Visuele hiërarchie](https://gradiently.design/nl/guide/visual-hierarchy) helpt bepalen wat je groot zet.

## Opmaak van een casestudy op een webpagina

Op een portfolio- of bedrijfssite is een casestudy een lange pagina. De meeste bezoekers lezen het eerste scherm, scannen de koppen en kijken naar de plaatjes. Ontwerp precies daarvoor.

### Vermijd

- Een schermvullend heldenbeeld zonder woorden
- Het resultaat helemaal onderaan verstopt
- Lange alinea’s tussen afbeeldingen
- Elke afbeelding even groot
- Aan het eind geen manier om contact op te nemen

### Doe

- Kop, opdrachtgever en uitkomst op het eerste scherm
- Een kort overzichtsvak: opdrachtgever, rol, looptijd, resultaat
- Koppen die het verhaal vertellen als je alleen die scant
- Grote heldenbeelden, kleinere detailbeelden
- Een duidelijke volgende stap en een link naar de volgende casestudy

Een consistente achtergrond voor scheidingen tussen onderdelen, citaten en resultaatvlakken laat een lange pagina als één geheel aanvoelen en geeft het oog een rustpunt tussen de afbeeldingen. [Tips voor een ontwerpportfolio](https://gradiently.design/nl/guide/designer-portfolio-tips) en [portfolio voor ontwikkelaars](https://gradiently.design/nl/guide/developer-portfolio-design) behandelen de bredere site eromheen.

## Eén casestudy in meerdere formaten

Een casestudy kost te veel werk om maar één keer te publiceren. Hetzelfde verhaal kan leven als pagina op je site, als PDF bij offertes, als twee slides in een pitchdeck en als carrousel op LinkedIn of Instagram. Elk heeft een eigen formaat nodig.

- Slide 1920×1080: 1920 × 1080
- A4-PDF 2480×3508: 2480 × 3508
- Carrousel 1080×1350: 1080 × 1350
- Behance-cover 1616×1264: 1616 × 1264

Vier thuishavens voor één casestudy, op schaal getekend. Het verhaal blijft gelijk; de uitsnede en het aantal woorden veranderen.

- **Carrousel:** één slide per akte, plus een cover en een contactslide. [LinkedIn-carrousels](https://gradiently.design/nl/guide/linkedin-thought-leader-content) laat het format zien.
- **Pitchdeck:** een probleemslide en een resultaatslide, zoals in het paar hierboven.
- **PDF:** twee tot vier pagina’s A4 of Letter; zie [one-pager ontwerpen](https://gradiently.design/nl/guide/one-pager-design) voor samenvattingen op één blad.
- **Portfoliosites:** een cover op het formaat van het platform, zoals de [Behance-coverafmeting](https://gradiently.design/nl/guide/behance-cover-size).

Gradiently helpt hierbij omdat een Mark op elk formaat opnieuw wordt getekend: ontwerp de casestudy één keer en Pro past hem in één stap aan naar elk formaat, met dezelfde achtergrond en letters op de slide, de PDF en de carrouselpagina’s.

## FAQ

### Wat hoort er in een casestudy?

Een kop met de uitkomst, het probleem, je aanpak, het afgewerkte werk in context, het resultaat en een volgende stap voor de lezer.

### Hoe lang moet een ontwerpcasestudy zijn?

Lang genoeg om het keerpunt te tonen en niet langer. De meeste goede kun je in een minuut scannen en in vijf minuten helemaal lezen.

### Kan ik een casestudy schrijven zonder resultaatcijfers?

Ja. Gebruik een citaat van de opdrachtgever of een beschrijving van wat er veranderde die hij goedkeurt. Verzin nooit cijfers.

### Waar hoort het resultaat in een casestudy?

In de kop of op het eerste scherm, en aan het eind nog eens uitgebreider. Veel lezers komen nooit onderaan.

### In welk formaat moet een casestudy komen?

Een webpagina is het hoofdadres, met een PDF voor offertes, slides voor pitches en een carrousel voor social, allemaal in dezelfde stijl.