Первый дизайн сайта клиники ATMA не согласовали. И второй тоже.

ATMA — многопрофильная клиника доказательной медицины в Чебоксарах.

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

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

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

Показываем все четыре версии и объясняем, как менялись решения после презентаций.

Начали не с дизайна

Из референсов, которые прислал клиент, для работы пригодились только два. Остальные могли выглядеть современно, но услуги, врачи, симптомы, заболевания и статьи в них не были связаны в единую структуру.

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

Сначала собрали разделы и переходы между ними. Потом начали рисовать.

Красивый первый экран, к которому невозможно пристроить сто страниц услуг — это не система, а плакат.

Дизайн собирали из самой клиники

Перед началом работы мы приехали в ATMA и посмотрели, как клиника устроена изнутри.

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

Но тяжелой клиника не выглядит. Стены, потолки и пол в основном светлые, а темные элементы работают акцентами.

По ощущению интерьер напоминает медицинскую библиотеку или аптекарскую лавку XX века, но без музейной тяжести. На этом образе и строили дизайн.

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

С интерьером легко переборщить

Самый простой путь — взять бордовый со стен и залить им половину сайта.

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

Арка стала главным мотивом. Ее использовали на первом экране и в отдельных элементах страницы, но не повторяли в каждом блоке.

Первая версия: интерьер, команда и понятная структура

На первом экране разместили команду клиники. Человек сразу видит не медицинское оборудование и не стокового врача, а людей, к которым собирается прийти.

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

Услуги поставили сразу после первого экрана

Главная не должна заменять посадочные страницы, но должна быстро вести к ним. Поэтому сразу после первого экрана показали основные направления и ссылки на конкретные услуги.

По запросу "УЗИ сосудов Чебоксары" человек должен попадать не на главную, а сразу на страницу этой услуги.

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

Врачей показали внутри клиники

На сайтах клиник врачи часто выглядят одинаково: фотография на белом фоне, имя, стаж и кнопка "Записаться".

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

На главной показали только часть врачей. Полный список специалистов будет на отдельной странице.

Кнопку "Записаться" не дублировали в каждой карточке. Запись перенесли в профиль специалиста, где рядом собраны опыт, услуги, цены и расписание.

Дальше — о клинике, адрес и запись

После услуг и врачей — короткий рассказ о клинике, видео, обращение представителя ATMA и рейтинги на внешних площадках.

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

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

Темную заливку оставили только для подвала. Он визуально завершает страницу и собирает в одном месте контакты, меню, документы, способы оплаты, медицинские предупреждения и дополнительные ссылки.

Что показали клиенту

К презентации собрали главную и заложили структуру для будущих страниц услуг, врачей и статей. Формы и цвета пришли из пространства АТМА, а порядок блоков — из логики сайта.

Вторая версия: макет стал темнее

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

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

Отдельные решения еще были связаны с интерьером ATMA, но на всей странице бордовый стал главным. Светлая и спокойная клиника выглядела тяжелее, чем в жизни.

Клиенту версия тоже показалась слишком темной. Это направление закрыли.

Потом появился референс другой клиники

Клиент прислал сайт другой клиники из Казани с формулировкой "хотим такой же".

С референсами часто так. Пока смотришь на готовую страницу, направление кажется понятным. Но за словами "такой же" могут стоять цвета, фотографии, расположение блоков, типографика или просто общее ощущение.

Копировать чужой сайт не стали. Мы попробовали понять, что именно могло понравиться клиенту, и собрать на этой основе свою версию ATMA.

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

Так появилась идея соединить сайт клиники с журнальной версткой.

Третья версия: проверили журнальную гипотезу

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

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

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

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

Карточки врачей сохранили понятную сетку. Здесь экспериментировать не стали — человеку по-прежнему нужно увидеть врача, специальность и перейти к записи.

Журнальная версия не подошла

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

Журнальную версию отложили. Следующий макет собирали в более привычной корпоративной логике.

Четвертая версия: до верстки дошел корпоративный минимализм

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

Направления собрали в ровную сетку карточек. Дальше поставили рассказ о клинике, преимущества, врачей, видео, обращение руководителя, карту и обычный корпоративный подвал.

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

Направления, врачи, запись и контакты оказались в привычной для посетителя структуре. Клиенту эта версия понравилась, и макет согласовали.

После согласования клиент загрузил готовый макет в ИИ и получил еще один список правок.

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

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

До верстки дошла четвертая версия главной страницы:

• со светлой и спокойной подачей;

• понятной навигацией и заметной записью;

• направлениями, врачами и информацией о клинике в привычной структуре;

• бордовым акцентом и черно-белыми фотографиями;

• возможностью дальше собирать страницы услуг, врачей и статьи.

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

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

Фразы "хотим монохром", "нравятся черно-белые фотографии" и "сделайте как на этом сайте" не складываются в один очевидный дизайн. Какой именно дизайн стоит за такими формулировками, часто становится понятно только на конкретных макетах.

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