# Design de estudos de caso: mostre o problema, o trabalho e o resultado

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

A maioria dos estudos de caso é uma galeria com um parágrafo em cima. Os que ganham contam uma história que um desconhecido segue num minuto. Isso exige uma estrutura clara, visuais que a sustentem e um formato para cada sítio onde 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 no primeiro ecrã ou no primeiro slide, porque muitos leitores nunca chegam ao fim.
- Cada secção de um estudo de caso deve ter o seu visual, desde uma imagem de antes a esboços de processo e ao trabalho acabado em uso.
- Só alegue resultados que possa mostrar e peça autorização ao cliente antes de o nomear ou partilhar números.
- Um estudo de caso pode ser publicado como página web, PDF, slide numa apresentação comercial e carrossel social se partilhar um aspeto coerente.

Um bom **design de estudos de caso** segue três atos: o problema, o trabalho e o resultado. Abra com um título que enuncia o resultado, mostre o que estava errado antes, percorra as decisões que o mudaram e prove depois que funcionou com a peça acabada em uso real. Dê a cada ato o seu visual e mantenha as palavras curtas. Um potencial cliente deve perceber o que fez e porque importou no tempo que leva a percorrer um ecrã.

## 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. Lê-se como uma história curta com um ponto de viragem claro, e põe o final no início e também no fim.

1. **Título: o resultado** “Uma ementa que reduziu para metade as perguntas ao pedir” vence “Rebranding de restaurante”. Nomeie o cliente e o trabalho numa linha por baixo.
2. **O problema** O que estava errado, para quem e porque importava ao negócio. Duas ou três frases e uma imagem de antes.
3. **A abordagem** As duas ou três decisões que fizeram a diferença, e porquê. Não todos os passos que deu.
4. **O trabalho** As peças acabadas, mostradas em grande e em contexto: num telemóvel, numa prateleira, numa rua.
5. **O resultado** O que mudou, nas palavras do cliente ou em números que tem autorização para partilhar.
6. **O passo seguinte** Uma linha a convidar um leitor com um problema semelhante a entrar em contacto.

> **Pergunte antes de partilhar** Verifique o seu contrato e pergunte ao cliente antes de o nomear, mostrar trabalho não lançado ou publicar números. Se não puder partilhar números, descreva a mudança em palavras que ele aprove.

Escolha os projetos a documentar com o mesmo cuidado. Três estudos de caso que correspondam aos clientes que quer a seguir valem mais do que dez que cobrem tudo o que já fez. Se quer mais trabalho de 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 maquetes acabadas diz ao leitor que sabe fazer coisas bonitas. Não lhe diz que sabe resolver o problema dele. Associe cada secção a um visual que prove o ponto dessa secção.

| Secção | Visual que o prova | Evitar |
| --- | --- | --- |
| Problema | A versão antiga, um ecrã confuso, uma prateleira desarrumada | Gozar com o trabalho antigo do cliente |
| Abordagem | Esboços, um moodboard, duas opções lado a lado, o briefing | Dezenas de fotografias do processo |
| Trabalho | A peça acabada em uso real, depois os pormenores principais | Só maquetes a flutuar sobre cinzento |
| Resultado | Uma citação curta do cliente, um número aprovado em grande, o trabalho no terreno | Alegações vagas sem fonte |

Um visual a provar cada secção chega. Mais de três imagens seguidas e a história encalha.

Um slide panorâmico de estudo de caso com o título O problema, a indicar que os clientes não encontravam os pratos vegan numa ementa

Um slide do problema: a questão enunciada com simplicidade, do lado do cliente, numa linha.

Um slide panorâmico a condizer com o título O resultado e o título Perguntas ao pedir reduzidas para metade sobre o mesmo gradiente

O slide do resultado no mesmo estilo. O resultado é o título, com a fonte indicada por baixo.

O exemplo acima é inventado para mostrar a forma, mas veja a linha da fonte sob o resultado. Um número com atribuição lê-se como prova; um número sozinho lê-se como marketing. [Hierarquia visual](https://gradiently.design/pt-pt/guide/visual-hierarchy) ajuda a decidir o que pôr em grande.

## Layout de estudo de caso numa página web

Num site de portefólio ou de empresa, um estudo de caso é uma página longa. A maioria dos visitantes lê o primeiro ecrã, percorre os títulos e olha para as imagens. Desenhe exatamente para isso.

### Evitar

- Uma imagem de herói em ecrã inteiro sem palavras
- O resultado escondido no fundo
- Parágrafos longos entre imagens
- Todas as imagens do mesmo tamanho
- Nenhuma forma de o contactar no fim

### Fazer

- Título, cliente e resultado no primeiro ecrã
- Uma caixa de resumo curta: cliente, função, prazo, resultado
- Títulos que contam a história quando lidos sozinhos
- Imagens de herói grandes, imagens de pormenor mais pequenas
- Um passo seguinte claro e uma ligação para o estudo de caso seguinte

Um fundo coerente para separadores de secção, citações e painéis de resultado mantém uma página longa a parecer uma só peça e dá ao olhar um sítio onde descansar entre imagens. [Dicas de portefólio para designers](https://gradiently.design/pt-pt/guide/designer-portfolio-tips) e [portefólio de programador](https://gradiently.design/pt-pt/guide/developer-portfolio-design) tratam do site mais amplo à volta.

## Um estudo de caso em vários formatos

Um estudo de caso dá demasiado trabalho para o publicar uma só vez. A mesma história pode viver como página no seu site, um PDF para anexar a propostas, dois slides numa apresentação comercial e um carrossel no LinkedIn ou no Instagram. Cada um precisa do seu 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, desenhadas à escala. A história mantém-se; mudam o recorte e o número de palavras.

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

O Gradiently ajuda aqui porque um Mark é desenhado de novo a cada tamanho: desenhe o estudo de caso uma vez e o Pro redimensiona-o para todos os formatos num só passo, com o mesmo fundo e a mesma tipografia no slide, no PDF e nas páginas do carrossel.

## FAQ

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

Um título com o resultado, o problema, a sua abordagem, o trabalho acabado em contexto, o resultado e um passo seguinte para o leitor.

### Que extensão deve ter um estudo de caso de design?

A suficiente para mostrar o ponto de viragem, e não mais. A maioria dos bons percorre-se em um minuto e lê-se por inteiro em cinco.

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

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

### Onde deve ficar o resultado num estudo de caso?

No título ou no primeiro ecrã, e outra vez com mais pormenor no fim. Muitos leitores nunca chegam ao fundo.

### Que formato deve ter um estudo de caso?

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