# Design de estudo de caso: o problema, o trabalho e o resultado

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

A maioria dos estudos de caso é uma galeria com um parágrafo em cima. Os que ganham trabalho contam uma história que um desconhecido acompanha em um minuto. Isso pede uma estrutura clara, visuais que a sustentem e um formato para cada lugar onde você publica.

## The short version

- Um bom estudo de caso conta uma história em três partes: o problema, o trabalho e o resultado.
- O resultado deve aparecer na primeira tela ou no primeiro slide, porque muitos leitores nunca rolam até o fim.
- Cada seção de um estudo de caso deve ter o próprio visual, de uma imagem do antes a esboços do processo e ao trabalho final em uso.
- Afirme apenas resultados que você consegue mostrar e peça permissão ao cliente antes de citar o nome dele ou divulgar números.
- Um estudo de caso pode ser publicado como página web, PDF, slide em uma apresentação comercial e carrossel nas redes, desde que mantenha um visual consistente.

Um bom **design de estudo de caso** segue três atos: o problema, o trabalho e o resultado. Abra com um título que diga o resultado, mostre o que estava errado antes, percorra as decisões que mudaram isso e depois prove que funcionou com a peça final em uso real. Dê a cada ato o próprio visual e mantenha o texto curto. Um possível cliente deve entender o que você fez e por que isso importou no tempo de rolar uma tela.

## A estrutura de um bom estudo de caso

Designers, agências, consultores e empresas de software escrevem estudos de caso, e a forma que funciona é a mesma para todos. Ele se lê como um conto curto com uma virada clara e coloca o final no começo, além de no fim.

1. **Título: o resultado** “Um cardápio que cortou pela metade as dúvidas na hora do pedido” vence “Novo branding de restaurante”. Cite o cliente e o trabalho em uma linha abaixo.
2. **O problema** O que estava errado, para quem e por que isso importava para o negócio. Duas ou três frases e uma imagem do antes.
3. **A abordagem** As duas ou três decisões que fizeram a diferença, e por quê. Não cada passo que você deu.
4. **O trabalho** As peças finais, grandes e em contexto: em um celular, em uma prateleira, na rua.
5. **O resultado** O que mudou, nas palavras do cliente ou em números que você tem permissão para divulgar.
6. **O próximo passo** Uma linha convidando quem tem um problema parecido a entrar em contato.

> **Pergunte antes de divulgar** Confira o contrato e pergunte ao cliente antes de citar o nome dele, mostrar trabalho não lançado ou publicar qualquer número. Se não puder divulgar números, descreva a mudança com palavras que ele aprove.

Escolha com o mesmo cuidado quais projetos viram estudo de caso. Três estudos que combinam com os clientes que você quer a seguir valem mais que dez cobrindo tudo o que você já fez. Se quer mais trabalhos com restaurantes, abra com o restaurante; se quer clientes de software, abra com o painel, mesmo que tenha sido um trabalho menor.

## Visuais para cada parte da história

Uma parede de mockups finalizados diz ao leitor que você faz coisas bonitas. Não diz que você resolve o problema dele. Combine cada seção com um visual que prove o ponto daquela seção.

| Seção | Visual que prova | Evite |
| --- | --- | --- |
| Problema | A versão antiga, uma tela confusa, uma prateleira bagunçada | Ridicularizar o trabalho antigo do cliente |
| Abordagem | Esboços, um moodboard, duas opções lado a lado, o briefing | Dezenas de fotos do processo |
| Trabalho | A peça final em uso real, depois os detalhes principais | Só mockups flutuando sobre cinza |
| Resultado | Uma citação curta do cliente, um número aprovado em destaque, o trabalho no mundo real | Afirmações vagas sem fonte |

Um visual de prova por seção basta. Mais de três imagens seguidas e a história empaca.

Um slide widescreen de estudo de caso com o título O problema, dizendo que os clientes não achavam os pratos veganos no cardápio

Um slide de problema: a questão dita com clareza, do lado do cliente, em uma linha.

Um slide widescreen correspondente com o título O resultado e a frase Dúvidas no pedido caíram à metade sobre o mesmo gradiente

