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