Техническое задание на разработку дизайна сайта-лендинга
1. Общая информация
Название проекта: «NORDLY» — студия скандинавского дизайна интерьеров
Тип сайта: Одностраничный лендинг с формой заявки
Тематика: Дизайн интерьера квартир и загородных домов в скандинавском стиле
Целевая аудитория:
Мужчины и женщины 28–45 лет
Жители Москвы, СПб, городов-миллионников
Доход выше среднего (от 150 000 ₽/мес)
Купили квартиру в новостройке или планируют ремонт в загородном доме
Ценят минимализм, качество, экологичность
Язык: Русский
Сроки: 10 рабочих дней
Бюджет: 25 000 ₽
2. Цели и задачи
Главная цель: Получать минимум 30 заявок в месяц на бесплатную консультацию дизайнера.
Задачи дизайна:
Передать атмосферу уюта, простора и качества через визуал
Подчеркнуть экспертность студии (12 лет на рынке, 240+ проектов)
Вызвать доверие через реальные кейсы и отзывы
Привести пользователя к заполнению формы за 2–3 экрана прокрутки
3. Референсы и стилистика
Сайты-референсы:
— нравится: воздух, типографика, крупные фото
— нравится: спокойная подача, ритм сетки
— нравится: интерактив, плавные переходы
Антиреференсы:
Перегруженные сайты с яркими градиентами и кричащими CTA
Дизайн в стиле «евроремонт 2010»
Стилистика: Минимализм, премиум, скандинавский «hygge». Много воздуха, крупная типографика, естественные фото интерьеров.
4. Фирменный стиль
Логотип: Готов, будет передан в SVG
Цветовая палитра:
Основной фон: #F5F1EC (тёплый беж)
Текст: #1A1A1A
Акцент: #2D4A3E (приглушённый зелёный)
Доп. оттенок: #D4C4B0 (песочный)
Шрифты:
Заголовки: Fraunces (serif)
Текст: Inter (sans-serif)
Графика: Реальные фото проектов студии (будут предоставлены, ~40 шт.) + тонкие line-иконки
5. Структура лендинга (блочно)
Header — логотип, меню (4 пункта), телефон, кнопка «Консультация»
Hero — крупный заголовок, подзаголовок, CTA «Получить дизайн-проект», главное фото интерьера на весь экран
О студии — короткий текст + 4 цифры (12 лет, 240 проектов, 18 наград, 96% рекомендуют)
Услуги — 3 карточки: дизайн-проект / авторский надзор / комплектация
Этапы работы — горизонтальная таймлайн на 6 шагов
Портфолио — сетка из 6 кейсов с hover-эффектом, кнопка «Все проекты»
Кейс месяца — большой блок с одним проектом: до/после, площадь, бюджет, срок
Отзывы — слайдер с фото клиентов и текстом
Команда — 4 карточки дизайнеров с фото и должностями
FAQ — аккордеон, 7 вопросов
Форма заявки — имя, телефон, площадь, тип объекта + CTA
Footer — контакты, соцсети (Pinterest, Telegram), реквизиты, политика
6. Адаптивность
Макеты в трёх разрешениях:
Desktop: 1440px
Tablet: 768px
Mobile: 375px
Учесть гамбургер-меню, увеличенные touch-зоны, переработку таймлайна и портфолио под мобильные.
7. Состояния элементов
Обязательно прорисовать:
Кнопки: default / hover / active / disabled
Поля формы: empty / focus / filled / error / success
Карточки портфолио: default / hover (с приближением и подписью)
Пункты меню: default / hover / active
Аккордеон FAQ: свёрнут / раскрыт
8. Технические требования к макетам
ПО: Figma
Сетка: 12 колонок, gutter 24px, боковые отступы 120px (desktop)
Auto Layout на всех блоках
Компоненты с вариантами: кнопки, инпуты, карточки кейсов, карточки услуг
Стили: Color styles, Text styles, Effect styles — обязательно
Структура слоёв: понятные названия фреймов и групп
Готовность к передаче верстальщику без вопросов
9. Контент
Тексты: заказчик предоставит финальный текст после согласования прототипа
Фото проектов: предоставит заказчик (архив ~40 фото в RAW/JPG)
Фото команды и клиентов: предоставит заказчик
Иконки: на усмотрение дизайнера (предпочтительно line-стиль, единый сет)
10. Этапы и оплата
Этап Что включает Срок % оплаты
1 Прототип (wireframe) главной 2 дня 20%
2 Дизайн-концепт (1-й экран + 2 ключевых блока) 2 дня 30%
3 Полный дизайн лендинга (desktop) 4 дня 30%
4 Адаптив (tablet + mobile), сборка Figma 2 дня 20%
Правки: до 2 раундов на каждом этапе бесплатно. Дополнительные правки — 1500 ₽/час.
11. Результат работы (deliverables)
Figma-файл с макетами в 3 разрешениях
UI Kit с компонентами, стилями и иконками
Передача всех исходников (включая используемые фото) в облако заказчика
Доступ к Figma на редактирование
Передача авторских прав после полной оплаты
12. Критерии приёмки
Дизайн соответствует утверждённой концепции и стилистике брифа
Все блоки и состояния прорисованы
Файл структурирован, использует Auto Layout и компоненты
Адаптив корректно отображается во всех 3 разрешениях
Макеты готовы к передаче в HTML/CSS-вёрстку
13. Дополнительные пожелания
Лёгкие микроанимации при скролле (указать в Figma-комментариях)
Hover-эффект на карточках портфолио: плавное приближение + появление названия проекта
В Hero рассмотреть вариант с видео-фоном (предложить альтернативу)
Подобрать сочетающиеся фото из портфолио в одной цветовой гамме для главной