Сайт истории бренда
Инструкции
Основная миссия
Введение: Истории брендов часто представлены в текстовых документах или презентациях 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.
Стили, которых следует избегать:
Чрезмерно украшенный и загроможденный «стиль Таобао».
Чрезмерно броский, эффектный «показной стиль».
Резкая цветовая гамма и хаотичная планировка создают впечатление «дешевизны».
Чрезмерно консервативный и невыразительный «шаблонный стиль».
Описание
Рекомендовано
nene@YouMind
Почему нам нравится этот скилл
Этот навык превращает историю бренда в иммерсивный визуальный журнал, создавая элегантную, минималистичную интерактивную веб-страницу с продуманной типографикой, изящными анимациями и плавным повествованием, позволяя пользователям глубоко прочувствовать привлекательность бренда.
Превращает тексты и материалы истории бренда в эстетичный веб-сайт с прокруткой, передающий ценности и эмоции бренда через визуальный дизайн и интерактивные эффекты.
Похожие скиллы
Посмотреть все
Копирайтинг через сторителлинг
Поможет написать теплые, убедительные маркетинговые тексты. Основано на методе сторителлинга в маркетинге, использует матрицу пользовательских историй, разговорный язык и эмоциональный резонанс, чтобы сделать продвижение продуктов более искренним и трогательным. Подходит для запуска продуктов, акций, брендовых кампаний и т.д.
ПисатьКопирайтинг для сцен и нарративов
Используется для создания различных китайских текстов с образами, эмоциями и динамикой. Подходит для открытия мероприятий, историй персонажей, выражения бренда, представления продуктов, сценариев коротких видео, контента для сообществ, вступлений к выступлениям, текстов для постеров и PR-текстов. Сначала он улавливает конкретные сцены, действия персонажей, напряженность отношений и реальные детали, затем выделяет тему и эмоции, и в итоге создает естественное, запоминающееся выражение, которое побуждает читателя продолжить чтение.
ВидеоГенератор видео из силуэтов
Хотите представить увлекательные истории — басни, исторические анекдоты или брендовые истории — в уникальном визуальном стиле? Этот навык поможет вам легко создавать горизонтальные видеоматериалы в минималистичном стиле простых рисунков и силуэтов. Просто введите тему истории, и он сгенерирует полный план создания, чтобы ваша история выглядела более привлекательно визуально. Этот навык предоставит вам текст для озвучки длиной около 270 слов на 45 секунд, обеспечивая плавное и эмоциональное повествование. На основе этого текста он также разработает 9 промтов для генерации изображений в формате 16:9, которые направят ИИ на создание изображений в стиле минималистичных линий и вырезанных силуэтов, с большим количеством пустого пространства и четким визуальным акцентом, создавая уникальную современную иллюстрацию для книги сказок. Кроме того, вы получите 9 промтов для Seedance 2.0 для преобразования изображений в видео, соответствующие каждому кадру, что гарантирует идеальное сочетание анимации с элементами изображения, достигая эффекта рисования линиями и плавного появления силуэтов в стиле белой доски. Независимо от того, хотите ли вы создавать короткие видео-истории, минималистичную анимацию или вам нужны раскадровки и промты для видео в стиле простых рисунков, линий, силуэтов или вырезанных фигур, этот инструмент удовлетворит ваши потребности. Он фокусируется на преобразовании сложных тем в простое и выразительное визуальное повествование, позволяя вашему контенту достигать аудитории свежим и художественным способом, идеально подходящим для распространения басен, сказок, исторических анекдотов или брендовых историй. В итоге вы получите полный сценарий озвучки, карточки раскадровки и готовые изображения и видео с подробными инструкциями по монтажу, что поможет вам эффективно завершить создание видео.
Сайт истории бренда
Инструкции
Основная миссия
Введение: Истории брендов часто представлены в текстовых документах или презентациях 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.
Стили, которых следует избегать:
Чрезмерно украшенный и загроможденный «стиль Таобао».
Чрезмерно броский, эффектный «показной стиль».
Резкая цветовая гамма и хаотичная планировка создают впечатление «дешевизны».
Чрезмерно консервативный и невыразительный «шаблонный стиль».
Описание
Рекомендовано
nene@YouMind
Почему нам нравится этот скилл
Этот навык превращает историю бренда в иммерсивный визуальный журнал, создавая элегантную, минималистичную интерактивную веб-страницу с продуманной типографикой, изящными анимациями и плавным повествованием, позволяя пользователям глубоко прочувствовать привлекательность бренда.
Превращает тексты и материалы истории бренда в эстетичный веб-сайт с прокруткой, передающий ценности и эмоции бренда через визуальный дизайн и интерактивные эффекты.
Похожие скиллы
Посмотреть всеКопирайтинг через сторителлинг
Поможет написать теплые, убедительные маркетинговые тексты. Основано на методе сторителлинга в маркетинге, использует матрицу пользовательских историй, разговорный язык и эмоциональный резонанс, чтобы сделать продвижение продуктов более искренним и трогательным. Подходит для запуска продуктов, акций, брендовых кампаний и т.д.
ПисатьКопирайтинг для сцен и нарративов
Используется для создания различных китайских текстов с образами, эмоциями и динамикой. Подходит для открытия мероприятий, историй персонажей, выражения бренда, представления продуктов, сценариев коротких видео, контента для сообществ, вступлений к выступлениям, текстов для постеров и PR-текстов. Сначала он улавливает конкретные сцены, действия персонажей, напряженность отношений и реальные детали, затем выделяет тему и эмоции, и в итоге создает естественное, запоминающееся выражение, которое побуждает читателя продолжить чтение.
ВидеоГенератор видео из силуэтов
Хотите представить увлекательные истории — басни, исторические анекдоты или брендовые истории — в уникальном визуальном стиле? Этот навык поможет вам легко создавать горизонтальные видеоматериалы в минималистичном стиле простых рисунков и силуэтов. Просто введите тему истории, и он сгенерирует полный план создания, чтобы ваша история выглядела более привлекательно визуально. Этот навык предоставит вам текст для озвучки длиной около 270 слов на 45 секунд, обеспечивая плавное и эмоциональное повествование. На основе этого текста он также разработает 9 промтов для генерации изображений в формате 16:9, которые направят ИИ на создание изображений в стиле минималистичных линий и вырезанных силуэтов, с большим количеством пустого пространства и четким визуальным акцентом, создавая уникальную современную иллюстрацию для книги сказок. Кроме того, вы получите 9 промтов для Seedance 2.0 для преобразования изображений в видео, соответствующие каждому кадру, что гарантирует идеальное сочетание анимации с элементами изображения, достигая эффекта рисования линиями и плавного появления силуэтов в стиле белой доски. Независимо от того, хотите ли вы создавать короткие видео-истории, минималистичную анимацию или вам нужны раскадровки и промты для видео в стиле простых рисунков, линий, силуэтов или вырезанных фигур, этот инструмент удовлетворит ваши потребности. Он фокусируется на преобразовании сложных тем в простое и выразительное визуальное повествование, позволяя вашему контенту достигать аудитории свежим и художественным способом, идеально подходящим для распространения басен, сказок, исторических анекдотов или брендовых историй. В итоге вы получите полный сценарий озвучки, карточки раскадровки и готовые изображения и видео с подробными инструкциями по монтажу, что поможет вам эффективно завершить создание видео.
Найди свой следующий любимый скилл
Изучи больше отобранных AI-скиллов для исследований, творчества и повседневной работы.