Акцент как принцип веб-дизайна

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

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

Использование акцента в дизайне

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

• Линии: Создайте акцент с помощью контраста. Если несколько элементов расположены горизонтально, один вертикальный элемент становится фокусом.
• Цвет: Если большинство элементов в дизайне темные или приглушенные, любой цветной объект притягивает взгляд.
• Формы: Когда большинство фигур неправильные, выделяется геометрическая форма.
• Близость: Когда несколько элементов сгруппированы, а один находится отдельно от группы, внимание переходит к одному элементу.
• Размещение: Хотя есть исключения, элемент, расположенный в центре дизайна, обычно привлекает внимание.
• Масса: Тяжелый элемент привлекает внимание зрителя.
• Репетиция: Когда простой графический элемент повторяется, глаз следует за повторяющимся элементом в фокусе.
• Контраст: В дополнение к контрастам, создаваемым цветом и линиями, контраст может создаваться изменением размера, текстуры или шрифта. Изменение приводит к тому, что фокусный элемент или акцент выделяются.
• Белое пространство: Элемент, окруженный белым (или пустым) пространством, становится фокусом.

Иерархия в веб-дизайне

Иерархия — это визуальное расположение элементов дизайна, определяющих важность по размеру. Самый большой элемент является самым важным; менее важные элементы меньше. Сосредоточьтесь на создании визуальной иерархии в веб-дизайне.Если вы работали над созданием семантического потока для вашей HTML-разметки, это легко, потому что ваша веб-страница уже имеет иерархию. Все, что нужно вашему дизайну, — это выделить правильный элемент — например, заголовок H1 — для наибольшего внимания.

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

Как сделать акцент в веб-дизайне

Акцент в веб-дизайне можно реализовать разными способами:

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

Где применяется субординация?

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