Разработка сайта для строительной лаборатории НЛСИ - Веб-студия ARIAL

Разработка сайта для cтроительной испытательной лаборатории

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

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

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

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

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

Категория - корпоративный сайт
Тематика - строительная лаборатория
Сроки разработки - 36 дней
Порталы и информационные сайты.
Сайт - nlsi-lab.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 этап - Прототип 12 внутренних страниц сайта строительной лаборатории

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

4 этап - дизайн 11 внутренних страниц сайта RGB для строительной испытательной лаборатории

5 этап - дизайн мобильной и планшета версии сайта строительной лаборатории

6 этап - верстка корпоративного сайта

7 этап - инструкция по работе в админке Вордпресс сайта nlsi-lab.ru

8 этап - заключительный, общее видео по всем работам

Этапы работ

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

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

Прототипирование стало фундаментом будущего сайта. Для лаборатории важна четкость: инженеру нужно быстро найти стоимость испытаний и сроки. Мы не начали с дизайна, а сначала проработали логику взаимодействия.

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

Особое внимание уделили мобильной версии, так как прорабы часто ищут услуги с телефона. Согласовали структуру с заказчиком, чтобы избежать правок на этапе дизайна. Этот этап позволил утвердить контентные блоки и приоритеты.

Итогом стала технически грамотная схема, гарантирующая высокую конверсию и удобство навигации. Каждый блок работает на заявку, убирая сомнения клиента до знакомства с визуалом.

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

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

Второй этап посвящен детализации услуг. Главной страницы недостаточно для полного раскрытия компетенций. Мы разработали прототипы 12 внутренних страниц. Каждая закрывает конкретный запрос: от испытания бетона до анализа почвы.

Ключевая задача — единство стиля и навигации. Пользователь не должен теряться. На страницах услуг разместили таблицы с ценами, методы ГОСТ и списки оборудования. Отдельно проработали разделы «О компании» и «Лицензии». Это критично для доверия в строительной сфере, где ошибки стоят дорого.

Учли SEO-требования: иерархия заголовков H1-H3 для продвижения. Кнопки целевых действий дублируются в конце каждого экрана. Согласовали структуру с заказчиком, чтобы избежать правок позже. Теперь каждый клик ведет к заявке. Схема четко исключает хаос и обеспечивает логичное повествование. Прототипы гарантируют, что дизайн ляжет на готовую логику, а не будет правиться бесконечно. Это экономит бюджет на дальнейшую разработку.

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

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

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

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

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

#6DAE81

#90C024

#232323

#45654F

#a3a3a3

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

Аа

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

Аа

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

Аа

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

Аа

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

H1 Заголовок

H2 Заголовок

H3 Заголовок

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

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

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

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

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

Особое внимание уделили фотографиям. Заменили стоковые изображения на реальные фото лаборатории, оборудования и специалистов. Это усилило доверие. Первый экран теперь четко транслирует УТП.

Дизайн адаптировали под все устройства. В Figma создали интерактивный прототип для демонстрации анимаций и переходов. Заказчик увидел живой сайт до начала верстки. Это позволило внести правки быстро и без затрат на код.

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

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

mobile

tablet

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

В Figma отрисовали версии для планшета и смартфона. Контент перестраивается в одну колонку, меню сворачивается в бургер. Кнопки увеличили для удобного нажатия пальцем. Таблицы с ценами получили горизонтальный скролл. Шрифты адаптированы для чтения с экрана. RGB-цветопередача проверена на разных матрицах. Сайт одинаково хорошо выглядит на iPhone и Android. Прорабы смогут оформить заявку прямо с объекта.

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

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

После утверждения главной страницы мы отрисовали в Figma 11 внутренних экранов в единой цветовой гамме. Каждая страница услуг получила уникальную структуру. Сохранили навигационные элементы с главной страницы. Пользователь всегда видит контакты и кнопку заявки.

Дизайн внутренних страниц прошёл проверку на контрастность и читаемость. Текстовые блоки разбиты на абзацы с воздушными интервалами. Инфографика упрощает восприятие технических данных.

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

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

строительная лаборатория

6 этап - верстка сайта для строительной испытательной лаборатории

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

Макеты из Figma превратили в чистый код. Использовали HTML5, CSS3 и JavaScript. Задача — соответствие дизайну.

Сайт адаптивен. Корректно отображается в браузерах. Оптимизировали изображения и скрипты. Формы связи подключили к почте.

Анимации воспроизвели без потери производительности. Код структурирован. Провели тесты на валидность. Кроссбраузерность проверена.

Итог — готовый к интеграции с CMS WordPress. Сайт работает быстро, формы активны. Техническая база надежна. Лаборатория получила инструмент к запуску. Верстка проверена. Дизайн ожил в коде.

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

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

Теперь лаборатория полностью автономна в управлении контентом сайта.