Тест по композиции для веб-дизайнеров
[ создаем проекты, где важен смысл ]
Тест по композиции для веб-дизайнеров (14 вопросов)
ТЕСТ ПО КОМПОЗИЦИИ
Композиция — это не про «красиво расставить элементы». Это про то, куда смотрит глаз, что считывается первым и почему одна страница ощущается понятной, а другая — перегруженной. Тест проверяет знание ключевых принципов: отступы, визуальная иерархия, баланс, распределение элементов. Подойдёт и тем, кто только разбирается в теме, и тем, кто хочет проверить себя.
1. Выберите удачный вариант:
Блоки разделены двумя способами: достаточным отступом и сменой цвета фона. Такое разделение сразу даёт понять, где заканчивается один раздел и начинается следующий — структура страницы считывается без усилий.
Когда блоки стоят близко и фон не меняется, страница превращается в сплошной поток контента без пауз. Пользователь не успевает «переключиться» между темами — восприятие ухудшается.
2. Выберите удачный вариант:
Длинный текст в карточке с иконкой перегружает блок — такой формат не рассчитан на большие объёмы. А центрирование длинных абзацев дополнительно усложняет чтение: глаз каждый раз ищет начало следующей строки в новом месте.
Короткий текст под иконкой — 2−3 предложения максимум. Выравнивание по левому краю делает его удобным для чтения. Карточка не перегружена и воспринимается легко.
3. Выберите удачный вариант:
Центрирование уместно для коротких заголовков и подзаголовков. Длинный абзац по центру — это ловушка: каждая строка начинается в новом месте, глаз постоянно ищет её начало и быстро устаёт.
Длинный текст всегда выравнивается по левому краю — глаз знает, где начинается каждая строка, и легко скользит по тексту. Читать комфортно даже большие объёмы.
4. Выберите удачный вариант:
Иконки одного размера и одного стиля — контурные или залитые, но не вперемешку. Блок воспринимается как единая система, взгляд не спотыкается.
Иконки разного размера и разного стиля разрушают визуальное единство. Одна залитая, две контурные — глаз сразу замечает несоответствие. Такие детали считываются как небрежность, даже если контент хороший.
5. Выберите удачный вариант:
Главная кнопка акцентная — залитая, притягивает взгляд. Второстепенная — без заливки, только обводка. Пользователь сразу понимает, какое действие приоритетное, и не тратит время на выбор.
Когда обе кнопки одинаково яркие и залитые, иерархия действий исчезает. Взгляд не знает, куда идти — обе кнопки кричат одновременно. Это создаёт лишнее напряжение и снижает конверсию.
6. Выберите удачный вариант:
Когда текст прилипает к краям карточки, блок выглядит тесным и небрежным. Даже хороший контент в такой упаковке смотрится дешевле, чем есть на самом деле.
Достаточный отступ внутри карточки отделяет контент от краёв — блок выглядит аккуратно и не давит. Текст воспринимается легко, карточка ощущается завершённой.
7. Выберите удачный вариант:
Когда на странице одновременно несколько ярких цветов — оранжевый, зелёный, кислотный фон — взгляд не знает, за что зацепиться. Вместо акцентов получается визуальный шум. Чем больше цветов, тем меньше каждый из них работает.
Один акцентный цвет на странице — и он работает именно там, где нужно привлечь внимание. Всё остальное нейтральное — страница смотрится спокойно и профессионально.
8. Выберите удачный вариант:
Заголовок карточки заметно крупнее описания — взгляд сначала считывает название, потом переходит к тексту. Иерархия работает, структура понятна без усилий.
Когда заголовок и описание почти одного размера, карточка превращается в однородный текстовый блок. Непонятно, что важнее — взгляд не знает, с чего начать, и скользит по карточке без точки входа.
9. Выберите удачный вариант:
Когда и баннер, и карточки забиты текстом, страница перегружается. Пользователь не знает, за что взяться, и просто уходит. Больше текста — не значит больше информации. Часто это значит меньше внимания к каждому слову.
Баннер — не место для длинных текстов. Короткий подзаголовок и кнопка. В карточках — 2−3 предложения максимум. Пользователь сканирует страницу, а не читает книгу — контент должен это учитывать.
10. Выберите удачный вариант:
Иконки, заголовки и тексты всех трёх карточек находятся на одном уровне — блок смотрится как единая система. Глаз легко сканирует содержимое по горизонтали.
Когда элементы карточек разбросаны по разным уровням, сетка разваливается. Иконка одной карточки выше, заголовок другой ниже — взгляд спотыкается. Выглядит небрежно, даже если контент хороший.
11. Выберите удачный вариант:
Текст и ссылки во всех карточках на одном уровне — блок смотрится аккуратно и собранно. Такой ритм создаёт ощущение порядка даже без явной сетки.
Когда ссылки и текст внутри карточек разбросаны по разным уровням, блок разваливается визуально. Глаз замечает несоответствие сразу — даже если не может сформулировать, что именно не так.
12. Выберите удачный вариант:
Кислотный цвет заливки плюс жирная обводка поверх — двойной визуальный удар. Кнопка начинает кричать громче, чем заголовок баннера. Такое оформление не добавляет акцента — оно создаёт раздражение.
Кнопка с заливкой не нуждается в дополнительной обводке — заливка уже делает её заметной. Цвет подобран в рамках палитры страницы, кнопка выглядит аккуратно и не отвлекает от содержимого.
13. Выберите удачный вариант:
Кислотный жёлтый фон уже перетягивает всё внимание на себя. А когда к нему добавляются синий, красный и фиолетовый одновременно — страница превращается в визуальный шум. Глаз не знает, за что держаться, и просто устаёт.
Один акцентный цвет на нейтральном фоне — и он работает именно там, где нужно. Страница смотрится спокойно и профессионально, ничто не отвлекает от содержимого.
14. Выберите удачный вариант:
Когда информационные блоки и заголовки оформлены как кнопки с заливкой, страница превращает пользователя в детектива. Он не понимает, что кликабельно, а что нет — и в итоге не нажимает ничего. Форма элемента должна точно отражать его функцию.
Кнопка на странице одна — и она выглядит как кнопка. Преимущества оформлены иконками с текстом — информация, не действие. Пользователь сразу понимает, куда нажимать и что просто читать.
Если у вас есть какие-то вопросы
В нашей студии вы можете пройти индивидуальное или групповое обучение по веб-дизайну, где мы подберем программу под ваши задачи. Также скоро у нас запустятся онлайн-курсы разной сложности: для новичков, желающих освоить базовые навыки, и для опытных дизайнеров, стремящихся совершенствоваться.
