В этом кейсе расскажу о проекте для компании «Рубеж» — производителя систем ограждений.
Меня зовут Глеб Говядинский, я дизайнер и основатель студии unova. Мы делаем сайты на Тильде с акцентом на эмоциональный дизайн и интерактивные 3D анимации.
Компания «Рубеж» обратилась с задачей обновить корпоративный сайт. Старый ресурс имел устаревший дизайн и запутанную структуру, что осложняло поиск информации и мешало восприятию. Новый сайт должен был быть современным, аккуратным и удобным.
При этом клиент отметил, что основная аудитория — люди старше сорока лет. Для них дизайн важно сделать более сдержанным и сервисным, без избыточных анимаций и отвлекающих деталей.
Прототип и структура
Работу начали с проектирования. На первом этапе определили, какие экраны будут на сайте, в какой последовательности и какое примерное содержание будет в каждом блоке. Для визуализации — отрисовали прототип и написали черновые тексты.
Итоговая структура включила в себя:
- Hero-блок c позиционированием
- Блок продукции с карточками
- Блок о компании
- Перебивка с формой обратной связи
- Текстовый раздел про доставку и монтаж
- Реализованные кейсы
- Футер с контактами
Прототип главной страницы
Мудборд
Перед отрисовкой дизайна собрали мудборд. На звонке с клиентом посмотрели собранные референсы. Обсудили подход к визуальной подаче — какие решения, шрифты и цветовая гамма подходят для проекта.
Дизайн-концепция
В качестве цветовой палитры использовали светлую тему с темно-зелеными акцентами. Этот цвет максимально близок к тематике, так как используется в самой продукции клиента.
Анимация дизайн-концепции
В композиции применили бенто-сетки, что позволило аккуратно упорядочить элементы и создать удобный ритм для восприятия.
Большую роль в подаче сыграли фотографии продукции — они заняли заметное место в макете, усилили подачу и визуализировали продукт клиента.
Для преимуществ подобрали абстрактные иконки. Это добавило акценты и создало узловые точки, за которые цепляется взгляд клиента при просмотре блока.
Блок «О компании»
Уделили отдельное внимание мобильным адаптивам. На этапе концепции сразу подготовили макеты для смартфонов, чтобы убедиться, что все решения будут одинаково корректно работать на всех устройствах.
Адаптивы
Альтернативная версия
В процессе дизайна было много идей, которые не вошли основную версию. На основе них сделали альтернативную версию.
Концепция строится на тёмной палитре с акцентами светло-зелёного и голубого цвета. В этой версии также использовали другой шрифт и переработали композицию некоторых блоков. Обе концепции оказались цельными и самостоятельными, но клиент выбрал основную светлую версию как наиболее подходящую его аудитории.
Верстка и реализация
Сайт полностью собрали на Zero блоках. Но это уже база. Этим никого не удивишь. Но в этот раз, верстка была сделана полностью на основе FLEX функционала тильды. Это аналог автолайаутов фигмы. Новый подход значительно ускорил процесс сборки. Верстка получилась более гибкая и лучше адаптируется под различную высоту и ширину экрана.
Для загрузки сайта реализовали кастомный прелоадер — сделали иллюстрацию забора в контурной стилистике, которая с помощью CSS-анимации меняет цвет и выполняет функцию прогресс-бара. Этот же забор использовали на 404-ой
Прелоадер
В верстке применили несколько кастомных модификаторов. Среди них — плавный скролл, слайдер для кейсов и ховер-эффект карточек, при котором изображение увеличивается, а текст меняет цвет.
Ховер карточек
Остальные анимации сделали стандартно, через step by step.
Не обошлось без нейронок
Клиент предоставил фотографии, но не все они подходили для прямого использования. Чтобы улучшить их качество и привести к единому стилю, мы использовали генерацию ChatGPT
Для hero-блока почистили шумы у изображения
Было/стало
Для перебивки попросили нейросеть убрать потертости, ржавчину, лужи под станком и перекрасить цвет
Было/стало
Для кейсов заапскейлили очень мелкое и пережатое изображение
Было/стало
Финальные шаги
На заключительном этапе мы провели тестирование и внесли все необходимые настройки. Были прописаны title и description, настроены теги заголовков, добавлен favicon и подготовлено корректное превью для социальных сетей. Для улучшения SEO мы добавили микроразметку. Все изображения были сжаты и переведены в формат WebP.
Дополнительно мы подготовили страницы политики конфиденциальности и согласия на обработку данных. После этого подключили домен, установили SSL-сертификат, настроили отправку форм заявок на почту клиента и интегрировали Яндекс.Метрику.
Результат
В итоге получился сдержанный и понятный сайт, который соответствует ожиданиям целевой аудитории и при этом выглядит чисто и современно.
Проект был завершён и принят практически без правок. Клиент остался доволен результатом.
Если интересно посмотреть сайт вживую — переходите по ссылке
