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

Как правило, на дизайне отображают поля, равные 200 или 300 пикселей (слева и справа от контейнера с контентом)

Рис.84. Определение полей направляющими на прототипе по образцу чужого сайта

Резиновая ширина сайта – это ширина, которая подстраивается под ширину браузера. Если браузер шире, то и блоки снизу перемещаются вбок. Браузер уже, – блоки располагаются друг под другом.

Плюсы такой вёрстки: пространство сайта используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.

Минусы: На большом экране сайт очень сильно расползается. Особенно это неудобно для текста. Периодически может возникать пустое пространство между блоками.

Сейчас наиболее современным вариантом вёрстки сайта является адаптивный дизайн.

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

Рис. 85. Разрешение дизайна сайта по ширине для разных устройств

Инструменты для анализа отображения сайта на разных устройствах

Поисковые системы учитывают поведенческие факторы как в десктопной версии, так и на мобильных устройствах, поэтому необходимо учитывать этот факт при разработке сайта (или при его редизайне).

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

Например, инструмент проверки адаптивности Viewport Resizer

Viewport Resizer – инструмент-закладка, работающий в браузере. Сервис используется для проверки отображения сайта при разных разрешениях. При работе с инструментом можно использовать предложенные варианты разрешения, а можно дополнить их пользовательскими вариантами.

И последнее – «резиновый» модуль (например, слайдер) – отображается на прототипе и на дизайне сайта растянутым на всю ширину, то есть 1920 пикселей. Остальной контент, имеющий поля, будет немного уже, в зависимости от сетки, которую выбрал веб-дизайнер. Некоторые модули имеют фиксированный контент, но фоновую подложку «резиновую», которая тянется на всю ширину сайта.

Посмотрите на рисунок 86: на прототипе основной контент имеет поля и будет фиксирован на сайте по определённой ширине, например, будет занимать 80% в браузере, а вот подложка (фон) для формы обратной связи «Рассчитайте стоимость» – будет «резиновый», то есть, растянутый на 100 % по ширине. На прототипе он не имеет полей и занимает всю ширину сайта. Такое отображение показывает верстальщику, как сделать этот модуль.

Рис. 86. Ширина модулей на прототипе

3. Прорисовка модулей прототипа

Вручную прототип делается в растровом редакторе Adobe Photoshop, но это не единственная программа, в которой можно сделать прототип сайта.

Adobe Photoshop – это многофункциональный растровый графический редактор, разрабатываемый и распространяемый компанией Adobe Systems. Он работает с растровыми изображениями, имеет полный функционал для дизайна сайта. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений и наиболее известной программой разработчика.

Алгоритм создания прототипа

Сначала в программе создаётся пустой файл шириной 1920 пикселей и высотой примерно 5000 пикселей. Для контента задается ширина с полями (1920 – 300Х2 = 1320 пикселей). Высота потом меняется в зависимости от количества модулей.

Каждый новый элемент, например шапка сайта, создаётся в отдельном слое, обозначается либо прозрачным прямоугольником, либо прямоугольником с серым цветом. Текст создается также в отдельном слое.

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

Рис.87. Создание прототипа в растровом редакторе

Некоторые элементы не прорисовываются, а лишь обозначаются, например, логотип или кнопка. Телефон и электронная почта пишутся в случае, если они уже предоставлены заказчиком. Если же нет, можно просто написать «Телефон» или поставить условный номер, типа: 8 800 999 99 99.

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

Рис.88. Обозначение фото на прототипе

Прорисовываются все модули, которые будут на сайте, начиная с «шапки» и заканчивая подвалом сайта. Файл обязательно сохраняется в слоях (формат PSD), чтобы можно было вносить изменения, редактировать его. Из формата PSD создаётся JPG-файл для отправки клиенту.

Кроме растрового редактора Adobe Photoshop, прототип сайта можно создавать в онлайн сервисах. Например, Wireframe.cc.

Сервис Wireframe.cc

Этот сайт прост в использовании и позволяет создавать прототип онлайн. Он не требует погружения в сложные мануалы. Для начала работы кликните в любом месте «холста» и вытяните мышкой прямоугольник нужного размера. У вас появился будущий элемент макета. Всплывающее меню подскажет, как преобразовать тип объекта, например, создать прямоугольник или текст. Холст можно увеличивать по высоте, используя справа кнопку «Настройки».

Есть удобная сетка, которая позволяет выровнять объекты. Есть вставка картинок, можно задать цвет блока, также есть возможность сразу посмотреть прототип в мобильной версии. См. рис.89.

Рис. 89. Онлайн сервис для создания прототипа

В этом сервисе есть платные услуги. Разница между бесплатной и платной версиями в том, что во free-режиме (бесплатном режиме) нет поддержки учетных записей пользователей и работать можно только с одной страницей. Платный тариф позволяет работать в личном аккаунте с многостраничными проектами, поддержкой ревизий действий, кликабельными элементами и возможностью экспорта в PDF и PNG. Стоимость тарифа от $15 в месяц.

Кроме этого сервиса, есть и другие сайты, помогающие создать прототип онлайн: InVision App, NinjaMock, Moqups.com и другие.

4. Утверждение прототипа сайта у