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

Если на ПК широкая панель навигации со вторым подменю не вызывает затруднений у пользователя, то в мобильной версии это будет крайне неудобно. Меню прячут в иконку «гамбургер», выдвигается оно из боковой панели и может занимать часть экрана или весь экран. Если меню включает множество подпунктов, лучше чтобы новый список появился поверх предыдущего. Не забудьте сделать меню «липким», чтобы пользователю не нужно было прокручивать страницу вверх, если необходимо вернуться в каталог.

Рис. 115. Дизайн мобильной версии сайта, воплощенный в среде

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

Глава 16. Нарезка сайта, сохранение дизайна сайта

В этой главе:

1. Что такое нарезка сайта, кто должен ее делать

2. Как сохранить дизайн сайта и передать его программисту

1. Что такое нарезка сайта, кто должен её делать

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

На этом рисунке хорошо видно, что весь сайт разбит на ячейки и представляет собой таблички с рядами и столбцами. Именно так на дизайне нужно сделать «нарезку» или раскройку сайта. Делается это в растровом редакторе Adobe Photoshop при помощи инструмента «Раскройка» и «Выделение фрагмента».

Неплохо, если веб-дизайнер знаком с азами вёрстки HTML. Тогда ему легче сделать нарезку сайта на фрагменты.

Рис.116. Вёрстка сайта в таблицах

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

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

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

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

Смотрите рис.117.

Рис.117. Нарезка дизайна сайта на фрагменты в растровом редакторе

Повторяющиеся элементы дизайна не обязательно нарезать.

Кто должен делать нарезку сайта

Делать нарезку может только опытный веб-дизайнер, понимающий, как делается вёрстка сайта. Если вы начинающий веб-дизайнер и структура сайта в HTML для вас не понятна, нарезку сайта лучше не делать. Доверьте эту работу специалисту – верстальщику, он сам нарежет дизайн сайта так, как ему удобно.

Примерная схема нарезки на рис.118.

Рис.118. Схема нарезки сайта

2. Как сохранить дизайн сайта и передать его программисту

Передавать дизайн сайта специалисту (верстальщику или программисту) следует в формате PSD, слои должны быть не склеены (каждый отдельный элемент в новом слое), и иметь названия на русском языке, например: слой «Логотип», слой «Иконка преимущества 1» и т.д., разрешение файла – 72 dpi.

Также к многослойному файлу прикладываются файлы в формате JPG всех страниц для просмотра.

Кроме дизайна сайта для десктопной версии, прикладываются файлы мобильной версии (также в формате PSD), не в среде, чисто файл дизайна для определённого мобильного устройства.

Файл PSD может содержать нарезку дизайна на фрагменты, если об этом была договоренность с верстальщиком.

Передача совершается после полного утверждения у заказчика. Желательно получить распечатку или скан с подписью заказчика и словом «Утверждаю» на дизайне сайта. В противном случае клиент может потребовать от программиста дополнительную работу.

В течении всей работы по вёрстке и программированию сайта веб-дизайнер помогает специалисту, по его просьбе предоставляет:

– отдельно фото для сайта,