Сергей Бердышев - Искусство оформления сайта. Практическое пособие

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

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

> усиливая землю, возрождаешь металл (оптимизированный html-код позволяет полноценно использовать контент, делает контент заметным для роботов, освобождает больше места в документе для текстовых фрагментов);

> усиливая землю, сдерживаешь огонь (мы реже и аккуратнее применяем тяжеловесные элементы темы, динамические эффекты и стили, когда используем простые html-эффекты для украшения слов и букв, для создания оригинальных надписей, для получения графических элементов в виде рамок, линий, маркированных списков);

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

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

1.4. Заглядываем в будущее

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

Египтяне и майя многое могут предложить современному дизайнеру… А пока же назовем две технологии, которые позволяют на плоскости добиться эффекта объема с большим успехом и меньшими усилиями, чем 3D. Первая технология носит название ортогональной проекции. Она хорошо прослеживается в изображениях царственной четы – фараона и его супруги. Царь на переднем плане, зритель смотрит на него сбоку. Царица едва видна, вперед выдается только ее профиль, а также нежная ручка, которую она вложила в ладонь своего мужа и господина. Жена-тень, сохраняющая при этом свою индивидуальность, обращающая на себя внимание, производит неизгладимое впечатление. А самое главное – применение такой тени обеспечивает неуничтожимую иллюзию объема.

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

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

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

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

Глава 2. Веб-дизайн как технология

2.1. Собираем инструментарий

Живописцу для плодотворной работы нужны правильно подобранные кисти, веб-дизайнеру – «железо» и «софт». Начнем с описания аппаратного обеспечения для ПК, отвечающего задачам веб-дизайна. Прежде всего, поговорим о «мозге» компьютера, то есть о центральном процессоре. Как вы помните, он находится в системном блоке и управляет всеми устройствами, к системному блоку подсоединяемыми (так называемая периферия), по программе, написанной людьми. Проверьте технические параметры вашей ПЭВМ: скорость действия безупречного процессора должна составлять 1,5–1,7 ГГц (скорость электронных устройств измеряется в герцах, поскольку выражается через частоту передачи данных). Подобную скорость развивают в первую очередь Pentium 4 и Athlon.

При использовании нескольких «тяжелых» графических пакетов показано применять процессор Pentium 4 со скоростью 2,0 ГГц. То есть такая высокая скорость целесообразна при создании сложных, объемных рисунков (3D графика). Но в целом веб-дизайн – не место для 3D, вряд ли вам предстоит столкнуться с ней на практике. Когда вы станете мастером, то будете бежать от объема без оглядки и отговаривать своих клиентов от использования объемных картинок. Почему? Во-первых, подобные рисунки отягощают сайт, замедляют его загрузку и, как следствие, делают непривлекательным для визитеров. Во-вторых, изображение на экране все равно плоское, двухмерное. Трехмерные картинки возможны лишь в голографических технологиях лазерной живописи, а значит, 3D – это оптическая иллюзия. И такая иллюзия по-разному выглядит на разных мониторах, причем иногда принимает совершенно нелепый вид и даже мешает гостю пользоваться интерфейсом.

Ничуть не менее важен объем оперативной памяти RAM и свободной памяти (емкости) винчестера. Оперативной называется краткосрочная память ПК, которая представляет собой способность «держать в уме» сведения, находящиеся непосредственно в процессе обработки. Если сравнивать машину с человеком, то Юлий Цезарь обладал колоссальной оперативной памятью, поскольку якобы умел делать семь дел одновременно. Кто-то может делать только два дела одновременно: обрабатывать картинку в Фотошопе и строить планы на выходные. Кое-кто не умеет даже этого, у таких людей «оперативная память» хуже. Свободная память винчестера – это весь объем сведений, хранящихся на ПК (винчестер в данном случае – не американская винтовка, а жесткий магнитный диск). У человека винчестеру соответствует долгосрочная память, куда откладываются воспоминания обо всех событиях в жизни, обо всех прочитанных книгах, обо всех скачанных с Интернета файлах и т. д.