Недизайн
АрхивКогда гуру дизайна находит время, чтобы поучить любителей приемам веб-дизайна, то у него часто проскальзывает мысль: мол, в дизайне правил никаких нет и нужно руководствоваться собственным вкусом и требованиями художественной задачи.
Почти по Остеру
Когда гуру дизайна находит время, чтобы поучить любителей приемам веб-дизайна, то среди множества полезных советов часто проскальзывает мысль: мол, в дизайне правил никаких нет и нужно руководствоваться собственным вкусом и требованиями художественной задачи, не обращая внимания на опыт остальных мастеров мыши и стилуса. Смысла в этом совете не больше, чем во фразе «все дороги ведут в Рим». Разумеется, каждый нормальный человек знает, что дорога из Иваново в Кострому ведет только из Иванова в Кострому и обратно. Однако не все начинающие дизайнеры понимают, что фразу об «отсутствии правил» тоже не следует понимать буквально и чтобы сделать приемлемый (почему приемлемый, а не хороший или отличный, мы поговорим ниже) макет веб-ресурса, о ней нужно немедленно забыть. К сожалению, слова авторитета о бесконечности средств художественного самовыражения запоминаются лучше всего — что, согласитесь, гораздо проще, чем выучить правила совместимости цветовых решений или принять разумные ограничения, которые — примени их — сделают страничку лучше и удобнее.
Когда известный веб-дизайнер говорит, что правила дизайна не догма, он отпускает себе грехи, потому что сам этим правилам следует далеко не всегда. И вместо того, чтобы каждый раз объяснять, почему он пренебрег тем или иным стандартом, проще сказать, что придерживаться его необязательно. Это действительно так, но что позволено Юпитеру, увы, не позволено быку. Мы с вами быки — иначе вы не читали бы эту статью, а нам Якоб Нильсен приносил бы кофе. С сахаром.
Поэтому речь у нас пойдет о правилах дизайна. О том, что можно делать, и о том, чего делать нельзя ни в коем случае. А также обо всех неприятностях, которые ждут начинающего дизайнера (он же в нашем случае — верстальщик HTML) при создании сайта. А неприятностей будет много.
Браузер браузеру волк
Компания AOL долго судилась с Microsoft, обвиняя последнюю в монопольных замашках и неправедном занятии рынка, телефона и телеграфа. И все прогрессивное человечество сочувствовало разработчикам Netscape, которых задавила корпоративная махина Microsoft. Однако если бы кто-то поинтересовался мнением веб-дизайнеров и верстальщиков HTML, то с удивлением узнал бы, что всю команду Netscape нужно вывести в чистое поле, поставить лицом к стенке и расстрелять. А потом вывести в это же поле разработчиков Opera.
Войны браузеров привели к тому, что все браузеры обрабатывают HTML по-разному. И нет никакой уверенности, что ваша страничка будет корректно отображаться и в Internet Explorer, и в Netscape, и в Opera, трех самых распространенных на сегодняшний день семействах. Ситуация усугубляется еще и тем, что каждая программа просмотра веб-ресурсов представлена на рынке множеством версий (да еще и под разные платформы!), причем если со спецификацией HTML 4 худо-бедно совместимы все, то поддержка JavaScript и CSS — уже больной вопрос.
Наверное, больше всех виновата в возникшей сумятице именно Microsoft, которая начала вводить в свои продукты фишки, противоречащие стандартам, однако победителей не судят — различные инкарнации IE на сегодня являются самым популярным браузером в мире. Отсюда не следует, что можно ограничиться совместимостью с IE и «забить» на поддержку остальных смотрелок (хотя многие дизайнеры-любители поступают именно так, зачастую даже не подозревая, что пользователям Opera и Netscape их сайт недоступен). «Забить» нельзя, потому что при этом отсекаются целые сегменты пользователей. Например, те, кто работает в Linux. Да и в любом случае — устанавливать новый браузер только для того, чтобы зайти на ваш сайт, никто не будет.
|
Пример простейшего скрипта, определяющего пользовательский браузер и перенаправляющего его на соответствующую страничку: <script type=»text/javascript»> |
Есть три способа разрешения конфликта. Во-первых, с помощью специального скрипта можно определять тип браузера посетителя и подсовывать ему специально оптимизированный код. Это сложный путь для верстальщика, но, наверное, самый лучший, поскольку не приходится приносить в жертву совместимости какие-то особенности дизайна. Почти не приходится.
Обычно для определения типа браузера используется JavaScript, хотя у этого способа есть существенный недостаток. Дело в том, что код JavaScript выполняется на машине клиента, где этот модуль может быть просто-напросто отключен. Более надежным выглядел бы скрипт, выполняющийся на сервере (пример такого кода можно найти по адресу forum.dklab.ru/php/heap/SkriptOpredeleniyaBrauzera.html.
Второй путь полегче. Необходимо кодировать страничку так, чтобы ее понимали все браузеры, упрощая те элементы, которые Netscape и Opera понять не в состоянии, и отказываясь от фирменных «фишек» Microsoft. При этом первоначальный дизайн, если он писался без оглядки на альтернативные браузеры, может заметно измениться.
И наконец, третий способ, являющийся гибридом первых двух и, наверное, самый трудоемкий. Страничка у нас в этом случае одна, но после определения типа браузера специальные скрипты подгружают специфические элементы кода для того браузера, который установлен у клиента.
К сожалению, в журнальной статье нет места, чтобы описать все различия между браузерами. Впрочем, в этом нет нужды — в Сети достаточно сервисов (в том числе и бесплатных; см., например, anybrowser.com/siteviewer.html), позволяющих определить, насколько страница совместима с разными версиями смотрелок.
Картинки с выставок
Любой начинающий создатель веб-страницы сталкивается с необходимостью подыскать графические изображения, которыми можно было бы разукрасить свою страничку. Найти их проще простого, но все доступные картинки делятся на пять категорий:
- бесплатные и часто используемые;
- бесплатные, но плохие (частично пересекается с первой категорией);
- бесплатные и хорошие (частично пересекается с первой категорией);
- платные;
- сделанные на заказ.
Если вы хотите, чтобы ваш сайт отличался от сотен тысяч других, то стоит отбросить первые две категории. Таким образом, остаются бесплатные и хорошие изображения, а также платные и сделанные на заказ.
В идеале нужно все изображения заказывать профессионалам или делать самому. В этом случае есть гарантия, что используемые на вашем сайте изображения уникальны (до тех пор, пока их не украдет какой-нибудь начинающий дизайнер).
Вариант использования платных баз изображений чуть хуже. Во-первых, это довольно дорого — с учетом российской специфики заказ набора изображений местным специалистам обойдется гораздо дешевле, чем покупка сопоставимых по качеству картинок в фотобанках. Во-вторых, нет никакой гарантии, что те же картинки не использовались для создания других сайтов. Однако это маловероятно, поскольку цены на изображения поистине драконовские, и далеко не каждый владелец сайта может позволить платить от 50 долларов за снимок (а на Gettyimages, например, дешевле не бывает).
Впрочем, было бы ханжеством не вспомнить о российской специфике еще раз. Дело в том, что платные базы зачастую позволяют просматривать хранящиеся в них изображения в низком качестве. Напечатать такую картинку в журнале невозможно, однако для веб-дизайна она подходит вполне. И хотя те же Gettyimages с Corbis защищают свою собственность «водяными знаками», если вы зарегистрируетесь в сервисе, указав «реальные» координаты, то получите доступ к изображениям, на которых никаких «водяных знаков» нет. При этом если ваш сайт рассчитан на российскую аудиторию, вы практически ничем не рискуете: эмиссаров фотобанков у нас в стране нет, и никто о воровстве им не доложит. В общем, это не более незаконно, чем воровать изображения с готовых сайтов. Но и не более этично.
Если, однако, отвлечься от оценки правомерности подобных действий, то следует сказать, что риск все же есть. В тюрьму вас, конечно, не посадят, но использование украденных картинок характеризует ресурс, мягко говоря, не лучшим образом. Так что рекомендовать кому-нибудь такой дешевый способ создания дизайна собственного сайта язык не поворачивается. Именно потому, что он дешевый в худшем смысле этого слова.
|
ПОЛЕЗНЫЕ ССЫЛКИ - www.corbis.com. Фотобанк. Хороший, большой и дорогой. |
Иконы на вес золота
Таким образом, наиболее приемлемым выбором для начинающего дизайнера являются бесплатные и хорошие изображения, а также изображения, изготовленные самостоятельно или на заказ.
Когда мы говорим о бесплатных/хороших изображениях, речь идет прежде всего о библиотеках иконок, которые в умелых руках способны скрасить даже скупой текстовый дизайн. Можно, конечно, использовать популярные библиотеки — и в единстве интерфейса есть свой смысл, однако если имеется возможность сделать сайт чуть отличным от других, зачем ею пренебрегать?
А возможность есть. Частенько дизайнеры и художники выкладывают в Сеть свои собственные наборы иконок. При этом их запрещается распространять на специализированных сайтах. Кроме того, каждый, кто использует авторские иконки, обязан указать на него на своей странице имя и координаты автора. А в некоторых случаях — предварительно связаться с ним и попросить разрешение на использование его набора.
Найти таких дизайнеров через Google почти невозможно — все релевантные запросы оккупированы сайтами, оптом поставляющими веб-дизайнерам бесплатные шрифты и наборы изображений. Единственный эффективный способ (кроме опроса знакомых) заключается во внимательном изучении понравившихся страниц — вполне возможно, что в подвале одной из них будет указано, чья графика использовалась для оформления, и в соответствии с «лицензионным соглашением» дан адрес автора.
Впрочем, мелкие графические элементы можно и заказать. Благодаря тому, что фрилансеров сегодня великое множество, заказ обойдется недорого (а то и даром, если вы уговорите автора иконок на бесплатную рекламу на своем ресурсе). Это, наверное, самый оптимальный путь, поскольку элементы интерфейса можно с самого начала «заточить» под собственную страницу, которая и является основой дизайна. То есть дом вы начинаете строить с фундамента, а не с крыши, как происходит в том случае, если дизайн страницы подгоняется под найденные иконки.
Что касается тематических изображений, то зачастую без них можно вообще обойтись. Сайт наверняка будет смотреться не хуже. А уж скорость загрузки точно возрастет. Если вы считаете иначе, то кроме вышеупомянутых хранилищ типа Gettyimages можете поискать картинки в Google и AllTheWeb. Напомним еще раз, что далеко не все картинки (даже найденные в бесплатном доступе) можно использовать на своем сайте.
Воруйте на здоровье!
Теперь давайте поговорим о том, что «воровать» можно и нужно. Можно и нужно «воровать» формат. Сайты, которые сделаны крупными студиями, скажут о правилах дизайна гораздо больше, чем откровения боссов этих студий. Дизайнерам-любителям, не собирающимся зарабатывать себе на жизнь дизайном, следует зарубить на носу, что все хорошее уже придумано до нас. Возможно, вы скажете новое слово в дизайне, если не будете обращать внимания на профессиональный опыт тех конкурентов, которые справедливо вас за конкурента не считают, но попытки быть оригинальным во что бы то ни стало скорее всего приведут к тому, что на сайт нельзя будет взглянуть без слез. В общем, если все мебельные мастерские делают табуретки с четырьмя ножками, значит, в этом есть какой-то смысл, какая-то сермяжная правда.
Речь не идет о плагиате. Это еще хуже, чем воровать картинки, и, без сомнения, сослужит вам плохую службу. Есть, правда, и удачные примеры — например, сайт kinoafisha.ru не скрывает, что «слизан» с imdb.com. Но это исключение из правил. Обычно к плагиаторам отношение негативное как со стороны веб-дизайнеров, так и со стороны посетителей, знакомых с оригиналом. Но формат, основные принципы устройства страницы — заимствовать можно и нужно. Так, художник набивает руку, делая копии чужих картин, или начинающий писатель, читая мэтров, мотает на ус, как строится фабула, как закручивается сюжет… Свой долг вы отдадите позже, когда на ваших работах будут учиться «молодые львы». А пока… Классики плохого не посоветуют.
Еще раз подчеркнем: брать чужое надо с умом. Ваша цель не повторить дизайн понравившегося сайта, а приобрести крупицы чужого опыта, проанализировав, почему сайт сделан именно так, а не иначе. Наверняка вы замечали, что все порталы похожи друг на друга, а многие новостные сайты вообще выглядят как однояйцевые близнецы. И не оттого, что у владельцев этих ресурсов нет денег на дизайн или у дизайнерских студий иссякли идеи — просто определенная форма наиболее близка к содержанию, и если перед создателями стоит задача сделать сайт удобным для посетителя, то они не изобретают велосипед, а используют стандартные, привычные и, главное, работающие решения.
Роршах почти не виден
Главный бич начинающего дизайнера — цыганщина. Помимо желания заполонить свою страничку бессмысленной анимацией, фонами, которые мешают читать текст, будущий «законодатель мод» пытается раскрасить ее в такие яркие цвета, на фоне которых этикетка «Фанты» кажется блеклой бумажкой. Причем цветов должно быть как можно больше — чтобы посетителю было интересно, а то вдруг он не запомнит такой замечательный сайт.
Проблема сочетаемости цветов на странице формализуется плохо (даже в учебниках по дизайну об этом пишут много, предваряя любые рекомендации оговорками типа «это не универсально» и «это не всегда работает»). Тем не менее, существуют общепризнанные рецепты, на которые нужно ориентироваться.
Первое: цветов должно быть немного. Если подумать, концептуально различные элементы страницы, которые стоило бы выделять разными цветами, можно пересчитать по пальцам. Один цвет для фона, один для текста и еще один для ссылок. Это минимальный набор — понятно, что святой троицей не всегда обойдешься. Но суть дела не в абсолютных цифрах. Просто запомните, что минимизация количества цветов на странице еще никогда никому не мешала.
Второе правило касается принципов подбора палитры. Это не универсальный рецепт (про оговорки см. выше), однако утверждение, что наилучшим образом зачастую сочетаются цвета, отстоящие друг от друга на четверть цветового круга, в значительной степени верно.
Также имеет право на существование принцип триады, когда на цветовой круг накладывается равнобедренный треугольник и выбираются цвета, совпадающие с его вершинами. В этом случае оттенки отстоят друг от друга на треть длины окружности.
Нужно помнить, что цвета должны контрастировать (то есть соседние нельзя брать ни в коем случае). Кроме того, нельзя брать противоположные, если отталкиваться от цветового круга, цвета. Два теплых оттенка (верхняя половина цветового круга) контрастируют лучше, чем теплый и холодный. То же самое верно и для двух холодных цветов.
Стандартные рекомендации по яркости и насыщенности опустим — иначе описанию подбора цветов конца не будет. Добавим лишь, что для правильного подбора цветовой гаммы достаточно здравого смысла, помноженного на капельку вкуса1.
Помнится, Стивен Кинг в повести «On Writing», посвященной писательскому труду, рассказывал, как он пишет книги. Особенность подхода Кинга в том, что, закончив книгу, он прячет ее в стол на пару месяцев, чтобы абстрагироваться от содержания. И только потом, когда голова уже занята другим проектом, начинает вычитку. Думается, этот подход был бы очень полезен и в веб-дизайне. Если вы сомневаетесь в том, что дизайн хорош, прервитесь, допустим, на неделю. Или на две. Или на месяц. Не смотрите на него, не дайте глазу «привыкнуть» — посетитель к вашему дизайну, если тот ему не понравится, привыкать не будет. Он просто уйдет на страничку, автор которой не дальтоник и не садист, набравший темно-серый текст на черном фоне. Забудьте про свою страницу и спустя некоторое время посмотрите на нее как посетитель, свежим взглядом. Наверняка вы найдете множество огрехов, которых раньше не замечали.
А вот популярные рекомендации относительно «безопасной палитры» и предупреждения диффузии можно, по большому счету, проигнорировать. Они были актуальны в те времена, когда на рынке присутствовало большое количество видеоадаптеров, не способных отображать больше 256 цветов одновременно. Теперь же опасаться диффузии не стоит. Впрочем, если очень хочется, всегда можно оптимизировать свой сайт под безопасную палитру. Хуже не будет.
И последнее. Если, глядя на собственное творение, вы испытываете беспокойство, если вы не поняли ни этой главки, ни многочисленных статей, посвященных вопросу подбора цветов, если слово hue у вас ассоциируется не с saturation, а с надписью в парижском туалете, пожалуйста, используйте простой текстовый дизайн: просто пишите черным по белому. Пощадите тех, кто придет на ваш сайт с поисковика.
|
Экипировка После того как мы определились с основными ограничениями на свободу творчества, можно поговорить о программном обеспечении, которое нам понадобится. Ниже — необходимый минимум. Программы для создания gif-анимации не упомянуты принципиально. - Adobe Photoshop - Macromedia HomeSite - Macromedia DreamWeaver - Macromedia Flash |
1 (назад)Не помешает еще прочитать книжку Дмитрия Кирсанова «Веб-дизайн». — Прим. ред.
