Conceito de Site Baseado em Narrativa
Propósito
Transformar um problema de negócio suficientemente compreendido em conceitos distintos de site construídos em torno de significado, transformação, narrativa e evidências, em vez de uma sequência de recursos genéricos e seções de interface.
Esta skill trabalha principalmente com palavras antes de visuais.
Ela determina:
- o que o site deve comunicar fundamentalmente
- qual história ou lente narrativa pode comunicar isso
- como a compreensão do visitante deve progredir
- quais evidências apoiam essa progressão
- como o conceito deve influenciar conteúdo, voz, imagens, layout, movimento e interação em um nível direcional
- como a narrativa apoia a próxima ação do usuário
O resultado é um conjunto de direções de conceito prontas para avaliação e posterior desenvolvimento do sistema visual.
Esta skill não produz cópia final, layouts finais, wireframes detalhados, um sistema de design ou código de implementação.
Princípio central
Um conceito de site forte conecta:
problema de negócio
→ necessidade do público
→ transformação significativa
→ ideia central
→ progressão narrativa
→ evidências de apoio
→ ação do usuário
Decisões visuais devem posteriormente reforçar essa cadeia.
Evite:
estética interessante
→ título inteligente
→ seções arbitrárias
→ interações decorativas
O conceito deve explicar por que a experiência existe antes de explicar como ela se parece.
Narrativa não é decoração
"Baseado em narrativa" não significa que todo site precise de:
- um protagonista dramático
- uma sequência de rolagem cinematográfica
- uma biografia do fundador
- um depoimento emocional
- um roteiro com começo-meio-fim
- uma narrativa ficcional
Narrativa pode simplesmente significar que a informação é deliberadamente estruturada para que o visitante passe de um estado significativo de compreensão para outro.
Exemplos de estruturas narrativas válidas incluem:
problema
→ consequência
→ solução
→ prova
→ ação
matéria-prima
→ processo
→ resultado final
→ capacidade
jeito antigo
→ tensão
→ novo jeito
→ evidência
situação do cliente
→ desafio
→ experiência
→ resultado
missão
→ obstáculo
→ método
→ impacto
pergunta
→ investigação
→ revelação
→ implicação
A intensidade narrativa apropriada depende do projeto.
Quando usar esta skill
Use esta skill quando:
- Um briefing de site já foi suficientemente compreendido.
- O usuário pede um conceito de site, conceito de direção criativa, ideia central, direção narrativa, estrutura de storytelling ou landing page baseada em narrativa.
- Uma página atualmente parece um folheto digital ou uma sequência de seções de recursos desconectadas.
- Uma página inicial tem informações, mas carece de uma progressão ou ponto de vista claro.
- Várias mensagens competem por prioridade e precisam ser organizadas em torno de um significado central.
- Uma marca tem material forte de fundador, cliente, processo, produto, missão ou transformação que poderia estruturar a experiência.
- Existe pesquisa de universo gráfico e precisa ser conectada a uma ideia real de site.
- O usuário deseja vários conceitos criativos genuinamente diferentes antes de escolher uma direção visual.
- Um produto precisa demonstrar valor por meio de uso, transformação ou evidência em vez de simplesmente listar capacidades.
- A equipe de design continua chegando à execução visual antes de concordar sobre o que o site está realmente tentando dizer.
- Um conceito deve conectar títulos, imagens, estrutura de conteúdo, chamadas para ação e eventual interação em uma única direção coerente.
Não use esta skill quando:
- O problema de negócio ou o público ainda não está claro.
- O usuário precisa apenas de inspiração visual ou pesquisa gráfica.
- O usuário tem conceitos maduros e precisa apenas escolher entre eles.
- A tarefa é redação final.
- A tarefa é arquitetura de informação detalhada para um aplicativo complexo.
- A tarefa é design de componentes de interface do usuário.
- A tarefa é composição de layout final.
- A tarefa é especificação de sistema de design.
- A tarefa é implementação ou código.
- A interface é principalmente uma ferramenta utilitária ou operacional onde o enquadramento narrativo adicionaria atrito desnecessário.
Se o projeto não for suficientemente compreendido, execute primeiro um fluxo de trabalho de enquadramento do problema.
Entradas para inspecionar
Inspecione o máximo possível dos seguintes itens que estiverem disponíveis.
Material estratégico
- Problema de negócio
- Briefing do projeto
- Metas de negócio
- Público
- Trabalhos a serem feitos
- Necessidades do usuário
- Ações desejadas
- Posicionamento
- Proposta de valor
- Diferenciadores
- Contexto competitivo
- Restrições
Evidências de transformação
- Resultados do cliente
- Estados antes e depois
- Problemas resolvidos
- Tempo economizado
- Risco reduzido
- Habilidades adquiridas
- Experiência melhorada
- Resultados emocionais
- Melhorias operacionais
- Impacto social ou cultural
Material de narrativa
- História do fundador
- Origem da empresa
- Histórias de clientes
- Depoimentos
- Estudos de caso
- Exemplos de produto em uso
- Material de bastidores
- Processo de fabricação ou serviço
- Marcos históricos
- Missão
- Pesquisa
- Dados
- Resultados
- Criação do produto
Material da marca
- Estratégia de marca
- Tom de voz
- Mensagens existentes
- Linguagem de campanha
- Nomenclatura
- Terminologia
- Identidade visual existente
- Fotografia
- Material de arquivo
Material de conteúdo
- Cópia de página existente
- Mapa do site
- Inventário de seções
- Descrições de produtos
- Serviços
- FAQs
- Avaliações
- Estatísticas
- Chamadas para ação
Pesquisa de design upstream
Quando disponível, inspecione a saída de:
design-problem-framergraphic-universe-builder
Entradas úteis do universo gráfico incluem:
- vocabulário do projeto
- clusters de pesquisa
- oportunidades de propriedade do projeto
- átomos visuais
- candidatos a metáfora
- universos gráficos candidatos
- clichês da categoria
Não exija pesquisa de universo gráfico se o projeto já contiver material conceitual forte.
Pré-condições
Antes da geração do conceito, determine se estas perguntas podem ser respondidas:
O que a organização oferece?
Quem é o público primário?
O que esse público precisa, quer, teme ou luta?
Que mudança significativa a oferta cria?
Por que esta organização deve ser acreditada?
O que o visitante deve entender?
O que o visitante deve sentir, se a emoção for relevante?
O que o visitante deve fazer?
O que torna este projeto diferente de alternativas óbvias?
Se várias respostas forem desconhecidas, marque-as como perguntas em aberto.
Não invente fatos estratégicos para fazer um conceito parecer completo.
Fluxo de trabalho
1. Reformule o problema de design
Condense o briefing em uma declaração pronta para conceito.
Use:
O site precisa ajudar <público>
a entender/acreditar/experienciar <significado>
para que possam <ação ou resultado desejado>,
enquanto superam <barreira principal>.
Exemplo de estrutura:
O site precisa ajudar compradores técnicos a entender que a empresa
faz mais do que fabricar componentes: ela controla o processo completo
desde a matéria-prima até a peça de precisão acabada, para que os compradores
confiem nela para trabalhos de produção de alto risco.
Não comece a conceituar até que o problema possa ser expresso claramente.
2. Defina o significado essencial
Pergunte:
Se o visitante se lembrar de apenas uma ideia desta experiência, qual deveria ser?
Escreva uma frase.
Isso não é:
- um slogan
- um título
- uma lista de recursos
- um estilo visual
É o significado que o conceito deve comunicar.
Exemplo:
Esta empresa transforma um processo industrial imprevisível em algo
preciso, visível e confiável.
Teste a declaração:
- É significativa para o público?
- É relevante para o negócio?
- É mais específica do que "somos inovadores"?
- As evidências disponíveis podem apoiá-la?
- Ela poderia orientar decisões de conteúdo?
3. Defina a transformação do público
Descreva a mudança desejada.
Use:
Antes:
O visitante pensa/sente/acredita...
Depois:
O visitante pensa/sente/acredita...
Ação:
O visitante está agora preparado para...
Possíveis transformações incluem:
incerto → confiante
inconsciente → informado
cético → convencido
sobrecarregado → claro
curioso → engajado
desapegado → emocionalmente conectado
consciente do problema → consciente da solução
foco em recursos → foco em resultados
percepção genérica → percepção distinta
Não fabrique transformação emocional onde uma mudança prática de compreensão é suficiente.
4. Construa o inventário de evidências
Separe o material de história disponível das suposições.
Use:
| Evidência | Tipo | O que prova | Força |
|---|---|---|---|
| ... | cliente / fundador / processo / dados / produto / história | ... | alta / média / fraca |
Classifique o material como:
Verificado
Diretamente apoiado pelo material fornecido.
Inferido
Uma interpretação plausível que ainda precisa de validação.
Ausente
Evidência útil que não existe atualmente.
Um conceito não deve depender de depoimentos inventados, histórias fabricadas, resultados hipotéticos de clientes apresentados como fato ou material de produção inexistente.
5. Identifique possíveis lentes narrativas
Avalie qual lente expõe naturalmente o significado do projeto.
Possíveis lentes incluem:
Transformação
Mostre a mudança significativa criada para o cliente.
antes
→ intervenção
→ depois
Melhor quando o resultado é o diferenciador mais forte.
Produto em uso
Mostre a oferta por meio de situações reais em vez de recursos isolados.
contexto
→ uso
→ resultado
Melhor quando ver o produto em desempenho cria confiança.
Processo
Exponha como algo é criado, entregue, transformado ou resolvido.
entrada
→ estágios
→ saída
Melhor quando processo, ofício, transparência ou expertise diferencia a organização.
Fundador ou origem
Use por que a organização existe como a narrativa organizadora.
frustração
→ decisão
→ nova abordagem
→ missão atual
Melhor quando a origem explica significativamente o produto ou a marca.
Não use a narrativa do fundador simplesmente porque o material do fundador existe.
História do cliente
Deixe que a situação real de um cliente demonstre relevância.
situação
→ problema
→ experiência
→ resultado
Melhor quando a prova social e a experiência vivida são mais fortes do que as afirmações do produto.
Missão e impacto
Estruture a experiência em torno da mudança que a organização deseja produzir.
condição atual
→ desafio
→ intervenção
→ evidência de impacto
Útil para instituições de caridade, instituições culturais, organizações orientadas por missão e trabalho de interesse público.
Contraste
Defina a oferta expondo a fraqueza da alternativa convencional.
suposição antiga
→ contradição
→ modelo melhor
Útil quando a categoria tem um padrão arraigado.
Jornada
Leve o visitante por uma sequência significativa.
estágio 1
→ estágio 2
→ estágio 3
→ destino
Útil quando a progressão em si importa.
Sistema
Revele como peças aparentemente separadas funcionam juntas.
partes
→ relacionamentos
→ sistema
→ resultado
Útil para plataformas, infraestrutura, serviços complexos e ecossistemas.
Investigação
Comece com uma pergunta e revele a resposta gradualmente.
pergunta
→ evidência
→ descoberta
→ conclusão
Útil para experiências editoriais, de pesquisa, culturais ou explicativas.
Demonstração
Estruture o site em torno de provar uma afirmação.
afirmação
→ demonstração
→ evidência
→ convite
Útil quando a confiança precisa ser conquistada rapidamente.
Múltiplas lentes podem coexistir, mas cada conceito deve ter um mecanismo narrativo dominante.
6. Escolha a intensidade narrativa apropriada
Nem todo projeto deve se tornar uma experiência narrativa imersiva.
Classifique os conceitos candidatos como:
Narrativa leve
A narrativa afeta principalmente:
- ordem da mensagem
- progressão da seção
- títulos
- colocação da prova
A interface permanece convencional e eficiente.
Bom para:
- SaaS
- serviços profissionais
- B2B
- páginas de produto
- sites focados em conversão
Narrativa integrada
A narrativa influencia:
- progressão da página
- ritmo do conteúdo
- imagens
- linguagem repetida
- interações selecionadas
- transições de seção
Bom para:
- sites de marca
- portfólios
- lançamentos
- empresas de serviços diferenciados
- comércio editorial
Narrativa imersiva
A experiência em si se comporta como uma história.
A narrativa pode influenciar:
- progressão de rolagem
- sequenciamento de mídia
- mudanças de cena
- interação
- estrutura de capítulo
- movimento rico
Bom para:
- campanhas
- experiências culturais
- lançamentos de produtos
- projetos de storytelling
- sites de marca experienciais
A imersão só deve ser proposta quando:
- o conteúdo a apoia
- o valor a justifica
- o orçamento de produção pode plausivelmente apoiá-la
- a narrativa permanece compreensível sem exigir interação frágil
7. Gere territórios verbais antes dos territórios visuais
Comece a exploração do conceito com a linguagem.
Gere palavras e frases conectadas a:
- transformação
- linguagem do cliente
- vocabulário do projeto
- processo
- objetos
- terminologia do domínio
- contrastes
- resultados
- associações culturais
- descobertas do universo gráfico
Possíveis métodos de ideação incluem:
Combinações de frases
Combine a linguagem do projeto de maneiras inesperadas, mas defensáveis.
Expressões idiomáticas
Explore expressões idiomáticas relevantes como faíscas.
Não force expressões idiomáticas nos conceitos finais.
Rejeite aquelas que são:
- clichês
- confusas
- culturalmente inadequadas
- muito inteligentes
- não relacionadas ao negócio real
Linguagem do domínio
Reinterprete a terminologia já usada pelo público.
Significados duplos
Explore palavras com significados funcionais e emocionais.
Declarações de contraste
Exemplos:
Não X. Y.
De X para Y.
Além de X.
E se X fosse Y?
Linguagem de transformação
Use verbos que descrevem movimento ou mudança.
Perguntas
Use uma pergunta significativa não resolvida para criar tensão.
Frases de propriedade do projeto
Prefira terminologia ou linguagem que os concorrentes não possam reivindicar facilmente.
Não escreva a cópia final do site nesta fase.
O propósito é a geração do conceito.
8. Divirja antes de convergir
Gere vários conceitos distintos antes de selecionar um para refinar.
Cada conceito deve combinar:
- ideia central
- lente narrativa
- progressão do visitante
- decisões de conteúdo
- implicações de tom
- implicações de design visual
- implicações de interação
Aplique estes filtros de divergência:
Variação de lente
Experimente diferentes mecanismos narrativos.
Variação de intensidade
Varie a intensidade narrativa.
Variação de material de origem
Alcance diferentes tipos de evidência.
Variação de implicação de design
Explore diferentes compromissos visuais e de interação.
Variação de público
Mude o principal ponto de entrada na jornada.
Não crie mais de 5 conceitos divergentes.
Cada um deve ser genuinamente diferente.
Rotule cada conceito divergente com:
Nome do conceito: Narrativa dominante: Público primário: Ideia central: Material de origem:
Para cada um, capture:
Como a progressão da página mudaria?
Que conteúdo seria priorizado?
Que tom e voz seriam usados?
Que implicações visuais surgem?
Que interações são sugeridas?
O que torna este diferente dos outros?
9. Avalie e selecione
Apresente os conceitos divergentes para discussão.
Avalie contra:
- Alinhamento com o problema de negócio
- Significância para o público
- Apoio de evidências disponíveis
- Originalidade na categoria
- Clareza da progressão
- Potencial para orientar decisões de conteúdo
- Potencial para inspirar design visual
- Viabilidade dentro das restrições
Selecione 1-2 conceitos para desenvolver em direções de conceito completas.
10. Desenvolva as direções de conceito selecionadas
Para cada conceito selecionado, produza:
Declaração do problema
Reformule o briefing inicial, agora informado pela exploração do conceito.
Significado essencial
A única ideia que o visitante deve lembrar.
Transformação do público
Estados antes/depois.
Inventário de evidências
O que apoia o conceito.
Declaração do conceito
Uma declaração clara da abordagem narrativa.
Progressão do visitante
Como a compreensão se desenvolve. Use uma forma de:
Seção 1: ...
Seção 2: ...
Seção 3: ...
Implicações de conteúdo
Que tipos de conteúdo seriam necessários.
Direção de tom
Voz, linguagem, ritmo.
Implicações visuais
Como o conceito informa imagens, layout, cor, tipografia, movimento.
Implicações de interação
Como o conceito sugere interação.
Próxima ação
O que o conceito prepara o visitante para fazer.
Perguntas em aberto
O que ainda precisa ser validado.
Formato de saída
Produza marcações de bloco de código como esta para cada direção de conceito:
## Conceito: [nome do conceito]
### Declaração do problema
...
### Significado essencial
...
### Transformação do público
Antes: ...
Depois: ...
Ação: ...
### Declaração do conceito
...
### Progressão do visitante
Seção 1: ...
Seção 2: ...
Seção 3: ...
### Implicações de conteúdo
...
### Direção de tom
...
### Implicações visuais
...
### Implicações de interação
...
### Próxima ação
...
### Perguntas em aberto
...
Para relatar um problema sem conceito:
## Condição atual
O projeto não está pronto para conceituação.
### Motivo
...
### Perguntas em aberto
...
### Ação recomendada
...
Restrições e avisos
- Não invente depoimentos, estudos de caso ou resultados de clientes.
- Não produza cópia final do site, wireframes, layouts ou código de implementação.
- Não force uma transformação emocional onde uma mudança prática na compreensão é suficiente.
- Não use uma lente de fundador simplesmente porque o material do fundador existe.
- Não proponha imersão sem conteúdo, orçamento e justificativa de valor.
- Não use linguagem de design visual prematuramente.
- Não gere mais de 5 conceitos divergentes.
- Uma pergunta em aberto honesta vale mais do que um fato inventado.
Tópicos relacionados
Esta skill se conecta a:
- Enquadramento do problema (
design-problem-framer) - Pesquisa de universo gráfico (
graphic-universe-builder) - Desenvolvimento de sistema visual (
visual-system-developer) - Redação (
copywriter) - Design de interação
- Arquitetura de informação
Se a entrada estiver faltando, execute a skill upstream primeiro.
Se a saída precisar de execução, prossiga com a skill downstream apropriada.