Сначала задача пациента
Запрос → варианты → врач → стоимость → следующий шаг. Название аппарата не заменяет объяснение.
Основа сайта
Понятная косметология. Цельный интерфейс.
Правила, по которым собираем страницы I-COSMO: спокойная композиция, читаемые тексты, реальные люди и ясные условия визита.
01 · Характер
Спокойно. Понятно. По делу.
Косметология — ядро сайта. Система допускает другие направления, но сейчас их страницы и содержание не разрабатываются.
Честная конкретика
Цена вместе с объёмом и условиями. Возможности процедуры вместе с ограничениями. Никаких вымышленных результатов.
Одна визуальная логика
Общие шрифты, отступы и компоненты. Акцент помогает найти действие; большие поверхности остаются нейтральными.
02 · Логотип
Сохраняем узнаваемость
Используем переданный круглый оригинал. Его исторический оттенок сохраняется; для интерфейса действуют отдельные цветовые роли.
Рабочие правила
- Охранное поле — четверть диаметра круга с каждой стороны.
- В шапке — от 48 px, с отдельной читаемой подписью I-COSMO. Самостоятельный знак — от 64 px; предпочтительно 80 px.
- Фон — белый или нейтральный светлый. Не размещать поверх пёстрой фотографии.
- Сохранять пропорции; не растягивать, не перекрашивать фильтрами, не добавлять тени.
Векторный мастер и варианты для печати потребуют отдельной подготовки. Здесь не выдаём растровый исходник за готовый вектор.
03 · Палитра
Цвет — для действий и ориентиров
Заполненные кнопки имеют белые подписи. #56C2DE используем в небольших иконках и графических акцентах, без больших заливок.
Малый фирменный акцент
#56C2DEОсновное действие
#127D95Наведение
#0D6D83Нажатие
#085E73Недоступно
#617982Вторичное действие
#24353DОсновной текст
#1A303AВспомогательный текст
#52646CОсновной фон
#FFFFFFПодложка
#F5F7F8Разделитель
#DCE3E6Граница поля
#7D909AОшибка
#9A3434Основные сочетания
Белый / #127D95 — 4,78:1. Белый / #24353D — 12,72:1. Основной текст и подписи размещаем на белом или светло-сером.
Чего избегаем
Белого мелкого текста на #56C2DE: контраст 2,07:1. Также не используем цвет как единственное объяснение ошибки или состояния.
04 · Типографика
Manrope. Единая иерархия.
Основной текст — Regular 400, заголовки — Medium 500, управляющие подписи — 600. Гарнитура загружается локально с кириллицей.
H1 · 56 / 36 px
Интерлиньяж 1,12
Понятный план действий
H2 · 40 / 30 px
Интерлиньяж 1,2
Познакомьтесь с врачом до визита
H3 · 26 / 24 px
Интерлиньяж 1,25
Варианты процедур и стоимость этапов
Текст · 18 / 16 px
Интерлиньяж 1,7
После консультации у вас будет письменный план: что можно сделать, в какой последовательности и сколько стоят этапы.
Примечания · от 15 px
Технические подписи · от 12 px
Существенные условия предложения сохраняют читаемый размер. Вопросы FAQ — Medium, без тяжёлого жирного начертания.
Не разрываем цену и валюту: 9 900 ₽. Названия и короткие предлоги связываем по смыслу. Для заголовков — сбалансированные переносы; ручные переносы проверяем на телефоне. Не уменьшаем весь текст ради умещения.
05 · Композиция
Ритм вместо случайных отступов
Контент — до 1200 px. Поля: 40 px на широком экране, 32 px на планшете, 20 px на телефоне. Секции: 88 / 56 px. На мобильном многоколоночные блоки становятся одноколоночными.
123456789101112
4
8
12
16
24
32
40
48
56
64
72
88
8 px
Кнопки и поля
16 px
Карточки и фотографии
Без декора ради декора
Круглая форма — для знака и малых меток; не для каждой плашки.
06 · Действия
Одна задача — один главный акцент
Высота основной кнопки — от 52 px. Подпись называет действие. Вторичная кнопка отличается графитовым фоном. Все активные элементы доступны с клавиатуры.
Попробуйте Tab и Enter. Недоступная кнопка не запускает действие. Контур фокуса видим; состояние наведения не является единственным способом понять доступность действия.
07 · Формы и сообщения
Понятно, что вводить и что произошло
Подписи остаются над полями. Ошибка описана словами и связана с полем. На этой странице данные никуда не отправляются и не сохраняются.
Проверьте номер телефона.
Пример сообщения: проверка завершена. В демонстрации заявка не отправляется.
На рабочем сайте отдельно подключаются получатель заявки, тексты согласий и правила обработки данных. Успешная отправка заявки не равна подтверждённой записи на приём.
08 · Карточки
Содержание определяет компонент
Врач-косметолог
Саакян
Лена Валикоевна
В профиле врача — подготовка и направления работы.
Запрос
Овал лица
Контур стал менее чётким, появились брыли или изменения под подбородком.
Посмотреть варианты ↗Процедура
SMAS-лифтинг Ultraformer III
Возможности, ограничения, ход визита и условия предложения.
9 900 ₽
200 линий в области под нижней челюстью. Условия — на странице.
Открыть страницуКарточка реального случая
Запрос → решение → этапы → оценка
Место для сопоставимых фотографий I-COSMO.
Это схема компонента, не результат лечения.
Это схема компонента, не результат лечения.
Указываем выполненные методы, объём, срок оценки и пояснение врача. Согласие на публикацию обязательно. Не имитируем результат чужими или сгенерированными фотографиями.
09 · Цена и предложение
Цена рядом с составом и условиями
Первый SMAS-визит
SMAS-лифтинг Ultraformer III
До процедуры врач оценит показания и объяснит возможности предлагаемого объёма.
Для первого SMAS-визита в I-COSMO, в том числе после посещения других процедур клиники. При процедуре в день визита консультация включена; без процедуры — 1 450 ₽.
Можно выбрать только предложенный объём при показаниях. Дополнительные зоны и процедуры обсуждаются отдельно и не являются обязательной покупкой.
10 · Навигация и объяснение
Сравнения, цены и ответы
На телефоне широкую таблицу можно прокрутить внутри блока; страницы при этом не получают горизонтальную прокрутку. В примере «Овал лица» сравнение также адаптировано в вертикальные карточки.
| Услуга | Стоимость |
|---|---|
| Консультация косметолога | 1 450 ₽ |
| Предложение SMAS, 200 линий | 9 900 ₽ |
Цены — из согласованных вводных. Перед публикацией пациентских страниц сверяются с прайсом и медицинским менеджером.
Нужно ли заранее выбирать процедуру?
Можно начать со своего запроса. Врач поможет сравнить варианты с учётом состояния тканей и предыдущих процедур.
Что происходит после нажатия кнопки?
На витрине открывается демонстрация. В рабочем сайте действие будет вести к соответствующей услуге или записи.
Кнопка контактов закреплена справа внизу с учётом безопасной области телефона. Она остаётся доступной при прокрутке. Внизу страницы есть запас пространства, чтобы не закрывать содержание.
11 · Фото и графика
Показываем людей и предметы корректно
Портреты — с целой головой, преимущественно 3:4. Изображение аппарата — в режиме contain. Одинаковые условия съёмки для «до/после», без фильтров, меняющих результат.
12 · Применение
Три страницы — одна система
Это содержательные визуальные примеры согласованных текстовых прототипов. Настоящая запись не подключена; недостающие случаи и документы честно обозначены.
Главная
Выбор запроса, план консультации, врачи, методы, предложение, доверие и запись.
Открыть главную ↗Овал лица
Ситуация пациента, различия подходов, сравнение методов, консультация и стоимость.
Открыть страницу ↗SMAS-лифтинг
Предложение, возможности и ограничения, аппарат, врачи, условия и запись.
Открыть SMAS ↗13 · Передача в работу
Правила и исходники рядом
Версия v1 фиксирует основу сайта. Изменение системного цвета, размера или поведения вносится в общие файлы и проверяется на трёх типах страниц.
Файлы системы
- Токены JSON — значения и правила
- tokens.css — переменные и шрифт
- components.css — общие компоненты
- app.js — локальное демоповедение
- Описание и порядок обновления
- Происхождение дополнительных изображений
Граница этой версии
Сначала полностью разрабатываем косметологию. Другие направления получают совместимые родительские разделы позже. Магазин и академия — последующие проекты.
Кейсы, лицензии и документы не подменяются демонстрациями. Версия системы не означает публикацию пациентских страниц или подключение МИС.
Интерактивные образцы
Проверьте систему на страницах
Образец прокручивается внутри рамки. В нём доступны меню, FAQ и демонстрационные формы. Заявки не отправляются.
