Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 24)
Крупные фирмы часто добавляют новостную ленту на первую страницу, состоящую из нескольких кратких новостей и кнопки «Подробнее», которая уводит на страницу «Новости» с полным текстом новости. Наличие новостной ленты, особенно часто обновляемой, – работает на имидж компании, увеличивает лояльность аудитории. И напротив, если новости давно не обновлялись, – это работает против имиджа компании, создаёт ощущение «заброшенного» сайта.
Модуль «Новости» состоит из фотографии, даты, названия новостной статьи и первых строк новости, за которыми следует кнопка «Подробнее».
Модуль «Контакты» и «Подвал» сайта
Практически каждый сайт (первая страница) заканчивается двумя модулями «Контакты» и подвал сайта. «Подвал» (футер) присутствует на любом сайте, а вот модуль «Контакты» может не присутствовать на сайте интернет-магазина, если это онлайн-магазин. В последнем варианте владельцы сайта ограничиваются контактным телефоном и электронной почтой, которая располагается в «шапке» сайта и в «Подвале».
А вот для корпоративного сайта фирмы развернутый модуль «Контакты» является обязательным.
1. Название фирмы, имена сотрудников, названия отдельных офисов или филиалов.
2. Реквизиты фирмы.
3. Адреса офисов или филиалов.
3. Телефоны, факсы.
4. Электронная почта, мессенджеры.
5. Иконки и ссылки на соцсети.
6. Кнопку или форму обратной связи.
7. Интерактивную карту с местом расположения офиса.
8. Схему проезда к складу (производству).
9. Время работы офиса или магазина.
10. Виртуальный тур по офису компании.
11. Заказ обратного звонка.
12. Иконки телефонов, конвертов, карт и т.д.
13. Фотографию здания или сотрудников.
Этот модуль может повторяться внизу каждой страницы сайта. Карта устанавливается со страницы интерактивных карт Яндекса. Она может быть слева от контактов, справа или внизу, под контактами.
«Подвал» сайта
«Подвал» или футер – это последний модуль сайта, который так же, как и хедер, будет повторяться на всех страницах сайта. Часто его выделяют на дизайне тёмным фоном.
– Повтор логотипа и названия организации (в уменьшенном виде по сравнению с «шапкой» сайта).
– Знак «копирайт» и надпись о том, что все авторские права защищены, и копирование материалов с сайта строго запрещено (бывает вариант: разрешено с указанием ссылки на источник).
– Повтор верхнего меню сайта. Как вариант: расширенное меню с дополнительными страницами сайта.
– Ссылка на соцсети.
– Кнопки призывов («Позвоните», «Закажите звонок», «Свяжитесь с нами» и т.д.).
– Счетчики посетителей (например, ЯндексМетрика).
– Контакты компании (телефон, электронная почта, мессенджеры).
– Реквизиты юрлица: ОГРН, ИНН и т.д.
– Политика конфиденциальности (ссылка на текст), Согласие на обработку персональных данных и т.д.
В этой главе мы рассмотрели основные модули сайта, которые встречаются чаще всего. Но это далеко не все модули сайта. Бывают дополнительные модули, например, модуль: «Программы обучения», «Вопросы-Ответы», «Тарифы», «Статьи», «Фотогалерея», «Расписание», «Доставка», «Выполненные работы» и т.д.
Они появляются на сайте, если этого требует тема сайта или поставленные задачи. Например, для сайта обучающего центра самым главным модулем будет модуль «Программы обучения» и «Кто преподает». Оформляются они в соответствии с общим стилем сайта. Если вы начинающий веб-дизайнер, и не знаете, как правильно сделать эти модули, – посмотрите сайты конкурентов на тему вашего сайта, выявите основные элементы этих модулей и сделайте их по аналогии с чужими. (Чужой дизайн использовать нельзя, только саму структуру модуля!).
Не обязательно для этих дополнительных модулей придумывать свой собственный оригинальный дизайн или структуру, напротив, их надо сделать в классической, привычной для пользователя схеме.
Глава 11. Прототипирование
В этой главе:
1. Формат и размер прототипа. Поля сайта
2. Как отобразить «резину» на прототипе
3. Прорисовка модулей прототипа
4. Утверждение прототипа сайта у заказчика
1. Формат и размер прототипа. Поля сайта
– Клиент видит наглядно структур сайта и может сразу внести правки.
– Веб-дизайнер видит результат, к которому надо стремиться.
– Прототип значительно сокращает количество потенциальных правок в будущем. Он помогает внести изменения и дополнить структуру сайта задолго до начала разработки и верстки. Это
– Позволяет точнее просчитать срок и стоимость будущего сайта.
– Организует как клиента, так и веб-дизайнера на согласование всех модулей и элементов сайта, является визуальным техзадание для дизайнера сайта.
– Устраняет разногласия между заказчиком и исполнителем по поводу будущего сайта.
– Прототип фиксирует все пожелания заказчика, а значит веб-дизайнер лучше поймет требования к интерфейсу и функционалу. Если требований пока нет, как раз прототип поможет их определить.
– Веб-дизайнер сможет проверить идеи, протестировать расположение блоков на сайте, предварительно оценить визуальную композицию элементов интерфейса.
– Прототип поможет разработать сценарии использования сайта. Можно ещё на этапе разработки показать заказчику, как примерно будет работать сайт. А если что-то не понравится, – внести исправления.
Работая веб-дизайнером, я частенько сталкивалась с тем, что клиент выражает свои требования примитивно, например: «Хочу, чтобы сайт продавал товар» и всё. А ко всем остальным моментам, включая внешний вид сайта, применяется правило «нравится/не нравится», поэтому прототип очень хорошо помогает сократить время утверждения дизайна сайта, например с трех-четырех недель до одной недели за счёт визуальной реализации плана сайта.
Прототип разрабатывается в программе Adobe Photoshop и обязательно утверждается у заказчика, с подписью и печатью, так как это макет будущего сайта и отступления от этого макета должны оплачиваться отдельно. Бывает так, что клиент посередине работы веб-дизайнера просить изменить структуру, добавить модули или наоборот, что-то убрать с сайта. Все эти переделки как раз и затягивают срок реализации сайта.
Потому надо больше времени уделить прототипу, чем дизайну сайта, именно на нём утвердить все детали и уже после утверждения приступать к разработке дизайна сайта. Подвинуть элементы сайта и поменять модули намного проще и быстрее на рабочей схеме (на прототипе), чем на готовом дизайне.
Формат и размер прототипа