Правило первое

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Справедливости ради нужно заметить, что некоторым людям дизайн от NAD нравится. Если вы почитаете журнал Stereophile, то найдете там одни восторги по поводу внешнего вида этой техники. Ее дизайн считается необычным, не похожим на оформление техники других компаний. Но ведь домашние странички на geocities и angelfire тоже не похожи на сайты, сделанные профессиональными студиями, верно? И они тоже вызывают восторг у экспертов в разных областях — но только не в области веб-дизайна.

А вот верхний DVD-плейер — от DENON — по дизайну очень даже хорош. И в этом большая заслуга изящных по исполнению элементов управления проигрывателя, сгруппированных в правой части аппарата. Левая часть лицевой панели плейера тоже пустует, но тут над правилами дизайна превалируют правила эргономики: большинство людей — правши, и им удобнее пользоваться элементами управления, расположенными справа.

Правило второе

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

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

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

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

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

Продумывайте до конца все элементы дизайна. Следите, чтобы каждый из их был на своем месте и хорошо сочетался с другими. Не ленитесь потратить лишний час на дизайн кнопки размером 15x15 пикселей — вам обязательно воздастся. Не пожалейте времени, чтобы выяснить, какой именно тег в 10 килобайтах вашего HTML-кода вызывает смещение таблицы на всего лишь один ничтожный пиксель. Не думайте: «А, фиг с ним. Так сойдет.» Не получится.

Из тщательно «вылизанных» в графическом редакторе кнопок и пиктограмм, грамотно составленного текста, отлаженного HTML-кода, как из кирпичиков, и складывается профессиональный дизайн.

Правило треье

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

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

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

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

Да, кстати, дело не только в контрастности. Например, в ярко-зеленом тексте на темно-синем фоне контраста — хоть отбавляй, но любой профессиональный дизайнер такое сочетание использовать не будет.

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

Теперь о выборе цветов для дизайна в целом. С одной стороны, зеленый с розовым явно не сочетаются, но с другой стороны, в Сети полно зелено-розовых сайтов. То есть многие дизайнеры в принципе не способны определить, какие цвета сочетаются, а какие нет. По-моему, тут медицина бессильна.

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

Но лично я этой методикой не пользуюсь. Дело в том, что на веб-странице самые, казалось, невероятные сочетания цветов могут смотреться органично. Главное — не бояться эксперементировать.

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

Сначала все-таки поднапрягитесь и выберите какие-нибудь несколько цветов — пусть даже те, которые вам давно надоели. Нарисуйте ими какую-нибудь простую композицию (надпись на фоне нескольких прямоугольников, например). Далее сохраните получившуюся картинку в GIF или JPEG и загрузите в Internet Explorer. Теперь — финальный шаг: нажмите Ctrl+A или выберите из меню команду пункт «Правка-Выделить все». Выделение инвертирует цвета, и получаются довольно интересные сочетания. А теперь, если понравилось, делайте скриншот и используйте найденные цвета на здоровье, а если нет — продолжайте эксперементы.

Да, тяжела дорога в профессиональные дизайнеры

Правило четвертое

Четвертое правило профессионального дизайна (хотя по своему значению оно вполне достойно именоваться правилом №1) звучит так: «Гармоничное сочетание шрифтов».

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

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

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

Во-первых, не стоит в дизайне одного сайта использовать много разных шрифтов. Вполне достаточно одного-двух.

Особенно хорошо действие этого правила заметно в полиграфии. В подавляющем количестве печатных изданий и других публикаций используется один шрифт с засечками для набора основного текста и рубленый (без засечек) шрифт для заголовков. Да взять хотя бы русский народный текстовый редактор MS Word: в качестве стандартных стилей он предлагает шрифт Times New Roman для обычного текста и Arial — для заголовков.

Но когда студенты набирают в Ворде свои курсовые, они считают своим долгом выделить название каким-нибудь церковно-славянским шрифтом, для заголовков выбрать рукописную OdessaScript, ну а для остального текста устроить чехарду гарнитур Journal и Arial.

Естественно, никто не заставляет вас набирать весь текст шрифтом одного и того же размера и начертания. Экспериментируйте. Только, как всегда, нужно придерживаться «логического единообразия»: уж если вы решили выделять важные участки текста полужирным, то не нужно какой-нибудь из абзацов непонятно почему делать подчеркиванием. А если для текстового меню навигации вы решили сделать , то ни в коем случае не нужно половину пунктов меню делать в «Фонт сайз равно плюс один».

Во-вторых, не используйте декоративные и стилизованные шрифты — например, рукописные, церковно-славянские, имитирующие штамповку на военный манер или буквы на LCD-дисплее, и т.п. О них нужно забыть и вспоминать только тогда, когда понадобится сделать именно стилизацию под конкретную тематику или временную эпоху. Как писал Артемий Лебедев о создании дизайна-стилизации для Рекламы.Ру: «Тут мне пригодились такие гарнитуры, которые я даже спьяну никогда бы не использовал в своих работах»:

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

Кроме того, шрифты, как и многие другие вещи, подвержены влиянию моды, и декоративные шрифты — особенно. Большинство из них уже устарели и выглядят точно так же, как одежда, которая пользовалась сумасшедшим успехом 10 лет назад — банально и нелепо. Многие же классические шрифты популярны уже десятки лет — например, Futura был создан в 1928 году, а Garamond ведет свою историю вообще с XV века.

Зато новички декоративные шрифты очень и очень любят. Им стильные своей строгостью шрифты Bodoni, Freeset, Futura, Gals, Garamond, Helvetica, Times и им подобные почему-то не нравятся. А вот что-нибудь корявое — пожалуйста:

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

На этом я пока хочу остановиться, но меня терзают смутные сомнения, что к теме шрифтов я еще вернусь не раз : — )

Итак, перечислю еще раз четыре правила профессионального дизайна, о которых я рассказал в этих четырех заметках:

1) «Побольше мелких деталей»
2) «Повышенное внимание к мелочам»
3) «Гармоничное сочетание цветов»
4) «Гармоничное сочетание шрифтов»

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