MA Studio — адаптивная верстка сайта по макетам

Задача

MA Studio — сайт услуг по подготовке и оформлению автомобилей. На макетах показаны тюнинг интерьера, оригинальное дооснащение и детейлинг, отдельный раздел B2B, новости, портфолио и контакты. Я выполнил адаптивную HTML-верстку по готовым макетам и подготовил страницы к последующей интеграции.

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

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

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

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

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

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

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

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

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

Что посмотреть на экранах

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

Результат

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

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