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

Далее список продолжается по числу разделов. (Увидеть конкретное воплощение данной структуры можно на иллюстрации 5, где автор проследил физические взаимосвязи между компонентами странички с воображаемого сайта «Bikini Girls», предоставляющего юзерам обои на рабочий стол.). Должен сказать, что предложенная схема очень сложна, хотя для логически и физически сложного сайта, а тем более для сайта, созданного в коммерческих целях, она просто необходима, иначе ресурс не сможет полноценно выполнять свои функции. Малоемкие персональные сайты не требуют такой скрупулезности, вот почему их структура обычно сугубо физическая и весьма тривиальная.

1. КОРНЕВАЯ ПАПКА.

1.1. Html-странички, не имеющие собственной субдиректории.

1.2. Images – субдиректория для рисунков (сюда же загружаются немногочисленные аудио– и видеоматериалы, если таковые имеются).

1.3. Downloads – субдиректория для скачиваемых архивов.

Добиться безупречной логической структуры (которая подскажет нам построение структуры физической) позволяет high quality content, высококачественный контент, который вдобавок ко всему хорошо изучен веб-дизайнером. Контент, как вы помните, – это смысловое, текстовое содержимое ресурса. Обратим внимание на то, что податливое содержимое способно обеспечить эффективное управление всем ресурсом.

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

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

Уж если мы заикнулись о «белизне», то следует подумать о таком немаловажном для сенсорики факторе ориентации в пространстве, как цветовая гамма. Цвет – король веб-среды. Если мы полагаемся на зрение в 90 % случаев в реальном мире, то наша зависимость от глаз в мире виртуальном возрастает до 99,99 %. Совокупность цветов, оформляющих странички ресурса, носит название цветовой гаммы. От тщательности подбора цветовой гаммы зависит:

> восприятие сайта в целом (удобный, удачный, смелый, нелепый, неумелый, некрасивый);

> психологическое и физиологическое состояние гостя, включая его настроение;

> читабельность информации;

> форма объектов и видимость мелких деталей.

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

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

Таблица 1

Цветовое и символическое решение сайта в зависимости от его тематики

Закрывая «цветную» тему, сообщим несколько технических данных. В компьютере применяется несколько моделей цвета. Если вы создаете или обрабатываете формат JPEG, то обязаны в вашей программе для рисования (скорее всего в Фотошопе) проверить модель цвета. Для этого пройдите путь Image › Mode – «Изображение › Режим»: на открывшейся панельке флажок должен стоять напротив букв RGB. Эта модель цвета обеспечивает получение богатой палитры путем смешения трех исходных цветов – Red, Green и Blue, что означает красный, зеленый, синий. Эта модель опирается на аддитивный механизм цветовосприятия, имеющий физиологическую основу (сетчатка глаза имеет клетки, чувствительные только к указанным цветам; богатство красок в окружающем мире мы видим за счет смешения импульсов от этих трех клеток).