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

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

Старту проекта предшествовало обновление фирменного стиля сети — требовался новый дизайн сайта, который бы подчеркнул имидж компании и сформировал лояльное отношение новых посетителей.
Задачи
  1. Обновить дизайн сайта, используя яркий фирменный стиль компании.
  2. Разработать понятную структуру и простую навигацию, учитывая потребности разных целевых групп.
  3. Обязательно предусмотреть адаптивную версию: лёгкую, информативную и не перегруженную элементами.
Аналитика
Каким вы видите сайт офтальмологической клиники? Дайте угадаем: в голубых тонах, с фотографиями оборудования и процесса оперирования с врачами в масках?

Одной из задач проекта был отказ от традиционной гаммы и показа хирургических инструментов — хотелось не запугать пациентов (которые и без того могут быть обеспокоены неприятными симптомами), а рассказать просто и открыто о клинике и её услугах. Поэтому на прототипе мы сделали акцент на фирменных формах из брендбука, простых описаниях процедур и преимуществах клиники:
Дизайн
В брендбуке, который предоставил заказчик, мы нашли подробные описания градиентных карт, стилеобразующих элементов и фирменных цветов. Каждому направлению клиники соответствует своя фигура и свой градиент.
Отталкиваясь от этого, мы создали две версии дизайна. На основной сделали акцент на фигурах, которые по задумке плавно менялись бы при переключении слайдов в промо-блоке. Но для того, чтобы понять, что такое вообще возможно сверстать и реализовать, нам пришлось провести эксперимент:)
Тестовый код для понимания, как будут вести себя формы из брендбука на сайте
Чтобы всё работало так, как задумано, дизайнеру пришлось правильно отрисовать все векторные объекты — у всех должно было быть равное количество точек на кривых Безье. Для итоговой версии на сайте у каждой фигуры таких точек 26, чтобы переходы работали максимально плавно.
Как работает фишка в итоге
На альтернативной версии в промо-блоке мы предложили размытый фон и маленькое окошко в форме одной из ключевых фигур, как символ окна в мир зоркого зрения: сквозь него виднеется чёткое фото на подложке.
Заказчику понравились обе версии, и идею с окошком решили реализовать на внутренних страницах, рассказывающих об услугах:
У клиента была изначально очень хорошая концепция и высокие цели по обновлению дизайна всех диагностических центров своей сети, но на это требуется время. Были опасения, что обновлённый не-синий дизайн клиенты из Краснодара, привыкшие к классической синей гамме, не узнают и не смогут идентифицировать со знакомым им брендом.

Анастасия
Руководитель проекта
Мы долго думали, как сгладить этот переход по мере обновления обустройства клиник, и в итоге предложили переходную версию дизайна: она всё ещё со старым лого и доминирующим синим, но уже с лёгкими цветными градиентами и формами из нового фирменного стиля. Заказчик может сам переключиться между версиями, когда сочтёт нужным.
Среди задач проекта было важно создать атмосферу доверия — для этого на главной и внутри разделов появляются фотографии докторов клиник, а также указывается их специализация и стаж работы.
Очень трудоёмким оказался процесс подготовки фотографий: на каждом из 100+ фото требовалось избавиться от фона, чтобы накладывать изображения на цветные подложки — на это ушло несколько дней. Самое обидное, что в процессе, когда я уже обработала около 30 фотографий, файл с ними "полетел" без возможности восстановления — пришлось всё переделывать.

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

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

Андрей
Разработчик
Поскольку клиники представлены в нескольких городах, на сайте мы использовали принцип многогородовости — так, например, в разделе цен подгружаются именно те расценки, которые соответствуют выбранному городу.
Цены в Москве и Краснодаре
Сайт сети клиник заботы о зрении идеально дополнила версия для слабовидящих (которая вообще-то должна быть на каждом сайте) — мы предложили пользователям с проблемами зрения несколько вариантов визуала: фон можно сделать голубым, оставить классически белым или дополнить белый градиентными кнопками.
На 404-й странице посетителей ждёт целая игра: среди импровизированной таблицы для проверки зрения нужно ловить букву Z. Там же можно скачать и распечатать такую таблицу для контроля своей зоркости:)
Из приятных мелочей на сайте — меняющиеся подложки у лого в футере, градиентный поиск и перерисованная кнопочка jivosite в стилистике проекта (да, так можно было, но не у каждого онлайн-чата есть подобный функционал).
Важной задачей проекта был адаптив: хотелось сохранить фишки главной, но при этом блоки должны быть крупными и удобными для кликов:
Проект получился классный, и честно, он вообще один из самых моих любимых. Интересно было находить решения для задач. И хотя деплой проекта был в начале декабря 2017-го, он постоянно развивается: всегда есть задачи для техподдержки. В планах интеграция с ERP-системой, чтобы пользователи легко могли записываться к конкретному специалисту через форму на сайте.

Анастасия
Руководитель проекта
Готовый проект