Складываем кубики
Дизайн

Вот мы и подошли с вами к "философскому камню" всех веб-дизайнеров. Фантастическое количество людей говорит о дизайне, как о каком-то фетише, поклоняясь ему, в том числе, и с принесением человеческих жертв. В то же время, ситуация складывается несколько иная, чем может показаться на первый взгляд. Дизайн - это профессия (чтобы быть точным - ремесло), которой обучают в нескольких вузах России, причем делают это хорошо. Например, можно получить образование дизайнера в "полиграфе" (конкурс 10 человек на место), МАрхИ (10-15 человек на место), Текстильной академии (5 человек на место) и нескольких других. При огромном конкурсе на поступление в эти учебные заведения, все они вместе выпускают каждый год не менее сотни квалифицированных специалистов, что почти удовлетворяет потребности существующего рынка труда. Если вы занимаетесь (или планируете) заниматься изготовлением сайтов на заказ, то, возможно, имеет смысл получить профильное образование, тем более, что образование - это всегда не только и не столько бумажка.

Однако вернемся к собственно дизайну вашего сайта. В нижеследующей лекции я постараюсь рассказать некоторые основные принципы и подходы к созданию внешнего облика вашего сайта, приведу примеры, как хорошие, так и плохие, на которых можно поучиться. И первый же совет, который я хочу вам дать: "обратитесь в дизайн-студию, если вы не уверены в своих силах". Конечно, это будет не бесплатно, но вы сэкономите собственное время и, скорее всего, получите более удачный вариант, чем вы сделали бы сами. Зато единовременная оплата услуг студии позволит вам в дальнейшем избежать потерь из-за некачественного внешнего вида сайта (особенно, если ваш сайт - торговый). На мой взгляд, обращение в дизайн студию - это оптимальный выход для издателя, не имеющего соответствующего опыта и знаний в дизайне. Список дизайн-студий (неполный, конечно) вы найдете в конце лекции.

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

Если вы собираетесь разрабатывать только внешний вид сайта, не затрагивая ни обработку контента, ни создание сложных баз данных, ни программирование CGI-скриптов, то вам не нужна дорогая фирма с солидной репутацией - сила таких студий (например, Infoart) в разработке программной части, которая вам, фактически, не нужна. Теоретически, вам достаточно одного хорошего дизайнера, который просто нарисует вам одну-две страницы, а вы потом самостоятельно напишите для нее коды, то есть - воплотите "в цифре". Хотя, конечно, лучше обратиться к дизайнеру, который специализируется именно на www, поскольку, он уже знает требования, которые предъявляет Интернет к издателю, и вам не придется потом потеть, верстая страницы по созданному неопытным дизайнером шаблону.

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

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

Некоторое время назад мне довелось прочесть статью, где один "чудо-дизайнер" рассуждал: "я открываю PhotoShop и набрасываю туда много всякой всячины: смешные картинки, орнаменты.., а потом стараюсь из всего этого собрать страницу". Так вот, так делать не надо! Дизайн - это, прежде всего, стилистика, преследующая определенную цель по разрешению поставленной перед дизайнером задачи (увеличение продаж, привлечение клиентов, создание моды или модного течения, социальная реклама…), а о какой стилистике можно говорить при работе "методом набрасывания"? Это не дизайн, а "художества".

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

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

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

Посмотрите, как работают признанные, известные дизайнеры: Дмитрий Кирсанов, Артемий Лебедев, студия Дизайн-Депо (журнал "КАК") и др. Никогда не вредно учиться у профессионалов. Обратите внимание на используемые ими в оформлении принципы композиции, цветовые решения, решения пространства. Внимательно изучайте работы и старайтесь понять принципы взаимодействия тех или иных элементов страницы, стержень композиции, а поняв, попробуйте использовать схемы решений в своих работах. Единственно, чего не надо делать, это клонировать чужой дизайн. Во-первых, это пойдет на пользу не вам, а тому, кто его придумал, поскольку ваш сайт не будет иметь собственного лица, а во-вторых, можно и нарваться: по меньшей мере, на "музей клонирования", а в худшем случае, от вас могут тем или иным способом потребовать закрытия сайта.

