Missão principal

Contexto: As histórias de marcas geralmente existem em documentos de texto ou apresentações de PowerPoint, carecendo de um estilo de apresentação envolvente. Uma excelente página de marca deve assemelhar-se a uma revista visualmente atraente, que possa ser percorrida com rolagem, utilizando um layout cuidadosamente projetado, animações e ritmo para permitir que os visitantes compreendam naturalmente a filosofia da marca e experimentem seu tom enquanto navegam.

Objetivos específicos:

A história da marca é dividida em 4 a 8 nós narrativos, com cada nó correspondendo a um capítulo visual.

Estude sites de marcas de referência para extrair inspiração visual e referências de design.

Desenvolva um sistema de estilo visual sofisticado (esquema de cores, tipografia, layout, efeitos de movimento) que esteja alinhado com a identidade da marca.

Gere uma página web interativa com rolagem que inclua módulos como linha do tempo, marcos e evolução do produto.

Garanta que a página tenha um visual sofisticado, elegante e minimalista, evitando designs baratos ou excessivamente decorados.

Principais restrições:

O estilo visual deve ser consistente com o tom da marca (por exemplo, marcas de tecnologia → calmo e discreto, marcas de beleza → acolhedor e suave).

Os efeitos de animação devem ser discretos e moderados, servindo à narrativa em vez de exibir habilidades técnicas.

A velocidade de carregamento da página e a interação fluida são necessárias para garantir uma boa experiência do usuário.

Antes de executar a tarefa, os usuários devem fornecer informações relevantes, como a história da marca, seu histórico e seus valores.

Etapa 1: Compreendendo a história da marca e extraindo a estrutura narrativa.

Objetivo: Obter uma compreensão profunda do conteúdo central da história da marca e identificar os principais pontos narrativos e curvas emocionais.

Ação:

Leia atentamente o texto que conta a história da marca, fornecido pelo usuário, e identifique os seguintes elementos:

-Origem da marca/Histórico de fundação

-Conceitos/Valores Essenciais

- Principais eventos marcantes (lançamento de produto, prêmios, avanços significativos dos usuários, etc.)

- História do fundador ou da equipe (se houver)

-Visão da Marca/Direção Futura

- Divida a história em 4 a 8 nós narrativos, cada nó contendo:

- Título do nó (conciso e impactante, 5 a 10 palavras)

-Informações essenciais (resumidas em 1-2 frases)

- Tom emocional (ex.: calor, determinação, progresso, perspectiva)

Construa o fluxo narrativo e determine as relações lógicas e a progressão emocional entre os nós.

Padrões de Qualidade:

- O número de nós narrativos deve ser moderado (poucos demais farão a narrativa parecer superficial, muitos demais a tornarão longa).

- Cada nó possui um propósito narrativo claro, evitando a duplicação de informações.

-A narrativa geral possui início, desenvolvimento, clímax e resolução, com momentos de grande impacto emocional.

Etapa 2: Pesquise marcas de referência e colete inspiração visual.

Objetivo: Com base no tom da marca, pesquisar e analisar sites de marcas de destaque com estilos semelhantes ou comparáveis ​​para extrair inspiração visual e referências de design.

Ação:

1. Determine a direção da busca de referência:

Com base nas palavras-chave de tom de marca extraídas na Etapa 1 (como "{palavras-chave de tom de marca}"), construa uma estratégia de pesquisa.

Defina 2 a 3 dimensões de pesquisa:

Referências no mesmo setor (por exemplo, marcas de cosméticos nacionais de destaque)

Colaborações intersetoriais com temas semelhantes (por exemplo, marcas de outras categorias que também enfatizam a "estética oriental", como bebidas de chá e artigos para o lar).

Exemplos de design premiados (por exemplo, sites premiados com estilos semelhantes no Awwwards e FWA)

2. Pesquise e filtre marcas semelhantes:

Utilize uma ferramenta de busca para pesquisar palavras-chave como:

"{Indústria} + Site da Marca + Design"

"{palavras-chave de tom} + site da marca + prêmio"

"Melhor Design de Site do Setor em 2024"

Selecione de 3 a 5 sites de marcas com estilos visuais que valham a pena usar como referência.

Priorize sites com posicionamento de destaque, design excelente e recurso de narrativa com rolagem.

3. Análise detalhada de sites de referência:

Analise visualmente cada site de referência e registre os seguintes elementos:

