Проектирую интерфейсы, которыми пользуются миллионы. 13 лет в дизайне. Веб и мобильные продукты: телеком, личные кабинеты, платежи, корпоративные сайты
Генерирую визуалы, исследую идеи и ускоряю работу над проектами
Дизайн в работающие сайты с адаптивной вёрсткой и анимацией
Продумываю сценарии и создаю интерфейсы, в которых легко разобраться
Макеты, интерактивные прототипы, системные библиотеки компонентов
Чтобы интерфейс ощущался живым.
Маскот становится частью сайта
Оживил фирменного персонажа клиники: он появляется на первом экране, знакомится с посетителем и обращается к нему через реплики. Маскот поддерживает дружелюбный тон сайта и делает знакомство с брендом запоминающимся.
Маскот становится частью сайта
Оживил фирменного персонажа клиники: он появляется на первом экране, знакомится с посетителем и обращается к нему через реплики. Маскот поддерживает дружелюбный тон сайта и делает знакомство с брендом запоминающимся.
Dental Security: от арт-дирекшена до запуска
Роль
Арт-директор, дизайнер, Тильда-разработчик
Объём
Дизайн-система, страницы, адаптив и анимации
Разработка
Тильда и код с помощью нейросетей
Результат
Конверсия за лид 3 700₽ при средней по городу 7 800₽
Самостоятельно разработал сайт стоматологической клиники Dental Security: от визуальной концепции и макетов до адаптивной вёрстки на Тильде. Оживил маскота, настроил анимации и написал код для отдельных блоков с помощью нейросетей.
Показать клинику через людей, подход к лечению и результаты работы. Помочь посетителю разобраться в услугах, познакомиться с командой и записаться на консультацию.
Выстроить путь от знакомства с клиникой до подробностей лечения и формы записи.
Соединить спокойную подачу медицинской информации с живым характером бренда.
Дизайн-система на переменных
Собрал дизайн-систему на переменных Figma: связал цвета и состояния компонентов с общими значениями. Так оформление можно менять централизованно, сохраняя согласованность макетов.
Подготовил компоненты и единые правила типографики, отступов и оформления для страниц клиники.
Общая библиотека помогает собирать новые блоки в одном стиле.
Подарочные сертификаты
Блок сертификатов оформил как отдельную витрину: контрастные карточки, объёмный подарок и изображения процедур. Анимация добавляет движение и выделяет предложение среди информационных разделов.
Подготовил компоненты и единые правила типографики, отступов и оформления для страниц клиники.
Общая библиотека помогает собирать новые блоки в одном стиле.
Страницу профессиональной гигиены выстроил от знакомых пациенту проблем к объяснению процедуры. Крупные изображения и короткие смысловые блоки помогают разобраться в услуге без сплошного медицинского текста.
Карточки симптомов помогают узнать свою ситуацию, а следующие блоки раскрывают подход клиники и ведут к записи на консультацию.
Понятно о медицинских услугах
Разделил информацию на последовательные шаги: с какой проблемой обратиться, как проходит лечение и что входит в услугу. Иллюстрации поддерживают объяснение и делают сложные темы нагляднее.
Чередование светлых и тёмных блоков отделяет темы и задаёт ритм длинной странице.
Ключевые действия доступны по ходу знакомства с услугой.
Технологии в движении
На странице отбеливания использовал анимацию оборудования и последовательное появление контента. Движение помогает раскрыть технологию через изображение, заголовок и короткое объяснение.
Собрал сцену на Тильде и настроил поведение элементов при просмотре страницы.
Анимация поддерживает содержание и направляет внимание на ключевой объект.
Для страницы виниров выбрал тёмный фон и крупные портреты. В центре внимания — улыбки людей, а типографика и контраст выстраивают иерархию вокруг результата работы врача.
Информацию о винирах, работах врача и плане лечения разделил на самостоятельные блоки. Страница последовательно знакомит с услугой и предлагает обсудить свой случай на консультации.
Этапы процедуры в одной сцене
Собрал этапы ухода и отбеливания в анимированную схему. Иконки, подписи и связующие линии последовательно складываются в общую композицию и показывают, из чего состоит подход клиники.
Настроил последовательность появления элементов, чтобы схему можно было прочитать по шагам.
Для нестандартного поведения блоков написал код с помощью нейросетей и встроил его в Тильду.
Для страницы имплантации сделал наглядные блоки об анатомии и вариантах лечения. Схемы и крупные изображения помогают показать различия, которые сложно объяснить одними терминами.
Сопоставил ситуации и подходы к лечению в визуальных композициях. Короткие подписи дополняют иллюстрации, а подробности раскрываются по мере просмотра страницы.
Блоки на все случаи жизни
Собрал набор блоков для услуг, врачей, отзывов, цен и записи. Общие правила типографики и оформления объединяют страницы, а разные композиции позволяют подать каждую тему по-своему.
Мобильная версия
Адаптировал страницы под телефон: перестроил композиции, настроил типографику и сохранил доступ к записи. Проверил, как длинные страницы, формы и анимации работают на небольшом экране
Мобильная версия
Адаптировал страницы под телефон: перестроил композиции, настроил типографику и сохранил доступ к записи. Проверил, как длинные страницы, формы и анимации работают на небольшом экране
Этапы процедуры в одной сцене
Собрал этапы ухода и отбеливания в анимированную схему. Иконки, подписи и связующие линии последовательно складываются в общую композицию и показывают, из чего состоит подход клиники.
Настроил последовательность появления элементов, чтобы схему можно было прочитать по шагам.
Для нестандартного поведения блоков написал код с помощью нейросетей и встроил его в Тильду.
Мобильная версия
Адаптировал страницы под телефон: перестроил композиции, настроил типографику и сохранил доступ к записи. Проверил, как длинные страницы, формы и анимации работают на небольшом экране
Этапы процедуры в одной сцене
Собрал этапы ухода и отбеливания в анимированную схему. Иконки, подписи и связующие линии последовательно складываются в общую композицию и показывают, из чего состоит подход клиники.
Настроил последовательность появления элементов, чтобы схему можно было прочитать по шагам.
Для нестандартного поведения блоков написал код с помощью нейросетей и встроил его в Тильду.
Результат
Адаптировал страницы под телефон: перестроил композиции, настроил типографику и сохранил доступ к записи. Проверил, как длинные страницы, формы и анимации работают на небольшом экране