Direções como style tiles
Por quê: Um moodboard é vago demais para servir de base e um mockup de página completa é literal demais: as pessoas começam a discutir uma estrutura que já foi decidida na etapa 4. Style tiles (Samantha Warren) e colagens de elementos (Dan Mall) ficam no meio-termo: mostram cores, tipografia e elementos de interface sem um layout de página, mantendo a discussão focada no look and feel. Com IA, as variantes custam quase nada, então a escolha se torna o gargalo. Esta etapa, portanto, separa as direções propositalmente e dá à escolha uma régua.
Necessita: brand.md, taste-profile.md, anti-defaults.md, sitemap.md e um wireframe (para o texto), personas.md.
Produz: 06-directions/tiles/r<round>/*.html, 06-directions/direction.md.
1. Escolher os eixos
Nomeie dois ou três eixos ao longo dos quais as direções diferem, extraídos de pontos em aberto no taste profile. Exemplos: calmo ↔ marcante, denso ↔ arejado, quente ↔ frio, editorial ↔ técnico, plano ↔ texturizado. Posicione cada direção em um ponto diferente. Três direções que diferem apenas na cor de destaque são uma única direção.
Se o estágio A do moodboard produziu boards separados, comece a partir deles.
2. Construir três tiles
Um arquivo HTML autossuficiente por direção. Cada tile mostra:
- um nome e uma frase sobre a ideia por trás dele (vinda da marca, não de uma tendência)
- paleta de cores como amostras com funções (fundo, texto, destaque, ação) e taxa de contraste do texto e botões (WCAG AA: 4.5:1 para texto)
- tipografia: face de display e de corpo com alguns tamanhos, título real e parágrafo dos rascunhos de texto
- elementos de interface: botão primário e secundário, link, campo de entrada, barra de navegação, um card
- um fragmento de hero (não uma seção hero completa) e outro elemento característico: uma citação, um número, uma lista, uma linha de preço
- imagens: amostras de estilo ou uma descrição de foto, ilustração ou tratamento de tela
- um detalhe que apenas esta marca teria (uma forma do logotipo, um termo do ofício, uma unidade de medida)
Regras:
- Leia
anti-defaults.mdprimeiro. Fontes apenas de fontes com licença utilizável (Google Fonts, OFL, as fontes licenciadas do cliente); anote a licença e o tamanho do arquivo. - Texto real do projeto, nunca lorem ipsum. Texto de amostra de interface usa apenas fatos de
facts.md: sem funcionalidades, ofertas, disponibilidade ou números inventados. - Nenhum layout de página completa, nenhuma árvore de navegação completa, nenhum rodapé.
- Renderize cada tile em 390 px e 1440 px e observe-o antes de mostrá-lo.
3. Avaliar
Na página de revisão, mostre os três tiles lado a lado (ou um após o outro no celular). Para cada tile:
- Teste de palavras: uma pergunta por tile. A pessoa (e, se possível, colegas) escolhe três palavras (checkboxes,
data-max="3") de uma lista que mistura os atributos da marca e seus polos opostos. Conte qual lado vence. - Elemento por elemento: uma pergunta por elemento (cor, tipografia, botões, imagens, detalhe): de qual tile deve vir, A, B, C ou nenhum, com um campo de motivo. Isso mantém a folha com cerca de oito perguntas.
- Teste de cinco segundos (opcional): mostre um tile por cinco segundos a alguém de fora do projeto e pergunte "Que tipo de empresa é esta? Quais três palavras vêm à mente?"
4. Mesclar
A partir das avaliações, escreva direction.md: os elementos escolhidos por categoria, de qual tile vêm e por quê, e o que permanece em aberto para a etapa 7. Se a mescla for substancial, construa um tile combinado e mostre-o novamente na rodada 2. Não execute mais de três rodadas; se não convergir, o problema geralmente está nos atributos da marca, então volte para a etapa 3.
Concluído quando direction.md estiver confirmado e o teste de palavras para a direção combinada apontar para os atributos da marca.