Словарь основных дизайн терминов

Sergii Polkovnikov
miloskiy
Published in
5 min readFeb 9, 2016

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

A

Alignment (выравнивание) — расположение объектов относительно других объектов. Например слева, справа, по центру и т.п.

B

Back End (бэкэнд) — в вебе, это часть сайта, которая спрятана от глаз обычного пользователя и выполняется на стороне сервера. Применимо к CMS (смотрите ниже), бэкэндом является административная часть системы.

Baseline (бейзлайн) — термин используется относительно типографики — это воображаемая линия, на которой стоят все буквы в строке.

Below the Fold (вне экрана) — термин пришел из газетного дела и обозначает часть контента сайта, которая не поместилась в пределах видимой части экрана сайта или приложения. Т.е., чтобы просмотреть данный контент, пользователю прийдется проскроллить (прокрутить) страницу вниз.

Bezier Curve (кривые Безье) — параметрические кривые, которые представляют векторный путь в компьютерной графике. Зачастую они создаются с помощь Pen Tool, путем соединения точек, которые позволяют изменять форму и направление кривых.

C

CMS (цмс, кмс, система управления контентом) — инструмент, который позволяет управлять сайтом. Обычно, в CMS контент отделён от дизайна и функциональной составляющей сайта, что позволяет легко изменять дизайн и функционал, не затрагивая при этом контент. Позволяет легко создавать сайты людям, которые не связаны с дизайном и разработкой.

CMYK (смук, смюк, цмик, цмук, смик) — субтрактивная схема формирования цвета, которая используется в основном в полиграфии. В CMYK используются четыре цвета — Cyan (голубой), Magenta (пурпурный), Yellow (желтый) и blacK (черный) для формирования цвета. Каждое из чисел, используемых для обозначения цвета в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию.

CSS (каскадные таблицы стилей) — формальный язык, который используется для описания внешнего вида веб страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется для задания цветов, шрифтов и расположения отдельных блоков на веб страницах.

D

DPI, PPI — количество точек (пикселей для PPI), которые помещаются на один дюйм экрана.

F

Favicon — это маленькие (обычно 16х16 пикселей, реже 32х32 пикселя) иконки, которые отображаются на вкладке сайта в браузере возле названия сайта.

Font Weight — определяет насыщенность (толщину) символов в тексте.

Front End (фронтэнд) — часть сайта, исполняемая на стороне пользователя. В вебе в качестве фронтэнда выступают HTML-вёрстка, стили CSS и JavaScript. Применимо к CMS, фронтэнд является лицевой частью сайта, которую видит пользователь.

G

Grid (сетка) — набор вертикальных и горизонтальных линий, которые формируют систему для расположения объектов.

H

HSB — трёхканальная схема формирования цвета. Название происходит от первых букв английских слов: Hue (цветовой тон), Saturation (насыщенность), Brightness (яркость).

K

Kerning (кернинг) — расстояние между определенными парами символов: LA, Tr, Ta, Ty, Wa, WA, Wo, Ya и другими.

L

Landing Page (лэндинг, посадочная страница) — это веб-страница, собранная определенным образом, главной задачей которой является сбор контактных данных аудитории или продажа товара.

Layers (слои) — используются в Photoshop для компоновки изображения. Слои напоминают стопку прозрачных листов, через прозрачные области вышележащих слоев можно видеть содержимое нижних слоев.

M

Margin (внешний отступ) — внешний отступ от элемента.

Mockups (мокапы) — готовый дизайн страницы.

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

N

Navigation (навигация, меню) — это система ссылок, которая позволяет пользователю перемещаться по сайту либо приложению.

Negative Space (белое пространство, пустое пространство, молоко) — часть страницы, которая не содержит текст или изображения.

P

Padding (пэдинг, отступ) — внутренний отступ элемента.

Pen Tool (пен тул) — инструмент, который используется для создания кривых Безье в векторной графике.

