Приступая к созданию сайта своими руками, первым делом встаёт вопрос - "Каким будет мой сайт?". Прежде всего нужно создать макет будущего сайта, предварительно продумав все его составные части. А что значит создать макет сайта? Создать макет, значит нарисовать его. Предварительно лучше сделать набросок на бумаге, а затем уже приступать к рисованию в графических редакторах, например в Photoshop. Но просто нарисовать макет недостаточно, важно создать такой макет, чтобы в дальнейшем его легко можно было сверстать. В данной статье не будет урока по рисованию макета, но я приведу основные принципы, какие необходимо соблюдать для создания удачного макета сайта. Итак, давайте попробуем создать макет сайта своими руками, опираясь на существующие принципы.

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

2. Сетка. Сетка обеспечивает выравнивание элементов дизайна. Согласитесь, что невыровненные объекты смотрятся не красиво, не гармонируют друг с другом. И, если вы не можете на глаз чётко выровнять элементы, то лучше воспользоваться сеткой и линейками. Итак, для использования сетки нажимает сочетание клавиш CTRL+' или Просмотр-Показать-Сетку. Далее активируем линейки CTRL+R или Просмотр-Линейки. В построении макета будет удобнее использовать линейки в пикселах. Для этого щелкаем два раза левой клавишей мыши по шкале линейки (или один клик правой клавишей мыши) и выбираем пикселы. Для обозначения границ макета используйте направляющие. Для этого нужно поставить курсор мыши на линейку (вертикальную или горизонтальную), нажать и удерживая левую кнопку мыши перемещать курсор на рабочую область, тем самым вытягивая направляющую. Вытянули на нужное расстояние и отпустили, в результате видим направляющую линию голубого цвета.

как-правильно-создать-макет-сайта

3. Порядок в папках. Незабывайте подписывать слои и создавать папки. Это позволит вам быстро ориентироваться в слоях. Возьмите за правило, создавать как минимум три папки с названиями "header","body","footer" и помещать в них соответствующие слои. Соблюдая данное правило вы избежите путаницы в слоях (а их может быть очень много), тем самым облегчив себе работу, сэкономив время и нервы.

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

как_правильно_создать_макет_сайта

5. Шрифт. Используйте в основном тексте привычные шрифты. Текст написанный стандартным шрифтом читать легче нежели нестандартным, т.к. пользователи постоянно встречаются с обычными шрифтами и уже привыкли к нему. К тому же, не будет проблем с кроссбраузерностью. Немаловажен и размер шрифта, думаю понимаете что читать основной текст в 10 пикселов не очень удобно, как и в 18 пикселов. Поэтому выбирайте средний размер шрифта, например 12 или 14 пикселов. Ниже приведён список стандартных шрифтов.

как_правильно_создать_макет_сайта

6. Важные мелочи. Если уж вы решили создать макет сайта, то создавайте его максимально полным, со всеми мелочами. Указывайте цвет будущих ссылок, какими они будут при наведении на них курсора, какими будут посещённые ссылки. Проанализируйте макет и добавьте, где это нужно иконки, прорисуйте кнопки. Так же, можно сразу продумать какой будет кнопка "подробнее" или "читать далее".

Ну вот, вообщем-то и всё. Из этой статьи вы узнали основные принципы создания правильного макета сайта. Но все мы понимаем, что теория теорией, а практика лучше. Поэтому, я предлагаю вам ознакомиться с видео-курсом Алексея Захаренко "Мастер web-дизайна". Курс прекрасно подойдёт для новичков. В результате вы сожете без труда создать привлекательный и современный дизайн вашего сайта на любую тематику. Описание курса вы сможете посмотреть кликнув по банеру ниже.