Тест по терминологии веб-дизайна
[ создаем проекты, где важен смысл ]
Тест по терминологии веб-дизайна (25 вопросов)
ТЕСТ ПО ТЕРМИНОЛОГИИ
Этот тест проверяет знание ключевых понятий веб-дизайна — от UI и UX до сеток, адаптивности и принципов вёрстки. Подойдёт тем, кто хочет убедиться, что что владеете языком индустрии на уверенном уровне.
1. Что обозначает термин UI?
Тестирование сайта — это отдельный процесс проверки, работает ли всё правильно. UI к этому не относится.
UI (User Interface) — это всё, что пользователь видит на экране и с чем взаимодействует: кнопки, меню, формы, иконки, цвета, шрифты. Проще говоря — внешний вид сайта или приложения.
Система управления контентом — это платформа, через которую добавляют тексты, фото и страницы на сайт. Например, Tilda или WordPress.
Протоколы передачи данных — это технические правила, по которым компьютеры обмениваются информацией в интернете. К дизайну не относятся.
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. Что такое брейкпоинт?
Анимация останавливается по другим правилам. Брейкпоинт — про размер экрана, не про движение.
Ошибка в коде — это баг. Брейкпоинт — рабочий инструмент, не поломка.
Брейкпоинт — это конкретная ширина экрана, при достижении которой сайт перестраивается. Например, на экране шире 1024px — десктопная версия, уже — мобильная. Благодаря брейкпоинтам сайт адаптируется под разные устройства.
Граница между блоками — это визуальный разделитель. Брейкпоинт — техническое понятие про размер экрана.
12. Что такое Hero-блок?
Блок с отзывами обычно называют секцией отзывов или testimonials. Hero — это первый экран.
Блок с командой — отдельная секция страницы. Hero всегда первый.
Блок с ценами — это прайс-секция. Hero — про другое.
Hero-блок — это первое, что видит пользователь на сайте. Обычно содержит главный заголовок, короткое описание и кнопку действия. Задача — за несколько секунд объяснить, что это за сайт и что здесь можно сделать.
13. Что такое контраст в веб-дизайне?
Анимация при наведении — это hover-эффект. Контраст про визуальную разницу, а не движение.
Контраст — это когда один элемент заметно отличается от другого. Тёмный текст на светлом фоне, крупный заголовок рядом с мелким текстом, жирная кнопка среди обычных ссылок. Контраст помогает взгляду находить важное.
Расстояние между блоками — это отступы. Контраст про разницу, а не расстояние.
Выравнивание текста — по левому краю, по центру, по ширине. К контрасту не относится.
14. Что такое белое пространство?
Белый фон — это цветовое решение. Белое пространство может быть на фоне любого цвета — суть в пустом месте между элементами.
Заглушки — это временные элементы до появления реального контента. Белое пространство — осознанный дизайнерский приём.
Белое пространство — это намеренно оставленные пустые зоны вокруг элементов. Оно не пустота — оно даёт странице воздух, помогает взгляду отдохнуть и делает контент легче для восприятия.
Незаполненные поля формы — это просто пустые инпуты. К белому пространству не относятся.
15. Что такое бриф?
Финальный отчёт — это документ по итогам работы. Бриф составляется в самом начале.
Бриф — это стартовый документ, в котором клиент описывает свой бизнес, задачу и ожидания. Чем подробнее бриф — тем меньше правок и недопониманий в процессе работы.
Список правок появляется уже в процессе работы над макетом. Бриф — это самый первый документ, до начала дизайна.
Техническое задание на вёрстку — более детальный документ для разработчика. Бриф шире и проще — это разговор о задаче и целях.
16. Что такое иерархия в дизайне?
Порядок страниц в меню — это структура сайта. Иерархия в дизайне про другое.
Очерёдность разработки — это про процесс работы. Иерархия — про визуальную организацию.
Уровни доступа — это техническая настройка: кто может редактировать сайт, а кто только смотреть. К дизайну не относится.
Иерархия — это когда взгляд сам понимает, что читать сначала. Большой заголовок важнее маленького подзаголовка, яркая кнопка важнее серой ссылки. Хорошая иерархия ведёт пользователя по странице без лишних усилий.
17. Что такое фавикон?
Анимированный логотип — это отдельный элемент брендинга. Фавикон маленький и статичный.
Фавикон — это крошечная иконка, которую видно на вкладке браузера рядом с названием сайта. Обычно это упрощённая версия логотипа. Помогает быстро найти нужную вкладку среди открытых.
Шрифт для заголовков — это типографическое решение. Фавикон — иконка, не шрифт.
Кнопка возврата — элемент навигации. Фавикон — визуальный идентификатор сайта в браузере.
18. Что такое модульная сетка?
Модульная сетка используется для любых форматов — десктоп, планшет, мобильный.
Декоративный паттерн — это визуальный элемент оформления. Сетка невидима для пользователя.
Модульная сетка — это невидимая структура из колонок, строк и отступов между ними. По ней дизайнер выравнивает все элементы страницы. Именно она делает макет аккуратным и последовательным.
Анимация — отдельный инструмент. Сетка про структуру и выравнивание, не про движение.
19. Что такое паттерн в веб-дизайне?
Ошибка в вёрстке — это баг или недочёт. Паттерн — наоборот, проверенное решение.
Паттерн в дизайне — это готовое решение, которое уже хорошо работает. Например, гамбургер-меню на мобильном, хлебные крошки для навигации, карточки товаров в каталоге. Паттерны не изобретают заново — их берут, потому что пользователи уже к ним привыкли.
Шаблон письма — это email-макет. Паттерн — более широкое понятие про дизайн-решения.
Набор шрифтов — это типографическая система. Паттерн про повторяющиеся решения, не про шрифты.
20. Что такое кернинг?
Расстояние между строками — это интерлиньяж. Кернинг работает только с парами букв.
Толщина начертания — это жирность шрифта: тонкий, обычный, жирный. К кернингу не относится.
Кернинг — это точечная настройка расстояния между конкретными парами букв. Например, буквы «АВ» или «То» визуально кажутся ближе или дальше из-за своей формы — кернинг это исправляет.
Размер шрифта — это кегль. Кернинг про расстояние между буквами, не про их размер.
21. Что такое трекинг?
Аналитика переходов — это инструмент для отслеживания поведения пользователей на сайте. Трекинг в типографике про другое.
Расстояние между конкретными парами букв — это кернинг. Трекинг работает иначе.
Трекинг — это общее расстояние между всеми буквами сразу. В отличие от кернинга, который настраивает конкретные пары, трекинг меняет плотность всего текста целиком. Увеличенный трекинг делает текст разреженным, уменьшенный — плотным.
Отслеживание поведения пользователя — это веб-аналитика. В типографике трекинг означает совсем другое.
22. Что такое интерлиньяж?
Отступ между колонками — это часть сетки. Интерлиньяж работает с текстом.
Расстояние между буквами — это трекинг или кернинг. Интерлиньяж про строки.
Ширина текстового блока влияет на длину строки. Интерлиньяж про расстояние по вертикали.
Интерлиньяж — это вертикальное расстояние между строками. Слишком маленький — строки слипаются и читать тяжело. Слишком большой — текст рассыпается. Оптимальный интерлиньяж для основного текста — 1.4−1.6 от размера шрифта.
23. Что такое модальное окно?
Полноэкранный режим браузера — это системная функция. Модальное окно — элемент интерфейса сайта.
Модальное окно — это всплывающий блок, который появляется поверх страницы. Пока оно открыто, нельзя взаимодействовать с остальным содержимым. Примеры: форма обратной связи, подтверждение действия, просмотр фото.
Боковое меню — это навигационный элемент. Оно не блокирует страницу.
Анимированный баннер — рекламный или декоративный элемент. Модальное окно появляется по действию пользователя и требует реакции.
24. Что такое гайдлайн?
Список правок — это комментарии к макету в процессе работы. Гайдлайн создаётся один раз и используется долго.
Инструкция по плагинам — техническая документация. Гайдлайн про фирменный стиль.
Гайдлайн — это инструкция по фирменному стилю. В нём прописано, как использовать логотип, какие цвета и шрифты применять, какие отступы соблюдать. Нужен, чтобы все материалы компании выглядели единообразно.
Техническое задание описывает функциональность и задачи. Гайдлайн — про визуальный стиль.
25. Что такое выравнивание в веб-дизайне?
Цветовая палитра — отдельная часть дизайна. Выравнивание про расположение элементов.
Межстрочный интервал — это интерлиньяж. Выравнивание про другое.
Масштабирование — это изменение размера. Выравнивание про позицию элементов, не их размер.
Выравнивание — это когда все элементы стоят по одной линии или сетке. Кнопки на одном уровне, тексты начинаются в одной точке, отступы одинаковые. Именно выравнивание делает макет аккуратным и собранным.
Если у вас есть какие-то вопросы
В нашей студии вы можете пройти индивидуальное или групповое обучение по веб-дизайну, где мы подберем программу под ваши задачи. Также скоро у нас запустятся онлайн-курсы разной сложности: для новичков, желающих освоить базовые навыки, и для опытных дизайнеров, стремящихся совершенствоваться.
