Этот словарь собран для тех, кто работает или только начинает свой путь в дизайне и разработке интерфейсов. Здесь вы найдете пояснения ключевых терминов: от базовых элементов до анимаций, шрифтов и инструментов.

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

IT GARDEN

UI/UX и веб-дизайна

СЛОВАРЬ

®

Tooltip (Тултип)

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

Card (Карточка)

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

Modal Window (Модалка)

подсказка, появляющаяся при наведении на элемент, объясняющая его назначение.

Button (Батон)

интерактивный элемент интерфейса, запускающий действие (например, «Отправить», «Добавить в корзину»). Может быть текстовым, с иконкой или в виде кнопки-ссылки.

Базовые UI-элементы

общее равномерное изменение расстояния между символами.

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

Serif (Серифы)

Tracking (Трекинг)

Kerning (Кернинг)

Leading (Лидинг)

межстрочный интервал, влияющий на читаемость текста.

Типографика

написание текста прописными (заглавными) буквами.

шрифты без засечек, более лаконичные и современные.

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

Small caps (Малые капс)

Caps (Капс)

Sans-serif (Сансериф)

декоративные «ножки» или засечки на концах букв.

модель цвета: оттенок, насыщенность, яркость.

шестнадцатеричный код цвета, например #FF5733.

цветовая модель для экранов (красный, зеленый, синий).

Цветовые термины

плавный переход одного цвета в другой.

наложение одного цвета или слоя на другой.

Gradient (Градиент)

Overlay (Оверлей)

модель цвета для печати (голубой, пурпурный, желтый, черный).

ширина экрана, при которой дизайн перестраивается.

способ выравнивания элементов внутри контейнера в CSS.

Breakpoint (Точка разрыва)

Grid (Сетка)

система колонок и строк для организации интерфейса.

Разметка и верстка

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

дисплеи с высокой плотностью пикселей, где картинка выглядит четче.

изображения из пикселей, зависят от разрешения.

Raster Graphics (Растровая графика)

Vector Graphics (Векторная графика)

условия CSS для адаптивных стилей.

интерактивная версия макета для проверки сценариев.

черновая схема интерфейса без деталей.

Usability (Юзабилити)

Prototype (Прототип)

Wireframe (Вайрфрейм)

Mockup (Макет)

реалистичная демонстрация дизайна в окружении (например, сайт на экране ноутбука).

Дизайн-термины

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

адаптация интерфейса для людей с ограниченными возможностями.

структура и организация информации внутри продукта.

IA (Information Architecture)

внешний вид и элементы интерфейса, с которыми работает пользователь.

UI (User Interface)

UX (User Experience)

Accessibility (Доступность)

удобство и понятность интерфейса для пользователя.

любое движение или эффект в интерфейсе.

плавное изменение свойств элемента (цвета, размера).

Keyframes (Ключевые кадры)

эффект при наведении (например, подсветка кнопки).

Анимация и эффекты

прокрутка контента страницы или блока.

эффект, при котором фон движется медленнее переднего плана.

Scroll (Скролл)

Parallax (Параллакс)

контрольные точки анимации, задающие её ход.