[ Веб-студия Александры Шеиной ]
Тест по терминологии веб-дизайна
Тест по терминологии веб-дизайна (25 вопросов)
ТЕСТ ПО ТЕРМИНОЛОГИИ
Этот тест проверяет знание ключевых терминов и понятий веб-дизайна — от UI и UX до сеток, адаптивности и принципов вёрстки. Подойдёт тем, кто только осваивает профессию, и тем, кто хочет проверить, насколько хорошо ориентируется в профессиональной терминологии.
1. Что обозначает термин UI?
Тестирование сайта — это отдельный процесс проверки, работает ли всё правильно. UI к этому не относится.
UI (User Interface) — это визуальная и интерактивная часть интерфейса, с которой взаимодействует пользователь: кнопки, меню, формы, иконки, цвета, шрифты и другие элементы управления.
Система управления контентом (CMS) — это инструмент для создания, редактирования и публикации содержимого сайта. UI обозначает пользовательский интерфейс, а не систему управления сайтом.
Протоколы передачи данных — это технические правила, по которым компьютеры обмениваются информацией в интернете. К дизайну не относятся.
2. Что такое UX?
Язык разметки — это инструмент программиста, с помощью которого описывается структура страницы в коде. UX про другое.
Визуальный стиль — цвета, шрифты и оформление — относится прежде всего к UI. UX шире: он описывает весь опыт взаимодействия пользователя с продуктом, включая удобство, понятность и логику.
UX (User Experience) — это про то, насколько удобно пользоваться сайтом: легко ли найти нужное, понятно ли что делать дальше, не раздражает ли процесс. Хороший UX — когда всё работает так, что не замечаешь.
Системы хранения файлов — это облачные сервисы вроде Google Drive или Dropbox. К дизайну не относятся.
3. Что такое Wireframe?
Это уже визуально проработанный дизайн-макет. Wireframe показывает прежде всего структуру и расположение элементов без детального визуального оформления.
Wireframe — это как план квартиры: показывает, где будут блоки, текст, кнопки — но без отделки. Помогает продумать логику страницы до того, как начнётся визуальное оформление.
Интерактивный прототип позволяет проверить переходы и сценарии взаимодействия. Wireframe обычно проще: его задача — показать структуру страницы и расположение основных элементов.
Техническое задание — это текстовый документ с описанием задачи и требований. Wireframe — это визуальная схема, не документ.
4. Что означает термин «адаптивный дизайн»?
Анимация — это отдельный инструмент. Адаптивность к анимации не относится.
Дизайн только для мобильных устройств рассчитан на одну категорию экранов. Адаптивный дизайн предусматривает корректное отображение интерфейса на разных размерах экранов.
Адаптивный дизайн подстраивается под разные размеры экранов: элементы могут менять размеры, положение и структуру, чтобы интерфейс оставался удобным на телефоне, планшете и компьютере.
Автоматическая смена цветов — это например тёмная и светлая тема. Это не то же самое, что адаптивность.
5. Что такое прототип в веб-дизайне?
Вёрстка — это уже готовый сайт в коде. Прототип создаётся до вёрстки.
База данных — это техническая часть сайта, где хранятся данные. К дизайну не относится.
Скетч — это быстрый набросок идеи. Прототип показывает, как должен работать интерфейс и как пользователь будет переходить между его состояниями или экранами.
Прототип — это макет, по которому можно кликать и переходить между экранами, как на настоящем сайте. Помогает проверить логику и удобство до начала разработки.
6. Что такое сетка (Grid) в веб-дизайне?
Фоновый узор — это декоративный элемент. Сетка невидима для пользователя, она нужна дизайнеру.
Сетка — это невидимая структура из колонок и отступов, по которой дизайнер выравнивает все элементы страницы. Благодаря сетке сайт выглядит аккуратно и упорядоченно.
Таблица — это способ отображения данных на странице. Сетка — это инструмент дизайнера для выравнивания.
Анимация блоков — это отдельный инструмент. К сетке не относится.
7. Что такое лендинг?
Каталог товаров описывает содержание страницы, но сам по себе не делает её лендингом. Лендинг определяется прежде всего конкретной целью и сценарием пользователя.
Административная панель — это закрытый раздел, через который управляют сайтом. Пользователи её не видят.
Лендинг — это целевая страница, построенная вокруг конкретной задачи: например, оставить заявку, купить продукт или записаться на услугу. Контент и структура страницы ведут пользователя к этому действию.
Страница 404 появляется, когда адрес не найден. Это не лендинг.
8. Что такое CTA?
Аналитика сайта — это инструменты для отслеживания посещаемости и поведения пользователей. CTA про другое.
Анимация кнопок — это визуальный эффект. CTA — это про смысл и назначение элемента, а не про его анимацию.
Протоколы безопасности — это техническая часть. CTA к ним не относится.
CTA (Call to Action) — это кнопка или ссылка с текстом вроде «Оставить заявку», «Купить», «Узнать больше». Главная задача — подтолкнуть пользователя сделать следующий шаг.
9. Что такое «хлебные крошки» (Breadcrumbs)?
Декоративные разделители — это визуальные элементы оформления между секциями страницы. Хлебные крошки выполняют навигационную функцию.
Всплывающая подсказка — это tooltip: она поясняет отдельный элемент интерфейса. Хлебные крошки — это навигационная цепочка, показывающая структуру сайта.
История просмотров — это отдельный элемент, чаще встречается в интернет-магазинах. Хлебные крошки показывают структуру сайта, а не историю.
Хлебные крошки — это навигационная цепочка вида «Главная → Услуги → Разработка сайтов». Она показывает положение текущей страницы в структуре сайта и позволяет быстро перейти на уровень выше.
10. Что такое типографика в веб-дизайне?
Цветовая палитра — отдельная часть дизайна. Типографика работает только с текстом.
Типографика — это не просто выбор красивого шрифта. Это продуманная система: какие шрифты использовать, какого размера, с каким расстоянием между строками и буквами, как выстроить иерархию заголовков и текста.
Расстановка изображений — это про композицию и вёрстку. Типографика занимается только текстом.
Иконки — это отдельный элемент дизайна. К типографике не относятся.
11. Что такое брейкпоинт?
Анимация останавливается по другим правилам. Брейкпоинт — про размер экрана, не про движение.
Ошибка в коде — это баг. Брейкпоинт — рабочий инструмент, не поломка.
Брейкпоинт — это контрольная точка ширины viewport, при которой меняются правила отображения интерфейса. Например, может перестроиться сетка, измениться количество колонок или расположение элементов.
Граница между блоками — это визуальный разделитель. Брейкпоинт — техническое понятие про размер экрана.
12. Что такое Hero-блок?
Блок с отзывами — отдельная секция страницы. Само наличие отзывов не делает блок Hero-секцией.
Блок с командой — отдельный тип контентной секции. Hero-блок выполняет вводную функцию и знакомит пользователя с основным предложением страницы.
Блок с ценами — это прайс-секция. Hero — про другое.
Hero-блок — заметная вводная секция в верхней части страницы. Обычно в ней размещают основной заголовок, короткое описание, визуальный акцент и, если это нужно по сценарию, ключевое действие.
13. Что такое контраст в веб-дизайне?
Анимация при наведении — это hover-эффект. Контраст про визуальную разницу, а не движение.
Контраст — это когда один элемент заметно отличается от другого. Тёмный текст на светлом фоне, крупный заголовок рядом с мелким текстом, жирная кнопка среди обычных ссылок. Контраст помогает взгляду находить важное.
Расстояние между блоками — это отступы. Контраст про разницу, а не расстояние.
Выравнивание текста — по левому краю, по центру, по ширине. К контрасту не относится.
14. Что такое белое пространство?
Белый фон — это цветовое решение. Белое пространство может быть на фоне любого цвета — суть в пустом месте между элементами.
Заглушки — это временные элементы до появления реального контента. Белое пространство — осознанный дизайнерский приём.
Белое пространство — это намеренно оставленные пустые зоны вокруг элементов. Оно не пустота — оно даёт странице воздух, помогает взгляду отдохнуть и делает контент легче для восприятия.
Незаполненные поля формы — это просто пустые инпуты. К белому пространству не относятся.
15. Что такое бриф?
Финальный отчёт — это документ по итогам работы. Бриф составляется в самом начале.
Бриф помогает собрать исходную информацию о бизнесе, задаче, аудитории, целях и ожиданиях от проекта. Он нужен, чтобы обе стороны одинаково понимали задачу до начала основной работы.
Список правок фиксирует изменения уже в процессе работы. Бриф используют на старте проекта для сбора исходной информации.
Техническое задание фиксирует конкретные требования к реализации проекта. Бриф нужен раньше: он помогает определить задачу, цели и исходные условия.
16. Что такое иерархия в дизайне?
Порядок страниц в меню — это структура сайта. Иерархия в дизайне про другое.
Очерёдность разработки — это про процесс работы. Иерархия — про визуальную организацию.
Уровни доступа — это техническая настройка: кто может редактировать сайт, а кто только смотреть. К дизайну не относится.
Иерархия — это когда взгляд сам понимает, что читать сначала. Большой заголовок важнее маленького подзаголовка, яркая кнопка важнее серой ссылки. Хорошая иерархия ведёт пользователя по странице без лишних усилий.
17. Что такое фавикон?
Анимированный логотип — один из вариантов брендовой графики. Фавикон — специальная небольшая иконка, используемая браузером для идентификации сайта.
Фавикон — небольшая иконка сайта, которую браузер показывает рядом с названием страницы во вкладке, а также может использовать в закладках и других элементах интерфейса. Часто для него используют упрощённый знак бренда или логотип.
Шрифт для заголовков — это типографическое решение. Фавикон — иконка, не шрифт.
Кнопка возврата — элемент навигации. Фавикон — визуальный идентификатор сайта в браузере.
18. Что такое модульная сетка?
Модульная сетка используется для любых форматов — десктоп, планшет, мобильный.
Декоративный паттерн — это визуальный элемент оформления. Сетка невидима для пользователя.
Модульная сетка — это невидимая структура из колонок, строк и отступов между ними. По ней дизайнер выравнивает все элементы страницы. Именно она делает макет аккуратным и последовательным.
Анимация — отдельный инструмент. Сетка про структуру и выравнивание, не про движение.
19. Что такое паттерн в веб-дизайне?
Ошибка в вёрстке — это баг или недочёт. В контексте интерфейсов паттерном называют повторяемый способ решения типовой дизайнерской задачи.
Паттерн — это распространённый способ решения типовой задачи интерфейса. Например, гамбургер-меню на мобильных устройствах, хлебные крошки для навигации или карточки товаров в каталоге. Знакомые паттерны помогают пользователю быстрее понимать, как работает интерфейс.
Шаблон письма — это email-макет. Паттерн — более широкое понятие про дизайн-решения.
Набор шрифтов — это типографическая система. Паттерн про повторяющиеся решения, не про шрифты.
20. Что такое кернинг?
Расстояние между строками — это интерлиньяж. Кернинг работает только с парами букв.
Толщина начертания — это жирность шрифта: тонкий, обычный, жирный. К кернингу не относится.
Кернинг — это точечная настройка расстояния между конкретными парами букв. Например, буквы «АВ» или «То» визуально кажутся ближе или дальше из-за своей формы — кернинг это исправляет.
Размер шрифта — это кегль. Кернинг про расстояние между буквами, не про их размер.
21. Что такое трекинг?
Аналитика переходов — это инструмент для отслеживания поведения пользователей на сайте. Трекинг в типографике про другое.
Расстояние между конкретными парами букв — это кернинг. Трекинг работает иначе.
Трекинг — это общее изменение межбуквенного интервала сразу для всего выделенного текста. В отличие от кернинга, который корректирует расстояние между конкретными парами символов, трекинг делает набор в целом более плотным или разреженным.
Отслеживание поведения пользователя — это веб-аналитика. В типографике трекинг означает совсем другое.
22. Что такое интерлиньяж?
Отступ между колонками — это часть сетки. Интерлиньяж работает с текстом.
Расстояние между буквами — это трекинг или кернинг. Интерлиньяж про строки.
Ширина текстового блока влияет на длину строки. Интерлиньяж про расстояние по вертикали.
Интерлиньяж — это вертикальный интервал между строками текста. Слишком маленький интервал визуально склеивает строки, а слишком большой может разрушать целостность абзаца. Подходящее значение зависит от гарнитуры, размера шрифта, длины строк и задачи текста.
23. Что такое модальное окно?
Полноэкранный режим браузера — это системная функция. Модальное окно — элемент интерфейса сайта.
Модальное окно — это всплывающий блок, который появляется поверх страницы. Пока оно открыто, нельзя взаимодействовать с остальным содержимым. Примеры: форма обратной связи, подтверждение действия, просмотр фото.
Боковое меню — это навигационный паттерн. Оно может открываться поверх страницы, но само по себе не является модальным окном.
Анимированный баннер — рекламный или декоративный элемент. Модальное окно отличается тем, что выводится поверх основного интерфейса и временно требует внимания пользователя.
24. Что такое гайдлайн?
Список правок фиксирует конкретные изменения по текущему проекту. Гайдлайн содержит правила, которые помогают последовательно использовать фирменный стиль в разных материалах.
Инструкция по плагинам — техническая документация. Гайдлайн про фирменный стиль.
Гайдлайн — это инструкция по фирменному стилю. В нём прописано, как использовать логотип, какие цвета и шрифты применять, какие отступы соблюдать. Нужен, чтобы все материалы компании выглядели единообразно.
Техническое задание описывает функциональность и задачи. Гайдлайн — про визуальный стиль.
25. Что такое выравнивание в веб-дизайне?
Цветовая палитра — отдельная часть дизайна. Выравнивание про расположение элементов.
Межстрочный интервал — это интерлиньяж. Выравнивание про другое.
Масштабирование — это изменение размера. Выравнивание про позицию элементов, не их размер.
Выравнивание — это расположение элементов относительно общей оси, края или сетки. Например, заголовки могут начинаться на одной вертикали, а кнопки в нескольких карточках — находиться на одном уровне. Это помогает сделать композицию более собранной и последовательной.
Если у вас есть какие-то вопросы
В нашей студии вы можете пройти индивидуальное или групповое обучение по веб-дизайну, где мы подберем программу под ваши задачи. Также скоро у нас запустятся онлайн-курсы разной сложности: для новичков, желающих освоить базовые навыки, и для опытных дизайнеров, стремящихся совершенствоваться.
