3Z («Три-З») — крупнейшая федеральная сеть клиник заботы о зрении с 33-мя диагностическими центрами в 7 регионах России и 4-мя хирургическими клиниками в Краснодаре, Ессентуках, Перми и Москве. Здесь пациенты избавляются от близорукости, дальнозоркости, атстигматизма и излечивают катаракту, глаукому, кератоконус с другими болезнями.

Клиники «Три-З славятся тем, что здесь вы получите по-европейски комфортный и грамотный подход к лечению и диагностике глазных заболеваний: без боли, очередей и долгой реабилитации. И это не просто слова: в клиниках установлено почти космическое оборудование мировых марок, а врачи отличаются не только высокой квалификацией и большим опытом, но и внимательным отношением к пациентам.

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

Каким вы видите сайт офтальмологической клиники? Дайте угадаем: в голубых тонах, с фотографиями оборудования и процесса оперирования с врачами в масках?

Одной из задач проекта был отказ от традиционной гаммы и показа хирургических инструментов — хотелось не запугать пациентов (которые и без того могут быть обеспокоены неприятными симптомами), а рассказать просто и открыто о клинике и её услугах. Поэтому на прототипе мы сделали акцент на фирменных формах из брендбука, простых описаниях процедур и преимуществах клиники:

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

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

Чтобы всё работало так, как задумано, дизайнеру пришлось правильно отрисовать все векторные объекты — у всех должно было быть равное количество точек на кривых Безье. Для итоговой версии на сайте у каждой фигуры таких точек 26, чтобы переходы работали максимально плавно.

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

Заказчику понравились обе версии, и идею с окошком решили реализовать на внутренних страницах, рассказывающих об услугах:

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

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

Заказчик боялся перегрузить главную страницу анимациями, поэтому где-то фигурки шевелятся при наведении, а где-то нет.

В проекте очень много SVG-графики, поэтому для автоматизации мы предусмотрели контроллер. Многие формы состоят из нескольких слоёв, и контроллер упорядочивает процесс их создания.

В слайдере промо-блока пошли на хитрость, чтобы достичь плавности переходов форм. При смене подгружаются две градиентные подложки для фигур: предыдущая с настройками прозрачности (прозрачность увеличивается вплоть до полного исчезновения объекта) и новая, которая накладывается поверх неё. Анимирует превращение фигуры в фигуру сторонний плагин.

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

Сайт сети клиник заботы о зрении идеально дополнила версия для слабовидящих (которая вообще-то должна быть на каждом сайте) — мы предложили пользователям с проблемами зрения несколько вариантов визуала: фон можно сделать голубым, оставить классически белым или дополнить белый градиентными кнопками.

На 404-й странице посетителей ждёт целая игра: среди импровизированной таблицы для проверки зрения нужно ловить букву Z. Там же можно скачать и распечатать такую таблицу для контроля своей зоркости:)

Из приятных мелочей на сайте — меняющиеся подложки у лого в футере, градиентный поиск и перерисованная кнопочка jivosite в стилистике проекта (да, так можно было, но не у каждого онлайн-чата есть подобный функционал).

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