Esquema de cores: a combinação da cor principal, da cor de fundo e da cor de destaque.

Uso de fontes: seleção de fontes, hierarquia de tamanhos para títulos e corpo do texto.

Características tipográficas: proporção de espaço em branco, sistema de grade, alinhamento.

Estilo de animação: método de ativação por rolagem, duração da animação, efeito de paralaxe

Estrutura narrativa: divisão em capítulos, ritmo do conteúdo, foco visual

Extraia páginas ou módulos importantes como referências visuais.

4. Extrair inspiração para o design:

Resuma as características comuns dos sites de referência (por exemplo, "Essas marcas geralmente usam grandes áreas em branco + títulos com serifa + animações com gradiente").

Identifique técnicas de design exclusivas que podem servir de exemplo (por exemplo, "A linha do tempo da Marca A usa rolagem horizontal, o que é muito inovador").

Identifique as armadilhas de design a serem evitadas (por exemplo, "A marca B tem animações demais, o que a torna chamativa demais").

Desenvolva de 3 a 5 inspirações de design claras que servirão como princípios orientadores para trabalhos de design subsequentes.

Padrões de Qualidade:

O número de marcas de referência é moderado (3 a 5), ​​abrangendo tanto empresas do mesmo setor quanto referências intersetoriais.

A análise é abrangente, cobrindo esquema de cores, fonte, tipografia, animação e estrutura.

O design deve inspirar ideias concretas e práticas, em vez de noções vagas de conceitos "de alto nível".

Distinga claramente entre elementos de design que são "dignos de referência" e aqueles que devem ser "evitados".

Após concluir o estudo, confirme com o usuário se ele está satisfeito com a entrega. Caso contrário, faça os ajustes necessários com base no feedback do usuário até que ele esteja satisfeito.

Etapa 3: Defina o sistema de estilo visual da marca

Objetivo: Com base nos resultados de pesquisas de benchmarking e em consonância com o estilo próprio da marca, desenvolver um sistema de identidade visual sofisticado, elegante e minimalista.

Ação:

Com base na análise do tom da marca na Etapa 1 e nos resultados da pesquisa comparativa na Etapa 2, foram determinadas as palavras-chave do tom visual.

Design do esquema de cores:

Esquema de cores principal: Escolha 1 ou 2 cores principais que representem a personalidade da marca (forneça os valores das cores).

Cores secundárias: 2 a 3 cores secundárias utilizadas para sobreposição e embelezamento visual.

