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

4. Что нужно учесть при разработке мобильной версии

1. Иерархия контента

Экран смартфона можно поделить на зоны восприятия, основное внимание попадает на центральную часть, где и следует располагать самые важные элементы.

Пространство над и под основным содержанием для контента имеет второстепенную важность.

Самая верхняя часть экрана используется для неважной информации и элементов.

Также есть правило «большого пальца», поскольку большинство людей касаются дисплея только им. В зависимости от того, как большинство людей держит смартфон, есть зоны, до которых легко и сложно «добраться».

Используйте легкодоступные зоны для расположения важного контента.

2. Ширина контента

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

Чем меньше экран, тем меньше колонок можно эффективно отразить.

3. Удобный шрифт

Чтобы пользователю не приходилось увеличивать или уменьшать масштаб, используйте подходящий размер шрифта. Минимальный размер основного текста может быть в пределах от 16 рх (пикселей) до 18 рх.

Apple в руководстве Human Interface Guidelines рекомендует 17 рх.

Google в Material Design рекомендует 16 рх.

Но если буквы очень тонкие, можно сделать и 18 рх.

Выбирайте шрифты, которые хорошо масштабируются и состоят в одном семействе. Например, Noto Serif и Noto Sans, создатели делают так, чтобы они хорошо сочетались между собой. Не используйте на сайте больше 2 типов шрифтов, это будет замедлять загрузку сайта.

4. Размеры меню

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

Рис. 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 может содержать нарезку дизайна на фрагменты, если об этом была договоренность с верстальщиком.

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

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

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

– баннеры, видео,

– пароли от хостинга и домена,

– логотип в векторе или в растре, но в хорошем разрешении,

– тексты для сайта в электронном виде в формате MS Word и другие необходимые материалы.