5.2.3. Дизайн сайта

«Простой стиль подобен яркому свету. Он сложен, но этого нельзя заметить».

Анатоль Франс

Под дизайном сайта обычно понимают:

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

• оформление текста (параграфы, отступы, размер, цвет и т.д.),

• цветовую гамму,

• графические элементы (кнопки, разделители, фотографии, анимированные изображения и пр.),

  • Типы изображений, используемых для Web

  • Подготовку изображений

• динамические элементы (управляющие скрипты),

• звуковое оформление (фоновая музыка, щелчки ссылок и пр.).

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

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

Верхнюю часть – так называемую «шапку» страницы – как и любую статическую (неизменную) часть целесообразнее размещать в отдельном файле, дабы избежать неудобного дублирования в коде каждой страницы. Для вывода составной (из нескольких файлов) странички можно использовать одну из двух основных технологий – фреймовую или SSI (Server-Side-Include – страницы, подключаемые на стороне сервера). Фреймовая технология проще в использовании, так как является встроенной возможностью языка гипертекстовых страниц HTML (язык HTML был специально разработан и применяется для отображения информации во всемирной сети). В этом случае создается отдельный файл с описанием сетки фреймов, где в каждую ячейку браузер клиента загружает указанную страничку – обычно это заголовок, меню и основная информационная часть. У каждой ячейки имеется имя, которое можно использовать для адресации вывода через ссылку. Так, например, работают пункты меню, при нажатии которых информация выводиться в основную информационную часть.

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

С другой стороны, использование SSI технологии позволяет избежать этих проблем, но требует небольшой подготовки, а также настройки сервера (хотя, в настоящее время это уже неотъемлемая часть любых вэб-серверов). В этом случае страничка полностью компонуется на стороне сервера и посетителю выдается цельным HTML-документом. Для использования SSI для файлов используется специальное расширение «.shtml». Если смотреть на страничку в исходном текстовом варианте, то она имеет линейный вид, где информационные области (чаще всего оформляемые в виде таблицы), перечислены слева направо и сверху вниз. Это означает, что любая страничка имеет вид слоеного пирога. Например, заголовок, меню, информация, меню или контактная информация. Что структурно можно представить в виде: «голова» (head) – информация – «хвост» (tail). Все они оформляются в отдельные файлы, и в информационном – в начале и конце – указываются специальные директивы с указанием на «голову» и «хвост». И так для каждой текстовой странички. «Голова» и «хвост», в свою очередь, могут делиться еще на части. Например, «голова» может состоять из логотипа и меню.

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

В дополнение к вышесказанному отметим, что при разработке сайта необходимо учитывать, что на компьютерах посетителей будут различными разрешения экранов (чаще всего 800x600 или 1024x768), а также различные браузеры, которые могут по разному отображать ваши странички (Internet Explorer, NetScape, Opera и т.д.).

Оформление текста. При оформления текста нужно всегда иметь в виду, что текст будет в 99% случаев читаться с экрана. Поэтому следует позаботиться о величине шрифта, отступах абзацев, выравнивании текста, шрифтах и раскраске.

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

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

Цветовая гамма. В выборе цветовой гаммы нужно быть особенно щепетильным. В Интернете правилом хорошего тона считается применение минимального количества цветов – двух-трех, максимум 4-х. Если Ваш сайт претендует на серьезность, не стоит делать из него новогоднюю елку.

Кроме того, обратите внимание на сочетаемость цветов. Если Вы не обладаете знаниями в этой области, то достаточно дать на оценку образец страницы нескольким человекам – скорее всего, Вы получите дельный совет.

Вот еще несколько рекомендаций.

Для обозначения цвета в HTML используется 24-битная цифровая кодировка, которой можно задать 65536 цветов (или #FFFFFF – в шестнадцатеричном виде). Для ручного задания удобнее пользоваться именно шестнадцатеричным представлением числа, так как в этом случае первые две цифры отвечают за красный цвет, вторые две – за зеленый, третьи две – за синий. Здесь имеется в виду доля содержания каждого из этих базовых цветов. Например, #000000 – черный, #FFFFFF – белый, а #FF0000 - красный цвета.

Впрочем, глубокие знания шестнадцатеричной системы для вас не обязательны. Необходимо знать, что одной цифрой можно задать 16 значений: 0, 1, 2, .., 9, A, B, C, D, E, F (где A=10, .., F=15). В нашем же случае для обозначения базового цвета используются две цифры, первая из которых – это старший разряд, а вторая – младший. Старший осуществляет грубое смещение сразу на 16 позиций, в то время как младший – более точный – на одну позицию (в пределах от заданного первой цифрой значения). Многими специалистами замечено, что наиболее гармонично воспринимаются цвета, числовое значение которых кратно трем; то есть в шестнадцатеричном виде это будут цифры: 0, 3, 6, 9, C, F. Попробуйте поэкспериментировать.

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

Графические элементы.

Для отображения графической информации в Интернете, в основном, используются сжатые изображения двух форматов – GIF и JPEG (расширения .gif и .jpg).

В связи со спецификой их алгоритма сжатия, GIF применяется для схем, графиков и несложных рисунков с небольшим спектром цветов, а JPEG – для фотоматериалов.

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

Формат JPEG позволяет сжимать изображение с разным качеством, но без потери цветовой информации. При сжатии изображений в этом формате лучше всего использовать 50%-80% качество (50%-60% – для менее контрастных и 70%-80% – для контрастных). В программах для обозначения качества чаще всего используются цифры от 1 до 9. Сканировать же фотографии лучше с разрешением в 150dpi с последующей подгонкой под необходимые размеры.

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

Правильно сжатые и аккуратные картинки – это большой плюс для воспринимаемости сайта.