Eng
Հայ
Контекст
Готовые макеты нужно было реализовать во фронтенде. Сайт включал:
- Спортивные продукты
- Игровые продукты
- Платформенные инструменты
- Решения, способы оплаты и провайдеры
- Корпоративные страницы
Smartbet
Анимированный сайт компании и её продуктов — спорт, игры, платформенные решения и сервисы
С августа по октябрь 2021 года я работал UI-разработчиком в Smartbet в команде дизайнеров и разработчиков. Дизайнеры предоставляли утверждённые макеты, а я реализовал UI всех страниц сайта, включая адаптивные версии.
Помимо страниц я выстроил переиспользуемую структуру SCSS на основе атомарного подхода и BEM со стилевыми токенами, а также реализовал JavaScript-анимации и переходы между страницами и разделами продуктов.
- Роль:
- UI-разработчикСотрудник компании
- Объём работ:
- Все страницы сайтаАдаптивный UIСтруктура SCSS и токеныАнимации и переходы
- Команда:
- Дизайнеры и разработчики
- Стек:
- HTMLCSSSCSSJavaScript
Из чего состояла работа
Сайт Smartbet представляет разные линейки продуктов — спортивные, игровые и платформенные — а также решения, способы оплаты, провайдеров и информацию о компании. Дизайн уже был утверждён. Моя задача — превратить каждую страницу в работающий, адаптивный и анимированный интерфейс.
Основа UI
Переиспользуемая структура SCSS с атомарным подходом, BEM-именованием и стилевыми токенами: все страницы опирались на общие правила.
Страницы продуктов
Реализовал все утверждённые макеты в спортивном, игровом и платформенном разделах.
У каждой линейки продуктов — своя визуальная тема в рамках единой структуры сайта.
Анимации
JavaScript-анимации и переходы синхронно меняют заголовки, изображения и цветовые акценты разделов при переходе между страницами и продуктами.
Дополнительные разделы на разных экранах
Сервисы, решения, провайдеры, способы оплаты и страницы компании с поэтапным появлением контента.
Все страницы адаптированы под разные экраны, а навигация, типографика и UI-паттерны остаются согласованными.
Что изменилось
- UI реализован на всех страницах сайта
- Анимированные состояния страниц и переходы между линейками продуктов
- Единая переиспользуемая система стилей для всего сайта
Что показывает проект
- Ответственность за UI всего сайта — без бэкенда и продуктового дизайна
- Переиспользуемая система стилей и сложные анимации
- Точное взаимодействие с дизайнерами при работе над визуально сложным многораздельным сайтом
Принципы
Подход, которого я придерживался от страницы к странице.
Точность реализации дизайна
Утверждённые макеты точно перенесены в работающие страницы.
Переиспользование
Атомарные/BEM-стили и токены, общие для всех страниц.
Последовательная анимация
Переходы сохраняют общую логику между разными линейками продуктов.
Адаптивная структура
Один и тот же опыт на разных размерах экрана.
Визуальное единство
Навигация, типографика и UI-паттерны согласованы между собой.
Подробности
Пять частей разработки и подход к каждой из них.
1. Переходы между продуктами
При переходе от одного продукта к другому одновременно меняются заголовки, изображения и цветовые акценты разделов.
Я реализовал эти переходы на JavaScript так, чтобы уходящий и появляющийся контент двигались согласованно.
2. Разные визуальные характеры продуктов
Спортивные, игровые и платформенные разделы имеют собственные визуальные темы.
При этом они используют общую структуру: навигация и компоновка остаются привычными, а цвета и изображения меняются.
3. Анимированный первый экран
На главной странице рядом с контентом первого экрана находится постоянно движущийся визуальный объект, меняющий форму.
4. Меню на весь экран
Полноэкранное меню сгруппировано по категориям продуктов и анимированно открывается и закрывается.
5. Поэтапное появление контента
Иллюстрации сервисов, сведения о поддержке, сетки провайдеров и способов оплаты появляются последовательно, а не все сразу.
Есть похожая задача?
Расскажите, что Вы создаёте. Я отвечу в течение двух рабочих дней.
Начать проект
Новый сайт, интерфейс продукта, дизайн-система или улучшение существующего решения.
Продолжить просмотр
Предыдущий и следующий проекты.