MA studio

Задача

MA Studio — сайт услуг по подготовке и оформлению автомобилей. На макетах показаны тюнинг интерьера, оригинальное дооснащение и детейлинг, отдельный раздел B2B, новости, портфолио и контакты. В рамках кейса выполнялась адаптивная HTML-верстка по готовым макетам. Подключение к CMS и разработка серверной части в этот объем не входили: в карточке проекта указана только верстка.

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

Что было сделано

По предоставленным макетам был собран комплект страниц и повторяемых интерфейсных блоков:

• общая шапка с разделами «Услуги», B2B, «Новости», «Портфолио», «Контакты» и поиском;
• первый экран с крупным фото или видеофрагментом, который сохраняет нужный кадр и пропорции в рамках композиции;
• главная страница с последовательными блоками тюнинга интерьера, оригинального дооснащения и детейлинга;
• кнопки заказа и перехода к подробному описанию рядом с каждой услугой;
• портфолио с фотографиями выполненных работ, преимуществами компании, логотипами клиентов и картой;
• детальная страница услуги по тюнингу интерьера с вводным экраном, вариантами работ и ценами;
• слайдер примеров интерьеров и форма заявки на консультацию;
• страница отдельного проекта с галереей, текстовым описанием, встроенными видео и блоком других работ;
• контактная страница с двумя отдельными картами проезда — для тюнинг-ателье и автосервиса;
• адаптивное поведение сетки, изображений, навигации, кнопок и форм для разных размеров экрана.

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

Особенности проекта

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

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

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

Результат

MA Studio получил адаптивный комплект HTML-страниц по готовому дизайну: главную, услуги, портфолио, детальную работу, формы и контакты. В код были перенесены характерная темная палитра, медные акценты, диагональная композиция, крупные изображения, галереи и видео. Итогом кейса является готовая верстка для дальнейшей интеграции, а не заявка на разработку сайта «под ключ».

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