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