Вопросы на собеседовании: Веб-дизайнер

Дизайн-система должна выстраивать переиспользуемые решения от низкоуровневых основ до полных паттернов взаимодействия.

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

Полезная граница компонента заключает одну узнаваемую ответственность со стабильным контрактом.

• Повторяемые структура, поведение и семантика доступности являются более вескими основаниями для компонента, чем одно визуальное сходство.
• Независимо меняющийся контент должен передаваться через свойства или слоты, а не требовать отсоединения компонента.
• Компонент, открывающий каждый внутренний слой, становится хрупким, потому что пользователи создают неподдерживаемые сочетания.
• Слишком мелкое деление усложняет сборку, а один крупный компонент трудно переиспользовать вне исходного контекста.

Различие относится к варианту, если меняет конечную поддерживаемую ось того же контракта компонента.

• Размер, акцент и состояние взаимодействия являются типичными осями вариантов, потому что назначение и анатомия компонента сохраняются.
• Структурное изменение с другой семантикой, например чекбокс вместо переключателя, требует отдельного компонента несмотря на визуальное сходство.
• Независимые настройки лучше выразить свойствами или композицией, чтобы не создавать вариант для каждого сочетания.
• Каждому разрешённому сочетанию нужен реальный случай применения; техническая возможность ещё не делает его частью API.

Состояния взаимодействия должны отражать разные условия пользователя или системы с явными визуальными и поведенческими правилами.

• Hover, focus-visible и pressed описывают разные моменты ввода, поэтому их нельзя сводить к одному более тёмному стилю.
• Selected, checked и expanded сохраняются после действия, а pressed обычно длится только во время активации.
• Loading должен сохранять контекст и предотвращать повторное действие, но не смешиваться с disabled, который означает недоступность.
• Состояниям ошибки и успеха нужен текстовый или другой нецветовой признак, а не только оттенок рамки.

Эти три слоя идут от исходных значений к смыслу, а затем к решению конкретного компонента.

• Примитив вроде blue-600 или space-300 называет значение, но не указывает место применения.
• Семантический токен вроде color-action-primary или space-content-gap называет роль, которая сохраняется при смене темы.
• Компонентный токен вроде button-primary-background решает локальную задачу и обычно ссылается на семантический токен.
• Компоненты должны использовать самый высокий осмысленный слой, чтобы изменения исходной палитры не проникали во все макеты и файлы кода.

Алиасы позволяют стабильным названиям ролей получать разные значения в каждом поддерживаемом контексте.

• color-text-primary может ссылаться на gray-950 в светлом режиме и gray-050 в тёмном, а ссылки компонентов останутся прежними.
• Режим бренда может перенаправить роли действий на другую палитру без дублирования каждого токена кнопки или ссылки.
• Цепочки алиасов должны оставаться достаточно короткими, чтобы при отладке можно было пройти от значения компонента к источнику.
• Режимы должны отражать независимые контексты вроде темы или плотности, а не хранить несвязанные разовые исключения.

Устойчивое название токена описывает роль и иерархию, не встраивая временное визуальное значение.

• Название color-text-muted останется верным, если приглушённый текст изменится с серого на тонированный нейтральный цвет.
• Единый порядок вроде категории, понятия, свойства и состояния делает токены предсказуемыми и удобными для поиска.
• Суффиксы состояний должны быть явными, например action-primary-background-hover вместо action-blue-dark.
• Таксономия обязана работать в Figma и коде, поэтому для разделителей и зарезервированных слов нужно согласованное правило преобразования.

Управление определяет, как система принимает, изменяет, документирует и выводит из использования общие решения.

• Критерии вклада отделяют повторяющуюся потребность продукта от локального паттерна, которому не место в основной библиотеке.
• Назначенные владельцы проверяют последствия для визуального оформления, взаимодействия, доступности и реализации до публикации.
• Примечания к выпуску и руководство по миграции объясняют потребителям изменение и необходимые действия.
• Обратная связь и данные использования показывают недостающие возможности, дубли компонентов и правила, которые команды регулярно обходят.

Такая политика позволяет системе развиваться без скрытой поломки существующих продуктов.

• Замена должна быть опубликована до того, как старый компонент или токен перестанут быть нормальным выбором.
• Уведомление называет причину, поддерживаемый путь миграции и дату удаления или пересмотра.
• Ресурсы Figma, пакеты кода и документация должны иметь одинаковый статус, чтобы команды не брали устаревший источник.
• Немедленное удаление допустимо при серьёзном риске; обычная очистка должна дать потребителям время на переход.

Доступность должна быть частью контракта компонента, а не необязательной заметкой для каждого дизайнера экрана.

• Компонент задаёт клавиатурное поведение, порядок фокуса, размер цели и видимые состояния вместе с визуальной анатомией.
• Текст, значки, границы и индикаторы фокуса проверяются на каждой поддерживаемой подложке и в каждом состоянии.
• Свойства должны упрощать доступный путь, например требовать подпись и отдельно открывать вариант только со значком.
• Документация обозначает ответственность пользователя компонента, например осмысленный текст кнопки или заголовок диалога.

