Giglavy.com - Веб-дизайн: Импульс к развитию

Giglavy.com / Публикации / Веб-дизайн: Импульс к развитию

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

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

Но самое плохое - это ляпы на личных страницах веб-дизайнеров. Репутация их страдает несоизмеримо больше.

Конторский дизайн

Рис. 1

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

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

Переходим к шрифтам. Ну, как известно, в природе есть два известных шрифта - Times New Roman и Arial. Это два ярких представителя двух основных групп. Я имею в виду шрифты с засечками и рубленые шрифты. Для начинающих поясняю: гарнитура (начертание) Times используется при наборе основного текста в большинстве печатных изданий, а Arial, как и всякий рубленый шрифт, очень удобен для оформления заголовков и коротких кусков текста. Шрифт Arial в отличие от Times прекрасно подходит для верстки больших массивов текста, набранного очень мелким кеглем (размером). Именно поэтому он так популярен в периодических изданиях - ведь их страничный объем в большинстве случаев строго регламентирован. Теперь возвращаемся к сайту НИИ.

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

Короче, на сайте НИИ созданы все условия для того, чтобы запутать самых глазастых шпионов, а заодно и всех остальных посетителей. Видимо, все дело в секретности. Никто, кроме дизайнера и автора текста, не должен знать ничего лишнего.

Все это были вполне объективные формальности, подкрепленные не только моим скромным опытом, но и бесценными мыслями корифеев web-дизайна. К этому не придерешься, статистика беспощадна.

"Служенье муз не терпит суеты:"

Теперь чуть сложнее. Придется придерживаться определенных рамок, так как назвать приличным дизайном творение НИИ ну никак нельзя. Будем смотреть формально: дизайном может называться любое образное творение человека.

Думаю, никто не станет спорить, что визуальная часть страницы должна быть не менее функциональна, чем текстовая. Она должна хотя бы каким-то намеком символизировать деятельность организации. Что мы видим в нашей родимой конторе НИИ?

Прежде всего, бросается в глаза подбор фотоматериала. Я имею в виду фотографию НИИ. Находится она в центре композиции и невольно притягивает внимание. Что мы видим? Дом, выполненный по заказу в стиле партийного ампира. Таких очень много в каждом областном центре.

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

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

Мы все дальше углубляемся в иерархии визуальных элементов композиции Web-страницы (см. далее). Остался анализ обработки вспомогательных изображений. Начнем с маркеров списка. Во-первых, грубо принесено в жертву единообразие. Даже если элементы списка ссылаются на файлы разного формата, это отнюдь не значит, что их маркеры надо по-разному оформлять. Один список оформлен какими-то нелепыми ракушками, другой - шариками. Детский сад!

Ладно, нет единого стиля, но хотя бы про специфику работы НИИ можно не забывать? Маркеры содержат прозрачные области, которые совершенно чудовищно накладываются на фон, демонстрируя нам абсолютное отсутствие анти-алиасинга (сглаживания контура). Стоит упомянуть страницу 249 в книге Дмитрия Кирсанова, где подробно описан конфликт между сглаженными контурами GIF-изображения и его прозрачными областями. Но маркеры НИИ даже сглаженных контуров не содержат. Прозрачных областей в таких GIF-изображениях лучше вообще по возможности избегать, так как занимают они больше места, чем просто белый цвет, и, соответственно, загружаются медленнее. В результате таких, казалось бы, мелких ошибок мы получаем сайты, которые грузятся по полчаса.

Так: Мы насчитали уже как минимум пять грубых ошибок создателя сайта. Для НИИ и так слишком много. Ведь это не домашняя страница. Пять грубых ошибок - это минимальное количество баллов. Стоит ли продолжать?

Встретить на сайтах бюджетников достойные дизайнерские решения мне не удалось. Я не говорю, что их нет в природе. Конечно, я не проводил серьезного статистического исследования. Жаль, что в критериях поиска нет таких понятий, как качество дизайна или, скажем, художественная релевантность. Зато постоянно попадаются сайты, аналогичные рассмотренному. За Державу обидно... Ведь хороших дизайнеров у нас много. Казна тоже не нищая. В чем же проблема?! Почему практически все бюджетные проекты настолько пропитаны конторой?! Ответы с удовольствием приму по адресу giglavy@rambler.ru.

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

Все гениальное, конечно, просто, но не все простое гениально. И дизайнер не должен про это забывать.

Работы тех, кто получает от заказчика деньги, котируются рангом выше, так что не стоит заострять внимание на явных и неоспоримых ляпах, как это было в случае с НИИ.

На одну ступеньку выше

Рис. 2

Набираем в любой поисковой системе запрос "официальный корпоративный сайт". Осмотрительно пробежав несколько громких имен, попадаем на сайт абстрактного комбината. Первое, что бросается в глаза - у организации нет денег на домен типа www.комбинат.ru. И размещается он в экзотическом месте - www.провайдер.ru/~комбинат. Главное отличие корпоративного проекта от домашней странички - это, прежде всего, солидность в самых незаметных на первый взгляд мелочах. А адрес - это, согласитесь, не мелочь. За некоторые доменные имена большие люди готовы выложить много денег.

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

