Основная миссия

Введение: Истории брендов часто представлены в текстовых документах или презентациях PowerPoint, им не хватает захватывающего стиля изложения. Отличная страница бренда должна напоминать визуально привлекательный журнал, который можно пролистывать, используя тщательно разработанную структуру, анимацию и ритм, позволяющие посетителям естественным образом понять философию бренда и ощутить его стиль во время просмотра.

Конкретные цели:

История бренда разбита на 4-8 сюжетных узлов, каждый из которых соответствует визуальной главе.

Изучите веб-сайты эталонных брендов, чтобы почерпнуть визуальное вдохновение и идеи для дизайна.

Разработайте продуманную систему визуального стиля (цветовая схема, типографика, макет, анимационные эффекты), соответствующую фирменному стилю бренда.

Создайте интерактивную веб-страницу с прокруткой, включающую такие модули, как хронология, этапы и эволюция продукта.

Убедитесь, что страница имеет визуально изысканный, элегантный и минималистичный вид, избегая дешевого или чрезмерно вычурного дизайна.

Основные ограничения:

Визуальный стиль должен соответствовать тону бренда (например, технологические бренды — спокойный и сдержанный, косметические бренды — теплый и мягкий).

Анимационные эффекты должны быть сдержанными и умеренными, служа сюжету, а не демонстрируя техническое мастерство.

Скорость загрузки страницы и плавное взаимодействие должны обеспечивать удобство использования для пользователя.

Перед выполнением задания пользователям необходимо предоставить соответствующую информацию, такую ​​как история бренда, его происхождение и ценности.

Шаг 1: Понимание истории бренда и определение структуры повествования.

Цель: Получить глубокое понимание основного содержания истории бренда и определить ключевые сюжетные моменты и эмоциональные реакции.

действие:

Внимательно прочтите предоставленный пользователем текст, рассказывающий историю бренда, и выделите следующие элементы:

-Истоки бренда/История его основания

-Основные концепции/ценности

- Ключевые этапы развития продукта (запуск продукта, награды, достижения пользователей и т. д.)

- История основателя или история команды (если таковая имеется)

-Видение бренда/Будущее направление

— Разбейте историю на 4-8 сюжетных узлов, каждый из которых содержит:

- Заголовок узла (краткий и содержательный, 5-10 слов)

— Основная информация (в кратком изложении в 1-2 предложениях)

- Эмоциональный тон (например, теплота, решимость, прорыв, оптимистичный настрой)

Постройте повествовательную структуру и определите логические взаимосвязи и эмоциональную последовательность между узлами.

Стандарты качества:

- Количество сюжетных узлов должно быть умеренным (слишком малое количество сделает повествование поверхностным, слишком большое — затянутым).

- Каждый узел имеет четкое повествовательное назначение, что позволяет избежать дублирования информации.

В целом, повествование имеет начало, развитие, кульминацию и развязку, а также эмоциональные кульминации.

Шаг 2: Изучите эталонные бренды и соберите визуальные источники вдохновения.

Цель: На основе фирменного стиля провести поиск и анализ выдающихся веб-сайтов брендов со схожим или сопоставимым стилем, чтобы получить визуальное вдохновение и дизайнерские рекомендации.

действие:

1. Определите направление поиска эталонных показателей:

На основе ключевых слов, определяющих тональность бренда и извлеченных на шаге 1 (например, "{ключевые слова, определяющие тональность бренда}"), разработайте стратегию поиска.

Определите 2-3 параметра поиска:

Ориентиры в той же отрасли (например, выдающиеся отечественные косметические бренды)

Сотрудничество между отраслями со схожей тематикой (например, с брендами из других категорий, которые также делают акцент на «восточной эстетике», такими как чайные напитки и предметы интерьера).

Примеры дизайна, отмеченного наградами (например, веб-сайты, получившие награды в аналогичных стилях на Awwwards и FWA).

2. Найдите и отфильтруйте аналогичные бренды:

Воспользуйтесь поисковой системой для поиска по ключевым словам, таким как:

«{Отрасль} + Веб-сайт бренда + Дизайн»

"{ключевые слова по тону} + веб-сайт бренда + награда"

«Лучший веб-дизайн в отрасли 2024 года»

Выберите 3-5 веб-сайтов брендов с достойным визуальным стилем, который можно использовать в качестве образца.

Отдавайте приоритет сайтам с высоким позиционированием, превосходным дизайном и функцией прокрутки с повествованием.

3. Углубленный анализ эталонных веб-сайтов:

