Дизайн и создание сайта для VOLTUM

Сентябрь 2024

Пресейл, концепт

В конце 2023 года к нам с запросом обратилась компания VOLTUM — новая торговая марка немецкого бренда осветительного оборудования Maytoni. Продукции на тот момент ещё не было: VOLTUM находились на стадии подготовки к производству, но уже искали тех, кто поможет им выйти в свет с ярким и запоминающимся дизайном сайта.

Чтобы стать разработчиками проекта и показать свою экспертизу, мы выполнили тестовое задание и разработали дизайн-концепцию для сайта. Для выполнения тестового задания нам предоставили только логотип, фирменные цвета и шрифт. Не было ни макетов, ни чётких инструкций: у клиента тоже не было понимания, какой конкретно должен быть результат. 

Но нам этого хватило, чтобы создать концепт главной страницы сайта. Мы представили структуру, блоки о компании и продукции, другие элементы. Нашей фишкой стала анимация розеток: мы сделали ставку на динамику, и анимация дошла до финального релиза. Пожалуй, это и зацепило VOLTUM, а также наша команда и комфортный, грамотный диалог, поэтому они выбрали нас. Рассказываем, как развивалась наша история партнёрства.

Прототип

После того, как нас выбрали для дальнейшего сотрудничества, мы взялись за прототипы, и начали прорабатывать структуру сайта. Мы знали, какие разделы должны быть, но не было четкого понимания по их наполнению и структуре. Нужно было определить, как, кроме базовой структуры разделов, будут выглядеть блоки, как представить каталог продукции и что важно показать пользователю. Благодаря регулярным встречам с клиентом мы выработали общее понимание того, какие будут структура и контент в функциональных блоках. Диалог с клиентом был очень тесным, мы ежедневно созванивались и обсуждали детали.

В финальной версии прототипов отрисовали и согласовали основные компоненты. Придумали, как будет выглядеть меню и каталог. Для некоторых страниц составили только скелет и оставили до следующего этапа — дизайна.

Главной особенностью на данном этапе стало создание интерактивных прототипов. Это позволило клиенту лучше понять функциональность блоков и что стоит доработать. По каждому блоку мы отсматривали референсы, чтобы понять, как это будет выглядеть. Мы предложили идею «взрыв-схемы» — анимации разборки изделия, которая демонстрирует механизм устройства.

Дизайн

VOLTUM — новая торговая марка, поэтому у неё пока не было сложившегося визуального стиля для цифровых продуктов. Мы взяли за основу фирменные логотип, шрифты и элементы графики, представленные дизайнером со стороны клиента, например, свечение, которое использовалось на упаковке. Сочетания фирменных цветов — синий для основной продукции и оранжевый для тёплых полов — должны были интегрироваться в сайт.

Мы тщательно подбирали каждый элемент, чтобы сохранить целостность фирменного стиля. В процессе создания макетов разработали несколько вариантов видения от разных дизайнеров, чтобы найти что-то действительно интересное. Мы учитывали пожелания клиента и адаптировали их под графический стиль сайта.  

На главном экране подразумевалась анимация: мы подготовили как можно больше вариантов и показали, как они будут выглядеть на сайте. Также провели несколько встреч по поводу вариантов свечения и его использования. Это была интересная работа, хотя клиент в итоге вернулся к изначальному варианту свечения.

Интеграция с backend

После утверждения дизайна приступили к разработке frontend-части. Параллельно с этим наша команда готовила подробное техническое задание для backend-разработчиков на стороне клиента. Мы создали таблицу, в которой описали каждую страницу сайта и структуру данных для каждого блока, необходимого для реализации и получения данных с бэкенда. Благодаря такой документации коммуницировать с командой клиента и вести параллельную разработку backend-части было удобно. По готовности разработки API мы интегрировали его с frontend, регулярно обменивались результатами работы между командами и оперативно вносили необходимые корректировки.

Контент и наполнение сайта

У клиента есть свой отдел подготовки контента, часть работы коллеги взяли на себя, постоянно согласовывая с нами. Например, отправляли иллюстрации, чтобы мы соотнесли их с дизайном сайта.


Подготовка контентной части заняла несколько месяцев. Каждая страница должна была содержать точную информацию о продукции, её характеристиках и особенностях. Для того, чтобы ускорить и упростить этот процесс, мы разработали таблицу с техническим заданием, которая позволила клиенту структурировать и предоставлять нужные данные.