Photoshop — графический редактор компании Adobe доступный на Windows и Mac OS X. Содержит в себе широкий функционал для работы с растровой графикой и базовый функционал для работы с векторной графики. За неимением конкуренции, ранее широко использовалась дизайнерами для создайна дизайна интерфейсов.

Pixel (пиксель) — самый маленький элемент изображения (как утом в молекуле). Имеет квадратную форму.

Plug-Ins (плагины) — это приложения, написанные сторонними разработчиками для расширения базового функционала программы.

R

Raster, Bitmap (растровые изображения) — изображение, представляющее собой сетку пикселей на экране устройства. Редактируется данная графика с помощью растровых графических редакторов. При изменении размера данных изображений, существенно теряется качество изображения.

Resolution (разрешение, резолюшин) — обозначает количество пикселей отображаемых на экране (например 1280х1024).

Responsive (адаптивный) дизайн — это вид дизайна сайта (приложения), который позволяет отображать сайт (приложение) одинаково корректно на устройствах с любым размером экрана.

RGB — аддитивная схема формирования цвета. Нужный цвет получается путем смешения световых излучений трёх первичных цветов — красного, зелёного и синего (Red, Green, Blue). Смешение 100% первичных цветов даёт белый цвет.

S

Sketch (приложение) — приложение компании Bohemian Coding для создания векторной графики. Было создано как альтернатива Photoshop для дизайнеров интерфейсов. Доступно только на Mac OS X. Поддерживает множество сторонних плагинов, которые значительно упрощают жизнь дизайнера. Очень тепло принято в кругу дизайнеров, так как не содержит в себе ничего лишнего и нацелено именно на создание дизайна интерфейса (в отличии от Photoshop).

Sketches (скетчи) — быстрые, лишенные деталей зарисовки будущего дизайна.

Sketchpad (альбом) — альбом для зарисовок скетчей. Могут иметь схематически нанесенные изображения различных устройств, для создания более наглядных зарисовок.

Specification (техническое задание) — детальное или не очень описание целей, функционала, структуры и внешнего вида разрабатываемого сайта (приложения). Данный документ очень упрощает жизнь дизайнерам.

T

Tracking (трекинг) — равномерно изменение расстояния между буквами (всеми, в отличии от кернинга).

U

UI дизайн (пользовательский интерфейс) — понятие, включающее в себя определённый набор графически оформленных элементов. По сути UI отвечает за то, как выглядит сайт (приложение).

Usability (юзабилити) — это то, насколько просто пользователям использовать ваш сайт (приложение) для достижения определённых целей.

User Personas (персоны) — это вымышленные персонажи, которые обладают набором качеств характерным для целевой аудитории вашего сайта (приложения). Персоны используются для идентификации пользовательских целей, мотивации пользователей, их болевых точек. Персоны должны всегда базироваться на результатах исследований аудитории.

UX дизайн (пользовательский опыт) — понятие включающее в себя то, как продукт функционирует, и, какие эмоции вызывает и пользователей.

V

Vector (векторные) изображения — способ представления изображения в компьютерной графике, основанный на математическом описании основных геометрических форм (точки, линии, круги, многоугольники, кривые Безье). Основным отличием от растровых изображений является то, что при изменении размера качество изображения не изменяется.

W

Wireframes (вайрфреймы) — это схематическое отображение основных блоков будущего сайта (приложения). Обычно создаются для того чтобы понять как лучше разместить обьекты для достижения пользователем поставленной цели. Зачастую делаются черно-белыми, чтобы не отвлекать внимание от функционала.

Не нашли значение нужного вам термина?

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

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

Начинающим дизайнерам, невероятно рекомендую ознакомиться с справочником по дизайну для iOS и справочником по дизайну для Apple Watch (на русском).

--

--

Sergii Polkovnikov
miloskiy

Sr. Product Designer. Currently leading design system and On-Trip experience at GetYourGuide.com. Before served as a Team Lead & App Designer at Booking.com