Атлас
Визуальное направление

Рисованный стиль

Hand-drawn

Интерфейс, будто нарисованный от руки: дрожащие обводки, штриховка, рукописные пометки, маркер и стикеры на бумаге в клетку.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация

Суть

Рисованный стиль переносит в интерфейс тетрадь, блокнот или доску для набросков. Рамки кнопок и карточек — неровные линии с лёгким дрожанием и перехлёстом на углах, тени заменены штриховкой, важные слова выделены маркером, а пояснения написаны «от руки» и снабжены стрелками-каракулями.

Подробнее

Главное отличие от игривого и органического стилей — материал. Здесь нет мягких объёмов и ярких плашек: есть бумага в клетку или линейку, чернила одного тёмного цвета, красная ручка для пометок и пара канцелярских акцентов (жёлтый маркер, цветные стикеры на скотче). Нарисованное соседствует с хорошо читаемым текстом — рукописный шрифт работает акцентом, а не основным текстом.

Стиль снимает напряжение и делает продукт личным: он хорош для обучения, планирования, творческих и командных инструментов, черновиков и прототипов. Сложность — в чувстве меры: неровность должна быть контролируемой, иначе интерфейс выглядит неряшливым и теряет читаемость.

Признаки

  • Неровные обводки: рамки кнопок, карточек и полей — линии с дрожанием 1–3 px и перехлёстом на углах, часто двойным штрихом.
  • Штриховка вместо теней и заливок: диагональные линии под 45° со смещённой «тенью» и в столбцах диаграмм.
  • Рукописный шрифт для заголовков и пометок при спокойном читаемом шрифте основного текста.
  • Маркерные выделения ключевых слов, обводки-каракули вокруг активного пункта и подчёркивания волной.
  • Стрелки-каракули и пометки на полях, связывающие подсказки с элементами интерфейса.
  • Фон-бумага: клетка 20–24 px, линейка с красным полем, крафт или доска.
  • Стикеры на скотче, слегка повёрнутые на 2–5°, для напоминаний и важных сообщений.
  • Палитра «канцелярии»: тёмные чернила, красная ручка, жёлтый маркер, 1–2 пастельных цвета стикеров.

Композиция

Композиция

  • Основа — спокойная сетка с выравниванием по клеткам фона; нарисованность проявляется в контурах и декоре, а не в хаотичном расположении блоков.
  • Лёгкие повороты (−3…+3°) у стикеров, кнопок и листов создают ощущение ручной раскладки; основные текстовые блоки остаются ровными.
  • Пометки на полях и стрелки ведут взгляд к главному действию или важной цифре.
Ещё 2
  • Иллюстрации и элементы перекрывают друг друга, как бумажки на столе: лист, стикер, карандаш.
  • Разделение секций — пунктирной или неровной линией от руки, а не плашками.

Визуальная иерархия

  • Первый уровень — крупный рукописный заголовок (узкий маркерный шрифт 48–110 px) с маркерным выделением ключевого слова.
  • Второй уровень — подзаголовки и метки рукописным шрифтом 20–28 px цветом чернил или красной ручки.
  • Третий уровень — основной текст читаемым шрифтом 15–18 px, вторичный — цветом «карандаша».
Ещё 2
  • Главное действие выделено неровной рамкой с маркерной заливкой и штрихованной тенью, а также стрелкой-пометкой.
  • Красный цвет — только для пометок учителя-редактора: важное, ошибка, дедлайн.

Цвета

Примеры палитр · нажмите на цвет, чтобы скопировать

Тетрадь в клетку

Крафт и уголь

Меловая доска

Принципы работы с цветом
  • Фон — тёплая бумага (не чистый белый) с сеткой или линейкой, линии сетки светлые, контраст к фону около 1.2:1.
  • Один тёмный цвет «чернил» для текста, обводок и штриховки; второй пишущий цвет (красный или синий) — для пометок.
  • Акценты — канцелярские: маркер (жёлтый, зелёный, розовый) и цвета стикеров, суммарно не более 15–20% площади.
  • Цвета — плоские, без градиентов, кроме имитации маркера с «рваными» краями.
  • Тёмная версия — меловая доска: тёмно-зелёный или графитовый фон и светлые «меловые» линии.

Шрифты