Проведите визуальный анализ каждого эталонного веб-сайта и зафиксируйте следующие элементы:

Цветовая схема: сочетание основного цвета, цвета фона и акцентного цвета.

Использование шрифтов: выбор шрифтов, иерархия размеров для заголовков и основного текста.

Типографические особенности: соотношение свободного пространства, сетка, выравнивание.

Стиль анимации: метод запуска с помощью прокрутки, длительность анимации, эффект параллакса.

Структура повествования: разделение на главы, темп повествования, визуальная составляющая.

Извлеките ключевые страницы или модули в качестве визуальных справочных материалов.

4. Источники вдохновения для дизайна:

Кратко опишите общие характеристики эталонных веб-сайтов (например, «Эти бренды, как правило, используют большие области пустого пространства + заголовки с засечками + градиентную анимацию»).

Определите уникальные дизайнерские приемы, которые можно перенять (например, «В хронологии бренда А используется горизонтальная прокрутка, что очень инновационно»).

Отметьте недостатки дизайна, которых следует избегать (например, «У бренда B слишком много анимации, из-за чего он выглядит слишком броско»).

Сформулируйте 3-5 четких источников вдохновения для дизайна, которые будут служить ориентирами для дальнейшей работы над проектом.

Стандарты качества:

Количество эталонных брендов умеренное (3-5), охватывающее как отраслевых конкурентов, так и межотраслевые аналоги.

Анализ является всесторонним и охватывает цветовую схему, шрифт, типографику, анимацию и структуру.

Дизайн должен вдохновлять на конкретные и действенные идеи, а не на расплывчатые представления о «высокоуровневых» концепциях.

Четко различайте элементы дизайна, которые «заслуживают внимания», и те, которых следует «избегать».

После завершения исследования подтвердите с пользователем, доволен ли он результатом. Если нет, внесите корректировки на основе отзывов пользователя, пока он не будет удовлетворен.

Шаг 3: Определите систему визуального стиля бренда.

Цель: На основе результатов сравнительного анализа и с учетом фирменного стиля бренда разработать изысканную, элегантную и минималистичную систему визуального оформления.

действие:

На основе анализа тональности бренда, проведенного на шаге 1, и результатов сравнительного анализа, проведенного на шаге 2, были определены ключевые слова, определяющие визуальную тональность.

Дизайн цветовой схемы:

Основная цветовая схема: выберите 1-2 основных цвета, отражающих характер бренда (укажите цветовые значения).

Вторичные цвета: 2-3 вторичных цвета, используемые для создания многослойности и визуального украшения.