Клиент также помогал нам с визуальным контентом: предоставил 3D-модели продукции, которые мы адаптировали и использовали в дизайне. Были созданы отдельные страницы для каждого типа продукции, где можно просмотреть все изделия в разных цветах, а также страницы с описанием серий товаров.

Разработка интерактива

Мы создавали специальные инструменты для удобства пользователей. Например, разработали конфигуратор продукции: через него покупатель может собрать свою розетку или тёплый пол, выбрать цвета, рамки, фоны и другие параметры, а затем сохранить результат или скачать его в формате PDF. Через конфигуратор можно подобрать розетку под интерьер — загрузить изображение и увидеть, как это будет смотреться в каждом отдельном случае. Конфигуратор тоже предварительно проходил несколько итераций на прототипе.

Ещё одна особенность — схема 360°. Мы сделали так, чтобы пользователь мог вращать розетку и детально рассматривать их со всех сторон. Анимация также показывает внутренние компоненты товаров, помогая пользователю определиться с выбором.

Финализация дизайна

Мы знали с самого начала, что на сайте будет также говориться о тёплых полах, поэтом создавали дизайн с учётом будущих корректировок. Контент по тёплым полам пришёл ближе к концу работ — тогда мы с клиентом смогли рассмотреть, как «взрыв-схема» выглядит в случае с тёплым полом.

Мы детализировали каждую страницу сайта — главную страницу, разделы по категориям и карточки товаров. Разработали множество мелких элементов: фильтры, всплывающие окна, анимации меню и поиск по сайту. Как и всегда, адаптировали сайт для мобильных устройств для комфорта пользователей.

Изначально бренд предполагал использование чёрного фона, но мы решили предусмотреть альтернативный вариант, ведь некоторым пользователям может быть некомфортно работать с тёмным интерфейсом. В результате клиент утвердил обе версии, так что пользователи могут переключать их в зависимости от предпочтений.

Результат и планы на будущее

Так как VOLTUM — новая торговая марка, хотелось подобрать свой стиль, не копируя конкурентов. Мы разработали дизайн с нуля. В итоге получился красивый современный сайт, где удалось показать и продукт клиента, и нашу работу. В дизайне и разработке мы использовали передовые решения, но и заботились о пользовательском опыте, чтобы было и эстетично, и комфортно. Далее клиент планирует развивать SEO, продвижение сайта, также мониторить поведение пользователей, отзывы, вносить правки по UX/UI и так далее.

Проект VOLTUM стал примером тесного взаимодействия клиента и команды на всех этапах — от концепт-дизайна до финальной реализации. Сотрудничество с коллегами из VOLTUM было очень комфортным. Благодарим проджект-менеджера и команду клиента за глубокое понимание процесса и продуктивную работу. В результате получился красивый функциональный сайт, отражающий фирменный стиль бренда. Благодаря чёткому следованию процессу разработки мы смогли совместить современный веб-дизайн и удобство использования.

Технологии

Frontend:

Vue.js — JavaScript-фреймворк для создания интерактивного пользовательского интерфейса.


Backend:

Laravel — PHP-фреймворк для построения серверной логики и API.


Связующий слой:

Inertia.js — библиотека, которая позволяет Vue.js работать с Laravel как с классическим SPA-приложением, обеспечивая бесшовную интеграцию между фронтом и бэком.

Команда

— арт-директор

— проджект-менеджер

— аккаунт-менеджер

— tech lead

— разработчик

— тестировщик

— дизайнер

Отзывы о проекте

Максим Сыромятский
проджект-менеджер
«Результат, по сути, достигнут благодаря тесному сотрудничеству. Даже не представляю, как бы всё получилось, если бы не было такого плотного взаимодействия с командой. Работать с ребятами было легко — они понимали, что именно нужно, всегда было ощущение, что идём в одном направлении. Сайт вышел именно таким, как мы хотели: современным, с красивой анимацией и приятным дизайном. Руководство высоко оценило результат, так как работа была выполнена в соответствии с ожиданиями и требованиями бренд-команды. Спасибо арт-директору Михаилу за его внимание к деталям, проджекту Дарье за грамотную организацию всех процессов и аккаунту Анне, которая выстроила отличную коммуникацию между нами. Очень доволен итогом, это именно то, что нужно».
Михаил
арт-директор
«Сотрудничество с командой VOLTUM мы начали с контакта с менеджером проекта Максимом Сыромятским. Он быстро наладил рабочий процесс и подключал к обсуждению нужных специалистов из своей команды в зависимости от задачи. Это помогло оперативно решать возникающие вопросы и двигаться дальше. На проекте мы работали как единая команда с чётко поставленными целями, объединив экспертизу, и все сложности оказались решаемыми совместными усилиями. На старте мы с коллегами из VOLTUM не понимали, какой результат получим. Постепенно мы придумывали, согласовывали, переделывали и снова согласовывали наши общие идеи. Результат — свежий, технологичный и в то же время понятный сайт с очень красивыми изделиями, которые делают ребята».