Видимо, самым глобальным символом целлюлозно-бумажной промышленности автор работы считает чудовищную панораму (894X424) пыльного комплекса комбината, из которого угрожающе торчат дымящиеся трубы. И если присмотреться, можно заметить, что изображение грубо растянуто средствами HTML и на самом деле его размер 671X424. Этого категорически нельзя делать с фотографиями. Центральная фотография практически ничем не отличается от верхнего фона навигационной панели.

Пристально вглядываясь в левый верхний угол страницы, мы видим странные объекты. Любопытство пододвигает наше лицо вплотную к монитору, и мы начинаем различать в темных слоях атмосферы буквы. Сначала W, потом еще две W и так далее, кончается на ru. В итоге хватаемся за голову и нас осиняет. Это же нормальный адрес комбината www.комбинат.ru! Почему он не встретился в поисковой системе раньше? То, что находится между www и ru, сложно распознать даже при плотном приближении. Эта часть страницы не ссылается ни на что. Путем проб и ошибок через некоторое время попадаем на вожделенный комбинат. И мы видим ЭТО (рис. 3).

"Прекрасное должно быть величаво"

Рис. 3

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

Вывод в заключение можно сделать только один: Корпоративный стиль в дизайне предполагает колоссальную ответственность перед клиентами компании и простыми случайными пользователями.

Корпоративный стиль в Web-дизайне

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

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

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

Иногда для названия корпорации придумывают принципиально новое слово, не существовавшее ранее. Именно так произошло название одной весьма известной фирмы. Оно было получено объединением двух слов. Одно из них - латинское слово "sonus", которое является корнем таких слов как "sound" (звук) и "sonic" (звуковой). Другое слово - "sonny boy" (сынок), популярное выражение, используемое в Японии, которое означает молодого человека со свободным новаторским духом. Эти слова использовали, чтобы подчеркнуть, что "Sony" - это группа увлеченных молодых людей с кипучей энергией и неуемной страстью к творчеству:

ЛОГОТИП

Рис. 4

Рис. 5

Рис. 6

Рис. 7

Рис. 8

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

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

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

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

В последнее время все, кому не лень, используют при разработке логотипов эффект конторской печати, но для корпоративного стиля это никак не подходит. Вообще любая пестрота, как правило, претит солидности. Печати больше подходят для молодежных проектов. Точно также с корпоративным стилем очень сложно связать мазки кисти. Вспомните символ группы "Алиса" (рис. 5), небрежно начерканный чуть ли не Энди Уорхоллом по просьбе Джоанны Стингрей.

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

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

Динамична и привлекательна имитация объемности композиции с помощью плоских форм (рис. 8). Кстати, на восьмом рисунке показан весьма неплохой пример сочетания градиента формы и имитации объема. Здесь главное - не слишком увлекаться. Овал в правильном ракурсе может изобразить круг или кольцо в изометрической проекции. Так же произвольный замкнутый четырехугольник может выглядеть, как квадрат в перспективе.

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

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

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

Если вы только начали разработку своего первого логотипа, то вам необходимо тщательно изучить особенности множества уже существующих символов и эмблем. На сайте http://www.logo.nino.ru вы можете найти практически любой логотип в векторном формате EPS (Encapsulated PostScript). Многие организации выкладывают в Интернет свой векторный логотип, сопровождая его рекомендациями по поводу особенностей обработки и верстки, чтобы любой дизайнер смог быстро разобраться, что к чему. Без специальных инструкций он может допустить ошибки, нежелательные для корпоративного стиля компании. И за этим обязательно должны следить промоутеры корпорации.

ЦВЕТА

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

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

Рис. 9

Лично мне нравится сайт http://drumusic.narod.ru. Вообще на народе не часто встретишь такие работы. Там около десяти цветов, но это не портит картины (рис. 9). Единственно, к чему можно придраться - это фиксированный размер мелкого шрифта. Все-таки для пользователей удобнее, чтобы основной текст можно было уменьшать и увеличивать просто в меню броузера. Еще страница может показаться немного жидкой - блоки текста как бы утопают в черном фоне. Все остальное вполне соответствует молодежному стилю.

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

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

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

А так остаются только всевозможные оттенки синего. Используя оттенки основного цвета логотипа, мы не рискуем сесть в лужу при переходе к серой шкале.

USABILITY

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

Пока научно-техническая революция диктует свои условия, мониторы с маленьким разрешением - не редкость, и ширина страницы пока не должна превышать 770 точек - из расчета разрешения 800X600. Вспомните бедных бюджетников. С ними тоже надо считаться. По идее, больше 770 и не нужно. 200 на боковую навигационную панель, а остальные 570 - для текста и для графики. Рекомендуемая ширина текстового блока колеблется от 40 до 60 символов. Если текст растянут на весь экран, то читать его неудобно. 570 точек - это вполне оптимальная ширина. Линии связи пока не настолько стремительные, чтобы качать большие объемы информации. Легкий фон желательно сделать повторяемым.

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

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

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

Рис. 10

Некоторые фирменные формы можно эксплуатировать бесконечное число раз. Взять хотя бы старый вариант логотипа одной обувной компании (рис. 10). Вокруг этих трех лепестков можно выстроить целую концепцию. Работать с подобным материалом - это одно удовольствие. А вот чисто текстовые логотипы проигрывают. К текстовому логотипу можно присобачить фактически любой дизайн, но корпоративный стиль из этого вряд ли получится. Сложно сказать, какой именно дизайн лучше всего подходит к текстовому логотипу.

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

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