Очень важная область дизайна - типографика - шрифтовое решение композиции. К сожалению, в отличие от печатных изданий, современные веб-возможности ограничены двумя группами очень похожих и не очень красивых шрифтов: рублеными (Arial, Verdana etc.) и антиквами во главе с Times New Roman. Все остальные шрифты могут оказаться не установленными на компьютере пользователя, и их использование регулярно приводит к невозможности посетителем прочесть ваше послание, - вместо текста будут показаны жуткие закорючки. Если же вам необходимо написать текст каким-нибудь особенным шрифтом, то используйте gif изображение для всего текста (например, для заголовков) или для каждой буквы в отдельности, что гораздо экономичнее, но чрезвычайно трудоемко (так, например, сделан сайт журнала "КАК"). Тем не менее, как бы вы не ухищрялись, использование текста в виде картинок приведет к многократному (sic) увеличению объема страницы, что крайне нежелательно, учитывая современные средства связи и загрузку интернет-каналов. Поэтому стоит подумать о том, чтобы суметь выразить представляемые вами образы существующими средствами, не используя громоздкие картинки.

Таким образом, из всего арсенала шрифтовых решений, которое может быть использовано в печати, веб-дизайнеру остается только два с половиной шрифта и 7 размеров. Не густо, конечно. Есть надежда, что ситуация скоро сдвинется с мертвой точки. Во-первых, использование CSS (о ней вы прочтете в следующих лекциях) позволяет задавать размер шрифта в пунктах, а количество браузеров, поддерживающих CSS уже достаточно велико, чтобы можно было на них смело ориентироваться. Во-вторых, недавно появилась система динамически подгружаемых шрифтов, которые можно использовать, не опасаясь последствий, поскольку при нахождении указания на такой шрифт браузер автоматически сгружает его с указанного сервера и устанавливает (при условии работы на платформе windows). К сожалению, я пока не нашел ни одного руссифицированного шрифта такого рода. Создавая шрифтовое решение для сайта, обязательно выписывайте шрифты, которые вы используете и их размеры, чтобы потом не запутаться. Еще раз подчеркиваю: не стоит полагаться на свою память, ей и так предстоят нелегкие испытания.

В дизайне большое значение имеет Мода, что легко заметить по рекламным материалам, оформлению бытовых приборов и их упаковки, газетам, и, в меньшей степени, по журналам. Например, сегодня очень популярен так называемый soft design - плавные линии, отсутствие острых углов, по возможности, белый цвет или приглушенные, иногда пастельные тона. В печатных изданиях царствуют линеечки и треугольнички с кружочками - большое количество выделяющих, отчеркивающих и акцентирующих линеек и полукругов делают страницы похожими на графический рисунок или даже чертеж (компания "Терем" около двух лет назад логически завершила эту моду и оформила свою рекламу в виде старого чертежа прошлого века). Точно так же мода диктует свои условия и в веб-дизайне. Хорошим примером модного сайта является узел Samsung или, например новый дизайн баннерной сети RLE. Следовательно, мода не столько выделит вас из общей массы, но сделает вас внешне более современным, и, соответственно, динамичным. Мода очень активно продвигается на рынке, вдалбливаясь в мозги пользователей, поэтому быть немодным означает проигрывать в глазах посетителей тем вашим конкурентам, которые моде следуют. Срабатывает "эффект бивиса-батхеда: "это же крута, Баклан", причем, этот эффект работает не только на 15-летних подростков, но и на взрослых, вполне сформировавшихся личностей, нужно только грамотно его использовать (а как вы думаете, почему ВАЗ 110 так популярен? - не такая уж это хорошая машина). На самом деле, вопрос следования моды касается не столько дизайнера, сколько маркетолога, а также идеолога всего сайта целиком, но задуматься о нем, наверное, стоит до того, как вы начали что-то делать руками, чтобы потом не пришлось переделывать.

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

[Назад] [Содержание] [Вперед]