Модульная шкала получает связанные размеры умножением базового размера на выбранный коэффициент.

• База 16 пикселей с коэффициентом 1,25 даёт до округления ступени около 16, 20, 25 и 31 пикселя.
• Малый коэффициент даёт больше спокойных ролей для плотных интерфейсов, а крупный создаёт выразительную иерархию с меньшим числом полезных промежуточных размеров.
• Рассчитанные значения являются отправными точками: их можно округлить для чистого отображения и назначить семантическим текстовым ролям.
• Подписи, таблицы данных и акцидентный маркетинговый текст могут требовать контролируемых исключений вместо принуждения к одной последовательности.

Сочетание единиц позволяет тексту реагировать на доступную ширину и не делает вьюпорт единственным источником масштаба.

• Чистое значение vw может стать нечитаемо малым или чрезмерно крупным, если его не сдерживают отдельные пределы.
• clamp() может объединить минимум и максимум в rem с предпочтительным выражением calc(), смешивающим rem и единицы вьюпорта.
• Часть в rem лучше сохраняет реакцию на настройки текста в браузере, а часть от вьюпорта даёт постепенную адаптацию макета.
• Основному тексту нужен узкий диапазон, а каждую роль всё равно следует проверять при масштабировании, переносах и на промежуточной ширине.

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

• Малые оптические размеры могут иметь более открытые внутрибуквенные просветы, прочные штрихи и свободные интервалы для сохранения чёткости.
• Акцидентные размеры допускают более тонкие детали, сильный контраст штрихов и плотные пропорции благодаря большему числу пикселей.
• Вариативный шрифт с осью opsz интерполирует эти изменения, а font-optical-sizing: auto позволяет браузеру с поддержкой свойства получить настройку из размера шрифта.
• Эффект зависит от гарнитуры, поэтому дизайнеру нужно сравнивать реальные образцы, а не считать любую оптическую ось улучшением выбранной роли.

Вариативный шрифт хранит непрерывные оси дизайна в одном ресурсе и даёт более тонкое управление, чем несколько статичных файлов.

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

Вертикальный ритм согласует высоту строк и отступы блоков, чтобы связанный текст образовывал повторяемый темп чтения.

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

Контентно-зависимая компоновка позволяет контенту и доступному пространству сильнее определять результат, чем фиксированные размеры под конкретный вьюпорт.

• min-content задаёт наименьшую ширину контента без предотвратимого переполнения, а max-content его идеальную ширину без переносов.
• Гибкие треки и перенос позволяют композиции адаптироваться до появления необходимости в медиазапросе.
• min(), max() и clamp() выражают границы, объединяющие ограничения контента, контейнера и вьюпорта.
• Такое поведение сокращает число брейкпоинтов, но структурные изменения композиции всё равно требуют запросов.

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

• repeat(auto-fit, minmax(16rem, 1fr)) схлопывает пустые треки и распределяет оставшуюся ширину между существующими колонками.
• Минимум определяет момент, когда следующая колонка перестаёт помещаться, поэтому он должен зависеть от контента карточки, а не названия устройства.
• Максимум 1fr позволяет трекам делить лишнее место вместо случайного пробела у края контейнера.
• auto-fill сохраняет места пустых треков, что полезно только при намеренном резервировании структуры сетки.

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

• Одна карточка может иметь компактную компоновку в боковой панели и расширенную в основном контенте при одной ширине вьюпорта.
• Родитель должен создать подходящий контейнер запроса, обычно через container-type: inline-size.
• Пороги запроса должны отмечать момент, когда собственный контент или анатомия компонента перестают работать.
• Запросы вьюпорта остаются уместными для изменений страницы, связанных со всем экраном или средой.

Subgrid позволяет вложенной сетке переиспользовать треки родителя вместо создания несвязанной внутренней сетки.

• Заголовки, описания и действия карточек могут выравниваться между соседними карточками при разной длине контента.
• Вложенный элемент участвует в родительских строках или колонках, выбранных для оси subgrid.
• Общее выравнивание становится структурным и не зависит от продублированных пикселей или фиксированных высот.
• Subgrid не нужен, если вложенному контенту требуются независимые треки и выравнивание между компонентами отсутствует.

Логические свойства задают отступы и размеры по направлению текста, а не жёстко по физическим сторонам.

• margin-inline-start следует началу строки LTR или RTL, а margin-left всегда относится к физической левой стороне.
• inline-size и block-size соответствуют строчной и блочной осям, включая вертикальные режимы письма.
• Логические padding, border и inset сокращают отдельные переопределения при смене направления языка.
• Физическое свойство остаётся уместным, когда нужна именно сторона экрана, например для закреплённого элемента управления.