В этой статье мы рассмотрим основы дизайна макетов для веб-страниц, чтобы вы могли создать привлекательный сайт по всем канонам веб-дизайна. Мы также поделимся интересными идеями и концепциями, которыми вы можете вдохновиться.
Создать новый макет веб-страницы с нуля — это сложно, так как важно уметь правильно комбинировать модули и элементы. Еще труднее создать функциональную и сбалансированную по дизайну страницу. Ниже мы рассмотрим несколько правил, которые помогут вам в создании макета.
Если вы начинаете создание страницы с нуля, первый элемент, который вам следует использовать, — это сетка. Системы сеток помогают создать базовый шаблон для вашего макета. Сетка устанавливает поля и желобки одинаковой длины и определяет специальное место для контента.
«Правило третей» — это распространенный принцип дизайна, который чаще всего используется в фотографии. Согласно этому правилу ваша страница разбивается на три раздела как по вертикали, так и по горизонтали — всего получается девять разделов. Ниже пример:
Таким образом элементы вдоль линии сетки выглядят более привлекательно для пользователя, так как они расположены равномерно. Ключевые элементы привлекают внимание пользователей к одной линии сетки, в то время как остальная часть страницы уравновешивается пустым пространством.
Негативное пространство — это свободное пространство между элементами на странице. Из-за большого количества негативного пространства ваша страница может выглядеть слишком минималистично.
Полное отсутствие негативного пространства создаст ощущение загроможденности и тесноты, что может затруднить поиск информации. В идеале элементы страницы должны располагаться равномерно, таким образом пользователи будут легко находить важные части контента.
Подобно «Правилу третей», «Правило шансов» — это еще один принцип дизайна в фотографии, который можно применить в веб-дизайне. Правило гласит, что для пользователей более привлекательно изображение с нечетным количеством предметов.
Чаще всего дизайнеры используют три элемента — внешние два дополняют центральную точку в середине. Вы можете использовать любое нечетное число, главное, чтобы элементы были расположены равномерно, а внимание привлекал центральный элемент.
Разные страницы могут иметь разные макеты. Ваша домашняя страница может отличаться от отдельных веб-страниц на сайте, а эти страницы будут отличаться друг от друга. Причина в том, что вам следует попытаться создать макет, который фокусируется на более важном контенте. Это поможет создать иерархию, с помощью которой пользователь будет перемещаться по странице, возвращая свое внимание к основному контенту.
Ниже мы поделимся интересными идеями для дизайна макета, которые вы можете использовать для своего веб-сайта.
В этом макете изображение используется в качестве основного фона и занимает всю площадь страницы. Текст, навигация и призывы к действию обычно накладываются сверху на изображение. Такой способ привлечет внимание ваших пользователей, поскольку первое, что они увидят на сайте — это яркое изображение.
Источник: hubspot.com
Я даю согласие OOO «ЭсБилдер» (далее «BINN») на обработку моих персональных данных в соответствии со статьями 6, 9, 10, 18 Федерального закона от 27 июля 2006 года № 152-ФЗ «О персональных данных», указанных в онлайн-форме и/или предоставленных мною с целью:
Способы обработки персональных данных могут быть любыми, включая сбор, систематизацию, накопление, хранение, уточнение, обновление, изменение, воспроизведение, обезличивание, блокирование и уничтожение.
Настоящее согласие применяется в отношении обработки следующих данных: имя, номер телефона, адрес электронной почты (E-mail).
Настоящее согласие предоставляется сроком на пять лет. По истечении указанного срока действие согласия считается продленным на каждые следующие пять лет при отсутствии сведений о его отзыве.
Согласие может быть отозвано мною в любой момент путем направления в BINN подписанного мною письменного заявления.