Дизайн-фундамент
Язык, на котором говорит платформа.
Эталон визуальной системы EDU_ до того, как мы возьмёмся за конкретные экраны. Эстетика Apple: воздух, спокойная типографика, один акцентный цвет, светлая и тёмная темы. Всё, что будет нарисовано дальше, наследует этот язык.
Мои допущения
— Один интерфейс должен быть одинаково понятен и репетитору-одиночке, и команде школы. Делаю ставку на чистоту и минимум одновременно видимых элементов.
— Desktop и mobile делят один визуальный язык: те же токены, та же типографика, перекомпонованная сетка.
— Акцентный синий используется экономно: только активные действия и состояния. Остальное — графит и оттенки серого.
01 — Цвет
Две темы, одна логика
02 — Типографика
SF Pro · системный sans-serif
Display · 64/680
Запусти свою школу
Title · 34/660
Конструктор курса
Headline · 21/600
Урок 3. Первая продажа
Body · 17/400
Основной текст интерфейса. Спокойный, читаемый, без напряжения для глаз — и в светлой, и в тёмной теме.
Caption · 13/500
Вспомогательные подписи
03 — Компоненты
Базовый набор
Кнопки
Создать курс
Отмена
Подробнее ›
Поле ввода · переключатель
Название курса…
Карточка курса
обложка курса
Дизайн с нуля
12 уроков · 3 ч
Прогресс · бейджи · тоггл
Опубликован
Черновик
Новый
04 — Семантика статусов
Успех, внимание, опасность
Каждый статус — это пара «текст + подложка», читаемая в обеих темах. Жёлтый предупреждает (черновик, дедлайн, лимит), красный требует особого внимания (ошибка, удаление, просрочка).
Бейджи статусов
Опубликован
На модерации
Оплата просрочена
Черновик
Алерт-баннеры
!
Курс почти заполнен
Свободно 3 места из 50. Повысьте цену или добавьте поток.
!
Не подключён приём оплаты
Пока вы не сможете продавать курс. Подключите кассу в настройках.
Действия внимания
Удалить курс
Отменить поток
Снять с продажи
Состояния полей
−490
Цена не может быть отрицательной
edu
Слишком короткий адрес школы
Что дальше
Фундамент готов и переключается между темами. Дальше иду строго по твоим описаниям экранов — по одному. Скажи, с какого начинаем (кабинет автора, конструктор, кабинет ученика, лендинг, маркетплейс или мобайл).