Искусство оформления сайта. Практическое пособие

Бердышев Сергей Николаевич

Покончив с разговорами об удобстве юзера, перейдем непосредственно к обсуждению красоты, привлекательности проекта. Страничка index.wpm, маячащая сейчас перед вашими глазами, выглядит милой еще и потому, что все в ней гармонично. Те непоседливые веб-дизайнеры, которым удалось «поверить алгеброй гармонию», добиваются такого баланса цветов и объектов, действуя на строго научной основе. И наука, которая им помогает, называется сенсорной инженерией. Само по себе слово «сенсорика» означает чувственное восприятие. Первое и самое главное, что воспринимает человек, оказываясь в какой-либо среде, – это пространство данной среды.

Адекватное сенсорное

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

> за минимальное количество кликов мог найти на сайте искомый документ;

> мог найти материалы по смежной тематике «не отходя от кассы»;

> знал о материалах неродственной тематики, но потенциально интересных, зовущих в большое путешествие по ресурсу.

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

> форму поиска – на каждой странице;

> главное меню – на страницах, открывающих какие-либо разделы, после чего оно не повторяется;

> ссылки на главную и карту сайта присутствуют на всех страничках, причем ссылка на главную оформлена, как правило, в виде логотипа ресурса или компании, размещенного в левом верхнем углу странички.

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

1. КОРНЕВАЯ ПАПКА (папка на хостинге, выделенная под ваш веб-узел).

1.1. Главная страничка (часто называется index.html или default.html).

1.2. Контакты (страничка с контактными данными и, иногда, формами для осуществления обратной связи).

1.3. ГРАФИКА (папка, а точнее – субдиректория, обычно называемая images) – сюда сбрасываются графические элементы, общие для всех страничек сайта. Это преимущественно различные рисунки в формате GIF, в особенности общие детали интерфейса страничек и баннеры, а также иконки (в том числе favicon). Обо всем этом мы еще поговорим, когда конкретно остановимся

на графике.

1.4. РАЗДЕЛ 1. Такие папки отведены под тематические разделы и повторяют логическую структуру сайта с богатым контентом. Сколько тематических блоков можно выделить в контенте вашего ресурса, столько и папок «Раздел» нужно создать. Внутри каждой папки такого рода целесообразно выделить следующие субдиректории второго порядка:

1.4.1. ТЕКСТОВЫЕ МАТЕРИАЛЫ. Субдиректория содержит только html-странички, содержащие нужный контент.

1.4.2. ГРАФИКА. В субдиректорию загружаются рисунки *.gif и *.jpg, относимые только к отдельным или всем страничкам данной субдиректории. Это схемы, графики, диаграммы, фото, сканированные копии с репродукций и тому подобные материалы, предназначенные для иллюстрирования статей, выложенных на веб-узле. Внутри этой папки бывает уместно выделить следующие субдиректории третьего порядка.

1.4.2.1. Превьюшки – рисунки предварительного просмотра (preview), очень небольшие, кликнув на которые можно получить крупное изображение. Мы непременно научимся делать такие.

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

1.4.2.3. Аватары и т. д.

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

1.4.2.1. Сорта роз (фото, демонстрирующие образцы цветов того или иного сорта).

1.4.2.2. Сорта гладиолусов (то же самое).

1.4.2.3. Сорта гортензий и т. д.

Посещая в следующий раз какой-нибудь ресурс с обоями на рабочий стол, обратите свое внимание на размещение картинок. Вы убедитесь, что на многих сайтах такого рода превьюшки хранятся отдельно от больших картинок, но вместе с тем большие картинки рассортированы по субдиректориям в зависимости от тематики, например: девушки и авто, девушки у бассейна, девушки на берегу моря и т. д. А пока вернемся к нашему древу папок.

1.4.3. АУДИО/ВИДЕО. Не стоит даже пояснять подробно. Здесь хранятся файлы со звуковыми и видеозаписями, если такие нужны. Когда на сайте много аудио и видеоматериалов, то целесообразно разбить эту субдиректорию на две самостоятельные папочки.

1.4.4. КУРСОРЫ. Папка не обязательна. Она применяется в том случае, если для разных страниц сайта используются разные типы курсоров, что облегчает ориентировку в пространстве ресурса и делает его более живым и интересным. (Понятно, что при разработке солидных бизнес-ресурсов такой подход неприемлем.).

1.4.5. DOWNLOAD(S) – загрузка. Папка обычно востребована на подавляющем большинстве ресурсов, поскольку здесь хранятся материалы, предназначенные для скачивания посетителями. Содержимое этой папки должно быть представлено преимущественно (если не сказать более категорично: исключительно!) заархивированными файлами. Дело в том, что скорость скачивания архива ниже, что несомненно оценит посетитель. Сюда сваливаются отчеты, прайсы, рекламные проспекты, электронные книги и прочие полезные для клиента материалы. Иногда сам факт, что все это имеется на сайте, уже настраивает посетителя на благодушный лад, пусть даже гость и не собирается ничего скачивать. Как говорится, дорог не подарок – дорого внимание!