Misión principal

Antecedentes: Las historias de marca suelen presentarse en documentos de texto o presentaciones de PowerPoint, careciendo de un estilo de presentación inmersivo. Una excelente página de marca debería asemejarse a una revista visualmente atractiva que se pueda hojear, utilizando un diseño cuidado, animaciones y ritmo que permitan a los visitantes comprender de forma natural la filosofía de la marca y experimentar su tono mientras navegan.

Objetivos específicos:

La historia de la marca se divide en 4 a 8 nodos narrativos, y cada nodo corresponde a un capítulo visual.

Estudia los sitios web de marcas de referencia para extraer inspiración visual y referencias de diseño.

Diseñar un sistema de estilo visual sofisticado (combinación de colores, tipografía, maquetación, efectos de movimiento) que esté en consonancia con la identidad de la marca.

Genera una página web interactiva con desplazamiento que incluya módulos como cronograma, hitos y evolución del producto.

Asegúrese de que la página tenga un aspecto visualmente sofisticado, elegante y minimalista, evitando diseños baratos o excesivamente recargados.

Restricciones clave:

El estilo visual debe ser coherente con el tono de la marca (por ejemplo, marcas tecnológicas → tranquilo y sobrio, marcas de belleza → cálido y suave).

Los efectos de animación deben ser sobrios y moderados, al servicio de la narrativa en lugar de para alardear de habilidades técnicas.

La velocidad de carga de la página y una interacción fluida deben garantizar una buena experiencia de usuario.

Antes de realizar la tarea, los usuarios deben proporcionar información relevante, como la historia de la marca, sus antecedentes y sus valores.

Paso 1: Comprender la historia de la marca y extraer la estructura narrativa.

Objetivo: Comprender en profundidad el contenido central de la historia de la marca e identificar los puntos narrativos clave y las curvas emocionales.

acción:

Lea atentamente el texto de la historia de la marca proporcionado por el usuario e identifique los siguientes elementos:

-Origen de la marca/Antecedentes fundacionales

-Conceptos/Valores Fundamentales

- Eventos clave (lanzamiento de productos, premios, avances de los usuarios, etc.)

- Historia del fundador o del equipo (si la hay)

-Visión de marca/Dirección futura

- Divide la historia en 4-8 nodos narrativos, cada nodo contendrá:

- Título del nodo (conciso e impactante, de 5 a 10 palabras)

-Información principal (resumida en 1-2 frases)

- Tono emocional (por ejemplo, calidez, determinación, avance, perspectiva)

Construye el flujo narrativo y determina las relaciones lógicas y la progresión emocional entre los nodos.

Estándares de calidad:

- El número de nodos narrativos debe ser moderado (muy pocos harán que la narración parezca superficial, demasiados la harán demasiado larga).

- Cada nodo tiene un propósito narrativo claro, evitando la duplicación de información.

-La narración general tiene un comienzo, un desarrollo, un clímax y una resolución, con momentos de gran intensidad emocional.

Paso 2: Investiga marcas de referencia y recopila inspiración visual.

Objetivo: Basándose en el tono de la marca, buscar y analizar sitios web de marcas destacadas con estilos similares o comparables para extraer inspiración visual y referencias de diseño.

acción:

1. Determinar la dirección de la búsqueda de referencia:

Basándose en las palabras clave del tono de marca extraídas en el Paso 1 (como "{palabras clave del tono de marca}"), elabore una estrategia de búsqueda.

Defina 2-3 dimensiones de búsqueda:

Referencias de referencia en el mismo sector (por ejemplo, marcas de cosméticos nacionales destacadas).

Colaboraciones intersectoriales con temáticas similares (por ejemplo, marcas de otras categorías que también hacen hincapié en la "estética oriental", como las bebidas de té y los artículos para el hogar).

Ejemplos de diseño premiados (por ejemplo, sitios web premiados con estilos similares en Awwwards y FWA).

2. Busca y filtra marcas similares:

Utilice una herramienta de búsqueda para buscar palabras clave como:

"{Industria} + Sitio web de marca + Diseño"

"{tono palabras clave} + sitio web de la marca + premio"

"Mejor diseño web del sector {2024}"

Selecciona entre 3 y 5 sitios web de marcas con estilos visuales que merezcan la pena tomar como referencia.

Priorice los sitios web con un posicionamiento de alta gama, un diseño excelente y una función de desplazamiento narrativo.

3. Análisis en profundidad de sitios web de referencia:

Analice visualmente cada sitio web de referencia y registre los siguientes elementos:

Esquema de color: la combinación de color principal, color de fondo y color de acento.

