Правила, которые связывают главную, курсы, блог и лабораторию в один сайт. Здесь можно посмотреть примеры, понять логику и выбрать, что дорабатывать дальше.
Бумага и графитЧёткая структураАвторский голос
01 / Характер и принципы
Характер и принципы
Учебный сайт с характером авторской мастерской: ясная структура, спокойная бумажная среда и предметные иллюстрации.
Сначала содержание
Заголовок называет тему, описание объясняет пользу, действие говорит, что произойдёт. Иллюстрация помогает понять сюжет секции. Декор не заменяет факты, цифры и результаты.
Единая грамматика, разные сюжеты
Сохраняем палитру, шрифты и ритм. Для урока используем видео, для автора — портрет, для сертификата — документ. Повторять один и тот же коллаж во всех секциях не нужно.
Тактильность без шума
Фактура бумаги, лёгкая печатная зернистость и мягкая тень создают глубину. Текст, кнопки и поля остаются чистыми: текстура не должна мешать чтению.
Понятное взаимодействие
Кнопка выглядит как кнопка, вкладка явно показывает выбор. Наведение дополняет обратную связь; управление остаётся доступным на телефоне и с клавиатуры.
02 / Палитра и роли
Палитра и роли
Цвет выбираем по функции. Один акцент в композиции сильнее нескольких конкурирующих.
Нажми на образец, чтобы скопировать HEX. Базовые цвета взяты из текущего оформления сайта; роли и ограничения закрепляются в этой версии.
03 / Типографика
Типографика
Три гарнитуры выполняют три разные задачи. Иерархию внутри каждой строим размером, насыщенностью и интервалами.
Курсы Fokeev
Дизайн, код и нейросети на практике
Короткие видеоуроки, практические задания и понятные объяснения.
Правило для всего сайта
Короткая надпись над заголовком — зелёная, прописными буквами, с увеличенным межбуквенным интервалом. Шрифт Golos Text, 13 px, насыщенность 650, интервал .11em, отступ до заголовка 16 px. Подчёркивания нет. Сам заголовок — Manrope. Синий акцент в заголовке всегда имеет рисованное подчёркивание; при переносе подчёркивается каждая строка. Описание под заголовком — Golos Text, без рукописной строки. Пишем «Блог Fokeev» с большой F. Правило относится к надписям секций; метаданные карточек, навигация и подписи полей остаются обычным шрифтом.
Manrope · заголовки
Насыщенность 750–800, плотный межстрочный интервал 1.1–1.25. Геометричная форма собирает крупную композицию и делает тему секции заметной.
Golos Text · чтение и интерфейс
Основной текст, навигация и подписи: 400–650, интервал 1.5–1.75. Он рассчитан на читаемую кириллицу. Длинные статьи не набираем жирным шрифтом.
Caveat · заметки в иллюстрациях
Оставляем почерк для авторских пометок внутри коллажей. В сертификате используется настоящая подпись автора. Надписи над заголовками набираем обычным шрифтом: это помогает сохранять чёткую структуру страницы.
Роль
Большой экран
Телефон
Зачем
Главный заголовок
48–64 px
36–40 px
Быстро назвать тему
Заголовок секции
32–44 px
28–32 px
Разделить страницу
Основной текст
17–18 px
16–17 px
Читать без увеличения
Подпись
13–14 px
13–14 px
Пояснить изображение
Шкала — рабочее предложение. Проверяем её на длинных русских заголовках и реальном контенте.
04 / Логотип и графические акценты
Логотип и графические акценты
Знак сохраняет узнаваемость. Бумажный характер поддерживаем деликатно, чтобы логотип оставался читаемым в шапке.
Подпись автора, а не штамп
Логотип
Используем текущий файл Fokeev с печатной фактурой, зелёной точкой и синим подчёркиванием. Не растягиваем по одной оси и не добавляем новую тень. Свободное поле вокруг — не меньше высоты буквы F / 2.
Рисованная линия
Неровное короткое подчёркивание подходит для акцентной ссылки и наведения в меню. Подписи над заголовками остаются без подчёркивания. Структурные разделители тоже рисованные: один открытый непрерывный штрих без прямого дубля.
Стрелка
Рисованная стрелка направляет взгляд внутри иллюстрации. В кнопке используем простую интерфейсную стрелку: её задача — объяснить действие.
Тёмный фон
Проверяем светлую версию отдельно. Инвертировать бумажную иллюстрацию целиком нельзя: это меняет лица, предметы и фактуру. Тёмная тема всего сайта пока не утверждена.
05 / Сетка, отступы и адаптация
Сетка, отступы и адаптация
Общий контейнер выравнивает шапку, тексты и изображения. Воздух между колонками не должен случайно превышать внешние поля.
Текст 1.2 части
Иллюстрация 1 часть
4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px
Контейнер
Ориентир: 1232 px для контента, боковые поля от 24 px. Иллюстрация не прижимается к краю окна, если текст стоит внутри контейнера.
Ритм
4 px — базовый шаг. 8–16 px связывают элементы; 24–32 px разделяют группы; 48–64 px дают самостоятельным блокам воздух. Отступ объясняет связь, а не просто заполняет место.
Телефон
Две колонки превращаются в одну: сначала смысл и действие, затем изображение. Таблицы прокручиваются в своём контейнере. Не уменьшаем весь макет до нечитаемого масштаба.
Высоты
В сравнении моделей исходники имеют одинаковую область просмотра и object-fit: contain. Парные блоки исходников и промпта занимают 50/50. Длинный контент не обрезаем ради равной высоты.
Рисованные разделители
Непрерывный карандашный штрих с заметной, но спокойной неровностью поддерживает бумажный характер сайта. Без разрывов, пунктирных участков и прямых дублей. Используем между смысловыми группами, в списках и над ценой.
Один токен для всех структурных разделителей. Если отступа достаточно, линию убираем: например, под фильтрами популярных курсов. Контуры карточек и полей остаются чёткими; основная кнопка получает аккуратный рисованный контур.
06 / Кнопки и ссылки
Кнопки и ссылки
Основное действие заметно сразу. Вторичное остаётся доступным, но не спорит с ним.
Все пять состояний двух уровней. Живой пример: наведи курсор, нажми или перейди к кнопкам клавишей Tab. Демо-кнопки показывают обратную связь; ссылка открывает настоящий каталог.
Круглые кнопки каруселей
01 / 06
Для курсов и отзывов: круг 46 px, бумажная заливка, шалфейная граница 1 px и тень снизу 2 px. Полная стрелка 24 px помогает распознать листание. Нажатие опускает кнопку, focus виден с клавиатуры, disabled приглушён.
Основная
Зелёная бумажная плашка: слегка неровный рисованный контур, тихая перфорация 7 px, светлая надпись и полная стрелка; радиус 8 px. Высота от 48 px, боковые поля 24 px. Одно основное действие на группу снижает конкуренцию.
Вторичная
Зелёная надпись с синим рисованным подчёркиванием только под текстом и отдельной полной стрелкой. Без заливки и прямой рамки.
Состояния
Наведение: основная кнопка приподнимается на 2 px и темнеет. Нажатие: опускается на 1 px без тени. Focus: синяя обводка 2 px с отступом 5 px. Disabled: прозрачность 40%, действие отключено. Переходы 160 ms ease; reduced-motion отключает перемещения.
Текст
Глагол и объект: «Смотреть урок», «Все курсы», «Читать статью». Избегаем «Подробнее», если непонятно, куда ведёт кнопка.
07 / Вкладки и фильтры
Вкладки и фильтры
На главной и в каталоге одинаковые фильтры с рисованными иконками. Первым идёт «Все», выбранное по умолчанию. Активная категория оформлена бумагой в точку, рамкой, тенью и синей линией. На мобильном — выпадающий список «Направление». Ссылка «Посмотреть все курсы →» стоит под карточками слева.
Дизайн: интерфейсы, композиция и работа с графикой.
Распознаваемость
На главной выбор обозначен синей линией и aria-selected. Вкладка сохраняет размеры при наведении: её поверхность и все дочерние элементы используют один курсор, декоративные иконки не перехватывают указатель. Бумажный фон выбранной темы остаётся только в каталоге.
Поведение
Выбор меняет содержимое той же области. Стрелки клавиатуры переключают вкладки; Home и End ведут к первой и последней. На телефоне допускаем горизонтальную прокрутку ряда.
Четыре значения заменяют случайные радиусы. Размер блока не меняет его роль.
4 px · бумага
Карточки курсов и статей, заметки, изображения и бейджи. Небольшой угол сохраняет характер листа.
8 px · действие
Кнопки с текстом, вкладки и поля. Единая форма помогает узнавать интерактивные элементы.
12 px · окно
Корзина и модальные окна. Скругление отделяет временный слой от страницы.
Круг — только для аватаров, круглых кнопок с иконкой и декоративных дисков. Рисованные подчёркивания сохраняют свою дугу. Объекты внутри иллюстраций имеют естественную форму.
08 / Карточки, цитаты и формы
Карточки, цитаты и формы
Одна поверхность на одну смысловую группу. Не вкладываем рамку в рамку только ради оформления.
Статья · пример
Как сравнивать генераторы изображений
Одинаковые исходники, точный промпт и результаты рядом помогают сделать собственный вывод.
Здесь показываем структуру цитаты. Это демонстрационный текст, а не отзыв студента.
Пример оформления
Карточка курса · бумажная заметка
Номер и категория, затем название, описание, параметры и цена. Лист со скотчем связывает каталог с принципами обучения. Все карточки используют один светлый фон, нижние строки выравниваются. Скидка стоит рядом с прежней ценой. Одна карточка — одна ссылка; при наведении меняются граница, тень и стрелка. Главная, каталог и рекомендации используют один компонент.
Карточка статьи
Обложка, тема, название и краткое пояснение. Заголовок описывает материал; метаданные не конкурируют с ним. Тень появляется только там, где нужна ассоциация с листом.
Цитата
Светлая бумага с той же точечной перфорацией, что у курсов, автор и источник. При переключении верхний лист уходит под стопку за 500 мс, открывая следующий. Высота стопки сохраняется; при уменьшенном движении смена происходит без перелистывания. Не создаём вымышленные отзывы и не превращаем кавычки в главный объект композиции.
Поле
Постоянная подпись над полем. Placeholder — пример значения. Ошибка объясняет, что исправить, и читается без распознавания одного цвета.
Служебные состояния
Успех, ошибка и загрузка требуют текста. Пока семантическая палитра не утверждена, используем понятное сообщение и проверяем контраст каждого состояния отдельно.
Различаем курсы одной программы
С нуля: кремовая бумага и один блокнот. Pro: шалфейный фон и многослойная композиция с проектами. Pro с проверкой ДЗ: терракотовый фон, планшет и пометки автора. Цвет дополняют разные предметы и крупная подпись формата, читаемая на телефоне.
Photoshop Pro
Figma Pro · самостоятельно
Figma Pro · с проверкой ДЗ
HTML/CSS Pro
09 / Иллюстрации и бумажные композиции
Иллюстрации и бумажные композиции
Предметы раскрывают тему, а круг собирает композицию. Сохраняем лёгкость: главный объект, несколько поддерживающих деталей и воздух.
Пример из блога
Сюжет вместо декора
Документы и экран объясняют, что здесь можно читать и разбирать материалы. Приглушённый круг объединяет объекты, мягкая тень отделяет вырезку от фона.
У каждой секции своя история
Принципы обучения
Заметки, карандаш и небольшой интерфейс задания. Композиция показывает связь объяснения с практикой.
Пример урока
Видео — центральный объект, рукописные пояснения рядом. Декоративные элементы не перекрывают кнопку воспроизведения и управление.
Автор
Настоящий портрет-вырезка, крупный круг, короткие авторские заметки. Сохраняем узнаваемость человека и естественный свет.
Сертификат
Сертификат на бумаге в точку: дипломная типографика, настоящий логотип и подпись автора, сгенерированная печать, номер и QR-код. Имя «Иван Иванов» и курс «Веб-дизайн в Figma» — образец, явно отмеченный на изображении. PDF без наклона.
Как готовить новые изображения
В брифе фиксируем сюжет, формат, место под текст, палитру, направление света и плотность фактуры. Текст страницы остаётся живым HTML. Прозрачную вырезку экспортируем с альфа-каналом, фотографию — в WebP. Для мобильного проверяем композицию отдельно. Результаты тестов нейросетей не ретушируем: они служат доказательством сравнения.
10 / Иконки и движение
Иконки и движение
Иконка поясняет действие, движение подтверждает реакцию интерфейса.
Иконографика
Смысловые иконки — Doodle Icons от Khushmeen Sidhu, CC0: направления, уроки, задания, время и рейтинг. Размер 18px для метаданных, 22–24px рядом с подписями, 36px в карточках формата обучения. Цвет — шалфейный, синий или терракотовый. Простые управляющие стрелки, поиск, закрытие и корзина сохраняют Lucide.
Доступное название
У кнопки без текста есть понятное название для скринридера: «Следующее изображение», «Закрыть просмотр». Символ сам по себе не всегда объясняет действие. В оглавлении статьи текущий раздел обозначается зелёным текстом и синим рисованным подчёркиванием; aria-current связывает визуальное состояние с доступным названием. Подсветка следует за прокруткой, фокус остаётся у пользователя.
Движение
Для наведения и нажатия — 160–200 мс. Карточка курса или видео поднимается на 4px и слегка наклоняется. Непрерывное движение допустимо только у отдельных рисованных пометок и линий, когда они видны; обычный текст остаётся неподвижным.
Уменьшение движения
При prefers-reduced-motion отключаем декоративные переходы и плавную прокрутку. Состояние выбора и обратная связь остаются видимыми.
11 / Тексты и доступность
Тексты и доступность
Говорим конкретно и по делу. Красивое оформление должно помогать прочитать, понять и выполнить действие.
Заголовок
«Пример урока», «Об авторе», «Отзывы студентов» называют содержание. Образные фразы используем как короткую подпись, а не вместо названия секции.
Описание
Объясняем, что человек получит или увидит. Убираем повторы заголовка, обещания без доказательств и внутренние дизайнерские термины.
Факты
Количество студентов, курсов и оценка остаются числами с ясной подписью. Не заменяем статистику случайными словами. При изменении числа проверяем его источник.
Чтение
В статьях: основной текст 17 px на компьютере и 16 px на телефоне, межстрочный интервал 1.65. Ширина абзаца ограничена 62ch — ориентир около 50–70 знаков с проверкой на реальном тексте. Иллюстрации могут быть шире абзацев. Один H1, последовательные H2/H3. Ссылки объясняют назначение, изображения получают осмысленный alt; декоративные — пустой alt.
Контраст
Рабочая цель: 4.5:1 для обычного текста и 3:1 для крупного. Фактуру и прозрачность проверяем в итоговом сочетании, а не только на образце цвета.
Управление
Все действия доступны клавиатурой. Видимый фокус не убираем, область нажатия ориентируем на 44×44 px. Выбор обозначаем формой и текстом, а не одним цветом.
12 / Композиции главной
Бумажная мастерская
На первом экране кнопка «Смотреть видео · 2:13» открывает плеер поверх страницы. Видео Full HD со звуком загружается только после открытия. Escape закрывает плеер и возвращает фокус на кнопку.
Главная — эталон материалов, ритма и авторского голоса. Фон #f1ede4, лист #faf7ef, точечная фактура 7 × 7px, графитовый текст и шалфейные детали.
Первый экран
Коллаж складывается из круга, блокнота, ноутбука, карандаша и курсора; затем появляется текст. Надпись «Друзья, привет!» — без стрелки. Автор и поднятая рука выступают над экраном ноутбука.
Статистика
Один лист, четыре показателя. Иконка 24–28px слева от числа, подпись центрирована под группой. На телефоне сетка 2 × 2. Числа главные; только оценка подчёркнута.
Обучение
Лист начинается крупно по центру, затем уходит вправо. Карандаш приходит слева, пример задания — снизу справа. После сборки появляются пояснение и три карточки. Текст самого листа статичен.
Автор и отзывы
Имя на большой ширине в одну строку. Под фотографией приклеивается бумажный ярлык; надпись не кипит. Отзывы — стопка листов в точку, следующие листы содержат настоящие отзывы.
35 000+Студентов на курсах
13 000+Отзывов о курсах
4,8 / 5Средняя оценка
25+Курсов в каталоге
На уроке
Разобрать тему. Задать вопрос автору. Закрепить на практике.
Эта надпись всегда остаётся неподвижной.
Сертификат: настоящая подпись, логотип сайта, печать как оттиск поверх подписи, номер и QR-код реестра. Дипломные шрифты с засечками используются только внутри документа. Превью наклонено на −3°, PDF ровный. Образец явно обозначен и не выдаётся за действующий документ.
13 / Движение
Рисунок оживает спокойно
Появление раскрывает композицию, hover подтверждает действие. Основной текст, цены, программа и кнопки не кипят.
Подчёркивание следует за скроллом
От простого к сложному
Прокрутите страницу вверх и вниз: линия рисуется и стирается; её контур слегка меняется.
Дмитрий ФокеевАвтор курса
Элемент
Поведение
Прелоадер главной
Минимум 450ms вместе с загрузкой изображения, максимум ожидания 1600ms. Каждый вход или обновление главной; прямой переход к секции не запускает вступление.
Сборка первого экрана
Части коллажа появляются по очереди, потом приветствие, текст и статистика. Полный таймлайн до 1900ms после загрузки, на телефоне 850ms.
Скролл-секция обучения
На desktop 340vh со sticky-сценой; лист → карандаш и задание → текст и карточки. На mobile обычный поток.
Подчёркивания
Обратимый прогресс от позиции скролла. На первом экране линия полная сразу. Заголовок остаётся резким.
Кипение
Дискретные 3 кадра: пометки 450ms, линии 600ms; слабое искажение контура. Только в видимой области, пауза в скрытой вкладке.
Без кипения
Текст учебного листа, имя на ярлыке автора, надзаголовки, платёжная заметка, обычный текст и элементы управления. Исключение в коде: data-ink-static.
Ярлык автора
Один раз при входе в область просмотра: приклеивание 650ms с поворотом по Y и оседающей тенью; скотч появляется следом.
Карточки и видео
180ms ease, подъём −4px и наклон −0.6°. Только mouse hover; устойчивый cursor:pointer на всей кликабельной области.
Доступность
prefers-reduced-motion: полный текст и линии сразу, никаких вступлений, наклонов или кипения. Tab, Escape и прокрутка прерывают вступление.
14 / Страницы курсов
Одна система, содержание курса
Первый проход общего шаблона: курс, цена и программа берутся из существующих данных. Платёж и выдача доступа сохраняют действующий поток.
Меню страницы курса ведёт к разделам текущего курса: программе или составу пакета, проектам и отзывам при их наличии, обучению и сертификату. «Блог», «Все курсы» и «Мои курсы» сохраняют отдельные адреса. Мобильное меню повторяет тот же список и закрывается после выбора.
Разделы программы раскрываются и сворачиваются за 200 мс: плавно меняются измеренная высота, прозрачность и поворот стрелки. Повторный клик разворачивает переход с текущего положения. Закрытые уроки скрыты от клавиатуры и скринридера. Управление с клавиатуры — мгновенное; reduced motion сохраняет только мягкое проявление.
Первый экран
Категория, название с синей линией, описание, факты и цена. Справа бумажная видеообложка и ярлык автора. На телефоне всё в одну колонку; кнопка покупки занимает ширину листа.
Содержание
Аудитория — отдельный текст каждого курса. Темы практики — четыре конкретных приёма без оценок уровня и процентов. Программа — лист на шалфейном фоне с раскрытием всех разделов. У пакета показаны входящие курсы и их темы.
Отзывы и покупка
Полный отзыв на бумаге в точку, настоящая оценка и понятные кнопки переключения. Формат обучения учитывает самостоятельное прохождение и проверку заданий. В конце — покупка выбранной программы и один блок рекомендаций. Нижняя панель сохраняет цену и кнопку на телефоне.
Первый экран — три реальных проекта и рекламное видео. Сразу ниже — настоящие превью, что разбираем на уроках и где применить. Дальше: требования, программа, автор, обучение и условия покупки.
Пожизненный доступ. Подписка Claude или ChatGPT оплачивается отдельно. Бесплатного урока пока нет; интерфейс показан на Claude. Не обещаем одинаковые шаги в разных сервисах.
Бумажное направление, базовая палитра, три роли шрифтов, портрет и предметные коллажи. Фильтр уровня удалён; статистика остаётся статистикой.
На обсуждение
Главная зафиксирована. Продолжаем выверять плотность длинных программ, состав служебных блоков и индивидуальные обложки курсов.
Следующий проход
Общий шаблон курса использует CourseHero, course-paper.css, CourseCard и общие компоненты сертификата и кнопок. Следующие изменения должны расширять эту основу.
Как обновлять
При изменении решения обновляем его смысл, живой пример и состояние на сайте. Дата и список изменений помогают видеть, какие правила действительно приняты.
История страницы
11.10.2026 · Версия 0.19. Различимые обложки стартовых и Pro-курсов, отдельная композиция формата с проверкой ДЗ. Заголовок примера урока — «Формат обучения».
10.10.2026 · Версия 0.18. Индивидуальные тексты 25 курсов, конкретные темы вместо оценок уровня, программа пакетов, раскрытие всех разделов, компактный формат обучения и один блок рекомендаций.
09.10.2026 · Версия 0.4. Подписи над заголовками возвращены к зелёному печатному тексту в верхнем регистре; рукописные варианты сняты. Шкала скруглений 4/8/12 px сохранена. 09.10.2026 · Версия 0.2 (предыдущее правило, заменено версией 0.4). Принято правило: рукописная подчёркнутая надпись только над заголовком; описание под ним — обычным шрифтом. Добавлены Bad Script и Marck Script для сравнения; выбор шрифта ещё открыт. 09.10.2026 · Версия 0.1. Собраны основы из текущего сайта; добавлены объяснения, интерактивные примеры и список открытых решений. Страница служебная, закрыта от индексации и не добавлена в основную навигацию.
