Правило "Побольше мелких деталей" работает не только в области интернет-дизайна. Например, посмотрите на эти два образца 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) "Гармоничное сочетание шрифтов"
Ну что же, теоретическая база профессионального дизайна у вас есть. Получится ли у вас быть профессиональным дизайнером на практике - зависит от вас. Успехов!