ТЗ для заказчика: строгий деловой стиль
Сайт получает строгое деловое оформление. Работа ограничена шрифтами, цветами и формой компонентов. Сценарии, логика и расположение блоков не меняются, поэтому после редизайна всем привычно: и посетителю, и партнёру, и менеджеру.
Пять выводов
- Оформление стало сдержанным. Спокойный фон, тонкие разделительные линии, прямые углы. Скругления уменьшаются с 14 до 2 пикселей, тени и градиенты уходят.
- Типографика сократилась. Было пять шрифтовых семейств, остаётся два: антиква для заголовков и текстов, Inter для интерфейса. В кабинете партнёра и админке антиква не используется вовсе.
- Палитра пока открыта. Пять вариантов главной страницы собраны заранее и лежат рядом. Цвет, шрифтовая пара, плотность и форма компонентов в них разные, решение остаётся за вами.
- Цвет начал означать статус. Успех, предупреждение, ошибка и информация получают собственные цвета с мягкой подложкой и больше не путаются с кнопкой действия.
- Поля ввода стали заметными. Их граница сейчас почти не различима на белом. Новый цвет даёт контраст 3,5 к 1, что соответствует требованиям доступности.
Что меняется по трём направлениям
Шрифты. Два семейства вместо пяти, любое направление укладывается в этот лимит. Inter отвечает за интерфейс, таблицы и формы во всех пяти вариантах. Антиква в заголовках есть в трёх направлениях, в двух всё набрано гротеском. Табличные цифры во всех числах: суммы, проценты, даты, ИНН, номера заявок. Страница станет легче: шесть начертаний вместо девятнадцати.
Цвета. Палитра выбирается из пяти направлений, они ниже. Что остаётся общим для всех: один акцент на экран, нейтральный фон вместо чисто белого, отдельные цвета для статусов «успех», «предупреждение», «ошибка» и «информация». Текстовые пары в каждом варианте проверены по WCAG, минимальный контраст 4,61 к 1 при норме 4,5. Логотип не перерисовывается ни в одном из вариантов.
Формы. Радиус 0 или 2 пикселя вместо нынешних 14, точное значение зависит от направления. Рамка там, где раньше была тень. Заливка акцентом только у главного действия на экране, остальные кнопки контурные. Круглыми остаются только аватары. Обводка фокуса видна при навигации с клавиатуры.
Что остаётся без изменений
- Порядок и расположение блоков, сетка, брейкпоинты.
- Тексты, названия пунктов меню, подписи кнопок, состав форм.
- Маршруты, правила доступа, роли.
- Логика работы: валидация, запросы, серверные функции.
- Фотографии и иллюстрации. Перекрашиваются только иконки, и то автоматически.
- Высота, ширина и отступы компонентов. Допуск 2 пикселя там, где иначе не встаёт новый шрифт.
Объём
15 шаблонов страниц. Под ними около 130 публичных страниц и 21 страница кабинета и админки. Перечень по шаблонам с маршрутами есть в технической версии ТЗ.
Этапы
- Токены: палитра и подключение шрифтов.
- Базовые компоненты: кнопки, поля, карточки, таблицы, модальные окна.
- Навигация: шапка, меню, подвал, боковые панели.
- Публичные шаблоны.
- Кабинет партнёра и админка.
- Сверка и приёмка по чек-листу.
Сроки оцениваются после выбора направления.
Пять направлений оформления
Структура, тексты и порядок блоков во всех примерах одинаковые. Отличаются палитра, шрифтовая пара, плотность, форма компонентов и подача навигации. Данные о компаниях и суммах в макетах вымышлены.
| Направление | Палитра | Что задаёт характер |
|---|---|---|
| 01 Ведомственный | Графит и стальной синий | Радиус 0, только гротеск, плотная сетка, табличная логика |
| 02 Нотариальный | Бутылочный зелёный и холодная бумага | Радиус 2, антиква в заголовках, просторная вёрстка |
| 03 Банковский | Тёмно-синий и латунь | Радиус 2, цифры антиквой, панель условий в первом экране |
| 04 Академический | Марсала и камень | Радиус 0, антиква во всём, узкая колонка, линейки вместо карточек |
| 05 Швейцарский | Чёрный, белый и сигнальный красный | Радиус 0, крупная типографика, тёмная панель формы |
Каждый макет проверен на ширине 390, 768, 1024 и 1440 пикселей. Горизонтальной прокрутки нет, минимальный контраст текста 4,61 к 1 при норме 4,5.
Что нужно подтвердить
- Направление оформления из пяти. От него зависят палитра, шрифтовая пара и радиус. Если ни одно не подходит целиком, шестое можно собрать из понравившихся частей.
- Тёмная тема в объём не входит, сейчас её на сайте нет.
- Обводка фокуса остаётся видимой. Это требование доступности, отказаться от него нельзя.