Четыре правила профессионального дизайна

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

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

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

Почему я стал говорить о профессиональном дизайне? По моему мнению, «профессионализм» — это единственное качество, которым должен обладать дизайн любого веб-сайта. Дизайн может быть простым и сложным, текстовым и графическим, цветным и черно-белым — но при первом же взгляде на него посетителю должно становиться понятно, что этот сайт делал мастер своего дела, а не человек, который Интернет увидел только вчера.

Конечно, то, что я рассказываю вам о том, как делать профессиональный дизайн, вовсе не означает то, что при этом вам уже не нужны способности и вкус. Если вам нравятся поголовно все странички с narod.ru, то прочитайте вы хоть 20 томов о профессиональном дизайне — все равно не поможет.

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

Первое правило таково: «Побольше мелких деталей».

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

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

Вот что конкретно можно предпринять для «размельчения» дизайна:

1) если позволяет содержание сервера, заголовки, набранные шрифтом большого размера, дополните подзаголовками, выполненные более мелким кеглем;

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

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

4) не делайте кнопки навигации, заголовки колонок и другие подобные объекты однотонными. Придумайте какую-нибудь интересную рамку, визуально выделите часть объекта (например, угол), добавьте тень;

5) добавьте там, где, на ваш взгляд это требуется, декоративные элементы: пиктограммы, горизонтальные полоски или даже что-нибудь типа орнамента.

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

Примеров работы этого правила — масса. Например, в 1997 году главную страницу rambler.ru «украшал» здоровенный бело-синий логотип, и при этом он занимал около 50% всей главной страницы. Зрелище, надо сказать, было довольно тоскливое (даже директор проекта Д.Крюков в одном из интервью сетовал, что с дизайном у них не очень). Теперь же логотип сильно уменьшился, на главную страницу вынесли ссылки категорий Rambler's Top100 (отличный «размельчитель» дизайна), появились разноцветные колонки с новостями и другой информацией — и, как результат, сервер теперь выглядит гораздо лучше (хотя дизайн, конечно, еще далек от идеала).

А вот еще один пример. Это — два рекламных баннера для проекта job.list.ru (рисовал их автор этих строк)