Сайт на Тильде для производителя ограждений «Рубеж»

Компания «Рубеж» обратилась с задачей обновить корпоративный сайт. Старый ресурс имел устаревший дизайн и запутанную структуру, что осложняло поиск информации и мешало восприятию. Новый сайт должен был быть современным, аккуратным и удобным.

При этом клиент отметил, что основная аудитория — люди старше сорока лет. Для них дизайн важно сделать более сдержанным и сервисным, без избыточных анимаций и отвлекающих деталей.

Создан сдержанный, современный и удобный корпоративный сайт на Тильде:

· простая структура;

· аккуратный дизайн без лишних эффектов;

· единый стиль визуалов;

· готовность к продвижению (SEO, аналитика);

· сайт был принят заказчиком почти без правок.

Работу начали с проектирования. На первом этапе определили, какие экраны будут на сайте, в какой последовательности и какое примерное содержание будет в каждом блоке. Для визуализации — отрисовали прототип и написали черновые тексты.

Итоговая структура включила в себя:

· Hero-блок c позиционированием

· Блок продукции с карточками

· Блок о компании

· Перебивка с формой обратной связи

· Текстовый раздел про доставку и монтаж

· Реализованные кейсы

· Футер с контактами

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

В качестве цветовой палитры использовали светлую тему с темно-зелеными акцентами. Этот цвет максимально близок к тематике, так как используется в самой продукции клиента.

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

Большую роль в подаче сыграли фотографии продукции — они заняли заметное место в макете, усилили подачу и визуализировали продукт клиента.

Для преимуществ подобрали абстрактные иконки. Это добавило акценты и создало узловые точки, за которые цепляется взгляд клиента при просмотре блока.

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

В процессе дизайна было много идей, которые не вошли основную версию. На основе них сделали альтернативную версию.

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

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

Для загрузки сайта реализовали кастомный прелоадер — сделали иллюстрацию забора в контурной стилистике, которая с помощью CSS-анимации меняет цвет и выполняет функцию прогресс-бара. Этот же забор использовали на 404-ой

Прелоадер:

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

Ховер карточек:

Остальные анимации сделали стандартно, через step by step.

Клиент предоставил фотографии, но не все они подходили для прямого использования. Чтобы улучшить их качество и привести к единому стилю, мы использовали генерацию ChatGPT

Для hero-блока почистили шумы у изображения

Было/стало

Для перебивки попросили нейросеть убрать потертости, ржавчину, лужи под станком и перекрасить цвет

Было/стало

Для кейсов заапскейлили очень мелкое и пережатое изображение

Было/стало

На заключительном этапе мы провели тестирование и внесли все необходимые настройки. Были прописаны title и description, настроены теги заголовков, добавлен favicon и подготовлено корректное превью для социальных сетей. Для улучшения SEO мы добавили микроразметку. Все изображения были сжаты и переведены в формат WebP.

Дополнительно мы подготовили страницы политики конфиденциальности и согласия на обработку данных. После этого подключили домен, установили SSL-сертификат, настроили отправку форм заявок на почту клиента и интегрировали Яндекс.Метрику.

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

Проект был завершён и принят практически без правок. Клиент остался доволен результатом.