Для сайта строительной компании требовалось разработать отдельную страницу с выполненными проектами. Мы подготовили индивидуальный дизайн, использовали нестандартную геометрическую компоновку и затем сверстали страницу с адаптацией под разные размеры экранов.
Строительство
UI-дизайн
Адаптивная верстка
Показать строительные проекты не как набор одинаковых карточек
Заказчику требовалась отдельная страница портфолио для существующего сайта строительной компании. Её задача была понятной – показать выполненные объекты и дать посетителю возможность визуально оценить характер и разнообразие работ.
При этом клиент хотел уйти от стандартной схемы, где все проекты размещены в одинаковых прямоугольных карточках. Поэтому дизайн строился вокруг более свободной геометрической композиции.
Что нужно было совместить на одной странице
Страница должна оставаться частью существующего сайта
Отдельный дизайн не должен был выглядеть как страница совершенно другого проекта.
Работы должны быть главным визуальным элементом
Для строительного портфолио фотографии объектов важнее декоративных элементов вокруг них.
Композиция без ощущения шаблонного каталога
Расположение блоков намеренно отличается по размерам и позиции.
Макет нужно было превратить в адаптивную веб-страницу
Основой страницы стала геометрическая композиция проектов
Вместо одинакового ритма карточек макет строился на блоках разных размеров. За счёт этого портфолио воспринимается не как таблица или каталог, а как визуальная подборка выполненных объектов.
При этом свобода композиции не означает случайное расположение элементов. Размеры фотографий и свободные участки страницы формируют последовательность просмотра и не позволяют изображениям конкурировать друг с другом.
Для портфолио важнее показать работу, чем рассказывать о ней длинным текстом
Поэтому проект строился вокруг визуального просмотра. Текст выполняет вспомогательную роль, а основное внимание получает сам строительный объект.
Посетитель сразу видит выполненный объект.
Разный размер блоков задаёт последовательность просмотра.
Отдельные фотографии воспринимаются как части одного проекта страницы.
Почему портфолио строительной компании – это не просто фотогалерея
По изображениям посетитель может оценить типы и визуальный уровень выполненных объектов.
Несколько работ на одной странице позволяют быстрее составить общее представление о компании.
Расположение изображений влияет на то, какие работы человек увидит раньше.
Страница должна поддерживать общий стиль компании, а не существовать отдельно от остальных разделов.
После утверждения дизайна макет был сверстан
На этом работа не завершалась. Графический макет требовалось перенести в браузер и сохранить основную композиционную идею при изменении ширины экрана.
Дизайн страницы
Определяется композиция и расположение проектов.
Верстка
Макет превращается в рабочую HTML-страницу.
Адаптация под разные экраны
Композиция должна оставаться понятной при меньшей ширине устройства.
Что подтверждает этот кейс
В кейсе сохранён полный макет выполненной работы.
Страница создавалась не как стандартная сетка одинаковых карточек.
Работа включала не только подготовку изображения макета.
Мы не приписываем странице рост заявок или продаж, поскольку таких измерений в материалах проекта нет.
Почему мы не называем этот проект полноценным сайтом-портфолио
В этой работе разрабатывалась отдельная страница «Портфолио» внутри существующего сайта строительной компании. Это отличается от создания самостоятельного сайта-портфолио со своей главной страницей, каталогом проектов, карточками работ и общей архитектурой.
А если нужен целый сайт-портфолио
В другом кейсе VozniNet показан уже полноценный сайт-портфолио для дизайнера интерьеров – с главной страницей, каталогом проектов и отдельной карточкой работы.
Кейс сайта-портфолио
Дизайн сайта-портфолио для дизайнера интерьеров →
Пример проекта, где портфолио стало уже не отдельной страницей, а основой структуры всего сайта.
Отдельную страницу можно разработать без пересборки всего сайта
Когда существующий сайт в целом устраивает компанию, не всегда требуется полный редизайн. Можно отдельно переработать важный раздел – например, портфолио, каталог, страницу услуги или другую посадочную – и встроить его в действующую структуру.
Частые вопросы
Это полноценный сайт-портфолио?
Нет. В этом проекте разрабатывалась отдельная страница портфолио внутри существующего сайта строительной компании.
Что входило в работу?
По сохранившемуся описанию проекта сначала был разработан дизайн страницы, после чего макет сверстали и адаптировали для отображения на разных устройствах.
Почему изображения расположены не в одинаковой сетке?
Это было частью выбранной дизайн-концепции. Проекты получили разный визуальный вес, чтобы страница не выглядела как стандартный каталог из одинаковых карточек.
Можно ли так же переработать только один раздел существующего сайта?
Да. Если общая структура сайта подходит, отдельную страницу можно проектировать и верстать как самостоятельную задачу, сохраняя связь с существующим стилем.
Нужно показать выполненные проекты лучше, чем это делает обычная галерея?
Можно разработать отдельную страницу под существующий сайт: определить структуру, создать дизайн и подготовить адаптивную верстку без обязательной переделки всего проекта.