Boomstream
Сайт международного сервиса видеохостинга
и онлайн-трансляций
![](_assets/images/case/boomstream/case-main.webp)
Boomstream - это платформа для видеомаркетинга, которая объединяет в себе первоклассные услуги видеохостинга, онлайн-редактор видео и мгновенный конструктор целевых страниц для видео.
Главная задача — сделать современный редизайн сайта, который увеличит конверсию и будет соответствовать запросам целевой аудитории. Также необходимо было показать компетентность компании с большой историей и ее лояльность к своим клиентам.
Исследования и
Планирование дизайна сайта началось с активного взаимодействия с клиентом. Этот этап позволил провести глубокий анализ всех аспектов их продукта, а также изучить все сегменты целевой аудитории, что стало основой для успешной реализации проекта.
Мы структурировали аудиторию по продуктам, потребностям и выгодам, что помогло ясно определить новую структуру сайта.
После детального анализа была создана таблица, отображающая различные сегменты аудитории, чтобы лучше понять их потребности и ожидания.
![](_assets/images/case/boomstream/case-1.webp)
Структура и
прототипирование
Для улучшения структуры сайта мы провели конкурентный анализ, исследуя как локальные, так и зарубежные аналоги. Мы выявили интересные особенности и функциональные возможности, которые можно было бы интегрировать в наш проект. На основе этого анализа возникла новая идея по структуре сайта.
На этапе прототипирования мы разработали детальные макеты, которые отображали распределение страниц, блоков и функциональные элементы нового сайта. Каждый прототип был продуман до мельчайших деталей, чтобы обеспечить понятность и легкость навигации для пользователей.
В прототипе мы учли интерактивные возможности, такие как анимации, переходы между страницами и взаимодействие с элементами интерфейса, чтобы создать приятный пользовательский опыт.
![](_assets/images/case/boomstream/case-2.webp)
Дизайн-концепция
- Каждый элемент дизайна, от цветов и шрифтов до компоновки и визуальных эффектов, был тщательно продуман, чтобы обеспечить легкость навигации и приятный пользовательский опыт.
- Разработали несколько концепций ключевых блоков главной страницы. Решили не показывать на первом экране визуальные элементы ассоциирующиеся с сервисом, а сразу переводить пользователя к выбору продуктов во втором блоке.
- Добавили минималистичные анимированные графические элементы на первый экран для вовлечения пользователя в дальнейшее взаимодействие с сайтом.
![](_assets/images/case/boomstream/case-3.webp)
![](_assets/images/case/boomstream/case-4.webp)
![](_assets/images/case/boomstream/case-5.webp)
![](_assets/images/case/boomstream/case-6.webp)
Визуальный дизайн.
Продукты / Видеохостинг
![](_assets/images/case/boomstream/case-7.webp)
![](_assets/images/case/boomstream/case-8.webp)
![](_assets/images/case/boomstream/case-9.webp)
Визуальный дизайн.
Продукты / Трансляции
![](_assets/images/case/boomstream/case-10.webp)
![](_assets/images/case/boomstream/case-11.webp)
Типографика
Suisse Int’l — современный гротеск, созданный студией Swiss Typefaces. По визуальному характеру Suisse Int’l относится к швейцарскому стилю.
![](_assets/images/case/boomstream/case-12.webp)
![](_assets/images/case/boomstream/case-13.webp)
Цветовая палитра
Платформа защищенного видеохостинга и онлайн- трансляция связана с яркими эмоциями при просмотре видео. Наша команда решила передать эмоции при просмотре видео с помощью ярких и насыщенных цветов.
![](_assets/images/case/boomstream/case-14.webp)
Дизайн-система
Наша команда создала подробную дизайн-систему для команды разработчиков Boomstream. В дальнейшем ее можно будет использовать на проекте без активного вмешательства команды дизайнеров.
![](_assets/images/case/boomstream/case-15.webp)
Анимация
Мы сразу поняли, что анимация должна играть ключевую роль и плотно взаимодействовать с дизайном. Поэтому при разработке дизайна, мы одновременно проектировали анимацию каждого элемента. Сделали много экспериментов и подходов к анимации, тестировали разные изинги и эффекты.
В результате, мы спроектировали анимацию, которая не только улучшает визуальное впечатление, но и повышает интерактивность сайта, делая его более привлекательным для посетителей.
Важным аспектом было обеспечение плавности анимаций и их соответствие общему стилю и целям сайта.
![](_assets/images/case/boomstream/case-16.webp)
![](_assets/images/case/boomstream/case-17.webp)
Фронтенд
У клиента есть своя команда разработчиков. При этом, мы убедили клиента в необходимости фронтенд-разработки с нашей стороны. Дизайн и анимация - это единое целое. И этими процессами должна управлять одна команда. А бэкенд-разработкой займется команда клиента.
Мы использовали современный стек технологий: nuxt 3, GSAP, Vue 3, TS, Tailwind, Eslint, Setup, Composition Api.
![](_assets/images/case/boomstream/case-18.webp)
![](_assets/images/case/boomstream/case-19.webp)
![](_assets/images/case/boomstream/case-20.webp)
Отзыв заказчика
«Ожидания от сотрудничества оправдались на 146%»
Мы получили внимательное отношение к запросам и хотелкам на каждом этапе работы, следование техническому заданию, аккуратный и грамотный код. Вячеслав и его команда без проблем решали сложные задачи, предоставляя варианты исполнения.
Обиднов А.Г. Генеральный директор ООО «ХВД»