Cоздание сайта для завода по производству лодок и катеров Aluma Storm - Aluma Boats - Веб-студия ARIAL

Разработка сайта для завода по производству премиальных лодок Aluma Storm и Aluma Dream

Создание цифрового образа для производителя премиальных лодок — вызов, требующий безупречного вкуса. Завод Aluma доверил нам презентацию флагманов: мощных Aluma Storm и элегантных Aluma Dream. Наша задача — не просто верстка, а трансляция ценностей бренда: надежности, статуса и свободы стихии. Мы объединили строгую инженерию с эстетикой luxury-сегмента, разработав интерфейс, который продает мечту. Узнайте в этом кейсе, как мы оцифровали премиум-класс и подчеркнули исключительность продукции завода.

Видеопрезентация процесса создания сайта

01 Технические задачи

уникальный и индивидуальный дизайн
стиль дизайна - продающий
SEO-оптимизация под поисковые системы
адаптивность под мобильные устройства и планшет

02 Общая информация

Категория - корпоративный сайт
Тематика - премиальные лодки и катера
Сроки разработки - 41 день
Сайт - aluma-boats.ru

Рабочий процесс

Проект проходил тестирование, обсуждение и внесение правок на каждом этапе разработки. Полное взаимодействие дизайнеров, разработчиков и заказчика позволило выполнить проект с ожидаемым положительным результатом и в четко обозначенные сроки.

анализ ниши и прототипирование дизайна главной страницы сайта

прототипирование дизайна внутренних страниц сайта

отрисовка в figma цветного дизайна главной страницы сайта

отрисовка в figma цветного дизайна мобильной и планшет версии сайта

отрисовка в figma цветного дизайна внутренних страниц сайта

верстка сайта (html/css/javascript)

интеграция верстки на cms, наполнение контентом

загрузка на боевой домен, сдача проекта заказчику

анализ ниши и прототипирование дизайна главной страницы сайта

прототипирование дизайна внутренних страниц сайта

отрисовка в figma цветного дизайна главной страницы сайта

отрисовка в figma цветного дизайна мобильной и планшет версии сайта

загрузка на боевой домен, сдача проекта заказчику

интеграция верстки на cms, наполнение контентом

верстка сайта (html/css/javascript)

отрисовка в figma цветного дизайна внутренних страниц сайта

Видеообзоры каждого этапа разработки

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

1 этап - отрисовка прототипа главной страницы

2 этап - прототип внутренних страниц

3 этап - отрисовка дизайна desktop главной страницы

4 этап - отрисовка дизайна desktop внутренних страниц

5 этап - отрисовка дизайна tablet + mobile главной страницы

6 этап - вёрстка сайта с дизайна figma

7 этап - готовность сайта и загрузка на боевой домен

Этапы работ

1 этап - прототипирование главной страницы

Видеообзор этапа

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

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

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

2 этап — прототипирование внутренних страниц

Видеообзор этапа

Здесь важна детализация. Мы продумали структуру каталога, карточек моделей Aluma Storm и Dream, а также разделов о производстве. Задача — обеспечить плавный переход от впечатления к техническим деталям.

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

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

ui-kit Сетка дизайна обеспечивает верное размещение блоков и элементов сайта с сохранением одинаковых отступов на всех версиях отображения от desktop версии до mobile версии. Цветовая палитра и шрифт позволяет соответствовать цветовой концепции компании, брендбука и официального стиля компании.

desktop сетка проекта

tablet сетка проекта

mobile сетка проекта

цветовые решения

#096FA6

#011E2E

#EBF5FF

#D7190F

шрифтовые решения

Аа

Roboto ExtraLight Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Light Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Regular Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Medium Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

H1 Заголовок

H2 Заголовок

H3 Заголовок

Текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа Ссылка в тексте Ссылка в тексте HOVER Ссылка в тексте PRESSED

3 этап - отрисовка в figma цветного дизайна главной страницы

Видеообзор этапа

Третий этап — полноценная отрисовка цветного дизайна главной страницы в Figma. Здесь проект обретает свой визуальный характер. Мы перешли от схем к эстетике, соответствующей статусу Aluma. Подобрали палитру, отражающую мощь стихии и надежность металла: глубокий морской синий, холодное серебро и чистый белый. Типографика стала строгой и статусной, подчеркивая премиальность бренда. Особое внимание уделили первому экрану: крупные фото Aluma Storm и Dream должны вызывать непреодолимое желание обладать ими. Добавили воздушные отступы, чтобы контент дышал. Проработали микро-взаимодействия кнопок. Каждая деталь прошла согласование с заказчиком. Мы избегали визуального шума, оставляя фокус на продукте. Дизайн передает ощущение luxury-сегмента. Визуальный стиль объединяет инженерию и искусство, создавая цифровое лицо бренда. Макет готов к верстке с сохранением глубины цвета. Итог — стиль, работающий на имидж.

Создали несколько вариантов первого экрана для тестирования. Заказчик выбрал оптимальное решение. Все слои в Figma организованы по стандартам — это упростит передачу макета разработчикам. Дизайн-система готова: прописали стили текста, цветовые переменные, состояния элементов. Это обеспечит единообразие на всех страницах.

4 этап - отрисовка мобильной и планшетной версии в figma

mobile

tablet

Видеообзор этапа

4 этап — адаптация под мобильные устройства и планшеты в Figma. Удобство со смартфона критично для премиум-аудитории. Мы переработали сетку, сохранив стиль десктопа. Кнопки увеличили для касания, меню адаптировали под тач. Изображения лодок Aluma Storm и Dream остались сочными и четкими на любых экранах. Проверили читаемость текстов. Это гарантирует комфортный просмотр каталога везде. Адаптивность повышает конверсию.

5 этап - отрисовка цветного дизайна всех страниц в Figma

Видеообзор этапа

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

Использовали библиотеку компонентов для кнопок, форм. Все элементы интерфейса унифицированы. Карточки лодок Aluma Storm и Dream оформлены с акцентом на детали. Фото интегрированы гармонично.

Внимание уделили странице «Шоурум». Инфографика выполнена в цветах бренда. Контакты сделали понятными для связи с продажами.

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

Как из прототипа делается дизайн

Премиальные лодки Aluma

6 этап - вёрстка сайта

Видеообзор этапа

6 этап — профессиональная вёрстка сайта. Переносим дизайн из Figma в код с точностью до пикселя. Используем современные технологии для быстрой загрузки. Плавные анимации подчеркивают премиальность лодок Aluma.

Адаптивность проверена на всех устройствах. Код чистый, SEO-оптимизированный. Сайт работает стабильно. Клиент получает продукт, соответствующий статусу бренда. Вёрстка готова к запуску и интеграции.

7 этап - натяжка на cms и запись видео урока

7 этап — натяжка на CMS и обучение. Интегрировали сайт в удобную систему управления. Менеджеры Aluma смогут менять цены, фото лодок Storm и Dream, новости. Админ-панель интуитивна. Записали видео-урок для команды завода. Показали, как добавлять товары и обрабатывать заявки. Это гарантирует автономность. Сайт готов к ведению. Передали доступы. Проект завершен.

Другие проекты

Алюмтек АЗС

НЛСИ

Полипласт

МИК