Концепция главной страницы
и карта доработок
Мы перевели ваши замечания в конкретные решения: что, где и как меняем — и показали результат на первом экране. Это не очередная версия сайта с точечными правками, а концепция: единая структура, единый интерфейс и единая визуальная система, которые затем применяются ко всем страницам.
1. Что и где меняем (ваши замечания → конкретные решения)
| Замечание | Где | Что делаем |
|---|---|---|
| Теряется главный посыл, нет визуального центра | Первый экран | Один заголовок + одна строка пояснения + одна главная кнопка + 3 тихие цифры доверия. Всё остальное — ниже по странице. |
| Несколько CTA конкурируют за внимание | Вся страница | Один primary-CTA «Записаться» на странице; «Позвонить», WhatsApp и прочее — вторичные/текстовые, визуально тише. |
| Интерфейс несистемный | Кнопки, карточки, формы | Единые компоненты: одна кнопка (3 вида), одна карточка, один радиус, одна тень, одинаковые состояния hover/focus/active — на всём сайте. |
| Нет типографической системы | Весь текст | Одна шкала: H1 / H2 / H3 / основной / подпись, высота строки 1.5–1.6, ширина строки ≤ ~70 символов — одинаково везде. |
| Структура нелогична | Порядок блоков | Чёткая иерархия: кто мы → направления → доверие (врачи, опыт) → цены → отзывы/вопросы → запись. |
| Перегружено, не хватает «воздуха» | Отступы, фон | Больше свободного пространства, светлый фон, меньше конкурирующих акцентов; акцентный цвет — только для главного. |
| Версия для слабовидящих — формальная | Доступность | Реальные инструменты: размер шрифта, контраст, интервалы, отключение второстепенной графики, работа с клавиатуры, сохранение настроек между страницами. Плюс удобство уже в обычной версии (крупный шрифт, контраст, большие кнопки). |
2. Структура главной — по приоритету
Пользователь должен понять суть, просто пролистав страницу, даже не вчитываясь.
- Кто мы и как записатьсяПервый экран: специализация, главная кнопка «Записаться», телефон.
- НаправленияДиагностика, лазерная коррекция, катаракта, глаукома и сетчатка, детская офтальмология, оптика — единообразными карточками.
- ДовериеО центре и основателе, опыт в цифрах, врачи.
- ЦеныПонятный прайс по направлениям, стоимость известна до начала.
- ДополнительноОтзывы, частые вопросы, оборудование — ниже, спокойным весом.
- ЗаписьФорма записи и контакты в конце; плюс постоянная кнопка записи в шапке.
3. Единая дизайн-система
Цвет — функционально, не для украшения
Правило: на экране одновременно — только один элемент воспринимается как главный. Главная кнопка всегда отличается от второстепенной.
Типографика — одна шкала на весь сайт
Кнопки — одни правила и состояния
Primary (главное действие) · Secondary (второстепенное) · Текстовая ссылка. У каждой — одинаковые состояния наведения, фокуса и нажатия.
Карточки — один тип
Доступность — базовая характеристика, а не кнопка
Сайт удобен для людей со сниженным зрением уже в обычной версии: крупный шрифт, высокий контраст текста и фона, большие заметные кнопки, видимый активный элемент, работа с клавиатуры, корректные описания изображений и разметка заголовков, формы с понятными сообщениями об ошибках, сохранение удобства при увеличении масштаба.
4. Первый экран — как это выглядит
Светлый, спокойный, с ясной иерархией: один заголовок, одна главная кнопка, тихие цифры доверия. Без конкурирующих акцентов.
Слева — компьютер, справа — телефон. Мобильная версия проектируется отдельно, а не сжимается из десктопа: крупный текст, большая кнопка «Записаться» и телефон доступны сразу.
5. Критерии приёмки
По этому списку «принимаем / не принимаем» становится проверяемым, а не вопросом вкуса.
- На первом экране — один понятный посыл и одна главная кнопка.
- На каждом экране только один элемент читается как главный; primary-CTA отличается от второстепенных.
- Кнопки, карточки, формы, отступы — из единого набора на всех страницах.
- Единая шкала шрифтов; основной текст читается без напряжения; строки не на всю ширину экрана.
- Порядок блоков соответствует иерархии (кто мы → направления → доверие → цены → доп. → запись).
- Записаться / позвонить / написать — в 1–2 действия, в т.ч. на телефоне.
- Доступность WCAG 2.1 AA; режим для слабовидящих с реальными инструментами и сохранением настроек.
- Нет горизонтальной прокрутки и «сжатого десктопа» на телефоне.
6. Как двигаемся дальше
- Согласуем эту концепциюВы подтверждаете направление, структуру и правила (или даёте правки по ним).
- Собираем главную целикомПолная главная строго по этой системе + проверка по критериям приёмки.
- Остальные страницыТем же языком и компонентами — услуги, врачи, цены, о центре, контакты.
- КонтентАктуальные тексты, цены, фото врачей, оборудования — по мере готовности с вашей стороны.