Создание макета

В первую очередь, Вам необходимо определиться какой у Вас будет в будущем сайт: «резиновый» (растягивающийся на всю ширину экрана) или же фиксированный. Сайты с фиксированной шириной так же бывают трёх типов: с равнением по левому краю, с равнением по центру и с равнением по правому краю. Стоит учитывать этот фактор на начальном этапе разработки макета сайта, так как это поможет в дальнейшем избежать такой неприятной ситуации, как изменение визуального восприятия красочности и красоты сайта в зависимости от его отображения на мониторах с различным разрешением экрана.

Итак, мы определились с тем, какой у нас будет сайт, теперь приступаем к построению модульной сетки.

Модульная сетка

Как и в типографии, в веб-дизайне существует такое понятие, как модульная сетка. Она помогает визуально поделить веб-страницу на блоки.

Правильным выравниванием элементов относительно друг друга является то, когда два блока начинаются на одном уровне по вертикали.

пример правильного расположения блоков относительно друг друга по вертикали
пример правильного расположения блоков относительно друг друга по вертикали

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

пример правильного расположения внутренних и внешних отступов на странице сайта
пример правильного расположения внутренних и внешних отступов на странице сайта

Наиболее часто употребляемые расположения основных блочных элементов на сайте

популярные варианты структуирования страницы сайта
популярные варианты структуирования страницы сайта

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

Что бы макет сайта выглядел полноценным, необходимо наполнить его временной информацией, так называемой рыбой. Большая ошибка многих дизайнеров заключается в том, что они размещают в качестве рыбы информацию, которая повторяется, например: текст, текст, текст или меню1, меню2, меню3 и т.д. Это неправильно, так как при таком оформлении теряется визуальное представление о том, как будет выглядеть сайт в реальности. Возможно, будут некрасиво выглядеть пункты меню с длинными названиями, состоящими из двух строчек, а текст, выровненный по левому краю, может совсем не так красиво выглядеть, как симметрично выровненный текст.

Итак, теперь Вы имеете представление о том, как создать структуру сайта на уровне модульной сетки. Приступаем к изучению основ цветоведения.


При перекопировании информации ссылка на сайт обязательна.

разработка сайта DDI Group