Способы достижения визуальной иерархии в веб-дизайне - Блог MuseMaster - Все, что необходимо знать по работе с программой Adobe Muse })
  • Home
  • Веб-дизайн
  • Способы достижения визуальной иерархии в веб-дизайне

Способы достижения визуальной иерархии в веб-дизайне

blog.musemaster.ru

Способы достижения визуальной иерархии в веб-дизайне

471
Наши спонсоры

Размер, контраст, цвет, близость, выравнивание, повторяемость — простые принципы дизайна. Это основные принципы, которые вы можете использовать для создания визуальной иерархии на сайте. Рассмотрим каждый принцип в отдельности:

Размер

Большие элементы больше привлекают внимание. Чем больше элемент, тем он должен быть важнее. И наоборот, менее важные элементы дизайна должны быть небольшого размера. Размер помогает направить взгляд читателя от самого большого элемента к самому маленькому. Таким образом, размер влияет на восприятие и понимание информации.

blog.musemaster.ru

Контраст

Радикальные различия между элементами могут иметь сильный эффект в визуальной иерархии. Примером таковых может быть изменение цвета. Разместив определенный параграф страницы на темном фоне, тогда как остальной текст сайта — на светлом, вы укажете на важность более контрастного элемента. Контраст — эффективный и простой инструмент в определении важности информации и построении иерархии.

blog.musemaster.ru

Цвет

Цвет — это еще один способ привлечь внимание пользователя. Можно использовать как отсутствие цвета, так и его избыток, чтобы сконцентрировать внимание на чем-то конкретном. Используйте смелые цвета, чтобы выделить что-то на фоне тусклых элементов, и наоборот. Для того, чтобы правильно использовать цвет в иерархии, вам нужно поэкспериментировать с цветовыми схемами, чтобы понять какой цвет будет больше выделяться на фоне других.

blog.musemaster.ru

Близость

Близость помогает разделить, а также сгруппировать элементы, которые являются частью суб-иерархии. Для примера возьмем макет обычной страницы блога на базе WordPress. У боковых панелей есть свои названия, а заголовки и абзацы представлены самостоятельно. Размещение этих элементов указывает на то, что они являются частями общей иерархии страницы. То же самое можно сказать и о самом посте: текст представлен отдельно целостным блоком, но в нем могут быть заголовки, подпункты и т.д.

blog.musemaster.ru

Выравнивание

Выравнивание или размещение элементов может также свидетельствовать об их важности. Лучшим примером этого является стереотипный веб-сайт, где самая важная информация размещена в верхнем левом углу страницы. Таким образом, элементы в верхней части страницы также воспринимаются как важные, поэтому чаще всего вы видите логотип в левом верхнем углу и панель навигации следом за ним.

blog.musemaster.ru

Повторяемость

Повторяемость является отличным инструментом, служащим для подчеркивания важности информации. Яркие абзацы на фоне общего текста — отличный пример повторяемости. В газете все абзацы имеют определенный цвет и размер и читатель сразу видит какие из них равны по значимости. То же касается заголовков и подзаголовков. Вот почему важно выделять ссылки в тексте; без визуальных подсказок никто не догадается, что это ссылка, а не просто текст.

blog.musemaster.ru

И это все?

Есть много других инструментов, влияющих на визуальную иерархию, например, форма и отступ. Но 6 вышеперечисленных принципов являются ключевыми в создании иерархии. Для того, чтобы успешно передать идею сайта, вам нужно знать основы. А дальше все в ваших руках. Так что экспериментируйте с различными элементами, чтобы понять, что больше нравится вашим посетителям.
 

Статья подготовлена по материалам сайта designmodo.

comments powered by HyperComments
Наши спонсоры
Материалы подобранные специально для вас

РЕКОМЕНДУЕМЫЕ МАТЕРИАЛЫ