Uso de fuentes: Selección de fuentes, jerarquía de tamaños para encabezados y texto del cuerpo.

Características tipográficas: proporción de espacio en blanco, sistema de cuadrícula, alineación.

Estilo de animación: método de activación por desplazamiento, duración de la animación, efecto de paralaje.

Estructura narrativa: división de capítulos, ritmo del contenido, enfoque visual.

Extraer páginas o módulos clave como referencias visuales.

4. Extraer inspiración para el diseño:

Resuma las características comunes de los sitios web de referencia (por ejemplo, "Estas marcas generalmente utilizan grandes áreas de espacio en blanco + titulares con serifa + animaciones de degradado").

Identificar técnicas de diseño únicas de las que se pueda aprender (por ejemplo, "La línea de tiempo de la marca A utiliza desplazamiento horizontal, lo cual es muy innovador").

Señala los errores de diseño que se deben evitar (por ejemplo, "La marca B tiene demasiadas animaciones, lo que la hace parecer llamativa").

Desarrolla entre 3 y 5 ideas de diseño claras que sirvan como principios rectores para el trabajo de diseño posterior.

Estándares de calidad:

El número de marcas de referencia es moderado (3-5), abarcando tanto a empresas del mismo sector como a referencias intersectoriales.

El análisis es exhaustivo y abarca la combinación de colores, la fuente, la tipografía, la animación y la estructura.

El diseño debe inspirar ideas concretas y prácticas, en lugar de nociones vagas de conceptos de "alto nivel".

Distinga claramente entre los elementos de diseño que son "dignos de referencia" y aquellos que deben "evitarse".

Tras finalizar el estudio, confirme con el usuario si está satisfecho con el servicio. En caso contrario, realice los ajustes necesarios en función de sus comentarios hasta que quede satisfecho.

Paso 3: Definir el sistema de estilo visual de la marca

Objetivo: Basándose en los resultados de estudios comparativos y combinándolos con el estilo propio de la marca, diseñar un sistema de estilo visual sofisticado, elegante y minimalista.

acción:

A partir del análisis del tono de marca realizado en el paso 1 y de los resultados de la investigación comparativa del paso 2, se determinaron las palabras clave del tono visual.

Diseño de la combinación de colores:

Esquema de color principal: Elija 1 o 2 colores principales que representen el carácter de la marca (proporcione los valores de color).

Colores secundarios: Se utilizan de 2 a 3 colores secundarios para crear capas y adornos visuales.

