Найди 10 отличий, или как не разосраться двум дирам

Привет! Вот и сошлись на поле виртуального боя два дира - Юля и Юра (Биба и Боба, хе-хе 😆). Ниже — 5 типичных болей, из-за которых у верстальщика дергается глаз, артдир и техдир не спят ночами, а сроки медленно, но верно, ползут куда-то в светлое (но это не точно) будущее.

🧑‍🎨 Юля: Смотри, как красиво получилось! А главное, как понятно всё
👨‍💻 Юра: А где состояния у кнопки? Нажата, заблокирована, курсор наведен?
🧑‍🎨Юля: Ну это же очевидно… 🤦‍♂️
👨‍💻Юра: Для тебя — да. Для верстальщика — нет. А для пользователя сайт выглядит статичным и скучным. Кнопка, тег, или просто красивая плашечка - поди догадайся.

👉 Боль №1: Элемент Шредингера в суперпозиции. Кнопки, ссылки, поля ввода без прописанных состояний (hover, active, focus, disabled, error) - это то, что легко сделать, но потом больно исправлять.
✅ Фикс: В Figma держим отдельный фрейм «Библиотека UI состояний»: базовые и интерактивные состояния для ключевых компонентов. Компоненты — с вариантами и чёткими свойствами.

🧑‍🎨 Юля: Тут же был тёплый бежевый, как в блоке выше. А у тебя на полтона холоднее.
👨‍💻 Юра: Я брал из вон того блока с точно такой же кнопки.
🧑‍🎨Юля: Но в этом блоке другой оттенок! Они же разные - #F5EBDC, #F7EEDD и #F4EAD9!

👉 Боль №2: Палитра‑хамелеон. 100500 «на глаз» напипетканых оттенков вместо единой системы.
✅ Фикс: В Figma включаем строгие Color Styles и токены: 1–2 базовых цвета + шкалы (50–900). Любой новый оттенок — только из этих шкал. Никакого ручного пипеткотворчества.

👨‍💻 Юра: Почему в этой карточке радиус 8px, а в соседней — 6px?
🧑‍🎨 Юля: Так визуально лучше.
👨‍💻 Юра: Значит, это разные компоненты. А вот тут почему-то вообще 7px. Боооль(

👉 Боль №3: Глаз не всегда алмаз. Одинаковые элементы отличаются на 1–2px (отступы, радиусы, тени) и ломают систему.
✅ Фикс: Единые правила на размеры и отступы: 4, 8, 12, 16, 24, 32… В Figma закрепляем через Auto Layout, Layout Grid и дизайн‑токены. Хочешь другое — создай новый специализированный компонент.

🧑‍🎨 Юля: Смотри! Три часа собирала баннер, все варианты учла: с фото, с видео, с одной кнопкой, с двумя, со скроллом…
👨‍💻 Юра: Это не баннер, а шар с предсказаниями. Половина вариантов не пригодится, а вёрстка съест треть бюджета. Ещё протестировать нужно все сочетания - передаём привет QA 👋

👉 Боль №4: Компонент ‑ чудовище Франкенштейна. Попытка предусмотреть всё превращает его в монстра.
✅ Фикс: Дизайн‑система вместо зоопарка. Определяем ядро (обязательные элементы) и 2–3 действительно нужные модификации. Остальное — по запросу. В Figma — Variant properties с чёткими boolean/enum.

🧑‍🎨 Юля: Так, ширина этого блока – 1400px. У нас всё отлично входит
👨‍💻 Юра: Ага, а на ноуте у заказчика на 1366px — уже горизонтальный скролл появится. А на планшете вообще уедет в Саратов 🚋

👉 Боль №5: Приколоченный гвоздями дизайн. Жёсткие размеры, не умеющие адаптироваться или не дающие понимания верстальщику, как это сделать резиновым.
✅ Фикс: Адаптив наше всё. В Figma используем Auto Layout, Hug/Fill, Constraints и собираем брейкпоинты (размеры у верстальщиков запрашиваем отдельно). В коде — относительные единицы (rem, %) и промежуточные состояния.

Макет — не только красотища, но и логика. Чем жёстче правила (компоненты, стили, состояния), тем быстрее результат, который не развалится в день сдачи. И остаётся время на кофе, а не на выискивание «блох» в Figma.

Как бы это всё сейчас не звучало смешно и утрировано, но часто ситуации выше - реальность. И эти боли возникают не только в коммуникации дизайнер-верстальщик, но и в фирменных стилях, презентациях… Да почти везде, где необходима строгая система, которая живёт и работает свою жизнь, часто в руках разных специалистов.
Юра, спасибо тебе) Это было весело, заходи в гости ещё. А вы заходите в гости к Юре у него там интересно и много страшных полезных слов можно нахвататься

Правила сбора персональных данных или как избежать штрафов
Процедуру регистрации в Роскомнадзоре не упоминаю, пройдёмся по тем пунктам, которые влияют напрямую на дизайн

1. Согласие на обработку персональных данных должно быть оформлено отдельно от иных документов. Согласие даётся свободно, своей волей и в своём интересе. Соответственно, чекбоксы на сайте должны быть пустыми и отдельными для рекламных рассылок, обработки персональных данных для форм или статистики. Это же касается и Cookies, у пользователя должна быть возможность согласиться с каждым набором данных, которые вы собираете, даже если это просто статистика.

2. Персональными данными являются любые данные, по которым можно идентифицировать личность. Только номер телефона или электронной почты не являются персональными данными, так как открытых баз данных, по которым можно установить владельца – нет.

3. Ответ на вопрос «Как к вам обращаться?» относится к имени, поэтому в сочетании с номером телефона и/или электронной почтой считается персональными данными. Сам по себе этот вопрос не является персональными данными.

4. Если вы не хотите уведомлять Роспотребнадзор о трансграничной передаче данных, то все сервисы Google для вас закрыты.

5. Не нужно регистрироваться как оператору в случае, если персональные данные собираются для заключения договора без последующей передачи и распространения третьим лицам и для исполнения договора. Это очень интересный пункт, по которому выходит, что заполнение анкеты на дизайн/маркетинг/замер мебели/подставьте своё, не попадает под закон о сборе и хранении персональных данных. Точнее – становится исключением, для которого регистрация не требуется.

6. Не собирать избыточных персональных данных. Каждое поле должно быть зафиксировано в Политике и обоснован сбор каждого вида данных

7. Политика обработки персональных данных должна быть ясно видна и доступна. По-прежнему для неё советуют отвести место в подвале сайта, но теперь не пытаемся спрятать в самый дальний угол, а оставляем на виду.

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

О релевантности предложений

Я создала свою группу ВКонтакте как запасной аэродром. Теперь с завидной регулярностью получаю туда рекламные сообщения о продвижении этой. И всё ничего, я тоже точечно занимаюсь рассылкой предложений. Сегодня мне пришло предложение оформить дизайн группы.
Это просто смешно писать дизайнеру об оформлении дизайна группы. Хоть какая-то релевантность предложений должна быть, а в идеале вообще 100% попадание в боли клиента.
Так и в дизайне, нельзя продавать товары для мамочек в брутальном стиле и наоборот. Это элементарное исследование целевой аудитории и сонастройка с её болями.

Курс на русификацию

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

Посмотрим, может как-нибудь потом заказчик сможет зарегистрировать первоначальный вариант логотипа.