Дизайн сайта – как все происходит

Начало работ по созданию сайта начинается с разработки дизайна макета.

При разработке дизайна макета сайта веб-дизайнер руководствуется:

1. Брифом на разработку сайта в котором описаны основные требования к макету:
- Тип верстки (фиксированная или растягивающаяся)
- Количество необходимых макетов сайта
- Основные цвета
- Основные разделы сайта

2. Техническим заданием на сайт

3. Материалами предоставленными заказчиком:
логотип, фотографии, прочие материалы
Перед тем как приступить к рисованию, дизайнер делает «модульную сетку» - размечает области в которых будет находиться тот или иной блок информации на сайте.

Блоки формирующие макет обычно включают:

1. Шапка сайта
2. Меню сайта
3. Блок контента (содержания страницы)
4. Подвал (нижняя часть сайта.

Дизайн макета создается в графических программах, чаще всего это программа Photoshop. Исходные файлы дизайн макета сохранены в формате .PSD

Макет разрабатывается учетом многих факторов, в число основополагающих из них входят:

1. Учет минимального размера монитора на который будет рассчитан дизайн.

В настоящее время принято брать за основу монитор размером 1024х780 пикселей. Именно поэтому, размер холста, на котором рисуется дизайн сайта по ширине не должен превышать 1000 пикселей (20 пикселей отнимают с учетом полосы прокрутки в браузере).

Но бывают и мониторы 800х600 пикселей. Они становятся редкостью, но все же, если вы задумали сайт абсолютно для всех типов мониторов, то размер макета по ширине не будет превышать 780 пикселей.

2. Очень важно четко определиться фиксированный или растягивающийся будет дизайн у вашего сайта.

Если он фиксированный, то макет не будет менять своей ширины – 1000 пикселей по ширине, и вся информация будет вписываться в его пределы не зависимо от ширины монитора (ширина монитора может достигать более 2000 пикселей по ширине).

Если вы выбрали растягивающийся («резиновый») тип дизайна, то за основу все равно берется минимальный размер монитора 1024х768 пикселей и макет создается с шириной 1000 пикселей (для того, чтобы быть уверенными в том, что он «впишется в размер минимального монитора), но при преобразовании дизайна в макет в формате HTML , он будет растягиваться на всю ширину монитора независимо от его размеров.

ВАЖНО: макет сайта создаваемый с расчетом растяжки на разную ширину мониторов подходит для крупных сайтов содержащих большое количество информации. Для сайтов, которые содержат ограниченный объем текстов и небольшое количество страниц (20-30) лучше разрабатывать макет с фиксированной шириной.

Разработка логотипа никогда не входит в работы по созданию дизайна сайта. Это отдельные услуги, которые предоставляются на других условиях.

Для каких страниц сайта делается дизайн

Бриф на разработку сайта включает вопрос о количестве дизайн макетов. Что это значит?

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

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

Как демонстрируется дизайн сайта

Для демонстрации дизайн макета, его сохраняют в виде графического файла в формате JPG и либо высылают на адрес вашей электронной почты, либо выкладывают в Интернет и присылают вам ссылку для просмотра.

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

Макет становится «кликабельным» и «оживает», когда его преобразуют в специальный формат на языке гипертекстовой разметки HTML. Но это уже следующий этап работ, который называется «Верстка макета в HTML”.