Color de fondo: Priorice el uso de fondos de color blanco roto suave, gris claro u oscuro, y evite el blanco puro (#FFFFFF).

Color de acento: Un color de alto contraste que se utiliza para resaltar los botones de llamada a la acción (CTA) o la información clave.

Tomando como referencia los patrones de combinación de colores de marcas de referencia, asegúrese de que la combinación de colores se ajuste a los estándares estéticos de la industria.

Elige una combinación de fuentes:

Fuente del título: Elija una fuente que refleje el diseño y la identidad de la marca (por ejemplo, las fuentes con serifa son elegantes, las fuentes sin serifa son modernas).

Fuente del texto principal: Una fuente de alta legibilidad que crea un contraste por capas con los títulos.

Evite utilizar fuentes de sistema demasiado comunes (como Arial y SimSun).

Definir los principios de diseño:

Estrategia de espacios en blanco: Un amplio espacio en blanco crea una sensación de sofisticación y evita la sobrecarga de información.

Sistema de cuadrícula: Utiliza un diseño de cuadrícula regular para mantener el orden visual.

Alineación: Priorice la alineación a la izquierda o al centro, y evite la alineación justificada.

Determina el estilo de animación:

Paralaje: Los elementos en diferentes niveles se mueven a diferentes velocidades, creando una sensación de espacio.

Animación de aparición gradual: El contenido aparece progresivamente a medida que te desplazas, con un ritmo elegante.

Microanimaciones: Las animaciones detalladas, como el estado al pasar el cursor y las interacciones con los botones, mejoran la sofisticación general.

Duración de la animación: Controlada entre 0,3 y 0,8 segundos, evitando que sea demasiado rápida o demasiado lenta.

Aprenda de las técnicas efectivas de gráficos en movimiento de marcas de referencia y evite los errores de diseño ya identificados.

Estándares de calidad:

La paleta de colores se ajusta a la imagen de la marca, y los colores son armoniosos y no estridentes.

Elige fuentes con una estética de diseño cuidada, evitando las fuentes baratas o anticuadas.

La maquetación ofrece una gran sensación de amplitud, amplios espacios en blanco y una clara jerarquía de la información.

Los efectos de movimiento son sobrios y medidos, al servicio de la narrativa en lugar de hacer alarde de habilidades técnicas.

El sistema de estilos mantiene el mismo nivel de calidad que los casos más destacados del estudio comparativo.

Tras finalizar la definición, confirme con el usuario si está satisfecho con el resultado. En caso contrario, realice los ajustes necesarios en función de sus comentarios hasta que quede satisfecho.

Paso 4: Diseñar la estructura de la página y el flujo de interacción.

Objetivo: Planificar la estructura general y el flujo de interacción por desplazamiento de la página para garantizar un ritmo narrativo fluido.

acción:

La estructura general de la página está diseñada e incluye los siguientes módulos:

Módulo de apertura (Sección principal):

Nombre/Logotipo de la marca

Un eslogan de marca de una sola frase o concepto central.

Señales visuales para guiar el desplazamiento (por ejemplo, una animación de flecha hacia abajo).

Opcional: Vídeo de fondo a pantalla completa o imagen grande

Módulo de capítulo narrativo (diseñado en base a los nodos del paso 1):

Cada nodo corresponde a un capítulo visual independiente.

Los capítulos pueden pasar de uno a otro mediante el desplazamiento, separadores, espacios en blanco o animaciones de transición.

Cada capítulo incluye: título, texto principal, ilustraciones/imágenes y marcas de tiempo (si corresponde).

Módulo de cronograma (opcional, adecuado para marcas con cronogramas específicos):

Eje de tiempo vertical u horizontal

Marcado de año/fecha clave

Descripciones de los eventos e imágenes que las acompañan en cada momento.

Módulo de visualización de productos/hitos:

Diseño de cuadrícula o de tarjetas

Imágenes del producto + breve descripción

Efecto al pasar el cursor: acercar la imagen, mostrar más información, etc.

Módulo de historia del fundador/equipo (si corresponde):

Fotos de personas + pies de foto

Puedes usar un diseño inmersivo de pantalla dividida o de pantalla completa.

Sección final:

Visión de marca o redacción publicitaria orientada al futuro

Botones CTA (por ejemplo, "Más información", "Explorar productos", "Contáctenos")

Enlaces a redes sociales o información de contacto

Planifique el proceso interactivo de desplazamiento:

Determina el punto de activación del desplazamiento para cada módulo (por ejemplo, activa la animación al desplazarte hasta el 50 % de la ventana gráfica).

Diseñar efectos de transición entre módulos (desvanecimiento de entrada/salida, desplazamiento parallax, desplazamiento de elementos, etc.).

Asegúrese de que el desplazamiento sea fluido y evite animaciones demasiado frecuentes que puedan provocar fatiga visual.

Tomando como referencia los diseños de interacción efectivos de marcas de referencia.

Diseña una estrategia de diseño adaptable (para garantizar una buena experiencia tanto en ordenadores de escritorio como en dispositivos móviles).

Estándares de calidad:

La estructura de la página es lógicamente clara y el flujo narrativo es natural y fluido.

Cada módulo tiene un enfoque visual claro para evitar la saturación de información.

La interacción de desplazamiento tiene un ritmo moderado que no hará que los usuarios se sientan bruscos ni fatigados.

El diseño adaptable está cuidadosamente pensado, lo que garantiza una experiencia móvil impecable.

Paso 5: Escriba las instrucciones para generar la página web.

Objetivo: Traducir el sistema de estilo visual y la estructura de la página en instrucciones claras y detalladas para la generación de páginas web, que la herramienta generateWebpage podrá ejecutar.

acción:

Redacte instrucciones estructuradas que incluyan las siguientes partes:

1. Descripción general del estilo:

Describe el estilo visual en detalle utilizando lenguaje natural (basándose en el sistema de estilo del Paso 3).

Ejemplo: «Adopta un estilo sobrio y elegante que evoca la estética oriental. El fondo utiliza un blanco roto suave (#F9F7F2), con colores principales como un tono té cálido (#8B7355) y un rosa delicado (#E8D5C4). El título utiliza una fuente con serifa, mientras que el texto principal utiliza una fuente sin serifa, con amplios espacios en blanco que crean una sensación sofisticada. Las animaciones consisten principalmente en efectos de aparición gradual y desplazamiento parallax, con un ritmo suave y elegante.»

2. Descripción de la estructura de la página:

Describe la estructura de la página en orden de módulos.

Ejemplo: "La página comienza con una sección principal a pantalla completa que muestra el nombre y el eslogan de la marca sobre el fondo de la imagen visual principal, con un mensaje que indica que se debe desplazar hacia abajo. A continuación, se presentan cuatro secciones narrativas, cada una con un título, texto y una imagen, dispuestas en columnas alternas izquierda-derecha. Después, aparece un módulo de línea de tiempo vertical que muestra el desarrollo de la marca. Finalmente, hay un módulo final que contiene la visión de la marca y un botón de llamada a la acción (CTA)."

3. Detalles de la interacción:

Describe los principales efectos interactivos y animaciones.

Ejemplo: "Al desplazarse, el contenido del capítulo aparece en la ventana gráfica con una animación de aparición gradual. Las imágenes de fondo se desplazan a menor velocidad, creando un efecto de paralaje. Los nodos de la línea de tiempo se resaltan al desplazarse a sus posiciones correspondientes. Las tarjetas de producto se agrandan ligeramente y muestran sombras al pasar el cursor sobre ellas."

4. Marcadores de posición de contenido:

Indique claramente qué contenido debe extraerse del material proporcionado por el usuario.

Ejemplo: "La marca utiliza '{Brand Name}', el eslogan utiliza '{Brand Slogan}', el contenido narrativo se extrae de '{Brand Story Copy}', los eventos de la línea de tiempo se extraen de '{Milestone List}' y las imágenes del producto utilizan '{Product Image Resources}'."

5. Sugerencias técnicas para la implementación (opcional):

Si existen requisitos técnicos especiales, por favor, proporcione una breve descripción.

Ejemplo: "Utilice la API Intersection Observer para implementar animaciones activadas por desplazamiento. Utilice CSS Grid para implementar diseños adaptables."

Estándares de calidad:

Las instrucciones son claras y detalladas, lo que permite a la IA comprender con precisión la intención del diseño.

El estilo visual se describe en detalle (los colores tienen valores de color, las fuentes tienen tipos y las animaciones tienen duraciones).

Gracias a la clara definición de los marcadores de posición del contenido, la IA sabe dónde obtener los datos.

La duración total de las instrucciones es moderada (si son demasiado cortas, la información es insuficiente; si son demasiado largas, pueden dar lugar a malentendidos).

Generar una página de marca interactiva (página web HTML):

Incluye una narración completa de la historia de la marca.

Incluye interacción de desplazamiento y efectos de animación.

Diseño responsivo, adaptable tanto a ordenadores de escritorio como a dispositivos móviles.

El estilo visual se ajusta a los estándares de "alta gama, elegancia y minimalismo".

Estructura del contenido:

Sección de héroes (Módulo de apertura)

4-8 capítulos narrativos

Módulo de cronograma/hitos (si corresponde)

Módulo de visualización del producto (si corresponde)

Módulo de historia del fundador/equipo (si corresponde)

Sección de cierre

Estándares de calidad:

Calidad visual: Combinación de colores armoniosa y sofisticada, selección de tipografía adecuada, diseño claro y elegante, y amplio espacio en blanco.

Experiencia interactiva: Desplazamiento fluido, animaciones naturales y controladas, respuesta rápida y una buena experiencia móvil.

Integridad del contenido: La historia de la marca contiene información clave, tiene una lógica narrativa clara y coincide con precisión entre texto e imágenes.

Estándares estéticos: La estética general debe transmitir una sensación de sofisticación, elegancia y sencillez, evitando lo barato o la ornamentación excesiva.

Comparación con la competencia del sector: La calidad visual alcanza el mismo nivel que las marcas de referencia.

Estilo y presentación

Principios estéticos fundamentales:

Una sensación de sofisticación: creada mediante paletas de colores sobrias, tipografía exquisita, amplios espacios en blanco y sutiles efectos de animación.

Elegancia: Un ritmo suave, transiciones naturales y la evitación de elementos visuales abruptos o estridentes.

Sencillez: Al eliminar las decoraciones innecesarias, cada elemento tiene una función y un significado claros.

Dirección de referencia visual:

Sitios web oficiales de marcas de alta gama (como Apple, Aesop, Muji)

Sitios web de revistas de diseño (como It's Nice That, obras premiadas de Awwwards)

Sitios web de exposiciones de arte (con énfasis en el espacio en blanco y el ritmo visual)

Los sitios web de marcas de referencia estudiados en el Paso 2

Estilos que se deben evitar:

El estilo "Taobao", excesivamente decorado y recargado.

El estilo ostentoso y llamativo, de gran impacto visual.

La discordante combinación de colores y la distribución caótica crean una estética de "barata".

El estilo de plantilla excesivamente conservador y poco inspirado.