Планирование веб-сайта

Веб-сайт представляет собой совокупность веб-страниц с повторяющимся дизайном, объединенных по смыслу и физически находящихся на одном веб-сервере. Таким образом, повторяющийся дизайн, общность смысла или концепции и физическое расположение являются основными условиями при создании веб-сайта.

Планирование является важнейшим этапом в разработке любого сайта, будь то простенькая домашняя страничка или гигантский сайт транснациональной корпорации. Для планирования сайта можно использовать различные специализированные программы (например, Microsoft Visio), но обычно достаточно карандаша и бумаги или какого-нибудь текстового редактора.

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

Собрав все необходимое, можно задуматься над дизайном и решить, в каком ключе будет выполнен сайт: будет ли он консервативным, строгим или затейливым. Например, рекламный сайт лучше сделать повеселее, а новостной сайт должен обладать скромным, консервативным оформлением, чтобы не отвлекать от основного содержания. Для проектирования сайта требуется также разработать (и, желательно, нарисовать) логическую структуру сайта: нужно подумать о перемещении между страницами, о взаимодействии ссылок и т.д.

Продумав логическую структуру, необходимо позаботиться и о физической структуре сайта, т.е. определить, как отдельные файлы, составляющие сайт, будут размещены в папках. Как правило, файлы организуются по типу: веб-страницы - в одной папке, графические файлы - в другой, мультимедийные файлы - в третьей и т.д. Названия папок должны отражать их содержимое. Например, файлы веб-страниц должны храниться в каталоге HTML, файлы с графическими изображениями – в каталоге с именем IMAGES или PICS и т.д. Файл главной страницы практически всегда помещают в корневой каталог (так называется папка, в которой помещается сайт).

Основные составляющие сайта

Домашняя (или главная) страница является обязательным элементом любого сайта. Именно с нее начинается знакомство посетителя с сайтом. Она отображается, когда пользователь набирает адрес сайта без указания имени файла какой-либо конкретной страницы.

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

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

Полезное содержимое сайта (или основной контент) - это та информация, ради которой он был создан. Структурируется она так же, как в книге: отдельные абзацы, посвященные какой-либо теме, объединяются в главы, а главы, в свою очередь, в разделы. Таким образом, посетитель сайта сразу сможет найти нужную информацию, двигаясь от разделов к главам, а от глав к абзацам, пока не найдет то, ради чего сюда пришел.

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

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

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

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

Юзабилити и доступность

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

Термин "юзабилити" можно рассматривать как "конечную суммарную степень удобства, меру интеллектуального усилия, необходимого для получения полезных качеств этой вещи, и скорость достижения положительного результата при управлении ею". Юзабилити сайта является всеобъемлющим термином, определяющим комплекс мер, результатом которого является создание удобного и понятного для сайта.

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

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

Цветовые решения для сайта

При разработке веб-сайта особое внимание следует уделить цветовому оформлению. Цвет привлекает внимание, создает настроение, посылает сообщение. Цвета не существуют сами по себе, они всегда воспринимаются совместно с другими цветами. Для того чтобы понять, как цвета взаимодействуют друг с другом и создать их гармоничное сочетание, используется цветовой круг, пример которого представлен на рисунке 3.1.

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

Понятие "дополнительный цвет" (или вторичный цвет) было введено по аналогии с "основным цветом". Смешивая соседние основные цвета попарно в равной пропорции можно получить дополнительные цвета: например, смешение красного и синего цветов даст фиолетовый цвет. Так, к триаде основных цветов красный-желтый-синий дополнительными являются оранжевый-зеленый-фиолетовый. Вторичные цвета находятся на цветовом круге строго между основными.

Рассматривают обычно и третичные цвета (или цвета 3-го порядка), которые образуются при смешивании основного цвета с соседним дополнительным цветом, например, смешивая красный (основной) и фиолетовый (дополнительный) можно получить красно-фиолетовый цвет и т.п.

Кроме того, цвета условно делят на теплые и холодные. Теплые цвета, содержащие желтый и красный, более динамичные, выступающие и объемные. Холодные цвета, расположенные от фиолетовой до зеленой зоны цветового круга, кажутся удаляющимися по мере усиления тона. Эффект движения, вызванный сочетанием холодных и теплых цветов, широко применяется дизайнерами.

Цветовые схемы

Важнейшей задачей веб-дизайнера является поиск гармоничного цветового сочетания. Некоторые цвета отлично смотрятся вместе и дополняют друг друга. Другие же, создают раздражающие глаз сочетания. Чтобы не проводить эксперименты на собственном сайте, необходимо иметь представление об основных цветовых схемах, т.е. о гармоничных комбинациях цветов, составленных по определенным правилам. Ниже будут рассмотрены четыре цветовые схемы, которые являются самыми простыми для понимания и реализации, но далеко не единственными.

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

Дополнительная цветовая схема. Дополнительная схема образуется сочетаниями противоположных в цветовом круге цветов (см. рисунок 3.2,б). При выборе одного цвета и его противоположного используют также все оттенки, тональности и тени обоих цветов. Такая схема обеспечивает более широкий диапазон выбора. Такое сочетание смотрится довольно грубо, однако в некоторых случаях именно контрастное сочетание способно придать дизайну неповторимый стиль. Обычно, дополнение используется в небольших количествах, как акцент.

