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

Слайд 2

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

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

его можно с помощью онлайн-сервисов, стационарных программ либо через HTML-код.
Основными элементами шаблона считаются: стиль, структура, формы связи с посетителями, логотип, основной контент, боковая часть и подвал. 
Готовый макет может быть представлен в виде блоков с указанием размеров либо как готовый дизайн с отображением страницы в разных вариантах: с развернутыми элементами, наведенным курсором на ссылку, открытым контекстным меню.
Следующим этапом является верстка сайта по макету, поэтому перед работой над его созданием важно обсудить детали с программистом-верстальщиком.
Слайд 3

Слайд 4

Преимущества использования макета Определение визуальных недостатков на первых стадиях работы над

Преимущества использования макета
Определение визуальных недостатков на первых стадиях работы над проектом.
Возможность

наглядно показать клиенту дизайнерские идеи.
Упрощение работы верстальщика и программиста.
Понимание того, как будет выглядеть готовый сайт.
Сведение к минимуму недопониманий между дизайнером и заказчиком.
Слайд 5

Требования к готовому макету Симметричное отображение визуальных элементов Попробуйте условно нарисовать

Требования к готовому макету

Симметричное отображение визуальных элементов
Попробуйте условно нарисовать посередине страницы

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

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

Слайд 6

Слайд 7

Слайд 8

Создание элементов в разных вариантах отображения Покажите, как будет выглядеть ссылка

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

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

Использование стандартных шрифтов
От экспериментов со шрифтами лучше отказаться. Разнообразные эффекты могут испортить хороший дизайн, а нечитабельные слова явно не понравятся посетителям. Если вы все же решите использовать необычные шрифты, вынесите их в отдельный файл для верстальщика.

Слайд 9

Слайд 10

Пример:

Пример:

Слайд 11

Слайд 12