FDY Music 

Онлайн сервис для легального музыкального оформления коммерческих помещений

Главная задача — модернизировать визуальный язык и улучшить пользовательский опыт для увеличения конверсии

  • Тип проекта: Редизайн сайта FDY Music (учебный проект)
  • Длительность: 1 неделя
  • Адаптивы: Desktop, Mobile
  • Инструменты: Figma
  • Год: 2026
[ Ключевые UX/UI-решения ]
[ Дизайн-концепция ]
Создать ощущение технологичности, надежности и профессионализма через:
  • Глубокий темный фон (ассоциация с премиальностью)
  • Электрический голубой и бирюзовый (цифровой звук, волны, инновации)
  • Абстрактную анимацию световых потоков (визуализация музыки)
Философия:
B2B-сегмент:

  • Владельцы и управляющие кафе, ресторанов, баров (HoReCa)
  • Руководители розничных магазинов и торговых центров
  • Владельцы салонов красоты, спа-центров, фитнес-клубов
  • Частные медицинские клиники
  • Развлекательные центры, кинотеатры, боулинги
  • Детские центры
[ Целевая аудитория ]
  1. Современный визуальный язык — создать запоминающийся дизайн с анимацией и глубиной
  2. Повышение конверсии — внедрить многоуровневую систему CTA и бесплатный триал
  3. Улучшение UX — интуитивная навигация, четкая структура, адаптивность
  4. Построение доверия — социальное доказательство, образовательный контент, прозрачность
[ Цели редизайна ]
Разработка дизайна сайта для бренда украшений
{1} Многоуровневая конверсионная воронка:

  • Мягкий CTA: «Попробовать бесплатно» в Hero-секции. Для тех, кто еще изучает предложения и не готов к покупке
  • Средний CTA: «Оформить заявку» под блоком сегментов. Для пользователей, которые уже выбрали свой тип бизнеса
  • Жесткий CTA: «Отправить заявку» в форме контактов. Для «горячих» лидов, готовых к сотрудничеству

Результат: Пользователь сам выбирает комфортную глубину вовлечения на каждом этапе
Цветовая палитра:
  • Raleway (заголовки) — геометричный гротеск с современным характером
  • Alumni Sans (основной текст) — дружелюбный, читабельный

Почему эти шрифты:

  • Raleway формирует образ технологичного и статусного проекта
  • Alumni Sans обеспечивает отличную читаемость длинных текстов
  • Оба шрифта поддерживают кириллицу (для будущей локализации)
Типографика:
Спасибо за просмотр
Буду рада сотрудничеству

Редизайн сайта FDY Music

{2} Визуальная иерархия через размер и цвет

  • Заголовки: Raleway, белый, Bold. Мгновенно фокусируют внимание на главном оффере
  • Подзаголовки секций: Raleway, бирюзовый. Визуально делят страницу на логические блоки
  • Основной текст: Alumni Sans, белый. Обеспечивает комфортное чтение без визуального шума
  • Кнопки: Raleway, градиент. Создают яркие, кликабельные акценты
{3} Интерактивность и анимация

  • Реакция на действия (Hover): Карточки сегментов плавно увеличиваются и подсвечиваются по контуру. Кнопки меняют градиент и анимацию при наведение|нажатие
  • Анимация появления (Scroll): Плавное затухание для блоков при прокрутке и непрерывная фоновая анимация световых волн в Hero-секции. Это добавляет динамики, но не перегружает интерфейс
{4} Построение доверия через прозрачность

  • Логотипы реальных клиентов (социальное доказательство)
  • Прозрачное ценообразование без скрытых условий
  • Акцент на получении лицензионного сертификата (юридическая защита бизнеса)
  • Развернутый FAQ, закрывающий основные возражения
  • Ссылки на юридические документы и политику конфиденциальности в футере
{5} Снижение когнитивной нагрузки

  • Простота: Процесс подключения визуализирован всего в 3 шага.
  • Ясность: Смысловые блоки разделены «воздухом», минимум сплошного текста
  • Навигация: Фиксированная шапка с якорными ссылками для быстрого перемещения по странице
  • Фокус: Один главный CTA-сценарий на секцию, чтобы не распылять внимание пользователя
макеты Figma:
  • Дизайн-система (цвета, типографика, компоненты)
  • Desktop версия (1440px)
  • Mobile версия (440px)
  • UI-Kit с кнопками, формами, иконками
  • Прототипы всех экранов

Дополнительно:
  • Мокапы (ноутбук, телефон)
  • Презентация кейса
[ Что входит в проект  ]
[ заключение  ]
Ключевые достижения:

  • Создан современный, запоминающийся визуальный язык
  • Улучшена пользовательская навигация и структура
  • Внедрены конверсионные элементы (бесплатный триал, социальное доказательство)
  • Учтена адаптивность для всех устройств

Проект демонстрирует:

  • Навыки UX-исследований и анализа
  • Умение работать с B2B-продуктами
  • Понимание принципов конверсионного дизайна
  • Способность создавать целостные дизайн-системы
Этот учебный проект показал, как важно понимать бизнес-контекст и потребности пользователей при создании дизайна
Made on
Tilda