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

– Ссылка на соцсети.

– Кнопки призывов («Позвоните», «Закажите звонок», «Свяжитесь с нами» и т.д.).

– Счетчики посетителей (например, ЯндексМетрика).

– Контакты компании (телефон, электронная почта, мессенджеры).

– Реквизиты юрлица: ОГРН, ИНН и т.д.

– Политика конфиденциальности (ссылка на текст), Согласие на обработку персональных данных и т.д.

Рис.79. «Подвал» сайта учебного центра

В этой главе мы рассмотрели основные модули сайта, которые встречаются чаще всего. Но это далеко не все модули сайта. Бывают дополнительные модули, например, модуль: «Программы обучения», «Вопросы-Ответы», «Тарифы», «Статьи», «Фотогалерея», «Расписание», «Доставка», «Выполненные работы» и т.д.

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

Рис. 80. Модуль фотогалерея на сайте учебного центра

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

Глава 11. Прототипирование

В этой главе:

1. Формат и размер прототипа. Поля сайта

2. Как отобразить «резину» на прототипе

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

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

1. Формат и размер прототипа. Поля сайта

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

Рис.81. Прототип (слева) и дизайн сайта по нему (справа)

Зачем нужен прототип:

– Клиент видит наглядно структур сайта и может сразу внести правки.

– Веб-дизайнер видит результат, к которому надо стремиться.

– Прототип значительно сокращает количество потенциальных правок в будущем. Он помогает внести изменения и дополнить структуру сайта задолго до начала разработки и верстки. Это основная задача прототипа.

– Позволяет точнее просчитать срок и стоимость будущего сайта.

– Организует как клиента, так и веб-дизайнера на согласование всех модулей и элементов сайта, является визуальным техзадание для дизайнера сайта.

– Устраняет разногласия между заказчиком и исполнителем по поводу будущего сайта.

– Прототип фиксирует все пожелания заказчика, а значит веб-дизайнер лучше поймет требования к интерфейсу и функционалу. Если требований пока нет, как раз прототип поможет их определить.

– Веб-дизайнер сможет проверить идеи, протестировать расположение блоков на сайте, предварительно оценить визуальную композицию элементов интерфейса.

– Прототип поможет разработать сценарии использования сайта. Можно ещё на этапе разработки показать заказчику, как примерно будет работать сайт. А если что-то не понравится, – внести исправления.

Запомните: прототип является обязательной частью технического задания.

Работая веб-дизайнером, я частенько сталкивалась с тем, что клиент выражает свои требования примитивно, например: «Хочу, чтобы сайт продавал товар» и всё. А ко всем остальным моментам, включая внешний вид сайта, применяется правило «нравится/не нравится», поэтому прототип очень хорошо помогает сократить время утверждения дизайна сайта, например с трех-четырех недель до одной недели за счёт визуальной реализации плана сайта.

Прототип разрабатывается в программе Adobe Photoshop и обязательно утверждается у заказчика, с подписью и печатью, так как это макет будущего сайта и отступления от этого макета должны оплачиваться отдельно. Бывает так, что клиент посередине работы веб-дизайнера просить изменить структуру, добавить модули или наоборот, что-то убрать с сайта. Все эти переделки как раз и затягивают срок реализации сайта.

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

Формат и размер прототипа

Формат прототипа обычно JPG, который высылается клиенту для проверки. Иногда бывает, что прототип делает в формате программы MS Word или в других программах. Но удобнее всего создавать план будущего сайта в программе Adobe Photoshop, по слоям и для клиента сделать из него JPG .

Размер прототипа: 1920 пикселей по ширине, разрешение 72 dpi, высота начинается от 1080 (один экран) и может быть больше, в зависимости от количества модулей первой страницы сайта.

Рис. 83. Прототип будущего сайта в растровом редакторе

2. Как отобразить «резину» на прототипе

Все сайты имеют определённый размер по ширине. Но часто мы видим сайт, имеющий два размера по ширине при просмотре, например, слайдер растянут на всю длину экрана, а вот контент имеет справа и слева поля, то есть, он более узкий.

Какие бывают форматы размеров сайта

У каждого устройства есть несколько характеристик, описывающих его размер:

Физический размер экрана – это его диагональ в дюймах (например, 24 дюйма). У устройств с одинаковым размером экрана могут быть разные разрешения.

Разрешение – это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).

Размер окна браузера – это ширина и высота области просмотра в пикселях (например, 1896 x 1080 – с учётом полосы прокрутки в 24 пикселя). Другими словами, – это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Но, размер окна браузера пользователь может сам менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

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

Размеры сайтов бывают двух типов: фиксированный и «резиновый».

Фиксированная вёрстка сайта – это жестко заданные статические параметры сайта, и его ширина не меняется, независимо от того, какое разрешение у пользователя. Делать весь сайт фиксированным уже нет смысла, такой дизайн считается устаревшим. Но некоторые модули сайта могут иметь фиксированную ширину (только не в пикселях, а в процентном соотношении). Например, контейнер с контентом может занимать 80% от всей ширины.

Как дизайнеру определить размер в пикселях, ведь в программе Adobe Photoshop нельзя сделать размер в процентах. Нужно для общего файла задать размер 1920 пикселей, а для