Глава IV. Типы сайтов
Рейтинг: 5 / 5
Глава IV. Типы сайтов
В этой главе вы познакомитесь с различными типами сайтов, с тем, в каких случаях выбирается тот или иной стиль оформления. Узнаете, как привлечь внимание посетителей сайта, оптимально расположить информацию, организовать интерактивное взаимодействие с посетителями. Познакомитесь с некоторыми критериями опенки сайтов.
Основные понятия: Тип сайта, стиль оформления, дизайн, навигация, эргономика, юзабилити.
Какие бывают сайты
В предыдущих главах вы познакомились со способами наполнения веб-страниц текстовой и графической информацией. Научились с помощью гиперссылок связывать между собой части одного документа и различных документов. Вы также создали свой небольшой сайт.
Теперь самое время оглядеться и посмотреть, что делается в мире в этой области. Определить, к какому направлению относится ваше творчество. Исходя из анализа сайтов вы сможете оценить достоинства и недостатки своих результатов.
Вначале рассмотрим, какие бывают сайты.
Основные типы сайтов
Личная (домашняя) страница - Самая массовая и довольно непритязательная категория веб-сайта. Как правило, принципы проектирования личных страниц возлагаются на фантазию автора, его предпочтения и задачи. В то же время, личные страницы некоторых известных людей, например политиков, могут быть выполнены весьма профессионально и служить неотъемлемой частью их имиджа. Личные страницы создают многие учителя, см., например, дом-страницу Ермоленко Алексея Сергеевича - http://www.blogermolenko.tim.kubannet.ru и Ситниковой Валентины Викторовны - http://www.istorieved.tim.kubannet.ru
Некоммерческий сайт - принадлежат добровольным объединениям, временным некоммерческим проектам, образовательным, общественным, благотворительным и иным организациям, целью которых не является извлечение прибыли. К этой категории можно отнести многочисленные страницы учебных заведений, университетов и научных центров. Главная цель таких сайтов - не столько поразить посетителя дизайном, сколько донести информацию об организации или проекте, организовать и поддержать сотрудничество тех, кто в нем заинтересован. Пример сайта некоммерческого образовательного учреждения -Центр дистанционного образования "Эйдос": http://www. eidos.ru
Информационный сайт - самая посещаемая часть Интернета - это всевозможные поисковые системы, новостные ленты, интернет-газеты, «склады» утилит и прочей информации. Для сайтов этого типа, как и для некоммерческих сайтов, важность содержания превосходит его оформление. Разнородное и часто сменяющееся содержимое таких сайтов не очень-то уживается с изысками дизайна, ограничивая репертуар дизайнера максимально облегченными и упрощенными решениями. Рассчитанные на многократные регулярные визиты, такие сайты стремятся свести оформительские элементы к минимуму (как по их заметности, так и по объему файлов), чтобы читатели не тратили драгоценное время на перекачивание графики и чтобы ничто не отвлекало их от главного, ради чего они пришли на сайт, - информационного содержания, контента. Пример информационного сайта - портал графического дизайна "Как": http://www.kak.ru
Корпоративный сайт - имеет своей главной целью создать у посетителя образ фирмы, запоминающийся и привлекательный. Иными словами, сайт фирмы - инструмент рекламный почти в той же мере, что и информационный. Без хорошего дизайна при этом не обойтись, и вполне естественно, что средний уровень корпоративных сайтов, почти всегда создаваемых профессиональными дизайнерами, намного выше, чем "в среднем по сети". Коммерческие сайты, в отличие от других сайтов чрезвычайно заинтересованы в том, чтобы посетители воспользовались предлагаемыми товарами и услугами. Пример корпоративного сайта лидера по внедрению 1С - Портал-юг http://www.portal-yug.ru
Стили оформления
Конструктивный. Цветовая гамма сайта сдержанная, в основном с элементами одного цвета разных оттенков и с акцентами другого, более активного цвета. Элементы стиля в своей основе имеют геометрическую (хотя и не всегда строгую) форму. Фотографии чаще всего стилизованы под двухцветные или серые тона.
Стилевой. Сохраняется или адаптируется под визуальный стиль фирмы - хозяина сайта. Специальный стиль часто разрабатывается именно к сайту. Логотипы, шрифты, фото обработаны и размещены в соответствии с визуальным фирменным стилем.
Художественный. Коллажи, активное использование цвета с целью создания определенного эмоционального фона, нестандартные художественные шрифты, достаточно свободные структурные схемы, творческое отклонение от стереотипов.
Текстовый. Дизайн, созданный с помощью элементов верстки. Основное внимание уделяется заголовкам, подзаголовкам, размеру шрифтов, расположению текстовых блоков, линейкам.
На сайте - с удобством
Вы познакомились с некоторыми типами сайтов и стилями оформления: организацией информации на них. Выяснили, что сайт состоит из отдельных веб-страниц, связанных гиперссылками, что позволяет путешествовать как между этих страниц, так и между разными сайтами.
Несомненно, и путешествие, и работа с информацией на веб-страницах должны быть максимально удобны для посетителей сайта. Как обеспечить такое удобство? Ответ на данный вопрос дает эргономика.
Эргономика - наука об удобстве использования.
Отрасль науки, занимающуюся эргономикой программного обеспечения и веб-сайтов называют юзабилити (usability, от английского use - использовать).
Основные задачи юзабилити в веб-дизайне: обеспечить простоту' использования и понятность сайтов.
Существует множество методов определения юзабилити сайтов, которые используются на различных этапах их создания. Рассмотрим некоторые из них.
Восприятие информации
Наиболее важный раздел юзабилити - восприятие информации.
Большинство пользователей интернета предпочитают беглое ознакомление внимательному чтению.
Чтение с экрана оказывает повышенную нагрузку на зрение и приблизительно на 25% медленнее, чем чтение текста с бумаги. Поэтому необходимо обращать внимание на следующие факторы:
1) Выбор цветов текста и фона на веб-страницах
Цветовая гамма должна отвечать целям сайта и не только обеспечивать разборчивость текста, но и создавать у посетителя соответствующий настрой.
Существуют две полярные цветовые схемы: позитивная (черный текст на белом фоне) и негативная (белый текст на черном фоне). В целом, и та, и другая схема обладают хорошей читабельностью, хотя иногда говорят, что негативная схема замедлят чтение из-за того, что способствует рассеянию внимания читателя. Был период, когда негативная схема была очень популярна. Сейчас большинство сайтов создаются по схемам, близким к традиционной позитивной.
Для удобочитаемости очень важна правильно подобранная контрастность. Черный шрифт на белом фоне сильно напрягает глаза. Гораздо лучше выглядит темно-серый шрифт на светло-сером фоне. Многие профессиональные издательства печатают на бумаге с низкой степенью белизны и шрифтом с чернотой 60-80%.
Ниже приведен список некоторых распространенных цветовых сочетаний в порядке ухудшения восприятия их пользователем.
• Синий на белом
• Черный на желтом
• Зеленый на белом
• Черный на белом
• Зеленый на красном
• Красный на желтом
• Красный на белом
• Оранжевый на черном
• Черный на пурпурном
• Оранжевый на белом
• Красный на зеленом
Кстати, с точки зрения привлечения внимания лучше воспринимаются черные буквы нa желтом фоне, зеленые и красные - на белом. Здесь особенно подходит красный цвет - как самый раздражительный для глаз.
Нужно иметь в виду, что приведенные выше рекомендации достаточно условны, так как восприятие цветов и их сочетаний у разных людей отличаются.
2) Фон веб-страниц
Любой фоновый рисунок затрудняет восприятие текста. Если вы все-таки решились на его использование, делайте его минимально контрастным и: желательно, в однотонной цветовой гамме. И еще одно старое правило: не размещайте значительные блоки текста поверх фотографий.
3) Ссылки
Ссылки должны обязательно отличаться от основного текста (хотя бы цветом). Желательно различать ссылки, ведущие внутрь сайта от ссылок, ведущих «наружу».
Для всех ссылок в пределах сайта необходимо соблюдать единый стиль оформления. Если сайт рассчитан на работу индивидуальных пользователей, то ссылки, по которым посетитель уже переходил, должны менять цвет. Если предполагается, что разные пользователи будут работать с одного компьютера (например, в школе, где на разных уроках за одним компьютером работают разные ученики), то изменение цвета посещенных ссылок будет затруднять работу.
4) Элементы навигации
Внешний вид элементов навигации должен соответствовать их назначению. Логотип сайта на любой странице является ссылкой на стартовую (титульную) страницу. Однородные элементы (например, все кнопки) должны быть оформлены в едином стиле и ясно показывать свое назначение.
Делайте различие между элементами по иерархии. Например, кнопки подразделов можно сделать чуть меньше, чем кнопки основных разделов (или выделить их другим, менее доминирующим цветом). Это же касается и заголовков с подзаголовками.
5) Важная информация наверху страницы
Веб-страницы загружаются сверху вниз, информация вверху страницы появляется раньше, нежели та, что размещена внизу. Поэтому, более важные для пользователя материалы должны располагаться ближе к началу страницы.