Цветовая палитра, шрифты и графика

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

1. Выбирайте цвета в соответствии с назначением Web-сайта. Если, например, сайт предназначен для продажи высокоэффективной домашней техники, лучше использовать пастельные, классические тона, а не ярко-розовые и ядовито-зеленые.

2. Ограничьте палитру цветов. Используйте ограниченное число сочетающихся друг с другом цветов по двум причинам:

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

· Ограниченная палитра смотрится лучше, чем вся радуга. Создайте палитру не больше, чем из семи цветов и последовательно используйте ее для всех страниц сайта.

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

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

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

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

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

6. Разбивайте страницу на части с помощью графических элементов. HTML-средства и графические элементы - прекрасный способ разделить страницу на части и привлечь внимание пользователя к отдельным ее деталям.

Текст для Web

сайт страница шрифт графика навигация

Опустите лишние слова

Избавьтесь от половины слов на каждой странице, затем уберите еще половину из того, что осталось.

Удаление всех тех слов, которые все равно никто не будет читать, имеет несколько полезных следствий:

1. Это снижает уровень шума на страницах

2. Это выделяет то содержание страниц, которое действительно является ценным и полезным

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

Есть два особых вида текстов: «общая болтология» и «инструкции».

Никакой «общей болтологии»

Мы сразу же узнаем «общую болтологию», как только видим ее, - это вступительные статьи, служащие для того, чтобы приветствовать нас на сайте и рассказать нам о том, какой он замечательный, или же сообщить нам о содержании раздела, в который мы вошли.

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

«Общая болтология» напоминает простой светский разговор - так же бессодержательна и существует только ради разговора самого по себе. Но у большинства Web-пользователей нет времени на такие разговоры: они хотят сразу приступить к сути. Поэтому следует устранить как можно больше «общей болтологии».

Никаких «инструкций»

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

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

Выбор размера шрифта

Избегайте использовать шрифты размером менее 12 пунктов. Некоторые шрифты хорошо работают и при размере в 10 пунктов, но их немного. С другой стороны, буквы не должны быть слишком большими, чтобы Web-страница не смотрелась как таблица для проверки зрения. Всегда используйте четный размер шрифта. Шрифты этих размеров великолепно смотрятся на экране. При использовании нечетных размеров компьютер будет их масштабировать, что непременно отразится на качестве.

Текст на фоновом рисунке

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

Ниже приведено несколько советов относительно фоновых рисунков.

1. Создайте фоновый рисунок, превосходящий Web-страницу по размеру. Многие рассматривают фоновый рисунок как нечто небольшое, размером примерно 1/1 дюйм, которым как плиткой, выкладывается все пространство страницы. Это совершенно не обязательно! При желании можно создать фоновый рисунок, превышающий по размеру Web-страницу, который будет выходить за пределы окна обозревателя и не будет повторяться по мере пролистывания. Создав такой фон, можно разгрузить Web-страницу.

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

3. Чтобы фон быстро загружался, используйте как можно меньше цветов. Чем меньше используется цветов, тем меньше размер файла (не выходите за пределы 15 Кбайт).

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