Сколько стоит такой проект?

Оставьте ваши контакты — на встрече подробнее расскажем об этом и других проектах, поделимся опытом и оценим вашу задачу

Все проекты
2023
Банк «Хлынов»
Разработка нового сайта для банка
LDFA Latin Dance Fitness Alliance
Новый сайт для сообщества сертифицированных инструкторов и поклонников танцевальных фитнес-программ
2022
Интернет-магазин Тайпит Мебель
Новый сайт с функционалом коллекций
Квартиры ССК
Мобильное приложение для покупателей квартир Кировского ССК
Вайгач
Интернет-магазин товаров для строительства и ремонта
АО «Горэлектросеть»
Портал дистанционного обслуживания и интернет-приемной
Ваши Террасы
Строительство и остекление террас, веранд и зимних садов
Банк Хлынов - Электронная очередь
Проект для онлайн-записи в отделение банка
Инеск
Сайт-каталог для завода электрооборудования
Авитек
Корпоративный сайт одного из крупнейших машиностроительных предприятий России
2021
Экспосистема
Сайт и личный кабинет с 3D-конструктором для девелопера выставочных стендов
Бергамо
Интернет-магазин бренда женской одежды
Русинерт
Корпоративный сайт с каталогом для управляющей компании карьеров по добыче и переработке нерудных материалов
GG
Мультиязычный сайт для оптовой продажи мясных субпродуктов
Аспект СПб
Корпоративный сайт с каталогом для компании по созданию информационной и инженерной инфраструктуры зданий и сооружений
Кедр
Сайт-каталог проектов деревянных домов
Дом отделочных материалов
Интернет-магазин стройматериалов для оптовых клиентов
Кибет
Крупный интернет-магазин сувениров и товаров для дома
Coincoll.com — Монеты и коллекции
Сайт для нумизматов с подробной информацией об огромном количестве монет.
Банк Хлынов — Деловые решения
Маркетплейс услуг для бизнеса от Банка Хлынов.
2020
ИД Партнер
Перенос сайта на Битрикс. Бухгалтерское обслуживание.
Fortis Group
Доработка дизайна сайта, адаптивная версия. Правовое сопровождение юридических лиц.
Дом Форест
Корпоративный сайт, каталог проектов. Строительство и проектирование домов из бруса.
Православный приход церкви в честь иконы Божией Матери «Всех скорбящих Радость»
Создание раздела заказа треб.
Приход великомученика и целителя Пантелеимона г.Кирова
Создание раздела заказа треб.
Фармаклик
Доработка дизайна готового решения. Медицинские товары.
Винтал
Лендинг. Производство и продажа окон и фурнитуры.
Спектрум
Переработка дизайна интернет-магазина. Мебель для ванных комнат.
Радиосейл
Переработка дизайна интернет-магазина. Оборудование для радиосвязи и автомобильной электроники.
ЗАО «Кристалл»
Сайт для оптовых покупателей. Электротовары.
«MBA-Diplom» Помощь в написании дипломов
Перенос сайта на готовое решение Аспро: Корпоративный сайт современной компании.
ООО «Форест» Интернет-магазин
Создание сайта. Производство пиломатериалов и домокомплектов.
Свято-Успенский кафедральный собор Трифонова мужского монастыря г. Кирова
Создание раздела заказа треб.
«Baies» Доставка свежих ягод и грибов
Каталог на готовом решении.
«Зумба» — магазин одежды
Внедрение авторизации через sms и Viber, редизайн оформления заказа.
«Технополис». Магазин электронной техники и гаджетов в Кирове
Интернет-магазин на готовом решении Аспро: Максимум.
Аэропорт «Победилово»
Создание корпоративного сайта для аэропорта г. Кирова.
Специализированная. компания-застройщик «ПС Недвижимость»
Доработка сайта для размещения нескольких объектов недвижимости.
Средняя общеобразовательная школа №27 г. Кирова с углубленным изучением отдельных предметов
Сайт на готовом решении Мибок: Сайт школы.
2019
СпейсТим
Лендинг. Сертифицированная система видеонаблюдения на транспорте
Сиберия
Интеграция интернет-магазина с 1С-Битрикс. Продажа дистилляторов.
Жестяные изделия
Адаптивная версия сайта. Жестяные изделия оптом и в розницу от производителя.
Системы Полива
Интернет-магазин. Верстка и интеграция сайта. Гипермаркет оборудования и систем для полива.
ООО «ЖБИ Профстрой»
Сайт-каталог. Производство и поставка железобетонных изделий для жилищного и коммерческого строительства.
Форест
Лендинг. Продажа профилированного бруса.
НТЦ Лифт
Лендинг на основе Битрикс24.Сайты. Оценка соответствия лифтов требованиям безопасности
UCC
Корпоративный сайт. Верстка и интеграция на 1С-Битрикс. Организация и освещение кибертурниров, комплексные рекламные интеграции в киберспорте.
АО «Кировский ССК»
Корпоративный сайт. Жилой дом премиум-класса.
Компания «Alvadoor»
Интернет-магазин на основе Битрикс24.Сайты. Изготовление и продажа входных, технических, противопожарных дверей. Порошковая окраска.
Муниципальное унитарное предприятие «Кировские тепловые сети»http://mupkts43.ru/
Корпоративный сайт на готовом решении. Теплоснабжающая организация.
ООО «Лаборатория 100»
Корпоративный сайт. Испытательный лабораторный центр. Выполнение требований санитарного, природоохранного и трудового законодательства.
ООО «Вятский фанерный комбинат»
Интернет-магазин. Продажа березовой фанеры оптом напрямую от производителя.
Кристалл-Электро
Интернет-магазин. Торговая сеть с широким спектром товаров электротехнического назначения.
ООО Гостиница «Губернская»
Лендинг. Редизайн и адаптивная версия сайта с сохранением дизайнерской концепции. Гостиница и хостел в г. Киров.
CLEANAIR
Оформление социальных сетей. Очистка и дезинфекция вентиляции в г. Киров и по РФ.
Российский Календарный Проект
Интернет-магазин. Полуфабрикаты для изготовления календарей и готовые календарные блоки.
ООО «Эгида»
Социальные сети. Техническое диагностирование внутридомового и внутриквартирного газового оборудования и систем вентиляции.
Магазин-салон «Двери-Град»
Адаптивная версия сайта. Продажа и установка дверей в Московской области.
ООО «ПС Недвижимость»
Лендинг. Строительство жилой недвижимости
ООО «Корпорация Лес»
Сайт-каталог. Изготовление и продажа пиломатериалов в г. Кирове и по всей России.
ООО «Дизельторг Плюс»
Лендинг. Поставки топлива от известных производителей.
ООО «А2Пресс»
Корпоративный сайт. Типография, полиграфия, производство рекламной продукции в Москве.
ООО «Бизнес Эдвайзер»
Корпоративный сайт. Группа компаний. Диагностирование и обслуживание ВДГО, ВДГО, вентканалов; экспертиза промышленной безопасности.
2018
«Белуга» рыболовный клуб
Лендинг. Визитка рыболовного клуба.
ООО «Рубачи»
Корпоративный сайт, каталог. Строительство деревянных домов из бревен ручной рубки.
ООО «Лепсе-Лес»
Корпоративный сайт. Строительство домов из СИП-панелей и Арболита по всей России.
ООО «Гуру Безопасности»
Сайт-каталог. Продажа и монтаж систем и средств видеонаблюдения.
ООО «Лидерстрой»
Сайт-каталог. Изготовление и продажа противопожарного оборудования.
Диван Комодов
Сайт-каталог. Комплекс услуг по созданию интерьера. Мебель в наличии и под заказ.
Perfetti Van Melle
Перенос сайта на 1С-Битрикс, адаптивная версия сайта. Один из крупнейших производителей и дистрибьюторов конфет и жевательной резинки в мире.
ООО «Вятская Кровельная Компания»
Сайт-каталог. Кровельные и фасадные материалы от известных отечественных и мировых производителей.
ГП ЧАО «Чукоткоммунхоз»
Корпоративный сайт. Обеспечение населения и юридических лиц электрической и тепловой энергией.
ООО «Строительные системы»
Сайт-каталог. Строительные материалы от проверенных производителей с доставкой.
Гидропосев
Лендинг. Благоустройство приусадебных участков.
Корпусная мебель «Ливеко»
Оформление социальных сетей. Производитель корпусной мебели из ЛДСП в Кирове.
ООО «Классик»
Лендинг. Поставки фанеры, ОСП, ДВП, ЛДВП с заводов-изготовителей.
«Остров мебели»
Сайт-каталог. Продажа мебели для дома и офиса.
Zumba® Fitness
Редизайн, адаптивная версия сайта. Интернет-магазин спортивной одежды.
Спектрум М
Лендинг под рекламную кампанию. Кухни под ключ от производителя.
Жасмин & Хоббитекс
Интернет-магазин. Крупнейшая сеть по продаже товаров для шитья, творчества и рукоделия в Кирове и Кировской области.
2017
ООО «Вира-строй»
Лендинг. Каталог проектов. Дома из кирпича и газосиликатных блоков.
Asplin.art
Лендинг. Галерея картин и фотографий
Управление сбыта автошин
Лендинг. Один из старейших участников рынка шин в России
Термона
Сайт-каталог. Продажа и монтаж отопительного оборудования
РостКапитал
Расширенный лендинг. Консалтинговые услуги
Фитнес-клуб ГТО
Лендинг. Современный и многофункциональный фитнес-клуб
Двери «Steel Wood« (Багратион)
Сайт-каталог. Производитель входных дверей в г. Кирове.
ООО «Салют-43»
Сайт-каталог. Пиротехнические услуги и продажа фейерверков
Окна Конкурент
Корпоративный сайт. Весь спектр услуг по остеклению ремонту и отделке лоджий, балконов
2016
Строй-Поставка
Интернет-магазин. Крупный поставщик стройматериалов в Кирове и Кировской области
Хлынов Град
Лендинг. Агентство недвижимости с историей
ГермесАвто
Интернет-магазин. Ремонт, обслуживание, продажа запчастей
Relax-Kirov
Сайт визитка. Развлечения в Кирове
«Айсберг»
Интернет-магазин. Дистрибуция и логистика продуктов питания
ВМП «АВИТЕК»
Корпоративный сайт. Мой завод — моя гордость!
Спектрум Кухни
Интернет-магазин. Кухонная мебель
Рубикон
Корпоративный сайт. Передовые технологии для эффективности вашего бизнеса
International Travel Service
Корпоративный сайт. Паспортно-визовый сервис
Чай «GABRIEL»
Корпоративный сайт. Официальный поставщик чая «GABRIEL» в России
Дома Века
Корпоративный сайт. Строительство деревянных домов из оцилиндрованного бревна
2015
Декор Мастер
Лендинг. Ремонт и отделка квартир, офисных, производственных и торговых помещений
Кировспецмонтаж
Корпоративный сайт. Строительная компания
Медвежий угол
Лендинг. Производство профилированного бруса
Агентство предоставления справок
Корпоративный сайт. Официальный агент и партнер Национального Бюро Кредитных историй (НБКИ)
Артель Тепла
Мобильная версия. Редизайн и верстка шаблонов дизайна мобильной версии
Деловой Киров
Лендинг. Оптовая торговля продуктами питания и товарами народного потребления
Северпрод
Корпоративный сайт. Концепт страницы «Реализованные проекты»
МУП «Горэлектросеть»
Корпоративный сайт. Передача электрической энергии по собственным сетям
Гражданстрой
Лендинг. Новостройка на ул. Дерендяева, 75/3
А-Синтез
Лендинг. Быстровозводимые арочные ангары
2014
Экран-Сервис
Корпоративный сайт. Домофоны. Видеонаблюдение. Ремонт радиоаппаратуры и бытовой техники. Антенны. Въездная автоматика
Office 365
Интернет-магазин. Office: еще лучше с подпиской на Office 365
Звездное небо
Интернет-магазин. Производитель обучающих наборов для творчества «Звездное небо»
Эльва-Спорт
Сайт визитка. Производитель системных механических лыжных креплений ELVA (для платформ SNS и NNN), лыжероллеров ELVA
МКР Солнечный Город
Корпоративный сайт. МКР «Солнечный город» в Прикубанском районе
2013
Типография «А2Пресс»
Интернет-магазин. Российский календарный проект
Гостиница Форест
Сайт визитка. Небольшой и уютный отель, находящийся в пос. Верхошижемье Кировской области