Как я перешёл на ручные скетчи UI: почему я взял блокнот и маркеры вместо Figma

Звучит странно: фронтендер с блокнотом вместо экрана? Но пару месяцев назад я заметил, что застреваю в мелких правках в дизайне — пиксели, отступы, цвета. Figma открыл десятки табов, и мозг путался в слоях. Тогда я решил попробовать альтернативу: взять ручку, блокнот и маркеры, чтобы быстрей рисовать интерфейсы от руки. И это оказалась не просто забавная игра — это изменило мой подход к проектированию и сэкономило кучу времени.

Когда вы кликаете мышкой в Figma, легко зациклиться на деталях: «а если чуть-чуть сместить кнопку вправо…» Минуты превращаются в часы. С ручкой таких искушений нет: линии получаются жёсткие, пропорции условные, и вас не тянет доделывать каждую иконку до совершенства.

Вместо бесконечного зума вы смотрите на лист и сразу понимаете, хватит ли места для текста, где будет основной фокус и как расставить акценты. Голова начинает думать не «как это сделать в коде», а «что я хочу показать пользователю». Это важный шаг перед тем, как открывать компьютер.

Всё, что мне понадобилось, умещается в небольшую сумку:

Я не стремился собрать художнический арсенал: хочется просто быстро накидать идею, а не рисовать шедевр. Поэтому маркер на 2 миллиметра — для блоков, потоньше — для текста. Оранжевый помогает обозначать активные элементы: кнопки, ссылки, выделения.

Перед встречей с дизайнером я садился за стол, набрасывал три варианта макета на листе. Это занимало не больше 10 минут, но на встрече уже было с чем работать. Вместо пустых разговоров «давайте подумаем», мы сразу переключались на похожие эскизы и корректировали только то, что действительно важно.

Когда нужно было показать концепт клиенту или коллеге, я фотографировал скетч на телефон и встраивал в презентацию. Люди реагировали: «О, вот так всё будет выглядеть». Часто после таких эскизов уходило решение — и я сразу открывал Figma, чтобы перенести главное в цифру.

Перед тем как писать JSX, я снова брал ручку и набрасывал блок-схему страницы: где будут списки, где формы, какие компоненты потребуются. Сразу понимал, сколько пропсов прокидывать и каких styled-компонентов хватит. Это убрало множество правок уже в коде: скетч задаёт общую структуру, а дальше работа идёт быстрее.

Во-первых, я стал тратить на прототипы вдвое меньше времени. 10–15 минут на скетч вместо 40–50 на подготовку фрейма в Figma и перестановку рамок.

Во-вторых, коллеги научились «читать» мои эскизы. На планёрках мы вместе обсуждаем листы, на которых заметны только блоки и стрелочки. Это даёт быстрый общий взгляд, и разработчики сразу понимают структуру.

В-третьих, я стал увереннее: когда набрасываю Figma-драфт, уже знаю, что каждый блок имеет смысл и паттерн отрисован вручную. Правки сводятся к цвету и тексту, а не к передвижению ползунков.

Не надо сразу покупать дорогие маркеры и альбомы. Решите, какой формат листа удобнее: A5 для кофе-брейка или A4 для командных мозговых штурмов. Начните с простого: один карандаш и блокнот.

Во время следующей планёрки нарисуйте скетч вместо демонстрации презентации. Вы увидите: коллеги задают меньше уточняющих вопросов, потому что эскиз понятнее слов.

И, главное, не пытайтесь сделать шедевр. Это не иллюстрация, а черновик. Если линия кривоватая — не беда. Главное, что в голове появится чёткое представление, как всё работает.

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

Попробуйте взять ручку и набросать свой следующий экран — и вы удивитесь, насколько это ускоряет работу и делает её более осознанной.