Дизайн макета веб-страниц. Часть 1
В этой статье мы рассмотрим основы дизайна макетов для веб-страниц, чтобы вы могли создать привлекательный сайт по всем канонам веб-дизайна. Мы также поделимся интересными идеями и концепциями, которыми вы можете вдохновиться.
Дизайн макета веб-страниц
Создать новый макет веб-страницы с нуля — это сложно, так как важно уметь правильно комбинировать модули и элементы. Еще труднее создать функциональную и сбалансированную по дизайну страницу. Ниже мы рассмотрим несколько правил, которые помогут вам в создании макета.
Используйте сеточную систему для баланса
Если вы начинаете создание страницы с нуля, первый элемент, который вам следует использовать, — это сетка. Системы сеток помогают создать базовый шаблон для вашего макета. Сетка устанавливает поля и желобки одинаковой длины и определяет специальное место для контента.
Следуйте «Правилу третей»
«Правило третей» — это распространенный принцип дизайна, который чаще всего используется в фотографии. Согласно этому правилу ваша страница разбивается на три раздела как по вертикали, так и по горизонтали — всего получается девять разделов. Ниже пример:
Таким образом элементы вдоль линии сетки выглядят более привлекательно для пользователя, так как они расположены равномерно. Ключевые элементы привлекают внимание пользователей к одной линии сетки, в то время как остальная часть страницы уравновешивается пустым пространством.
Используйте негативное пространство на веб-странице
Негативное пространство — это свободное пространство между элементами на странице. Из-за большого количества негативного пространства ваша страница может выглядеть слишком минималистично.
Полное отсутствие негативного пространства создаст ощущение загроможденности и тесноты, что может затруднить поиск информации. В идеале элементы страницы должны располагаться равномерно, таким образом пользователи будут легко находить важные части контента.
Используйте «Правило шансов»
Подобно «Правилу третей», «Правило шансов» — это еще один принцип дизайна в фотографии, который можно применить в веб-дизайне. Правило гласит, что для пользователей более привлекательно изображение с нечетным количеством предметов.
Чаще всего дизайнеры используют три элемента — внешние два дополняют центральную точку в середине. Вы можете использовать любое нечетное число, главное, чтобы элементы были расположены равномерно, а внимание привлекал центральный элемент.
Установите иерархию для контента
Разные страницы могут иметь разные макеты. Ваша домашняя страница может отличаться от отдельных веб-страниц на сайте, а эти страницы будут отличаться друг от друга. Причина в том, что вам следует попытаться создать макет, который фокусируется на более важном контенте. Это поможет создать иерархию, с помощью которой пользователь будет перемещаться по странице, возвращая свое внимание к основному контенту.
Идеи для дизайна макета страницы
Ниже мы поделимся интересными идеями для дизайна макета, которые вы можете использовать для своего веб-сайта.
- Фотография во весь экран
В этом макете изображение используется в качестве основного фона и занимает всю площадь страницы. Текст, навигация и призывы к действию обычно накладываются сверху на изображение. Такой способ привлечет внимание ваших пользователей, поскольку первое, что они увидят на сайте — это яркое изображение.
Источник: hubspot.com