Дизайн макета веб-страниц. Часть 1

В этой статье мы рассмотрим основы дизайна макетов для веб-страниц, чтобы вы могли создать привлекательный сайт по всем канонам веб-дизайна. Мы также поделимся интересными идеями и концепциями, которыми вы можете вдохновиться.   

Дизайн макета веб-страниц

Создать новый макет веб-страницы с нуля — это сложно, так как важно уметь правильно комбинировать модули и элементы. Еще труднее создать функциональную и сбалансированную по дизайну страницу. Ниже мы рассмотрим несколько правил, которые помогут вам в создании макета.

Используйте сеточную систему для баланса

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

Следуйте «Правилу третей»

«Правило третей» — это распространенный принцип дизайна, который чаще всего используется в фотографии. Согласно этому правилу ваша страница разбивается на три раздела как по вертикали, так и по горизонтали — всего получается девять разделов. Ниже пример:

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

Используйте негативное пространство на веб-странице

Негативное пространство — это свободное пространство между элементами на странице. Из-за большого количества негативного пространства ваша страница может выглядеть слишком минималистично. 

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

Используйте «Правило шансов»

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

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

Установите иерархию для контента

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

Идеи для дизайна макета страницы

Ниже мы поделимся интересными идеями для дизайна макета, которые вы можете использовать для своего веб-сайта. 

  1. Фотография во весь экран

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


Источник: hubspot.com 

Условия передачи информации

Я даю согласие OOO «ЭсБилдер» (далее «BINN») на обработку моих персональных данных в соответствии со статьями 6, 9, 10, 18 Федерального закона от 27 июля 2006 года № 152-ФЗ «О персональных данных», указанных в онлайн-форме и/или предоставленных мною с целью:

Способы обработки персональных данных могут быть любыми, включая сбор, систематизацию, накопление, хранение, уточнение, обновление, изменение, воспроизведение, обезличивание, блокирование и уничтожение.

Настоящее согласие применяется в отношении обработки следующих данных: имя, номер телефона, адрес электронной почты (E-mail).

Настоящее согласие предоставляется сроком на пять лет. По истечении указанного срока действие согласия считается продленным на каждые следующие пять лет при отсутствии сведений о его отзыве.

Согласие может быть отозвано мною в любой момент путем направления в BINN подписанного мною письменного заявления.