Читатель держит в своих руках уникальный самоучитель по искусству веб-дизайна, позволяющий любому человеку, даже плохо знающему компьютер и Интернет, за несколько дней научиться создавать отличные, графически безупречно оформленные сетевые ресурсы: персональные, коммерческие, развлекательные, консультационные и т. д. В книге объясняется технология создания красочных надписей, геометрических фигур, собственных оригинальных курсоров, бегущих строк, прочих динамических эффектов и многого другого, что делает веб странички исключительно привлекательными. Настоящее пособие – одно из первых в России пособий, дополняемых учебным сайтом (http://obrazcats.narod.ru).
Введение
Вы пока неопытный пользователь ПК, но время от времени заходите в Интернет. Смотрите на чужие сайты и думаете: вот бы и мне так научиться, чтобы потом зарабатывать на этом неплохие деньги или же просто продвигать свой бизнес, не обращаясь в агентство, а выполняя все работы по «сайтостроению» самостоятельно. И тогда вы просите знакомых подсказать, какие учебники по веб-дизайну нужно прочитать. Сейчас перед вами книга как раз для абсолютных новичков. Хотя кое-что в ней будет познавательно и для профессионалов, а именно – технологии ваби-саби и аналогичные им, пришедшие в западное веб-искусство сравнительно недавно с Востока.
Еще до того, как мы приступим к чтению первой главы, вы научитесь верстать веб-странички. А когда книга закончится, то вы сможете создавать такие сайты, глядя на которые только профи поймет, что вы пока еще новичок и что вам еще предстоит освоить некоторые хитрости, которые в объем этого пособия просто не поместились.
Готовы к работе? Тогда отложите в сторону книгу, идите в магазин по продаже программного обеспечения («софта») и отыщите там диск со стандартным набором программ для веб-дизайна, но чтобы при этом в комплект обязательно входила великолепная программка для новичков (и не только!) под названием Web Page Maker, что означает «Конструктор веб-страниц». Установим эту программу на ваш компьютер, что совсем нетрудно сделать, так как все указания есть в прилагаемом файле Readme.txt. Вы спросите, пригоден ли ваш «комп» для профессионального, коммерческого веб-дизайна. Уместный вопрос, и ответ на него можно найти в дальнейшем. А пока не станем бежать впереди паровоза, потому что ученическую страничку сделать можно на всяком ПК, где установлена Windows XP, Windows Vista или Windows 2000. Скорее всего, у вас какая-то из этих операционных систем.
Откройте программку Web Page Maker («Веб Пейдж Мейкер»), кликнув пару раз на ярлычок, затерявшийся на рабочем столе. Перед вами выпрыгнет диалоговое окошечко Welcome (добро пожаловать), которое предложит – Create a web page through templates, то есть создайте веб-страничку с помощью шаблона (рис. 1). Как видите, в этой программке есть небольшой, но оригинальный набор шаблонов. Выберем предлагаемую нам опцию: ставьте флажок и жмите ОК. Теперь компьютер предлагает выбрать шаблоны деловые или личные. Остановимся на личных, поскольку для деловых сайтов мы еще не доросли; подберем наиболее милый шаблончик: выделим его щелчком мыши и нажмем ОК.
Глава 1. Веб-дизайн: искусство или ремесло
1.1. Веб-дизайн как ремесло
Является ли искусством веб-дизайн или это всего-навсего ремесло? Вопрос, надо заметить, отнюдь не праздный: от него зависит создание креативной концепции «сайтостроения», которой и будет руководствоваться мастер при разработке очередного проекта. Гений конструирования сайтов Якоб Нильсен полагает, что
веб-дизайн
– это в большей степени ремесло, поскольку именно техничность обеспечивает удобство пользователя в работе с сайтом. Однако Нильсен допускает, что артистический подход тоже оправдан. Соглашаясь в последнем пункте со своим гуру, спешу заметить, что ни один подход не должен превалировать, в веб-дизайне, справедливо равенство: «техника = искусству».
Очевидно, что живопись существует для того, чтобы главным образом радовать глаз, поэтому ее мы, не мудрствуя лукаво, относим к искусству. Но вот с архитектурой сложнее. Самое распрекрасное здание на свете сооружают не только для того, чтобы украсить город: всякая постройка выполняет чисто утилитарные функции. И тем не менее, архитектуру называют искусством. А современное автомобилестроение? Это Форд имел право гордо заявлять: «Вы можете купить у меня автомобиль любого цвета, при условии, что он будет черным». Сегодня сбыт автопродукции реален лишь при условии, что техническое совершенство «стальных коней» в равной степени дополнено изысками дизайна, причем не сводящегося исключительно к расцветке.
Говоря откровенно, споры о выборе в пользу техники или искусства столь же нелепы, как и спор «физиков и лириков», развернувшийся на рубеже 50-х и 60-х гг. прошлого столетия, по поводу которого Борис Слуцкий отреагировал знаменитыми стихами:
Всего – и артистичности, и техничности – должно быть
в меру
. Специальные исследования, проведенные в Израиле и Японии, показали, что человеку кажется более удобным из двух технически идентичных интерфейсов тот, который красив.
1.2. Веб-дизайн как искусство
Задача веб-дизайнера, как мы поняли, состоит в том, чтобы сделать красивый, привлекательный, очень-очень интересный и удобный для посетителя сайт. Веб-дизайн как ремесло отвечает на чисто технический вопрос, КАК сделать красиво. Веб-дизайн как искусство отвечает на эстетический вопрос, ПОЧЕМУ именно таким путем мы добиваемся привлекательности своего ресурса.
Итак, попробуем найти ответ на каверзный вопрос ПОЧЕМУ. Прежде всего, красиво – это когда предельно понятно и максимально удобно для использования. Представьте себе, что вы пришли в музей посмотреть на полотно великого Рембрандта. Но в музее никто и не подумал включить свет, в результате чего картина тонет в темноте. Вы знаете, что полотно прекрасно, но почувствовать эту красоту не можете. Спрашивается, почему? Да потому, что вам неудобно рассматривать произведения живописи в потемках. Точно так же дела обстоят и с сайтами. Даже очень хорошие странички можно испортить, если сделать их неудобными для ознакомления.
Вот почему удобство выдвигается на первый план. Человек хорошо видит пространство и наслаждается чтением, блуждает взглядом по картинкам, легко переходит на новые, заинтриговавшие его странички. Способность сайта удовлетворить потребность посетителя в комфорте, эргономичность сайта, удобство в эксплуатации носят собирательное название
юзабилити
(англ. usability). Юзабилити подразделяется на комфортность странички и комфортность веб-узла.
Комфортность странички
предполагает удобство в ознакомлении с материалами, которые размещены на одной-единственной страничке. И здесь важно соблюдать очевидные, в принципе, правила:
> важные тексты и картинки должны быть приметны;
> неважные тексты и картинки не должны быть свалены в кучу, они меньше нуждаются в приметности, чем важные, но не меньше – в упорядоченности;
1.3. Исторические традиции в веб-искусстве
Понятно, что никакой глубокой истории веб-дизайн – столь молодое направление в искусстве, находящееся еще на стадии полуремесла, – не имеет. Однако он имеет солидную предысторию. Если судить по общим тенденциям развития веб-дизайна, то можно пророчествовать, что он проходит непростой путь по трем этапам:
> традиция Запада;
> традиция Востока;
> традиция Атлантиды.
Полагаю, что кое-кто усмехнется, читая эти строки: еще бы, верить в существование Атлантиды – признак несерьезности. Однако рано посмеиваться, термин «традиция Атлантиды» употреблен с тайным смыслом. Традиция прагматичного Запада зародилась в Древней Греции, первой европейской цивилизации. Свое отчетливое выражение она нашла в философии афинянина Сократа, который, если верить его ученикам Ксенофонту и Платону, сформулировал принцип юзабилити: «Все хорошо и прекрасно по отношению к тому, для чего оно хорошо приспособлено, и, наоборот, дурно и безобразно по отношению к тому, для чего оно дурно приспособлено».
[9]
Концепция юзабилити, то есть удобства на грани искусства, достигла апогея в своем развитии в трудах Я. Нильсена и вряд ли продвинется дальше. На этом западная традиция угасает, уступая место восточной.
1.4. Заглядываем в будущее
Но и хваленая мудрость Востока не беспредельна, рано или поздно веб-дизайнерам придется отказаться от восточной традиции, склонной к абстрактному умствованию, в пользу какой-нибудь новой, имеющей практические результаты. И как мне кажется, отдаленные признаки становления этой традиции несложно заметить уже сегодня в интересе к искусству древних египтян и индейцев майя. Оно примечательно тем, что позволяет добиться многомерности пространства при работе в плоскости. Традиция эта названа атлантидской, поскольку, если верить атлантологам, цивилизации египтян и майя являются наследниками, преемниками гипотетической цивилизации атлантов (чем якобы объясняется некоторая схожесть их культур, выражаемая, например, в воздвижении пирамид).
Египтяне и майя многое могут предложить современному дизайнеру… А пока же назовем две технологии, которые позволяют на плоскости добиться эффекта объема с большим успехом и меньшими усилиями, чем 3D. Первая технология носит название
ортогональной проекции
. Она хорошо прослеживается в изображениях царственной четы – фараона и его супруги. Царь на переднем плане, зритель смотрит на него сбоку. Царица едва видна, вперед выдается только ее профиль, а также нежная ручка, которую она вложила в ладонь своего мужа и господина. Жена-тень, сохраняющая при этом свою индивидуальность, обращающая на себя внимание, производит неизгладимое впечатление. А самое главное – применение такой тени обеспечивает неуничтожимую иллюзию объема.
Вторая технология –
косоугольная аксонометрия
, когда фигуры выстраиваются в уходящий вдаль ряд. Таким приемом египетские художники изображали шеренги воинов: солдаты на рисунке (рельефе) выстроены один позади другого, так что их вереница уходит вглубь изображения. Заметим, что оба названных приема положены ныне в основу «трехмерной» книжной верстки, где эффект двухмерности достигается взаиморасположением иллюстраций и заголовков, а также использованием врезок, двухуровневых плашек, теней в схемах и подложках.
Само по себе подражание рельефу позволяет добиться высокой выразительности украшательских элементов. В качестве практического примера рассмотрим эскиз главной странички сайта, посвященного хатха-йоге (рис. 8). Несмотря на явно восточную тематику ресурса, в его оформлении использованы мотивы орнамента, наблюдаемого в рельефах майя.