🎨 Проста художня веб-сторінка
Інструкції
Створіть веб-сторінку на основі контенту, наданого користувачем. Вимоги до стилю веб-сторінки такі:
### I. Позиціонування візуального стилю - **Художній стиль малювання від руки**: Використання стилю лінійного мистецтва, поєднання сучасного цифрового дизайну з традиційною естетикою малювання від руки. - **Кольорова схема**: Використання нейтральних кольорів (біло-білий/світло-сірий) як основи в поєднанні з темно-сірим основним текстом та використання оранжево-червоного (акцентний колір) як візуального фокусного кольору. - **Тон бренду**: Вишуканий, художній та теплий, орієнтований на вимогливу групу користувачів. ### II. Принципи структури макета **Розділ героя (дизайн першого екрана)** - Макет зліва направо (золотий перетин 60:40) - Ліва сторона: - Збільшений заголовок (шрифт дисплея, 72-96 пікселів), темний шрифт, сильний візуальний вплив - Ключові дані, виділені акцентним кольором (наприклад, "15 міст, 4749 локацій") - Лаконічний та потужний текст підзаголовка, що викладає основну ціннісну пропозицію - Багато білого простору, що створює відчуття високого класу - Права сторона: - Індивідуальні намальовані від руки ілюстрації, що займають 50% візуального простору - Послідовний стиль ілюстрації: лінійний малюнок + локальні кольорові акценти - Контент ілюстрації глибоко інтегрований з історією бренду - **Дизайн панелі навігації** - Мінімалістична верхня навігація, фіксоване позиціонування - Логотип + 2-3 пункти головного меню - Група значків праворуч (пошук/улюблені/меню) - Прозорий або чисто білий фон з ледь помітними тінями - **Область картки контенту** - Макет картки у вигляді сітки (3-4 колонки, адаптивний) - Кожна картка містить: - Заголовок (Заголовок 3, 32-40 пікселів) - Опис (2-3 рядки, 16-18 пікселів, висота рядка 1,6) - Супровідна намальована від руки ілюстрація (відповідно до основного візуального стилю) - Світлий фон (#F5F3F0), закруглені кути (8-12 пікселів) - Стан наведення курсора: Злегка піднятий + поглиблена тінь - ### III. Специфікації системи ілюстрацій **Керівні принципи створення ілюстрації** 1. 2. **Обробка ліній**: - Використовуйте нерівні намальовані від руки лінії 1-2 пікселі для імітації реалістичної текстури живопису - Зберігайте плавні лінії з легким натяком на штучність, уникаючи надмірної механічності. 3. **Використання кольору:** - 80% сірих ліній + 20% заливки кольором бренду - Оранжево-червоний використовується лише для підкреслення елементів (люди, вікна, ключові будівлі) - Фон використовує градієнтний бежевий (#FDFBF7 → #F5F1EB) - 5. **Композиція сцени:** - Міські сцени: поєднання визначних будівель + сцен повсякденного життя - Перспектива зверху або ізометрична перспектива - Додавання маленьких фігур для посилення оповіді та інтимності - 7. **Щільність деталей:** - Багаті деталі переднього плану, помірно спрощений середній план та контурний фон - Збереження візуальної ієрархії, що спрямовує погляд до ключової інформації - 9. ### IV. Система шрифтів - **Шрифт відображення (заголовок):** Шрифт із засічками, важкий та потужний (наприклад, Freight Display, Tiempos) - **Шрифт основного тексту (основний текст):** Без засічок, добре розбірливий (наприклад, Inter, Manrope) - **Співвідношення розмірів шрифту**: Використовує модульну шкалу (1,25 або 1,333) - - **Рівні товщини шрифту**: Легкий (300) / Звичайний (400) / Середній (500) / Жирний (700) - ### V. Деталі взаємодії - - **Мікроанімації**: Картки піднімаються на 4-8 пікселів при наведенні курсора, час переходу 300-400 мс - - **Стан завантаження**: Використовує скелетований екран для підтримки тону бренду - - **Адаптивні точки зупинки**: - - Десктоп: 1440 пікселів+ - - Планшет: 768-1439 пікселів - - Мобільний: 375-767 пікселів - - ### VI. Вимоги до вихідних даних дизайну Кожен вихідний дизайн повинен містити: 1. 2. Чітку візуальну ієрархію (досягається за допомогою розміру/кольору/білого простору) 3. 4. Принаймні одну власну ілюстрацію (тісно пов'язану з контентом, згенеровану за допомогою Nano Banana Pro) 5. 6. 2-3 акцентні кольори (не більше 7). 8. Достатній простір для дихання (відстань між секціями ≥ 120 пікселів) 9. 10. Чіткий шлях дій користувача 11. --- **Філософія дизайну**: Використовуйте художню візуальну мову, щоб передати унікальність і теплоту бренду. Кожен піксель служить для розповіді історії, а не просто для демонстрації функціональності. Дизайн повинен викликати у користувачів відчуття: «Це для людей, які цінують життя», а не для холодного, комерційного продукту.
Усі ілюстрації на веб-сторінках були створені за допомогою nano banana pro.
Опис
Рекомендовано
nene@YouMind
Чому нам подобається ця навичка
Перетворюйте вміст на витончену сторінку в стилі ручного малюнка, що поєднує сучасний дизайн із традиційною естетикою. Інтелектуальна генерація власних ілюстрацій та вишукані кольорово-шрифтові системи створюють сторінку з теплом бренду та художнім смаком, що допомагає візуально виділити ваш продукт.
Перетворюйте вміст на веб-сторінку в художньому рукописному стилі. Витончені лінійні ілюстрації та кольорова гама наповнюють вашу інформацію теплом і смаком.
Схожі навички
Переглянути всі
ВебсторінкаFashion Creative Design стиль
Система веб-дизайну в стилі модного редакційного постера: тепле кремове паперове полотно (#fffef7), надвеликі заголовки з вагою шрифту 300 (64–84px), фотографії на всю сторінку, без тіней, картки з прямими кутами та кнопки з пігулкоподібним заокругленням 1440px. Підходить для потреб, як-от «стиль модного дизайну», «журнальна верстка», «стиль постера», «веб-сторінка артбуку», «портфоліо студії», «сторінка галереї» тощо. Будь-який контент можна перетворити на сторінку у стилі високоякісної модної редакції.
ЗображенняГенератор ручної інфографіки
Створює теплі, природні інфографіки в стилі мальованих від руки, імітує текстуру скетчів художника. Підтримує різні макети (порівняльний, список карток, діаграми даних, FAQ тощо). Лінії мають природні коливання та недосконалості ручного малювання. Користувач може налаштувати основний колір або використовувати рекомендовані кольори.
ЗображенняІлюстрації в стилі щоденника
Миттєво перетворюйте ваші повсякденні фото на заспокійливі корейські ілюстрації в стилі щоденника. У поєднанні з мистецтвом порожнього простору та елегантними рукописними англійськими заголовками, кожне згенероване зображення виглядає як художня сторінка, вирізана з преміального журналу про стиль життя, ідеально підходить для публікації в соціальних мережах, особистих аватарів або створення вишуканих електронних щоденників.
🎨 Проста художня веб-сторінка
Інструкції
Створіть веб-сторінку на основі контенту, наданого користувачем. Вимоги до стилю веб-сторінки такі:
### I. Позиціонування візуального стилю - **Художній стиль малювання від руки**: Використання стилю лінійного мистецтва, поєднання сучасного цифрового дизайну з традиційною естетикою малювання від руки. - **Кольорова схема**: Використання нейтральних кольорів (біло-білий/світло-сірий) як основи в поєднанні з темно-сірим основним текстом та використання оранжево-червоного (акцентний колір) як візуального фокусного кольору. - **Тон бренду**: Вишуканий, художній та теплий, орієнтований на вимогливу групу користувачів. ### II. Принципи структури макета **Розділ героя (дизайн першого екрана)** - Макет зліва направо (золотий перетин 60:40) - Ліва сторона: - Збільшений заголовок (шрифт дисплея, 72-96 пікселів), темний шрифт, сильний візуальний вплив - Ключові дані, виділені акцентним кольором (наприклад, "15 міст, 4749 локацій") - Лаконічний та потужний текст підзаголовка, що викладає основну ціннісну пропозицію - Багато білого простору, що створює відчуття високого класу - Права сторона: - Індивідуальні намальовані від руки ілюстрації, що займають 50% візуального простору - Послідовний стиль ілюстрації: лінійний малюнок + локальні кольорові акценти - Контент ілюстрації глибоко інтегрований з історією бренду - **Дизайн панелі навігації** - Мінімалістична верхня навігація, фіксоване позиціонування - Логотип + 2-3 пункти головного меню - Група значків праворуч (пошук/улюблені/меню) - Прозорий або чисто білий фон з ледь помітними тінями - **Область картки контенту** - Макет картки у вигляді сітки (3-4 колонки, адаптивний) - Кожна картка містить: - Заголовок (Заголовок 3, 32-40 пікселів) - Опис (2-3 рядки, 16-18 пікселів, висота рядка 1,6) - Супровідна намальована від руки ілюстрація (відповідно до основного візуального стилю) - Світлий фон (#F5F3F0), закруглені кути (8-12 пікселів) - Стан наведення курсора: Злегка піднятий + поглиблена тінь - ### III. Специфікації системи ілюстрацій **Керівні принципи створення ілюстрації** 1. 2. **Обробка ліній**: - Використовуйте нерівні намальовані від руки лінії 1-2 пікселі для імітації реалістичної текстури живопису - Зберігайте плавні лінії з легким натяком на штучність, уникаючи надмірної механічності. 3. **Використання кольору:** - 80% сірих ліній + 20% заливки кольором бренду - Оранжево-червоний використовується лише для підкреслення елементів (люди, вікна, ключові будівлі) - Фон використовує градієнтний бежевий (#FDFBF7 → #F5F1EB) - 5. **Композиція сцени:** - Міські сцени: поєднання визначних будівель + сцен повсякденного життя - Перспектива зверху або ізометрична перспектива - Додавання маленьких фігур для посилення оповіді та інтимності - 7. **Щільність деталей:** - Багаті деталі переднього плану, помірно спрощений середній план та контурний фон - Збереження візуальної ієрархії, що спрямовує погляд до ключової інформації - 9. ### IV. Система шрифтів - **Шрифт відображення (заголовок):** Шрифт із засічками, важкий та потужний (наприклад, Freight Display, Tiempos) - **Шрифт основного тексту (основний текст):** Без засічок, добре розбірливий (наприклад, Inter, Manrope) - **Співвідношення розмірів шрифту**: Використовує модульну шкалу (1,25 або 1,333) - - **Рівні товщини шрифту**: Легкий (300) / Звичайний (400) / Середній (500) / Жирний (700) - ### V. Деталі взаємодії - - **Мікроанімації**: Картки піднімаються на 4-8 пікселів при наведенні курсора, час переходу 300-400 мс - - **Стан завантаження**: Використовує скелетований екран для підтримки тону бренду - - **Адаптивні точки зупинки**: - - Десктоп: 1440 пікселів+ - - Планшет: 768-1439 пікселів - - Мобільний: 375-767 пікселів - - ### VI. Вимоги до вихідних даних дизайну Кожен вихідний дизайн повинен містити: 1. 2. Чітку візуальну ієрархію (досягається за допомогою розміру/кольору/білого простору) 3. 4. Принаймні одну власну ілюстрацію (тісно пов'язану з контентом, згенеровану за допомогою Nano Banana Pro) 5. 6. 2-3 акцентні кольори (не більше 7). 8. Достатній простір для дихання (відстань між секціями ≥ 120 пікселів) 9. 10. Чіткий шлях дій користувача 11. --- **Філософія дизайну**: Використовуйте художню візуальну мову, щоб передати унікальність і теплоту бренду. Кожен піксель служить для розповіді історії, а не просто для демонстрації функціональності. Дизайн повинен викликати у користувачів відчуття: «Це для людей, які цінують життя», а не для холодного, комерційного продукту.
Усі ілюстрації на веб-сторінках були створені за допомогою nano banana pro.
Опис
Рекомендовано
nene@YouMind
Чому нам подобається ця навичка
Перетворюйте вміст на витончену сторінку в стилі ручного малюнка, що поєднує сучасний дизайн із традиційною естетикою. Інтелектуальна генерація власних ілюстрацій та вишукані кольорово-шрифтові системи створюють сторінку з теплом бренду та художнім смаком, що допомагає візуально виділити ваш продукт.
Перетворюйте вміст на веб-сторінку в художньому рукописному стилі. Витончені лінійні ілюстрації та кольорова гама наповнюють вашу інформацію теплом і смаком.
Схожі навички
Переглянути всі
ВебсторінкаFashion Creative Design стиль
Система веб-дизайну в стилі модного редакційного постера: тепле кремове паперове полотно (#fffef7), надвеликі заголовки з вагою шрифту 300 (64–84px), фотографії на всю сторінку, без тіней, картки з прямими кутами та кнопки з пігулкоподібним заокругленням 1440px. Підходить для потреб, як-от «стиль модного дизайну», «журнальна верстка», «стиль постера», «веб-сторінка артбуку», «портфоліо студії», «сторінка галереї» тощо. Будь-який контент можна перетворити на сторінку у стилі високоякісної модної редакції.
ЗображенняГенератор ручної інфографіки
Створює теплі, природні інфографіки в стилі мальованих від руки, імітує текстуру скетчів художника. Підтримує різні макети (порівняльний, список карток, діаграми даних, FAQ тощо). Лінії мають природні коливання та недосконалості ручного малювання. Користувач може налаштувати основний колір або використовувати рекомендовані кольори.
ЗображенняІлюстрації в стилі щоденника
Миттєво перетворюйте ваші повсякденні фото на заспокійливі корейські ілюстрації в стилі щоденника. У поєднанні з мистецтвом порожнього простору та елегантними рукописними англійськими заголовками, кожне згенероване зображення виглядає як художня сторінка, вирізана з преміального журналу про стиль життя, ідеально підходить для публікації в соціальних мережах, особистих аватарів або створення вишуканих електронних щоденників.
Знайдіть свою наступну улюблену навичку
Досліджуйте більше підібраних AI-навичок для досліджень, творчості та повсякденної роботи.