До змісту
Tvorum.
КонцептСтоматологія2026

Dent Atelier — концепт сайту для стоматології

Сайт-візитка для преміальної клініки в Києві з ідеєю «стоматологічного ательє»: спокійна розкіш, запис до лікаря просто з першого екрана і калькулятор, який знімає головне питання — «скільки це коштуватиме».

Це концепт, а не клієнтський проєктКонцепт-проєкт студії: демонстрація дизайну та функціоналу для ніші. Так ми бачимо сильний сайт для стоматології: структура, дизайн, тексти й функціонал. Замовте — і ваш сайт стане наступним кейсом.

Dent Atelier — концепт сайту для стоматології — головний екран
Ніша
Стоматологія
Тип сайту
Сайт-візитка
Рік
2026
Формат
Концепт студії

01 / Задача

Яку задачу вирішує сайт

Пацієнт преміальної стоматології обирає не ціну, а довіру. Він порівнює 3–5 клінік, боїться болю й «сюрпризів» у рахунку і хоче зрозуміти, до якого лікаря потрапить. Типовий сайт клініки відповідає на це стоковими фото, прайсом без контексту і формою «залиште телефон».

Сайт мав працювати на три бізнес-цілі:

  • записи без дзвінка — пацієнт сам обирає послугу, лікаря, день і вільний час, а адміністратор лише підтверджує;
  • прогрів дорогих послуг — імплантація й вініри коштують десятки тисяч гривень, тож людина має побачити структуру ціни ще до консультації;
  • зняття страхів — біль, непрозорі ціни, «поміняємо все одразу». Кожен блок має відповідати на одне з цих заперечень.

02 / Рішення

Дизайн і UX-рішення

Ідея — «ательє»: клініка, де усмішку «шиють» на замовлення. Звідси метафори кравецької справи: примірка перед роботою, сантиметрова стрічка як індикатор прокрутки, гарантії у вигляді бирок, «креслення» обладнання. Арка — головний мотив: архітектурна арка повторює зубну дугу й обрамлює фото кабінету, лікарів і зону «до/після».

Палітра й типографіка. Молочний, шавлієвий, глибокий лісовий і тепле дерево — спокій замість стерильного білого. Cormorant Garamond дає редакційну елегантність заголовкам, Manrope — чіткість цифрам і формам.

Запис — на першому екрані. Віджет «послуга → лікар → дата → час → контакти» з підказками: лікарі фільтруються за послугою, неділі й зайняті слоти недоступні, перед відправленням перевіряються ім’я, телефон (маска +380) і згода. Кожен рядок прайсу та картка лікаря відкривають запис із уже вибраними полями. На мобільному форма стає нижньою шторкою, а липка кнопка запису завжди під пальцем.

Калькулятор імплантації — інтерактивна SVG-схема зубів за FDI: пацієнт позначає конкретні зуби, обирає систему імпланта, коронку й додаткові процедури і бачить розкладку суми та платіж у розстрочку. Для майже повної щелепи сайт сам підказує All-on-4.

Довіра без вигадок: замість відгуків — протокол безболісного лікування, гарантії з термінами, «примірка» усмішки до роботи та лікарі з власними цитатами.

03 / Функціонал

Що є на сайті

  • Онлайн-запис у 4 кроки з календарем вільних слотів, валідацією та підсумком
  • Калькулятор імплантації: вибір зубів на SVG-схемі, тип імпланта, коронка, опції
  • Розстрочка та розкладка вартості, що оновлюються в реальному часі
  • Слайдер «до/після» з перетягуванням і керуванням із клавіатури
  • Прайс за категоріями з кнопкою запису на конкретну послугу
  • Лікарі з AI-портретами та записом до обраного фахівця
  • Анімовані креслення технологій: 3D-сканер, мікроскоп, КТ, лабораторія
  • Протокол безболісного лікування, гарантії-бирки та FAQ
  • Стилізована SVG-мапа проїзду та форма зворотного дзвінка
  • Адаптив від 390 px: нижня шторка запису, бургер-меню, липка кнопка

04 / Екрани

Як сайт виглядає на компʼютері й телефоні

Dent Atelier — концепт сайту для стоматології — головна сторінка повністю
Головна сторінка повністю — гортайте всередині рамки
Dent Atelier — концепт сайту для стоматології — мобільна версія
Мобільна версія

Технології

Стек

Технології підбираємо під задачу: швидке завантаження, зручне редагування контенту та інтеграції з вашими сервісами.

  • HTML5
  • CSS Grid/Flex
  • Vanilla JS
  • Покроковий онлайн-запис із валідацією
  • Калькулятор імплантації на SVG-схемі зубів
  • Слайдер «до/після» (pointer events + клавіатура)
  • Анімовані SVG-креслення
  • IntersectionObserver-анімації
  • Готовий до інтеграції з CMS

Палітра

Кольори концепту

  • Колір #f3eee5
  • Колір #8e9c80
  • Колір #27312a
  • Колір #a9744c
  • Колір #e8dfd0

Портфоліо

Інші роботи

Усі роботи

0 ₴ · 24h

Хочете такий самий — але під ваш бізнес?

Залиште контакт — за 24 години покажемо безкоштовний прототип головної сторінки: у стилі цього концепту або в зовсім іншому.

  • Прототип за 24 години — безкоштовно
  • Фіксована ціна, без «доплат» в процесі
  • Запуск від 5 днів
  • Гарантія та підтримка після здачі
Де відповісти?

Без спаму. Натискаючи кнопку, ви погоджуєтесь з політикою конфіденційності.