С поддержкой кириллицы

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Amatic SC
    Текст
    Pangolin

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Caveat
    Текст
    Nunito

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Shantell Sans
    Текст
    Shantell Sans
Принципы типографики
  • Рукописный шрифт — для заголовков, пометок и цифр; основной текст — читаемый «печатный от руки» или простой гротеск.
  • Не больше двух рукописных гарнитур: одна для крупных заголовков, одна для пометок.
  • Рукописные пометки на 20–40% крупнее основного текста, иначе они нечитаемы.
  • Основной текст 15–18 px с межстрочным интервалом 1.45–1.6, без курсива и разрядки.

Компоненты

Кнопки

Кнопка с неровной рамкой 2 px цветом чернил и перехлёстом штриха на углу, маркерной заливкой для главного действия и штрихованной тенью со смещением 6–8 px. Вторичные действия — текст с подчёркиванием волной или стрелкой «→».

Поля ввода

Поле — неровная рамка на светлой бумаге или линия «для письма» с подписью рукописным шрифтом над ней; фокус — более толстый штрих и маркерная подсветка.

Карточки

Карточки — листы бумаги с неровным краем и смещённым вторым контуром, или стикеры на скотче, повёрнутые на 2–5°; внутри — читаемый текст и рукописные пометки.

Навигация

Текстовое меню с обводкой-каракулем вокруг активного пункта или маркерной подложкой; в приложении — нарисованные контурные иконки и маркерное пятно за активной; в платформе — пункты как закладки-разделители блокнота.

Применение

Где подходит

  • Образование, планировщики, дневники и приложения для заметок.
  • Творческие и командные инструменты: доски, мозговые штурмы, вайрфреймы.
  • Локальные бренды, мастерские, кафе, детские и семейные проекты.
Ещё 1
  • Промостраницы и онбординг, где нужно снять напряжение и объяснить сложное просто.

Как применять

  • Подготовь 3–4 варианта неровных рамок и поворотов и чередуй их — одинаковое «дрожание» на всех элементах выдаёт шаблон.
  • Рисуй контуры SVG-путями с vector-effect: non-scaling-stroke, чтобы толщина линии не менялась при растягивании.
  • Держи текст ровным и читаемым: неровными делай рамки и декор, а не строки абзацев.
Ещё 2
  • Используй пометки и стрелки как подсказки по сценарию — каждая должна что-то объяснять.
  • Проверь экран без декора: если структура не читается, рисованность её не спасёт.

Ограничения

Ограничения

  • Плохо подходит для банков, медицины, права и других сфер, где неряшливость воспринимается как риск.
  • Рукописные шрифты плохо читаются в мелком размере и длинных текстах, не все поддерживают нужные символы.
  • Плотные таблицы и сложные формы требуют упрощённого декора, иначе интерфейс перегружается.
Ещё 1
  • Неровные SVG-рамки сложнее поддерживать в коде, чем обычные границы.

Ошибки

  • Набирать рукописным шрифтом основной текст, кнопки с длинными подписями и таблицы.
  • Делать неровными всё подряд, включая выравнивание текста и сетку — интерфейс выглядит сломанным.
  • Слишком сильное дрожание и повороты больше 5°: элементы кажутся случайно упавшими.
Ещё 3
  • Тонкие светлые линии «карандаша» для границ интерактивных элементов — они теряются на бумаге.
  • Много цветов маркеров и стикеров одновременно — пропадает эффект «одной ручки».
  • Декоративные стрелки и каракули, которые никуда не указывают.

Сочетания

Подходы разного уровня — их можно сочетать.

  • Игривый дизайн

    Рисованные пометки и стикеры добавляют игривому интерфейсу живости; от playful берутся яркие акценты, от рисованного — бумага и штрих.

    Направление

  • Минимализм

    Чистая основа с редкими рукописными пометками и маркерными выделениями — сдержанная версия стиля для серьёзных продуктов.

    Направление

  • Bento-компоновка

    Плитка из листов и стикеров с неровными рамками превращает обзор возможностей в доску с заметками.

    Компоновка

  • Редакционный стиль

    Журнальная вёрстка с рукописными заметками на полях и подчёркиваниями редактора.

    Направление

Применить стиль

Промпт для ИИ под ваш тип продукта.

Использовать
Отзыв