Контраст в веб-дизайне помогает управлять вниманием пользователя. Он создаёт визуальную иерархию: показывает человеку, куда смотреть в первую очередь, какая информация самая важная, а какая — второстепенная. Один из способов выделить элемент и сделать композицию интереснее — использовать контраст размера. Разбираем, как его применять.
Контраст размера в текстах
— При работе с текстами важно, чтобы заголовок, подзаголовок и основной текст отличались размером. Так вы создаёте визуальную иерархию информации и помогаете пользователю отличить главное от второстепенного. Если этого не сделать, сайт превратится в простыню из контента и ориентироваться в нём будет сложно.
— Контраст в типографике часто используется в дизайне обложек. Это актуально, когда нет физического продукта и возможности использовать фотографии или иллюстрации. В этом случае в заголовке крупным шрифтом следует передать основное сообщение сайта, а в подзаголовке меньшим кеглем добавить дополнительную информацию.
— Размером также можно выделять ключевые фразы, цифры и цитаты. Старайтесь не использовать больше трёх стилей типографики на одном экране, иначе вёрстка будет выглядеть перегруженной.
Контраст размера в изображениях
— Чем крупнее изображение, тем значимее и заметнее оно выглядит. Вы можете усилить эффект, добавив рядом картинку меньшего размера. Такой контраст применяют, чтобы направить фокус посетителя сайта на что-то важное, например, на новый товар или специальное предложение.
— Противопоставляя крупные и малые элементы, можно добиться выразительности и визуального разнообразия. Если вы хотите сделать композицию динамичнее, расположите рядом изображения разного размера. Этот приём подойдёт для блока с фотографиями или для главного экрана.
Контраст размера в текстах
— При работе с текстами важно, чтобы заголовок, подзаголовок и основной текст отличались размером. Так вы создаёте визуальную иерархию информации и помогаете пользователю отличить главное от второстепенного. Если этого не сделать, сайт превратится в простыню из контента и ориентироваться в нём будет сложно.
— Контраст в типографике часто используется в дизайне обложек. Это актуально, когда нет физического продукта и возможности использовать фотографии или иллюстрации. В этом случае в заголовке крупным шрифтом следует передать основное сообщение сайта, а в подзаголовке меньшим кеглем добавить дополнительную информацию.
— Размером также можно выделять ключевые фразы, цифры и цитаты. Старайтесь не использовать больше трёх стилей типографики на одном экране, иначе вёрстка будет выглядеть перегруженной.
Контраст размера в изображениях
— Чем крупнее изображение, тем значимее и заметнее оно выглядит. Вы можете усилить эффект, добавив рядом картинку меньшего размера. Такой контраст применяют, чтобы направить фокус посетителя сайта на что-то важное, например, на новый товар или специальное предложение.
— Противопоставляя крупные и малые элементы, можно добиться выразительности и визуального разнообразия. Если вы хотите сделать композицию динамичнее, расположите рядом изображения разного размера. Этот приём подойдёт для блока с фотографиями или для главного экрана.
