Секрет арт-директора: 5 секунд на макет

✅ Татуировка №7. Глаз решает всё

Проблема / Ты делаешь макет. Стараешься😵‍💫 Расставляешь элементы, подбираешь цвета. Тебе кажется — всё круто. Ты показываешь старшему дизайнеру или арт-директору. Он смотрит 5 секунд и говорит: «Нет, тут не так. Отступы разные, жирность шрифта не та, воздух потерян». Ты вглядываешься в экран — и не видишь разницы. Для тебя это одно и то же. Для него — небо и земля. Ты злишься: «Он просто придирается!». А он просто видит. Видит то, чего не видишь ты.

Разбор

В 2016 году я пришел в студию. Я был самоуверенным джуниором. Я нарисовал лендинг. Показал арт-директору. Он посмотрел 3 секунды и сказал: «В левом блоке отступ сверху 40 пикселей, в правом — 48. Исправь».

Я залез в макет. Точно: слева 40, справа 48. Разница в 8 пикселей. Я не видел этого. Я думал, что это мелочи. Я исправил, но внутри кипел: «Какая разница? Клиент не заметит!».

Арт-директор посмотрел на меня, вздохнул и сказал фразу, которая стала моей второй татуировкой: «Клиент не заметит. Но его подсознание заметит. Если отступы пляшут, мозг чувствует дисгармонию. Пользователь не знает почему, но ему “что-то не нравится”. Он закрывает сайт и уходит к конкуренту. Ты потерял продажу из-за 8 пикселей».

Я начал тренироваться. Я перестал “смотреть” и начал “видеть”. Я распечатывал макеты, брал линейку и измерял расстояния. Я искал грязные цвета в градиентах. Я считал количество шрифтов на странице. Через год я тоже мог смотреть на макет 5 секунд и говорить: «Здесь межстрочный интервал не совпадает». Это не магия. Это тренировка.

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

Инструменты и техники.

Как прокачать глаз, чтобы видеть дисгармонию за секунды?

01. Правило “Убери цвет”.
Когда ты нарисовал страницу, поставь поверх черно-белый фильтр (можно скриншот сделать и обесцветить). Посмотри на макет. Видишь ли ты иерархию? Понятно ли, что главное, а что второстепенное? Если без цвета всё сливается — ты не выстроил иерархию. Цвет не должен спасать плохую композицию.

02. Скриншот на телефон.
Кидай макет на телефон. Посмотри на экране с расстояния вытянутой руки. Если ты не видишь текст или не понимаешь, куда нажимать — переделывай. Пользователь будет смотреть так же. Это убивает “перегруженность”, которую ты не видишь на 27-дюймовом мониторе.

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