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

Передумови: Історії брендів часто існують у текстових документах або презентаціях PowerPoint, яким бракує захопливого стилю презентації. Чудова сторінка бренду повинна нагадувати візуально привабливий журнал, який можна гортати, використовуючи ретельно розроблений макет, анімацію та ритм, щоб відвідувачі могли природно зрозуміти філософію бренду та відчути його тон під час перегляду.

Конкретні цілі:

Історія бренду розбивається на 4-8 наративних вузлів, кожен з яких відповідає візуальному розділу.

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

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

Створіть інтерактивну веб-сторінку з прокруткою, яка містить такі модулі, як часова шкала, етапи та еволюція продукту.

Переконайтеся, що сторінка має візуально вишуканий, елегантний та мінімалістичний вигляд, уникаючи дешевого або надмірно декоративного дизайну.

Ключові обмеження:

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

Анімаційні ефекти повинні бути стриманими та помірними, служити розповіді, а не демонструвати технічні навички.

Швидкість завантаження сторінки та плавна взаємодія мають забезпечити хороший користувацький досвід.

Перш ніж виконувати завдання, користувачі повинні надати відповідну інформацію, таку як історія бренду, передісторія та цінності.

Крок 1: Розуміння історії бренду та вилучення наративної структури

Мета: Глибоко зрозуміти основний зміст історії бренду та визначити ключові наративні моменти й емоційні криві.

дія:

Уважно прочитайте текст історії бренду, наданий користувачем, та визначте такі елементи:

-Походження бренду/історія заснування

-Основні концепції/цінності

- Ключові події (запуск продукту, нагороди, прориви користувачів тощо)

- Історія засновника або історія команди (якщо така є)

-Бачення бренду/Майбутній напрямок

- Розбийте історію на 4-8 наративних вузлів, кожен з яких містить:

- Назва вузла (стисла та влучна, 5-10 слів)

-Основна інформація (стисло викладена в 1-2 реченнях)

- Емоційний тон (наприклад, теплота, рішучість, прорив, перспектива)

Побудуйте наративний хід та визначте логічні зв'язки й емоційний розвиток між вузлами.

Стандарти якості:

- Кількість наративних вузлів має бути помірною (занадто мала кількість зробить наратив струнким, занадто велика — довгим).

- Кожен вузол має чітку наративну мету, що дозволяє уникнути дублювання інформації.

-Загальна розповідь має початок, розвиток, кульмінацію та розв'язку з емоційними кульмінаціями.

Крок 2: Дослідіть еталонні бренди та зберіть візуальне натхнення

Мета: Виходячи з тону бренду, знайти та проаналізувати видатні веб-сайти брендів зі схожими або порівнянними стилями, щоб отримати візуальне натхнення та дизайнерські посилання.

дія:

1. Визначте напрямок пошуку еталону:

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

Визначте 2-3 виміри пошуку:

Еталони в тій самій галузі (наприклад, видатні вітчизняні косметичні бренди)

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

Приклади дизайну, що отримав нагороди (наприклад, вебсайти, що отримали нагороди, зі схожим стилем на Awwwards та FWA)

2. Пошук та фільтрація порівнянних брендів:

Використовуйте інструмент пошуку для пошуку за ключовими словами, такими як:

"{Галузь} + Вебсайт бренду + Дизайн"

"{tone keywords} + вебсайт бренду + нагорода"

"Найкращий {галузевий} веб-дизайн 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. Опис структури сторінки:

Опишіть структуру сторінки в порядку модулів.

Приклад: «Сторінка починається з повноекранного головного розділу, де на тлі основного візуального образу бренду відображається назва та слоган бренду, а також пропонується прокручування вниз. Далі йдуть чотири наративні розділи, кожен з яких містить заголовок, основний текст та зображення, з використанням чергування ліворуч-праворуч розміщених колонок. Далі йде модуль вертикальної часової шкали, що демонструє розвиток бренду. Нарешті, є заключний модуль, що містить бачення бренду та кнопку заклику до дії».

3. Деталі взаємодії:

Опишіть ключові інтерактивні ефекти та анімацію.

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

4. Маркери заповнювачів контенту:

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

Приклад: «Назва бренду використовує '{Brand Name}', слоган використовує '{Brand Slogan}', наративний контент взято з '{Brand Story Copy}', події на часовій шкалі взято з '{Milestone List}', а зображення продукту використовують '{Product Image Resources}'.»

5. Поради щодо технічної реалізації (необов'язково):

Якщо є якісь спеціальні технічні вимоги, будь ласка, надайте їх короткий опис.

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

Стандарти якості:

Інструкції чіткі та детальні, що дозволяє штучному інтелекту точно зрозуміти задум дизайну.

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

Завдяки чітко визначеним заповнювачам контенту, ШІ знає, звідки отримувати дані.

Загальна тривалість інструкції помірна (занадто коротка та недостатньо інформації, занадто довга та може призвести до непорозумінь).

Вивести інтерактивну сторінку бренду (веб-сторінку HTML):

Включає повний розповідь про історію бренду

Має ефекти прокручування та анімації

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

Візуальний стиль відповідає стандартам «високого класу, елегантності та мінімалізму».

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

Розділ героя (відкриття модуля)

4-8 оповідних розділів

Модуль часових шкал/етапів (якщо застосовується)

Модуль відображення продукту (якщо застосовується)

Модуль історії засновника/команди (якщо застосовується)

Заключний розділ

Стандарти якості:

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

Інтерактивний досвід: плавне прокручування, природна та стримана анімація, своєчасна реакція та хороший мобільний досвід.

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

Естетичні стандарти: Загальна естетика повинна передавати відчуття вишуканості, елегантності та простоти, уникаючи дешевизни чи надмірної прикраси.

Галузевий бенчмаркінг: візуальна якість досягає того ж рівня, що й у еталонних брендів.

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

Основні естетичні принципи:

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

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

Простота: Усуваючи зайві прикраси, кожен елемент має чітку функцію та значення.

Візуальний орієнтир:

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

Вебсайти журналів з дизайну (такі як It's Nice That, роботи, що отримали нагороду Awwwards)

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

Еталонні веб-сайти брендів, досліджені на кроці 2

Стилі, яких слід уникати:

Надмірно прикрашений та захаращений «стиль Таобао»

Надмірно кричущий, ефектний «показний стиль»

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

Надмірно консервативний та ненатхненний «шаблонний стиль»