Кейс: как мы подошли к созданию сайта стоматологии «Добрый Доктор» – Часть 3. Дизайн, разработка и тестирование Часть 1. Аналитика Часть 2. Мудборды, концепция и прототипы
Настало время рассказать о финальной части нашего кейса для стоматологии «Добрый Доктор». На этом этапе мы уже точно понимали, каким будет сайт, и оставалось лишь воплотить идеи в реальность.
Дизайн: от концепции к финальному решению После утверждения прототипов наша команда начала работать над дизайном всех страниц сайта. Здесь мы активно использовали выбранную ранее стилистику – минимализм с элементами мрамора и золотых акцентов, созданными с помощью нейросети Midjourney.
Но нейросеть – это только начало.
Каждая картинка после генерации нейросетью дорабатывалась в фотошопе руками дизайнеров.
Например, улыбающиеся лица на главной странице выглядели отлично, но некоторые зубы были странной формы. Их пришлось аккуратно дорисовывать вручную. То же самое касалось и других элементов. Кресла, созданные нейросетью, часто получались весьма необычными, и дизайнерам приходилось часами доводить их до идеала. Микроскоп вообще не получался корректным, поэтому мы решили создать его полностью в 3D-редакторе. Даже фирменный зуб с элементами шарфа и штырей был частично создан в Blender, а дополнительные детали уже дорабатывались с помощью нейросети. Благодаря такой тщательной работе все иллюстрации выглядят гармонично и естественно.
Мы разработали дизайн для десктопной версии и адаптировали его для мобильных устройств и планшетов, чтобы сайт был удобным на любых экранах. «Каждая деталь должна работать на удобство пациента.
Мало сделать просто красиво – важно, чтобы человек быстро находил нужную информацию и легко записывался на приём
Эту фразу я часто повторяю на встречах с командой — потому что именно это определяет наш подход в работе над дизайном.
Подготовка дизайна и передача в разработку После завершения дизайна мы подробно документируем всё, что связано с поведением интерфейса: как должны двигаться блоки, какие анимации применяются, какие состояния у элементов при наведении, клике, загрузке. Мы созваниваемся с разработчиками, обсуждаем текущую версию сайта и составляем детальный гайд, где прописываем, как и в каком порядке работают блоки, что зачем идёт, где возникают анимации и взаимодействия. Это позволяет максимально точно передать задуманное. Вся структура, анимационные сценарии и инструкции собраны в Figma — можно посмотреть здесь, чтобы оценить наш подход.
Разработка и тестирование: путь к запуску Разработка сайта началась с вёрстки и интеграции графических элементов и анимаций по заранее составленному гайду. Затем наша команда подключила backend часть, настроила CMS (простая система управления контентом, чтобы администраторы могли легко обновлять цены, услуги и новости) и протестировала все формы записи и взаимодействия.
На этапе тестирования дизайнеры активно включились в процесс, проверяя каждую страницу, элементы интерфейса и их поведение на соответствие гайдам и удобству использования.
Тестирование важно, потому что только дизайнер сразу замечает мельчайшие несоответствия движения и реакций. Мы проверяем сайт именно с точки зрения того, как он должен восприниматься глазами пользователя
После всех проверок и доработок сайт вышел в продакшн — полностью готовый к работе и приёму пациентов.
Итоги ✅ Клиника «Добрый Доктор» получила современный, удобный и запоминающийся сайт, который теперь выделяет её среди конкурентов и привлекает новых пациентов.
Напишите мне — и мы подключимся к вашему проекту на любом этапе: от идеи до запуска. Работаем под ключ, в партнёрстве или точечно — так, как удобно вам. 🚀
