Контекст и задача
«Северный» — жилой комплекс комфорт-класса в Авиастроительном районе Казани. Для проекта был подготовлен промосайт, который знакомит потенциального покупателя с концепцией дома, расположением, благоустройством, вариантами отделки и доступными планировками. Помимо презентационной части, на сайте предусмотрен отдельный интерфейс подбора квартир. Пользователь может перейти от знакомства с проектом к просмотру доступных вариантов и оставить заявку менеджеру. В рамках проекта требовалось перенести дизайн-макеты в работающую адаптивную верстку и сохранить визуальную подачу проекта на экранах разного размера.
Моя роль
На проекте я отвечал за верстку пользовательской части сайта. В мою зону ответственности входили: - верстка страниц и отдельных секций по дизайн-макетам; - адаптация интерфейса под десктопные, планшетные и мобильные экраны; - реализация повторяющихся элементов в виде компонентов; - верстка интерактивных блоков и состояний интерфейса; - работа с крупными изображениями, типографикой и сложными композициями; - проверка соответствия готового интерфейса макетам; - исправление проблем отображения на разных разрешениях.
Презентационная часть
Главная страница построена как последовательный рассказ о жилом комплексе: от общей концепции и расположения до благоустройства, планировок, отделки и специальных предложений. При верстке важно было сохранить визуальную иерархию длинной страницы. Крупные изображения, текстовые блоки, карточки преимуществ и навигационные элементы должны были восприниматься как единая система, а не как набор независимых секций. Отдельного внимания потребовали блоки с нестандартной композицией, крупной типографикой, галереями, схемами и визуальным разделением информации по секциям жилого комплекса.
Интерфейс подбора квартир
Помимо основной страницы, была сверстана отдельная страница с доступными квартирами. Интерфейс предусматривает фильтрацию предложений по нескольким параметрам: - секция дома; - количество комнат; - площадь; - стоимость; - этаж; - тип отделки; - дополнительные характеристики. Также в интерфейсе предусмотрены сортировка, очистка фильтров, отображение количества выбранных параметров и состояние, когда подходящие помещения не найдены. Задача верстки заключалась не только в размещении элементов, но и в сохранении понятной структуры фильтра на разных устройствах. На мобильных экранах большое количество параметров должно оставаться доступным, не перегружая основную область каталога.
Адаптивная версия
Десктопная версия использует крупные изображения, свободную композицию и нестандартное расположение контента. При переходе к мобильному формату эти блоки требовалось перестроить в последовательный вертикальный интерфейс. Для разных разрешений были адаптированы: - навигация и меню; - заголовки и длинные текстовые блоки; - галереи и изображения; - карточки квартир и преимуществ; - фильтры и элементы управления; - формы обратной связи; - схемы и информационные блоки. При этом сохранялись основные визуальные акценты и логика движения пользователя по странице.
Результат
Дизайн-макеты были преобразованы в адаптивную frontend-часть сайта жилого комплекса. Реализована верстка презентационной страницы, интерфейса подбора квартир, форм заявок и связанных информационных разделов. Сайт корректно перестраивается под разные размеры экранов и сохраняет визуальный стиль проекта на десктопных и мобильных устройствах.
