BrikoLab

Проблема

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

Чтоясделал

01

Что это заменило

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

02

Страница открывается материей, а не заголовком

Сорок пять тысяч частиц дрейфуют, дышат и расступаются вокруг курсора: сырьё до того, как стать изделием. Три силы действуют на каждую точку, все считаются в вершинном шейдере, всё - один draw call. Первый скролл схлопывает канвас навсегда: эффект представляет страницу один раз и уходит с дороги.

03

Семь стадий - хребет страницы

Техническое предложение, эскизный проект, технический проект, рабочий прототип, верификация, испытания и госрегистрация, выход на рынок. Это самое сильное, что есть у компании, и жило оно только в голове основателя. На странице это лестница, спускающаяся вправо и собирающая себя каскадом от 01 до 07 при первом скролле, с контурными цифрами, взятыми из инженерного чертежа, а не из декора.

04

Ничего не спрятано за кликом

Каждая карточка услуги держит описание открытым: без разворота, без многоточия, без второго экрана до текста, ради которого пришли. Навести на карточку - награда, а не требование. Фотография проявляется снизу, в цвете и обесцвеченная в CSS, а карточка темнеет, чтобы набор оставался читаемым поверх.

05

Второе поле частиц, и причина для него

Блок о компании раньше нёс бейдж «двадцать плюс» и ряд обещаний. Теперь он несёт простые предложения об основателях и работе, и спираль из тринадцати тысяч точек, собирающую себя рядом. На белом она использует normal-блендинг вместо аддитивного, потому что аддитивный свет на белом невидим по определению.

06

Шесть областей компетенций, один визуальный вес

Фотографии обесцвечены в CSS, чтобы ни одна из шести не кричала громче остальных пяти. Тот же трюк, что у карточек, и та же причина: у страницы об инженерии не должно быть иерархии, которую задала самая яркая стоковая фотография.

07

Форма, которая знает, что собирает

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

Подкапотом