O slide de resultado no mesmo estilo. O resultado é o título, com a fonte indicada logo abaixo.

O exemplo acima foi inventado para mostrar a forma, mas repare na linha de fonte sob o resultado. Um número com atribuição se lê como evidência; um número sozinho se lê como marketing. [Hierarquia visual](https://gradiently.design/pt-br/guide/visual-hierarchy) ajuda a decidir o que destacar.

## Layout de estudo de caso em uma página web

Em um portfólio ou site de empresa, um estudo de caso é uma página longa. A maioria dos visitantes lê a primeira tela, passa os olhos pelos títulos e olha as imagens. Projete exatamente para isso.

### Evite

- Uma imagem de destaque em tela cheia sem nenhuma palavra
- O resultado escondido lá no fim
- Parágrafos longos entre as imagens
- Todas as imagens do mesmo tamanho
- Nenhum jeito de falar com você no final

### Faça

- Título, cliente e resultado na primeira tela
- Um quadro de resumo curto: cliente, papel, prazo, resultado
- Títulos que contam a história mesmo lidos sozinhos
- Imagens de destaque grandes, imagens de detalhe menores
- Um próximo passo claro e um link para o próximo estudo de caso

Um fundo consistente para divisores de seção, citações e painéis de resultado faz uma página longa parecer uma peça só e dá ao olho um lugar para descansar entre as imagens. [Dicas de portfólio para designers](https://gradiently.design/pt-br/guide/designer-portfolio-tips) e [portfólio de desenvolvedor](https://gradiently.design/pt-br/guide/developer-portfolio-design) tratam do site em volta.

## Um estudo de caso em vários formatos

Um estudo de caso dá trabalho demais para ser publicado uma vez só. A mesma história pode virar uma página no seu site, um PDF para anexar a propostas, dois slides em uma apresentação comercial e um carrossel no LinkedIn ou no Instagram. Cada um pede o próprio tamanho.

- Slide 1920×1080: 1920 × 1080
- PDF A4 2480×3508: 2480 × 3508
- Carrossel 1080×1350: 1080 × 1350
- Capa do Behance 1616×1264: 1616 × 1264

Quatro casas para um estudo de caso, em escala. A história continua a mesma; mudam o enquadramento e a quantidade de texto.

- **Carrossel:** um slide por ato, mais uma capa e um slide de contato. [Carrosséis no LinkedIn](https://gradiently.design/pt-br/guide/linkedin-thought-leader-content) mostra o formato.
- **Apresentação comercial:** um slide de problema e um de resultado, como no par acima.
- **PDF:** de duas a quatro páginas A4 ou Carta; veja [design de one pager](https://gradiently.design/pt-br/guide/one-pager-design) para resumos de uma folha.
- **Sites de portfólio:** uma capa no tamanho da plataforma, como o [tamanho da capa do Behance](https://gradiently.design/pt-br/guide/behance-cover-size).

O Gradiently ajuda aqui porque um Mark é renderizado do zero em qualquer tamanho: crie o estudo de caso uma vez e o Pro o redimensiona para todos os formatos em um passo, com o mesmo fundo e a mesma tipografia no slide, no PDF e nas páginas do carrossel.

## FAQ

### O que um estudo de caso deve incluir?

Um título com o resultado, o problema, a sua abordagem, o trabalho final em contexto, o resultado e um próximo passo para o leitor.

### Qual deve ser o tamanho de um estudo de caso de design?

Longo o bastante para mostrar a virada, e não mais que isso. A maioria dos bons pode ser lida por alto em um minuto e por inteiro em cinco.

### Posso escrever um estudo de caso sem dados de resultado?

Sim. Use uma citação do cliente ou uma descrição do que mudou que o cliente aprove. Nunca invente números.

### Onde o resultado deve aparecer em um estudo de caso?

No título ou na primeira tela, e de novo com mais detalhes no fim. Muitos leitores nunca chegam ao final.

### Em que formato deve ficar um estudo de caso?

Uma página web é a casa principal, com um PDF para propostas, slides para apresentações e um carrossel para as redes, tudo no mesmo estilo.