Цвет фона: отдавайте предпочтение мягким, слегка бежевым, светло-серым или темным оттенкам, избегайте чисто белого цвета (#FFFFFF).

Акцентный цвет: высококонтрастный цвет, используемый для выделения кнопок призыва к действию или ключевой информации.

Опираясь на цветовые схемы эталонных брендов, убедитесь, что цветовая схема соответствует отраслевым эстетическим стандартам.

Выберите сочетание шрифтов:

Шрифт заголовка: выберите шрифт, отражающий дизайн и фирменный стиль (например, шрифты с засечками элегантны, шрифты без засечек — современны).

Шрифт основного текста: хорошо читаемый шрифт, создающий многослойный контраст с заголовками.

Избегайте использования слишком распространенных системных шрифтов (таких как Arial и SimSun).

Определите принципы компоновки:

Стратегия использования свободного пространства: обилие свободного пространства создает ощущение изысканности и позволяет избежать информационной перегрузки.

Система сеток: Использует регулярную сетку для поддержания визуального порядка.

Выравнивание: отдавайте приоритет выравниванию по левому краю или по центру и избегайте выравнивания по ширине.

Определите стиль анимации:

Параллакс: Элементы на разных уровнях движутся с разной скоростью, создавая ощущение пространства.

Анимация плавного появления: контент постепенно появляется по мере прокрутки, с элегантным ритмом.

Микроанимация: Детальная анимация, такая как наведение курсора и взаимодействие с кнопками, повышает общую сложность дизайна.

Длительность анимации: регулируется в диапазоне от 0,3 до 0,8 секунды, избегая слишком быстрого или слишком медленного темпа.

Учитесь у эффективных методов создания моушн-графики, используемых ведущими брендами, и избегайте уже выявленных ошибок в дизайне.

Стандарты качества:

Цветовая гамма соответствует имиджу бренда, цвета гармоничны и не бросаются в глаза.

Выбирайте шрифты с продуманным дизайном, избегая дешевых или устаревших вариантов.

В оформлении ощущается простор, много свободного места и четкая иерархия информации.

Анимационные эффекты сдержанны и выверены, они служат повествованию, а не демонстрируют техническое мастерство.

Система стилей поддерживает тот же уровень качества, что и лучшие примеры в сравнительном исследовании.

После завершения определения параметров, уточните у пользователя, доволен ли он результатом. Если нет, внесите корректировки на основе отзывов пользователя, пока он не будет удовлетворен.

Шаг 4: Разработка структуры страницы и схемы взаимодействия.

Цель: Спланировать общую структуру и поток взаимодействия при прокрутке страницы для обеспечения плавного ритма повествования.

действие:

Разработана общая структура страницы, включающая следующие модули:

Вступительный модуль (раздел «Герой»):

Название бренда/логотип

Однострочный слоган бренда или ключевая концепция.

Визуальные подсказки для управления прокруткой (например, анимация стрелки, указывающей вниз).

Дополнительно: фоновое видео в полноэкранном режиме или большое изображение.

Модуль повествовательной главы (разработан на основе узлов, указанных на шаге 1):

Каждый узел соответствует независимой визуальной главе.

Переходы между главами можно осуществлять с помощью прокрутки, разделителей, пробелов или анимации переходов.

Каждая глава включает в себя: заголовок, основной текст, иллюстрации/изображения и временные метки (если применимо).

Модуль «Хронология» (опционально, подходит для брендов с определенными сроками):

Вертикальная или горизонтальная ось времени

Обозначения года/даты

Описание событий и сопровождающие их изображения на каждом этапе.

Модуль отображения продукции/этапов развития:

Сетка или карточная компоновка

Изображения товара + краткое описание

Эффект при наведении курсора: увеличение масштаба, отображение дополнительной информации и т. д.

Модуль «История основателя/команды» (если применимо):

Фотографии людей + подписи к историям

Вы можете использовать режим разделенного экрана или полноэкранный режим с эффектом полного погружения.

Заключительная часть:

Видение бренда или ориентированный на будущее копирайтинг

Кнопки призыва к действию (например, «Узнать больше», «Ознакомиться с продуктами», «Связаться с нами»)

Ссылки на социальные сети или контактная информация

Спланируйте интерактивный процесс прокрутки:

Определите точку срабатывания прокрутки для каждого модуля (например, запускать анимацию при прокрутке до 50% области просмотра).

Эффекты перехода между модулями (плавное появление/исчезание, параллаксная прокрутка, смещение элементов и т. д.).

Обеспечьте естественный ритм прокрутки и избегайте слишком частых анимаций, которые могут вызвать зрительную усталость.

В качестве примера рассматриваются эффективные решения в области дизайна взаимодействия, используемые эталонными брендами.

Разработайте адаптивную стратегию компоновки (для обеспечения удобства использования как на настольных компьютерах, так и на мобильных устройствах).

Стандарты качества:

Структура страницы логически понятна, а повествование развивается естественно и плавно.

Каждый модуль имеет четкую визуальную направленность, чтобы избежать информационного перегруза.

Прокрутка происходит в умеренном темпе, который не вызовет у пользователей ощущения резкости или усталости.

Адаптивный дизайн тщательно продуман, что обеспечивает бескомпромиссное удобство использования на мобильных устройствах.

Шаг 5: Напишите инструкцию по генерации веб-страницы.

Цель: Преобразовать систему визуального стиля и структуру страницы в четкие и подробные инструкции по генерации веб-страниц для выполнения инструментом generateWebpage.

действие:

Напишите структурированные инструкции, включающие следующие части:

1. Общее описание стиля:

Подробно опишите визуальный стиль, используя естественный язык (на основе системы стилей Step 3).

Пример: «Принятие сдержанного и элегантного стиля, напоминающего восточную эстетику. Фон выполнен в мягком кремово-белом цвете (#F9F7F2), основные цвета — теплый чайный оттенок (#8B7355) и нежный розовый (#E8D5C4). Заголовок выполнен шрифтом с засечками, а основной текст — шрифтом без засечек, с большим количеством свободного пространства, создающим ощущение изысканности. Анимация в основном состоит из плавного появления и параллаксной прокрутки, с плавным и элегантным ритмом».

2. Описание структуры страницы:

Опишите структуру страницы в порядке модулей.

Пример: «Страница начинается с полноэкранного раздела «Герой», отображающего название бренда и слоган на фоне основного визуального изображения бренда, с возможностью прокрутки вниз. За ним следуют четыре повествовательных раздела, каждый из которых содержит заголовок, основной текст и изображение, с использованием чередующейся колоночной структуры слева направо. Затем идет вертикальный модуль с временной шкалой, демонстрирующий развитие бренда. Наконец, есть заключительный модуль, содержащий видение бренда и кнопку призыва к действию (CTA)».

3. Подробности взаимодействия:

Опишите ключевые интерактивные эффекты и анимацию.

Пример: «При прокрутке содержимое глав появляется в поле зрения с анимацией плавного появления. Фоновые изображения прокручиваются с меньшей скоростью, создавая эффект параллакса. Узлы временной шкалы подсвечиваются при прокрутке до соответствующих позиций. Карточки товаров немного увеличиваются и отображают тени при наведении курсора».

4. Маркеры-заполнители контента:

Чётко укажите, какой контент необходимо извлечь из предоставленных пользователем материалов.

Пример: «В названии бренда используется '{Название бренда}', в слогане используется '{Слоган бренда}', текстовое содержание взято из '{Копия истории бренда}', события хронологии взяты из '{Список важных этапов}', а изображения продукта используют '{Ресурсы изображений продукта}'».

5. Технические рекомендации по реализации (необязательно):

Если имеются какие-либо особые технические требования, пожалуйста, предоставьте их краткое описание.

Пример: «Используйте API Intersection Observer для реализации анимаций, запускаемых при прокрутке. Используйте CSS Grid для реализации адаптивной компоновки».

Стандарты качества:

Инструкции четкие и подробные, что позволяет искусственному интеллекту точно понять замысел проекта.

Визуальный стиль описан подробно (цвета имеют цветовые значения, шрифты — типы, а анимации — длительность).

Благодаря четко определенным местам для размещения контента, ИИ знает, откуда брать данные.

Общая продолжительность инструкций умеренная (слишком короткие — недостаточно информации, слишком длинные — могут привести к недопониманию).

Создайте интерактивную страницу бренда (HTML-страницу):

Включает в себя полную историю бренда.

Функционал включает интерактивное прокручивание и анимационные эффекты.

Адаптивный дизайн, подходящий как для настольных компьютеров, так и для мобильных устройств.

Визуальный стиль соответствует стандартам «высококачественного, элегантного и минималистичного дизайна».

Структура контента:

Раздел «Герой» (Вступительный модуль)

4-8 повествовательных глав

Модуль «Хронология/этапы» (если применимо)

Модуль отображения товара (если применимо)

Модуль «История основателя/команды» (если применимо)

Заключительная часть

Стандарты качества:

Визуальное качество: гармоничная и изысканная цветовая гамма, подходящий шрифт, четкая и элегантная компоновка, а также достаточное количество свободного пространства.

Интерактивный опыт: плавная прокрутка, естественная и сдержанная анимация, своевременный отклик и удобство использования на мобильных устройствах.

Полнота контента: История бренда содержит ключевую информацию, имеет четкую повествовательную логику и точно соответствует тексту и изображениям.

Эстетические стандарты: Общий эстетический вид должен передавать ощущение изысканности, элегантности и простоты, избегая дешевизны или чрезмерного декора.

Отраслевой бенчмаркинг: визуальное качество соответствует уровню эталонных брендов.

Стиль и презентация

Основные эстетические принципы:

Ощущение изысканности, создаваемое сдержанной цветовой гаммой, утонченной типографикой, большим количеством свободного пространства и ненавязчивыми анимационными эффектами.

Элегантность: плавный ритм, естественные переходы и избегание резких или неприятных визуальных элементов.

Простота: Отсутствие ненужных украшений, каждый элемент имеет четкую функцию и значение.

Визуальное направление отсчета:

Официальные сайты элитных брендов (таких как Apple, Aesop, Muji)

Веб-сайты дизайнерских журналов (например, It's Nice That, работы, отмеченные наградами Awwwards).

Веб-сайты художественных выставок (с акцентом на пустое пространство и визуальный ритм)

Веб-сайты эталонных брендов, изученные на шаге 2.

Стили, которых следует избегать:

Чрезмерно украшенный и загроможденный «стиль Таобао».

Чрезмерно броский, эффектный «показной стиль».

Резкая цветовая гамма и хаотичная планировка создают впечатление «дешевизны».

Чрезмерно консервативный и невыразительный «шаблонный стиль».