Дизайн или код: как за один вечер понять, что вам ближе

28 августа 2026 · 8 минут · Vladimir Motipan

Процедура вместо гадания: собрать одну и ту же карточку товара двумя способами и сравнить. Ниже — точное задание, по которому это можно сделать сегодня вечером бесплатно.

Почему тесты «кем вам быть» не работают

Профориентационный тест спрашивает, любите ли вы логику и считаете ли себя творческим человеком. Проблема в том, что обе профессии требуют и того и другого, а отвечаете вы не за себя настоящего, а за свой образ. Человек, ни разу не открывавший редактор, отвечает про воображаемую работу — и получает воображаемый результат.

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

Совет, который дают почти во всех статьях на эту тему, звучит правильно: попробуйте задания по каждому направлению и сравните. Только редко объясняют, какие именно задания брать, чтобы сравнение получилось честным. Ниже — конкретная процедура: один и тот же объект, одинаковый объём работы, один вечер.

Один и тот же экран двумя способами: суть эксперимента

Возьмите карточку товара — самый частый элемент интерфейса, достаточно простой, чтобы собрать за час, и достаточно живой, чтобы столкнуться с настоящими решениями. Сначала соберите её в Figma, потом сверстайте в браузере. Порядок важен: сначала макет, потом код, потому что в жизни работа идёт так же.

Состав карточки зафиксируйте заранее, иначе два опыта будет не с чем сравнивать: фотография 280 на 200, метка категории «Керамика», заголовок «Кружка Ольма, 350 мл», описание «Матовая глазурь, ручная работа. Можно мыть в посудомоечной машине», цена «24 €» и кнопка «В корзину».

Размеры тоже задайте числами, а не на глаз: ширина карточки 320, внутренние поля 20 со всех сторон, расстояние между крупными блоками 16, между строками текста внутри одного блока 8, скругление карточки 16, скругление фото 12. Все числа кратны четырём — когда все расстояния берутся из одного короткого набора, между элементами появляется ритм, а вам не приходится каждый раз выбирать между 13 и 15 пикселями.

Из платного не нужно ничего. Figma работает в браузере, бесплатного тарифа для такой задачи достаточно. Для второй части нужен любой текстовый редактор — бесплатный Visual Studio Code или даже «Блокнот» — и браузер, который у вас уже есть.

• 20 минут — разобрать чужую карточку в интернет-магазине на части и записать, из чего она состоит.
• 40 минут — собрать свою карточку в Figma по числам выше.
• 20 минут — написать разметку той же карточки в index.html.
• 30 минут — оформить её в style.css и подобрать пару значений прямо в браузере.
• 10 минут — сломать четыре вещи по очереди и починить обратно.
• 10 минут — письменно ответить на шесть вопросов из раздела ниже.

Что вы делаете в роли дизайнера: разбор экрана на сетку, текст, элементы

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

Дальше собирайте свою карточку. В Figma нажмите F и сделайте фрейм 400 на 640 — это будет экран. Внутри соберите три текстовых слоя, выделите их и нажмите Shift + A: получится контейнер с автолейаутом, который сам расставляет содержимое. Задайте ему направление вниз, расстояние 8 и внутренние поля 20 — числами в правой панели, а не перетаскиванием мышью.

Собирайте снизу вверх: сначала отдельные элементы, потом блоки, потом карточка целиком. Фото — прямоугольник 280 на 200 со скруглением 12. Текстовый блок — метка 12 пунктов цветом 8A8378, заголовок 20 полужирный цветом 1A1A1A, описание 14 цветом 6B6B6B. Нижняя строка — цена и кнопка в горизонтальном контейнере с распределением по краям. И всё это — во внешний вертикальный контейнер с расстоянием 16 и полями 20.

В конце проверьте работу на прочность: замените заголовок на «Кружка Ольма из тёплой глины ручной работы, объём 350 миллилитров». Карточка должна стать выше, ширина остаться 320, расстояния — прежними. Если что-то поехало, ищите слой, у которого неверно задано поведение размера. Вот это и есть работа дизайнера интерфейсов: не «сделать красиво», а описать правила, по которым экран живёт с любым содержимым.

Что вы делаете в роли разработчика: та же карточка в HTML и CSS

Создайте папку и в ней два пустых файла: index.html и style.css. В первом опишите, чем является каждый кусок содержимого. Карточка — <article>, потому что это самостоятельный кусок содержимого. Заголовок — <h2>. Метка, описание и цена — <p>. Кнопка — <button>, а не раскрашенный <div>: настоящая кнопка получает фокус по клавише Tab и срабатывает по Enter, и это не нужно программировать. Группирующие блоки — <div>: ровно та же роль, что у фрейма с автолейаутом в макете.

Откройте файл в браузере — увидите чёрный текст в столбик. Это нормально: без стилей браузер выстраивает блоки один под другим, и такой порядок называется потоком.

