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

Сетка задаёт общую структуру для размещения и размеров элементов страницы.

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

Колонки содержат контент, межколонники разделяют их, а внешние поля защищают края макета.

• Сетка из 12 колонок поддерживает распространённое деление на половины, трети и четверти.
• Широкие межколонники сильнее разделяют блоки, но оставляют меньше места контенту.
• Внешние поля не дают тексту и элементам управления прижиматься к краю экрана.

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

• Базовый шаг 8 даёт значения 8, 16, 24 и 32 пикселя.
• Повторение шкалы делает внутренние отступы и расстояния между секциями последовательными.
• Полушаг в 4 пикселя подходит для компактных элементов без появления случайных значений.

Фиксированный контейнер сохраняет одну ширину, а резиновый меняется вместе с родителем или экраном.

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

Выравнивание создаёт визуальные связи между элементами и уменьшает ощущение беспорядка.

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

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

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

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

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

Симметричный баланс отражает похожий визуальный вес, а асимметричный уравновешивает разные элементы.

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

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

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

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

• Размер, начертание, контраст, положение и отступы могут усиливать или ослаблять акцент.
• Заголовок страницы обычно должен доминировать над вспомогательным текстом и метаданными.
• Множество одинаково заметных элементов не оставляет пользователю ясной точки входа.

Фокусная точка возникает, когда один элемент явно отличается от окружения.

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

Гарнитура определяет общий рисунок букв, а шрифт представляет конкретное начертание внутри семейства.

• Inter является гарнитурой.
• Inter Regular выбранного размера является конкретным шрифтовым начертанием.
• Разные насыщенности и курсивы являются отдельными начертаниями одной гарнитуры.

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

• Основной текст в браузере часто начинается примерно с 16 пикселей, но воспринимаемый размер зависит от гарнитуры.
• Межстрочный интервал около 1,4-1,6 обычно оставляет многострочному тексту достаточно воздуха.
• Слишком плотные строки визуально сталкиваются, а слишком свободные разрушают цельность абзаца.

Умеренная длина строки помогает глазу переходить на следующую строку и не терять место чтения.

• Для основного текста полезен ориентир примерно от 45 до 75 знаков в строке.
• В слишком широкой колонке трудно возвращаться к началу следующей строки.
• Слишком узкая колонка создаёт частые переносы и рваный ритм чтения.

Насыщенность должна разделять уровни важности, не превращая каждую подпись в жирную.

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

Удачная шрифтовая пара сочетает ясный контраст с совместимыми пропорциями и характером.

• Акцидентная гарнитура может работать в заголовках, а спокойная поддерживать длинный основной текст.
• Похожая высота строчной x, или x-height, помогает двум семействам гармонировать в близких размерах.
• Ограничение одной или двумя гарнитурами упрощает управление иерархией.

Кернинг регулирует одну пару букв, трекинг меняет расстояния во фрагменте текста, а интерлиньяж задаёт расстояние между строками.

• Кернинг исправляет неудобные пары наподобие A и V.
• Трекинг может разрядить короткую подпись прописными буквами, но в чрезмерном виде мешает основному тексту.
• В веб-макете интерлиньяж задаётся CSS-свойством line-height.

Типографическая шкала является ограниченным набором связанных размеров текста для всего интерфейса.

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

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

• Заголовок страницы должен визуально отличаться от заголовков разделов и подразделов.
• Соседним уровням нужна достаточная разница в размере, начертании или отступах.
• Визуальное оформление должно поддерживать семантическую структуру H1-H6, а не противоречить ей.

RGB, HEX и HSL могут задавать один экранный цвет через разные параметры.

• RGB задаёт значения красного, зелёного и синего каналов и поддерживает альфа-значение для прозрачности.
• HEX даёт компактную запись, удобную для переноса точного цвета между Figma и CSS.
• HSL разделяет тон, насыщенность и светлоту, поэтому в нём проще получать связанные светлые или менее насыщенные цвета.