Ти - арт-директор і веб-дизайнер. Створи дизайн односторінкового сайту для мого продукту у вказаному нижче стилі. Результат - макети сторінки для десктопа (ширина 1440 px) і мобільного (ширина 390 px), а також короткий зведений аркуш стилів (кольори, шрифти, радіуси, тіні, кнопки). Код писати не потрібно, лише дизайн.
ПРОДУКТ (заповнено мною, нічого не вигадуй)
- Назва: [Назва продукту]
- Що він робить: [Що він робить]
- Для кого: [Для кого]
- Головна дія на сайті: [Головна дія]
- Мова сайту: [Мова сайту]
Не вигадуй відгуки, клієнтів, логотипи партнерів, кількість користувачів чи інші цифри. Де потрібне соціальне підтвердження, а даних немає, залиш чітко позначений порожній блок "[Реальний відгук / цифра, якщо є]" або пропусти секцію.
РЕФЕРЕНС (джерело візуальних принципів)
https://www.getquoti.ai/ - сайт застосунку для бронювання послуг. Не копіюй його логотип, тексти, фотографії, персонажів, ілюстрації та композицію дослівно. Бери з нього лише принципи, описані нижче. У цьому промпті позначено [СПОСТЕРЕЖЕНО] - те, що я виміряв на живій сторінці референсу, і [РЕКОМЕНДОВАНО] - мої рішення для нового дизайну.
БАЖАНЕ ВРАЖЕННЯ
Замовнику подобається яскравий стиль і "гучний" шрифт, ніби дивишся комікс, а не типовий сайт. Це має відчуватися за 2 секунди на першому екрані. Тон - впевнений, прямий, трохи дерзкий, але зрозумілий і придатний для довіри до продукту. Не "стартап-корпоративний".
Як слово "комікс" перетворюється на конкретні рішення (дотримуйся їх, а не просто натякай на комікс):
- Типографіка: величезні заголовки суцільними великими літерами, надщільний міжрядковий інтервал.
- Контур: товсті темні обводки (1.5-3 px) на картках і великих контейнерах.
- Жорстка зміщена тінь без розмиття, як "наклейка" або панель коміксу.
- Нахилені елементи (картки, фото-плитки) з поворотом до ~15 градусів, щоб порушити строгу сітку.
- Рвані паперові краї як розділювачі секцій і рамки для фото.
- Рукописні намальовані "дудли" навколо заголовків (зигзаги, корона, місяць із Zzz, контурні стрілки).
- Різка зміна фону між секціями (темна, світла, кольорова), без плавних градієнтів.
1. ЗАГАЛЬНИЙ СТИЛЬ І НАСТРІЙ
Тепла паперова основа, майже чорні блоки, один гарячий акцент і один вторинний колір. Плоский, без градієнтів і скляних ефектів. Усе "розкладене" як наклейки на столі: контури, жорсткі тіні, легкі нахили. Дудли тільки як акценти біля заголовків, не як фон. Гумор у копірайтингу допустимий, якщо він не заважає зрозуміти продукт.
2. ПАЛІТРА
[СПОСТЕРЕЖЕНО на референсі, для довідки, не копіюй]: темний #252322, тепле світле тло #f0ece8, вторинне тло #dbdbd3, помаранчевий акцент #fd5b2c, фіолетовий #7d5ba6, зелений #8ba02c, біла.
[РЕКОМЕНДОВАНО для мого сайту] (якщо в мене є бренд-колір - заміни акцент на нього):
- Чорнильний (текст, контури, тіні, темні секції): #1E1B1A
- Папір (основне тло): #F4EFE6
- Папір-2 (чергові секції, великі контейнери): #E3DDD0
- Гарячий акцент (головні кнопки, ключові слова в заголовках): #FFD23F, текст на ньому #1E1B1A
- Вторинний (картки болів, кольорова секція "як працює"): #5B3FE8, текст білий
- Дудли і дрібні акценти: #FF5A5F
- Успіх або позитивні мітки: #2DBE7E
Правила контрасту: білий на #5B3FE8 - приблизно 6.8:1, нормально. Білий текст на помаранчевих або жовтих кнопках не використовуй. Дрібний текст не роби напівпрозорим на кольорових тлах.
3. ТИПОГРАФІКА
[СПОСТЕРЕЖЕНО]: заголовки - важкий широкий гротеск Obviously, вага 900, великі літери, міжрядковий інтервал 0.85, трекінг -1%. Розміри на екрані 1280 px: перший екран 105 px, великі заяви 149 px, заголовки секцій 59-78 px, заголовки карток 36 px, малі мітки 22 px з трекінгом +2%. Основний текст - гротеск Switzer, вага 500, 19 px, інтервал 1.4, трекінг -1%. Кнопки і підвал - тим самим display-шрифтом, великі літери.
[РЕКОМЕНДОВАНО] безкоштовні аналоги (Google Fonts): заголовки - Archivo (змінний, ширина 100-125, вага 900) або Anton, лише великі літери; основний текст - DM Sans або Inter, вага 500, 18-20 px на десктопі, 17-18 px на мобільному. Заголовки з clamp(): перший екран 64-120 px на десктопі, 44-56 px на мобільному; великі заяви 56-140 px / 40-56 px; заголовки секцій 40-72 px / 32-40 px. Міжрядковий 0.85-0.9 лише для заголовків, не більше 3-4 рядків. Основний текст не коротший за 17 px, ширина рядка до 65 символів.
4. КОМПОЗИЦІЯ
[СПОСТЕРЕЖЕНО]: 12-колонкова сітка, плаваюча навігація-"пігулка", секції чергуються за фоном: темна, сірувата, світла, кольорова, світла, темна. Заголовки величезні й часто по центру, текст займає менше половини ширини. Простору багато.
[РЕКОМЕНДОВАНО]: максимальна ширина контенту 1280 px, бічні відступи 24 px на десктопі й 16 px на мобільному, вертикальні відступи між секціями 96-160 px / 56-80 px. Один головний акцент на екран, не більше двох ідей в одній секції. Фон секцій чергуй: Папір, чорнильний, Папір-2, вторинний, Папір, чорнильний. Між секціями - рвана паперова лінія (намалюй оригінальну SVG-смужку з нерівним краєм).
5. ПЕРШИЙ ЕКРАН
- Навігація (плаваюча "пігулка", [СПОСТЕРЕЖЕНО]: фон тепло-світлий, контур 1 px, радіус 16 px, внутрішній відступ 4 px, висота 64 px, зліва логотип, посередині 3-4 посилання, праворуч темна кнопка "Вхід" і акцентна кнопка основної дії). На мобільному - логотип і іконка гамбургера в тій самій "пігулці".
- Заголовок: дві короткі паралельні фрази великими літерами, у структурі "Результат. Менше болю." Приклад структури, не текст: "[Бажаний результат]. [Менше того, що дратує]." Розмір максимальний, ліворуч або по центру, ключове слово на жовтій "маркерній" плашці з легким нахилом.
- Опис: 1-2 речення, що саме робить [Назва продукту] для [Для кого], не більше 25 слів.
- Основна дія: одна велика кнопка з текстом [Головна дія]; поруч або під нею 2-3 короткі мітки переваг із іконками-галочками.
- Ключовий візуал: знімок інтерфейсу продукту у нахиленій рамці з контуром і жорсткою тінню, поруч 1-2 дудли. Не використовуй стокові фото й вигадані обличчя.
6. СТРУКТУРА СТОРІНКИ (адаптуй під мій продукт)
1. Перший екран (чорнильний або Папір).
2. Біль: заголовок плюс 3 нахилені картки #5B3FE8 з контуром 1.5 px, радіусом 24 px, тінню 6 px 6 px 0 #1E1B1A, у кожній короткий заголовок 36 px і 1-2 речення про реальну проблему [Для кого]; тексти пиши з даних, які я дам, без вигаданих статистик.
3. Велика заява: один гігантський центрований заголовок (до 3 рядків) із двома дудлами навколо; під ним 1-2 речення і кнопка.
4. Як це працює: 3-4 кроки в кольоровій секції, кожен крок - нумерація великим шрифтом, заголовок, короткий опис, темна заокруглена панель із знімком продукту, трохи нахилена.
5. Можливості: сітка 2x3 або чергування "зображення зліва/справа" у картках з контуром.
6. Соціальне підтвердження: тільки реальні дані; рамка-"паперова наклейка" для фото, стрілки навігації контурні.
7. Часті питання: акордеон на чорнильному тлі, питання великими літерами.
8. Фінальний заклик: велика контурна панель із рваним краєм усередині, заголовок, текст і одна кнопка.
9. Підвал: посилання великими літерами display-шрифтом, юридичні посилання, без перевантаження.
7. КНОПКИ, КАРТКИ, ФОРМИ, ЕЛЕМЕНТИ
- Кнопки [СПОСТЕРЕЖЕНО]: радіус 12 px, відступи 20 px 24 px, контур 1.5 px тим самим кольором, що й заливка, великі літери display-шрифтом. Для мого сайту: основна - жовта заливка #FFD23F, текст #1E1B1A, контур 2 px #1E1B1A, жорстка тінь 4 px 4 px 0 #1E1B1A; вторинна - чорнильна заливка з білим текстом; мінімальний розмір 48 px.
- Картки: радіус 24 px, контур 1.5-2 px #1E1B1A, тінь 6 px 6 px 0 #1E1B1A, відступи 32-48 px, нахил від -4 до 6 градусів.
- Великі контейнери: радіус 32 px, контур 3 px, тінь 8 px 8 px 0.
- Поля форм (якщо є): висота 56 px, радіус 12 px, контур 2 px, фокус - товстіший контур і жовта тінь.
- Іконки: контурні, товщина 2 px, без заливки.
- Дудли: 4-6 штук на всю сторінку, намальовані від руки, контурні, кольори #FF5A5F та #5B3FE8. Вигадай оригінальні, пов'язані з моїм продуктом (не повторюй корону, місяць Zzz чи зигзаг референсу).
- Зображення: знімки інтерфейсу в нахилених рамках; фото з рваним краєм тільки якщо в мене є реальні фото.
8. АНІМАЦІЇ, СТАНИ, МОБІЛЬНА ВЕРСІЯ, ДОСТУПНІСТЬ
- [СПОСТЕРЕЖЕНО]: на референсі заголовок першого екрана з'являється з маскуванням по рядках, картки болю рухаються горизонтально й повертаються під час прокрутки, плитки послуг нахилені віялом. Hover-стани я не перевіряв.
- [РЕКОМЕНДОВАНО]: показуй у макетах стани hover, focus, active для кнопок і карток. Hover кнопки: зсув на 2 px вгору-ліворуч, тінь збільшується до 6 px. Active: кнопка "втискається", тінь зникає. Картки при hover випрямляються до 0 градусів за 200 мс. Поява секцій - зсув знизу 24 px і прозорість, 300-400 мс.
- Обов'язково: видимий фокус - контур 3 px #5B3FE8 із відступом 3 px; режим prefers-reduced-motion вимикає нахили в русі, паралакс і автоматичні каруселі (статичний нахил залишається); контраст тексту не менше 4.5:1, великого не менше 3:1; цілі натискання не менше 44 px.
- Мобільна версія: однокольонкова, нахили зменшені до 2-4 градусів, картки розташовані вертикально або у свайп-карусель з видимою підказкою, навігація "пігулка" з гамбургером, кнопка основної дії фіксована внизу екрана або повторюється після кожних 2 секцій, заголовки не більше 3 рядків.
9. ЧОГО УНИКАТИ
- Градієнтів, розмитих тіней, скляного ефекту, стокових фото й вигаданих облич.
- Звичайного SaaS-вигляду: сірі картки зі слабкою тінню, дрібні заголовки, симетричні "три колонки з іконками" без характеру.
- Дрібного або слабкого тексту; білого тексту на жовтому чи помаранчевому.
- Більш ніж двох акцентних кольорів на одному екрані, більш ніж 6 дудлів, нахилу сильніше 15 градусів.
- Дитячого вигляду: дудли лише як акцент, продукт має виглядати надійним.
- Копіювання логотипа, текстів, фото, персонажів чи точної композиції референсу.
- Вигаданих цифр, відгуків, логотипів клієнтів.
ЩО ПОВЕРНУТИ: макет сторінки (десктоп 1440 і мобільний 390) з усіма секціями, макети станів hover/focus для кнопки й картки, зведений аркуш стилів. Якщо чогось із даних про продукт бракує, залиш позначені поля замість вигадування.