Теперь оформление. Ключевое открытие этой части в том, что автолейаут и flex — одно и то же, только на разных языках. Направление вниз или вправо — это flex-direction: column или row. Расстояние между элементами — gap. Внутренние поля фрейма — padding. Выравнивание по центру — align-items: center. Распределение по краям — justify-content: space-between. Поэтому в CSS появятся ровно те числа, которые вы уже приняли в макете: gap: 16px между блоками, gap: 8px внутри текста, padding: 20px по краям, border-radius: 16px у карточки.

И обязательная часть эксперимента — ломать. Сделайте по одной правке, посмотрите на результат, верните обратно. Удалите строку box-sizing: border-box — карточка станет шире на 40 пикселей, потому что поля перестали входить в заданную ширину. Поменяйте column на row — блоки встанут в ряд и сожмутся. Поставьте gap: 0 — всё слипнется, и вы увидите то же правило близости, что и в макете, только на другом языке. Уберите justify-content — кнопка прижмётся к цене.

По каким ощущениям судить: что должно понравиться, а что нормально не любить

После двух сборок ответьте письменно и коротко, первое, что приходит в голову. Где время прошло незаметно, а где вы поглядывали на часы? Что раздражало сильнее: то, что нет единственно верного ответа, или то, что верный ответ есть, но не работает? Когда что-то не получалось, вы хотели подобрать вариант или найти причину? Какую из двух карточек хочется доделать прямо сейчас? Что вы уже успели загуглить по своей воле, между делом?

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

Нормально не любить: в дизайне — бесконечное сравнение почти одинаковых вариантов и чужие правки без причины; в коде — то, что ошибка в одном символе останавливает всё, и полчаса уходит на поиск опечатки. Если это раздражает — вы не «не подходите», это часть работы в обоих случаях.

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

Отдельно проверьте себя на честность формулировок. «Мне понравился дизайн, потому что там красиво» — это не наблюдение, а пересказ ожиданий. Наблюдение звучит так: «я потратил двадцать минут на выбор между двумя оттенками серого и не заметил времени» или «я полчаса искал, почему блок съехал на четыре пикселя, и это было интереснее, чем сама карточка». Второе полезнее первого, потому что описывает работу, а не картинку.

Если делать это по шагам самому не хочется, тот же эксперимент собран целиком в курсе «С чего начать» за €3: два часа, восемь коротких уроков, файл-заготовка в Figma, стартовый проект для кода и разбор готового решения, чтобы сравнить со своим. Курс не учит профессии — он нужен ровно для того, чтобы выбрать направление, опираясь на опыт, а не на рассказы.

Где заканчивается работа дизайнера и начинается код

К этому моменту граница видна руками, но её стоит проговорить. Дизайнер решает, что на экране главное, а что второстепенное, и чем это показано; сколько пустоты между блоками и почему именно столько; какими словами подписана кнопка; какие у элемента бывают состояния — обычное, при наведении, нажатое, недоступное; что видит человек, когда список пуст, а что — когда всё сломалось. Половина этого списка не про красоту, а про поведение.

Разработчик решает, какими тегами описать содержимое, чтобы браузер и программа чтения с экрана понимали, где заголовок, а где кнопка; как блоки поведут себя, если текста станет вдвое больше или окно вдвое уже; откуда придут данные — название, цена и картинка приходят с сервера, а не написаны руками; что показать, пока ответ не пришёл; и как не написать одно и то же шесть раз. Макет статичен, код обязан работать на бесконечном числе вариантов.

И есть стык, где происходит самое интересное: в макете заголовок в две строки, в жизни попадается в пять — обрезать или переносить? В макете кнопка одна, в коде их нужно минимум четыре состояния. Макет нарисован на одну ширину, работать должен на всех. Хороший специалист в любой из двух ролей — тот, кто задаёт вопросы про стык до того, как работа сделана, а не после. Кстати, ровно из-за таких вопросов существует отдельная процедура сдачи макета: что в неё входит, разбираем в статье как отдать макет разработчику.

Куда идти дальше в зависимости от результата

Если ближе оказался макет, следующий шаг — компоненты, варианты, состояния и адаптив, то есть «Интерфейсы в Figma». Начинать можно с нуля, и заканчивается это макетом, который принимают в работу.

Если ближе оказался код — «Вёрстка без магии»: поток, блочная модель, flex и grid до причин, а не рецептов. Тоже с нуля. Дальше, уже после уверенной вёрстки, открывается React — но именно после, и по списку требований, а не сразу.

Если оба варианта показались скучными, а сама идея «сделать работающую штуку» — нет, попробуйте направление, где нет экрана вовсе: программа, которая обрабатывает данные, а не рисует интерфейс.

И последнее правило выбора, самое надёжное. Если сомневаетесь между дизайном и вёрсткой, берите то направление, где вам хотелось доделать карточку. Это более точный признак, чем рассуждения о рынке и зарплатах: заниматься этим придётся много часов подряд, и интерес — единственное, что держит на длинной дистанции. Назначьте себе первый шаг на неделю — маленький и проверяемый: собрать экран корзины из трёх таких карточек или сверстать вторую карточку рядом с первой и заставить их встать в ряд. И поставьте дату.