Scott
Термины дизайна помогают обсуждать макет точно: не «сделать легче», а уменьшить насыщенность; не «раздвинуть текст», а изменить межстрочный интервал или кернинг. Чем яснее название свойства, тем проще объяснить правку коллеге.
Этот словарь пригодится дизайнерам, редакторам и менеджерам, которые работают с интерфейсами и графикой. В нём собраны понятия композиции, цвета, типографики и подготовки к печати.
У некоторых английских слов нет единственного русского варианта. При первом обсуждении называйте исходный термин и показывайте его на макете, чтобы команда одинаково понимала задачу.
1. Как пользоваться терминами в работе
Точное название полезно, когда оно связано с конкретным свойством или действием. Вместо «плохой шрифт» укажите, что именно мешает: размер, насыщенность, длина строки или расстояние между буквами.
Объясняйте термин на примере из проекта. Если речь об отступе, покажите границы блока; если о контрасте — сравните соседние элементы. Так обсуждение быстрее переходит от вкусов к задаче.
Согласованные определения помогают команде:
- Различать внешние поля, внутренние отступы и интервалы между элементами.
- Передавать параметры цвета и типографики без неоднозначных описаний.
- Понимать, какие изменения относятся к макету, а какие — к реализации.
- Выбирать подходящий формат графики и способ экспорта.
- Фиксировать повторяемые решения в стилях и компонентах.
2. Словарь: 50 терминов дизайна
Для каждого понятия ниже указано, что оно означает и где применяется.
1. Текстура
Визуальные свойства поверхности: например, зернистость бумаги, рисунок дерева или шероховатость камня. В графике текстура может быть фотографической или нарисованной.
2. Негативное пространство
Свободная область вокруг элементов и между ними. Она помогает группировать содержание и выделять главное. Такое пространство не обязательно белое: его определяет отсутствие значимых объектов, а не цвет фона.
3. Предметная раскладка — knolling
Приём организации предметов для съёмки сверху: объекты располагают упорядоченно, часто параллельно или под прямыми углами. Такая раскладка подчёркивает форму и связь предметов.
4. Размытие
Уменьшение резкости деталей изображения. Размытие может отделять фон от главного объекта, но не тождественно затемнению: яркость и резкость — разные свойства.
5. Разрешение
Детализация растрового изображения связана с количеством пикселей, а для печати важна также их плотность при заданном размере. Большие размеры в пикселях сами по себе не исправляют нерезкий или сильно сжатый исходник.
6. Насыщенность
Степень выраженности цвета по сравнению с нейтральным серым. Меняя насыщенность, можно сделать цвет более сдержанным или интенсивным; это не то же самое, что менять его светлоту.
7. Сетка
Система направляющих и областей для размещения содержания. Колонки, модули и интервалы помогают согласовать положение текста, изображений и элементов управления.
8. Кадрирование
Выбор границ изображения с удалением части исходного кадра. Кадрирование меняет композицию и соотношение сторон, поэтому проверяйте, не потеряны ли важные детали.
9. Контраст
Различие между элементами, например по светлоте, размеру или форме. В интерфейсе контраст помогает различать текст, фон и элементы управления.
10. Пиксель
Элемент растрового изображения, которому задано цветовое значение. Размеры изображения в пикселях описывают его сетку, например 1200 × 800.
11. Плоский дизайн
Подход с простыми формами и ограниченным использованием имитации объёма. Иерархия строится с помощью размеров, цвета, типографики и расположения элементов.
12. Векторная графика
Графика, в которой формы описаны контурами и математическими параметрами. Векторные контуры можно масштабировать без пикселизации; встроенные растровые изображения при этом сохраняют свои ограничения.
13. Растровая графика
Изображение, состоящее из сетки пикселей. При увеличении сверх исходного размера может стать заметной пиксельная структура или снизиться резкость.
14. Соотношение сторон
Отношение ширины изображения или области к высоте, например 16:9 или 1:1. Оно описывает пропорции, а не абсолютный размер.
15. Масштаб
Размер объекта относительно другого объекта или пространства композиции. Изменение масштаба помогает выделять главное и показывать связь элементов.
16. Правило третей
Композиционный ориентир: две горизонтальные и две вертикальные линии делят кадр на девять равных частей. Важные объекты можно расположить вдоль линий или рядом с их пересечениями; это приём, а не обязательное правило.
17. Поля
Свободные области у краёв страницы или макета. Поля отделяют содержание от границ и помогают сохранять читаемость.
18. Высечка
Вырезание заданной формы в печатном изделии с помощью специального инструмента. Форму и технические ограничения согласуют с производством.
19. Миниатюрный эскиз
Небольшой быстрый набросок композиции. Он помогает сравнить расположение крупных блоков до работы над деталями.
20. Гарнитура и начертание
Гарнитура объединяет шрифтовые решения общего рисунка. Начертания различаются, например, насыщенностью и наклоном. При выборе проверяйте наличие нужных символов и доступные начертания.
21. Текст-заполнитель — Lorem ipsum
Условный текст, который временно используют в макете вместо окончательного содержания. Он помогает оценить композицию, но для проверки переносов, смысла и действий нужен реалистичный текст.
22. Теория цвета
Понятия и принципы, которые помогают описывать цвет и строить сочетания. В проекте их применяют вместе с требованиями к читаемости, бренду и контексту использования.
23. Цветовой тон
Свойство, по которому цвет относят, например, к красному, жёлтому или синему. Цветовой тон отличается от насыщенности и светлоты.
24. Высветление и затемнение
Добавление белого создаёт более светлую версию цвета, а добавление чёрного — более тёмную. В редакторе сходные задачи можно решать настройками цвета; результат зависит от используемой модели.
25. Светлота
Характеристика того, насколько цвет воспринимается светлым или тёмным. Разница по светлоте особенно важна для различимости текста и фона.
26. Палитра
Набор цветов, выбранных для проекта. Полезно разделять цвета по назначению: текст, фон, акценты и состояния интерфейса.
27. Тёплые цвета
Обычно к ним относят красные, оранжевые и жёлтые оттенки. Их восприятие зависит от соседних цветов, культуры и конкретной композиции.
28. Холодные цвета
Обычно так называют синие, голубые и часть зелёных оттенков. Это относительное описание: один оттенок может выглядеть теплее или холоднее другого.
29. Монохромная палитра
Сочетание цветов одного цветового тона с разной светлотой и насыщенностью. Для интерфейса важно дополнительно проверить различимость состояний.
30. Аналогичные цвета
Цвета, расположенные рядом на цветовом круге. Они могут создавать близкое по настроению сочетание, но не гарантируют достаточный контраст.
31. Градиент
Плавный переход между двумя или несколькими цветами. Направление и положение цветовых точек определяют, как переход распределяется внутри объекта.
32. Дополнительные цвета
Цвета на противоположных сторонах выбранного цветового круга. Состав пары зависит от цветовой модели, а её применение — от нужного контраста и пропорций.
33. CMYK
Цветовая модель для цветоделения в печати: cyan, magenta, yellow и black. Итоговый цвет зависит от профиля, бумаги, красок и способа печати.
34. RGB
Модель, в которой цвет задаётся сочетанием красного, зелёного и синего каналов. Её используют для экранной графики; цветовой профиль уточняет, как интерпретировать значения.
35. Триадная палитра
Сочетание трёх цветов, расположенных примерно на равном расстоянии на цветовом круге. Чтобы распределить акценты, выбирайте один доминирующий цвет и поддерживающие оттенки.
36. Непрозрачность
Параметр, определяющий прозрачность объекта. При непрозрачности 100% объект полностью непрозрачен, а при 0% — полностью прозрачен. Уменьшение значения позволяет видеть расположенное под ним содержимое.
37. Pantone
Системы стандартизованных цветов, обозначенных кодами и представленных в справочниках образцов. Они помогают согласовать цвет при производстве; нужный справочник выбирают с учётом материала и технологии.
38. Пика
Типографская единица, равная 12 пунктам; в современной компьютерной системе измерений это 1/6 дюйма. Её используют для задания размеров в печатной верстке.
39. Шрифт без засечек
Шрифт без дополнительных штрихов-засечек на окончаниях основных элементов букв. Примеры — Arial и Verdana; читаемость зависит также от размера, начертания и условий отображения.
40. Шрифт с засечками
Шрифт с дополнительными штрихами на окончаниях элементов букв, например Times New Roman. Наличие засечек само по себе не определяет, подходит ли шрифт для конкретного текста.
41. Брусковый шрифт — slab serif
Шрифт с заметными, обычно массивными засечками. Конкретные гарнитуры различаются по рисунку и контрасту штрихов, поэтому выбирать их следует по задаче, а не только по названию группы.
42. HEX-код цвета
Шестнадцатеричная запись цвета. В распространённом формате #RRGGBB пары символов задают красный, зелёный и синий каналы: #000000 — чёрный, #FFFFFF — белый.
43. Основной текст — body copy
Основное содержание документа, отличное от заголовков и служебных подписей. Для него выбирают размер, длину строки и межстрочный интервал, удобные для продолжительного чтения.
44. Обрезной формат
Размер печатного изделия после подрезки. Фон и изображения, доходящие до края, обычно продолжают за линию реза на величину вылета, которую согласуют с типографией.
45. Висячая строка
Одинокая строка абзаца, оторванная от остальных при переносе на другую страницу или колонку. В макете проверяют начало и конец абзацев и при необходимости корректируют переносы.
46. Графический знак — logomark
Символ или изображение, которое представляет бренд без его названия. Знак может использоваться отдельно или вместе со словесным логотипом.
47. Словесный логотип
Название бренда, оформленное как узнаваемая графическая композиция. Его отличают рисунок букв, интервалы и другие особенности типографики.
48. GIF
Растровый формат, который может содержать один кадр или последовательность кадров для анимации. Ограниченная палитра делает его не лучшим выбором для сложных фотографических переходов.
49. Кернинг
Настройка интервала между конкретной парой знаков для зрительно равномерного набора. В отличие от кернинга, трекинг изменяет интервалы во всём выделенном фрагменте.
50. Высота строчных — x-height
Высота основной части строчных букв без выносных элементов; её часто описывают по букве x. У гарнитур одного кегля она может различаться и влиять на воспринимаемый размер текста.
Применяйте словарь к своему макету
Откройте рабочий экран и выберите одну правку: изменить поля, уточнить кернинг или настроить непрозрачность. Назовите свойство и объясните, какой результат нужен пользователю.
Для общих решений используйте одинаковые названия в файле, комментариях и документации. Короткое пояснение с примером помогает команде быстрее понять задачу, чем набор профессиональных слов без контекста.