Триадические цветовые схемы. Триадическая цветовая схема создается при выборе одного цвета и добавлении к нему двух других цветов, расположенных на одинаковых расстояниях друг от друга на цветовом круге. Такая схема содержит как теплые, так и холодные цвета, но одна "температура" обязательно должна преобладать. Обычно температура, которая будет преобладать над другими, выбирается для переднего плана. Пример триадической схемы представлен на рисунке 3.3, а .

Тетрадические цветовые схемы. Чем больше цветов выбирается, тем более сложной будет цветовая схема. Данная цветовая схема использует сочетание четырех цветов. Эта схема, представленная на рисунке 3.3, б похожа на дополнительную схему, только используется две пары дополнительных цветов, расположенных на равном расстоянии друг от друга.

В настоящее время существует множество сайтов, с помощью которых можно выбрать цветовую схему не прибегая к помощи цветового круга. Многие из этих ресурсов позволяют пользователям загружать уже готовые цветовые схемы и дорабатывать их. Большинство ресурсов позволяют искать и сортировать цветовые схемы по определенным оттенкам или ключевым словам. Это может быть полезно, если основной цвет уже выбран, и есть необходимость подобрать к нему другие цвета. К одним из лучших сайтов для поиска цветовых схем относятся Color Scheme Designer ( http://colorschemedesigner.com/), Toucan (http://aviary.com/tools/toucan), ColoRotate (http://www.colorotate.org/) и Adobe Kuler (http://kuler.adobe.com/).

Полиграфия в сети Интернет

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

Дизайнеры традиционной печати имеют в своем распоряжении огромный инструментарий, развивавшийся годами: огромное число доступных шрифтов, гибкие возможности позиционирования текста и др. Веб-полиграфия же более ограничена. Основные ее ограничения включают ограниченный выбор шрифтов, отсутствие переноса слов и слабый контроль за кернингом. Рассмотрим эти ограничения подробнее.

Ограниченный выбор шрифтов. С этим ограничением создатели и посетители веб-сайтов встречаются в первую очередь. Хотя в настоящее время можно определить любой шрифт, посетители оценят замысел автора, только если такой шрифт уже установлен на их компьютере. В противном случае, браузер воспользуется значением шрифта по умолчанию, которым обычно является Times New Roman. В связи с этим большинство веб-дизайнеров ограничиваются наиболее общедоступными шрифтами, к которым относятся Times New Roman, Georgia, Verdana, Arial, Courier и некоторые другие.

Переносы слов. Когда речь идет о выравнивании текста, имеется четыре варианта: выравнивание по левому или правому краям, выравнивание по центру и выравнивание по ширине. Текст, выровненный по ширине, выглядит более эстетично, чем текст с "рванными" краями. Такой способ выравнивания можно видеть в большинстве журналов и книг. Однако в Интернет это связано с некоторыми трудностями, в связи с отсутствием автоматического переноса слов, который разбивает слова в подходящем месте, чтобы лучше разместить их на строке. Чтобы полностью выровнять текст, браузеры могут только изменять интервалы между словами, что зачастую приводит к многочисленным пустым пространствам, образованным несколькими идущими подряд пробелами.

Кернинг. Под кернингом понимается процесс настройки пробелов между определенными символами пропорционального шрифта. В пропорциональном шрифте (например, Times New Roman) расстояние между отдельными символами изменяется от символа к символу, в отличие от моноширинного шрифта (например, Courier), где расстояние между символами всегда одинаково. Кернинг используется при печати для уменьшения пространства между буквами, которые размещаются естественным образом. Большинство профессиональных шрифтов поставляются со встроенными командами кернинга, чтобы предоставить информацию о пробелах в системе воспроизведения текста.

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

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

• Для глаз утомительны как короткие, так и длинные строки, т.к. читателю приходится напрягать мышцы глаз при переходе от одной строки к другой. Наиболее комфортной является длина строки в 50-65 символов.
• Расстояние между строками текста (интерлиньяж) является важным фактором для удобочитаемости и эстетики текста: слишком малый интерлиньяж затрудняет чтение, слишком большой можно спутать с разделением абзацев.
• Висячие строки, образующиеся в случае, когда последняя строка абзаца слишком короткая или состоит из одного слова, также отрицательно влияют на читабельность текста, т.к. прерывают взгляд читателя, нарушая прямоугольную форму текста.
• В блоках с выравниванием по левому или правому краю необходимо особое внимание уделять "рваным" краям, которые образуются в результате заметной разницы в длине строк и могут сбивать читателя. Край должен быть равномерным, без слишком длинных и слишком коротких строк.
• Выделять слова в тексте нужно так, чтобы не отвлекать читателя. Существует несколько форм выделения: курсивное начертание, полужирное начертание, заглавные буквы, размер шрифта, цвет. Лучше не комбинировать несколько способов, а использовать только один. Так как подчеркнутый текст прочно ассоциируется со ссылкой, недопустимо выделять текст подобным образом.
• Правильное оформление знаков позволяет глазу беспрепятственно скользить по тексту, облегчая чтение и восприятие текста. Плохо оформленная пунктуация отвлекает внимание даже от хорошего дизайна сайта. Особенно часто путают дефис и тире, кавычки, принятые в русском языке и "симметричные кавычки".