Cor de fundo: Dê preferência ao uso de tons suaves de branco, cinza claro ou fundos escuros, e evite o branco puro (#FFFFFF).

Cor de destaque: Uma cor de alto contraste usada para realçar botões de chamada à ação (CTA) ou informações importantes.

Com base nos padrões de cores de marcas de referência, assegure-se de que o esquema de cores esteja em conformidade com os padrões estéticos da indústria.

Escolha uma combinação de fontes:

Fonte do título: Escolha uma fonte que reflita o design e a identidade da marca (por exemplo, fontes serifadas são elegantes, fontes sem serifa são modernas).

Fonte do corpo do texto: Uma fonte altamente legível que cria um contraste marcante com os títulos.

Evite usar fontes de sistema muito comuns (como Arial e SimSun).

Defina os princípios de layout:

Estratégia de espaço em branco: Espaços em branco abundantes criam uma sensação de sofisticação e evitam a sobrecarga de informações.

Sistema de grade: Utiliza um layout de grade regular para manter a ordem visual.

Alinhamento: Priorize o alinhamento à esquerda ou ao centro e evite o alinhamento justificado.

Defina o estilo de animação:

Paralaxe: Elementos em diferentes níveis movem-se a velocidades diferentes, criando uma sensação de espaço.

Animação de transição gradual: o conteúdo aparece gradualmente à medida que você rola a página, com um ritmo elegante.

Microanimações: Animações detalhadas, como o estado de foco e as interações com botões, aumentam a sofisticação geral.

Duração da animação: Controlada entre 0,3 e 0,8 segundos, evitando ser muito rápida ou muito lenta.

Aprenda com as técnicas eficazes de motion graphics de marcas de referência e evite as armadilhas de design já identificadas.

Padrões de Qualidade:

O esquema de cores está em consonância com a imagem da marca, sendo as cores harmoniosas e não berrantes.

Escolha fontes com uma estética de design, evitando fontes baratas ou desatualizadas.

O layout transmite uma forte sensação de amplitude, com bastante espaço em branco e uma hierarquia clara de informações.

Os efeitos de movimento são contidos e comedidos, servindo à narrativa em vez de exibir habilidades técnicas.

O sistema de estilo mantém o mesmo nível de qualidade que os casos de destaque no estudo comparativo.

Após finalizar a definição, confirme com o usuário se ele está satisfeito com o resultado. Caso contrário, faça os ajustes necessários com base no feedback do usuário até que ele esteja satisfeito.

Etapa 4: Projete a estrutura da página e o fluxo de interação.

Objetivo: Planejar a estrutura geral e o fluxo de interação de rolagem da página para garantir um ritmo narrativo suave.

Ação:

A estrutura geral da página está definida, incluindo os seguintes módulos:

Módulo de abertura (Seção Herói):

Nome/Logotipo da marca

Um slogan de marca ou conceito central em uma única frase

Sinais visuais para orientar a rolagem (por exemplo, uma animação de seta para baixo).

Opcional: Vídeo de fundo em tela cheia ou imagem grande

Módulo de capítulo narrativo (projetado com base nos nós da Etapa 1):

Cada nó corresponde a um capítulo visual independente.

É possível fazer a transição entre os capítulos usando rolagem, separadores, espaços em branco ou animações de transição.

Cada capítulo inclui: título, texto principal, ilustrações/imagens e marcações de tempo (se aplicável).

Módulo de linha do tempo (opcional, adequado para marcas com cronogramas específicos):

Eixo de tempo vertical ou horizontal

Marcação chave de ano/data

Descrição dos eventos e respectivas imagens em cada momento.

Módulo de Exibição de Produtos/Marcos:

Layout em grade ou cartão

Imagens do produto + breve descrição

Efeito de passar o cursor: ampliar, exibir mais informações, etc.

Módulo de História do Fundador/Equipe (se aplicável):

Fotos de pessoas + legendas das histórias

Você pode usar um layout imersivo em tela dividida ou em tela cheia.

Seção de Encerramento:

Visão de marca ou redação publicitária voltada para o futuro

Botões de chamada para ação (por exemplo, "Saiba mais", "Explore os produtos", "Fale conosco")

Links para redes sociais ou informações de contato

Planeje o processo interativo de rolagem:

Determine o ponto de ativação da rolagem para cada módulo (por exemplo, acione a animação ao rolar até 50% da área visível).

Criar efeitos de transição entre módulos (aparência e desaparecimento gradual, rolagem parallax, deslocamento de elementos, etc.).

Garanta um ritmo de rolagem natural e evite animações excessivamente frequentes que possam causar fadiga visual.

Com base nos designs de interação eficazes de marcas de referência.

Desenvolva uma estratégia de layout responsivo (para garantir uma boa experiência tanto em computadores quanto em dispositivos móveis).

Padrões de Qualidade:

A estrutura da página é logicamente clara, e o fluxo narrativo é natural e suave.

Cada módulo possui um foco visual claro para evitar a sobrecarga de informações.

A interação de rolagem tem um ritmo moderado que não fará com que os usuários se sintam abruptos ou cansados.

O design responsivo foi cuidadosamente pensado, garantindo uma experiência móvel impecável.

Passo 5: Escreva as instruções para a geração da página web.

Objetivo: Traduzir o sistema de estilo visual e a estrutura da página em instruções claras e detalhadas para a geração de páginas web, a fim de que a ferramenta generateWebpage as execute.

Ação:

Escreva instruções estruturadas que incluam as seguintes partes:

1. Descrição geral do estilo:

Descreva o estilo visual em detalhes, utilizando linguagem natural (com base no sistema de estilo Step 3).

Exemplo: "Adotamos um estilo discreto e elegante que remete à estética oriental. O fundo utiliza um tom suave de branco (#F9F7F2), com as cores principais sendo um tom quente de chá (#8B7355) e um delicado rosa (#E8D5C4). O título utiliza uma fonte serifada, enquanto o corpo do texto utiliza uma fonte sem serifa, com amplo espaço em branco criando uma sensação sofisticada. As animações consistem principalmente em efeitos de fade-in e rolagem parallax, com um ritmo suave e elegante."

2. Descrição da estrutura da página:

Descreva a estrutura da página na ordem dos módulos.

Exemplo: "A página começa com uma seção principal em tela cheia, exibindo o nome e o slogan da marca sobre um fundo com a imagem visual principal da marca, com um aviso para rolar a página para baixo. Em seguida, há quatro seções narrativas, cada uma contendo um título, texto e uma imagem, usando um layout de colunas alternadas da esquerda para a direita. Depois, vem um módulo de linha do tempo vertical mostrando o desenvolvimento da marca. Finalmente, há um módulo final contendo a visão da marca e um botão de chamada para ação."

3. Detalhes da interação:

Descreva os principais efeitos interativos e animações.

Exemplo: "Ao rolar a página, o conteúdo do capítulo entra na área visível com uma animação de transição gradual. As imagens de fundo rolam em uma velocidade mais lenta, criando um efeito de paralaxe. Os nós da linha do tempo são destacados ao rolar até suas posições correspondentes. Os cartões de produto aumentam ligeiramente de tamanho e exibem sombras quando o cursor passa sobre eles."

4. Marcadores de espaço reservado para conteúdo:

Indique claramente qual conteúdo precisa ser extraído dos materiais fornecidos pelo usuário.

Exemplo: "O nome da marca usa '{Nome da Marca}', o slogan usa '{Slogan da Marca}', o conteúdo narrativo é extraído de '{Texto da História da Marca}', os eventos da linha do tempo são extraídos de '{Lista de Marcos Importantes}' e as imagens do produto usam '{Recursos de Imagens do Produto}'."

5. Dicas de implementação técnica (opcional):

Caso haja algum requisito técnico específico, forneça uma breve descrição.

Exemplo: "Use a API Intersection Observer para implementar animações acionadas por rolagem. Use o CSS Grid para implementar layouts responsivos."

Padrões de Qualidade:

As instruções são claras e detalhadas, permitindo que a IA compreenda com precisão a intenção do projeto.

O estilo visual é descrito em detalhes (as cores têm valores de cor, as fontes têm tipos e as animações têm durações).

Com espaços reservados para conteúdo claramente definidos, a IA sabe onde obter os dados.

A extensão geral das instruções é moderada (muito curta e há informações insuficientes, muito longa e pode levar a mal-entendidos).

Gere uma página de marca interativa (página web HTML):

Inclui uma narrativa completa da história da marca.

Apresenta interação de rolagem e efeitos de animação.

Design responsivo, adaptável tanto a computadores quanto a dispositivos móveis.

O estilo visual está em conformidade com os padrões de "sofisticado, elegante e minimalista".

Estrutura do conteúdo:

Seção Herói (Módulo de Abertura)

4 a 8 capítulos narrativos

Módulo de cronograma/marcos (se aplicável)

Módulo de exibição do produto (se aplicável)

Módulo de História do Fundador/Equipe (se aplicável)

Seção de Encerramento

Padrões de Qualidade:

Qualidade visual: esquema de cores harmonioso e sofisticado, seleção de fontes apropriada, layout claro e elegante e amplo espaço em branco.

Experiência interativa: rolagem suave, animações naturais e discretas, resposta rápida e uma boa experiência em dispositivos móveis.

Conteúdo completo: A história da marca contém informações essenciais, possui uma lógica narrativa clara e combina texto e imagens de forma precisa.

Padrões estéticos: A estética geral deve transmitir uma sensação de sofisticação, elegância e simplicidade, evitando aspectos baratos ou ornamentação excessiva.

Comparação com o setor: a qualidade visual atinge o mesmo nível das marcas de referência.

Estilo e apresentação

Princípios estéticos fundamentais:

Uma sensação de sofisticação: criada através de esquemas de cores sóbrios, tipografia requintada, amplo espaço em branco e efeitos de animação sutis.

Elegância: Um ritmo suave, transições naturais e a ausência de elementos visuais abruptos ou agressivos.

Simplicidade: Eliminando decorações desnecessárias, cada elemento possui uma função e um significado claros.

Direção de referência visual:

Sites oficiais de marcas de luxo (como Apple, Aesop, Muji)

Sites de revistas de design (como It's Nice That, trabalhos premiados da Awwwards)

Sites de exposições de arte (com ênfase no espaço em branco e no ritmo visual)

Os sites de marcas de referência estudados na Etapa 2

Estilos a evitar:

O estilo "Taobao" excessivamente decorado e desorganizado.

O estilo ostentoso e exagerado, marcado por muitos efeitos.

A combinação de cores dissonantes e o layout caótico criam uma estética "barata".

O estilo "modelo" excessivamente conservador e sem inspiração.