Искусство оформления сайта. Практическое пособие

Бердышев Сергей Николаевич

Читатель держит в своих руках уникальный самоучитель по искусству веб-дизайна, позволяющий любому человеку, даже плохо знающему компьютер и Интернет, за несколько дней научиться создавать отличные, графически безупречно оформленные сетевые ресурсы: персональные, коммерческие, развлекательные, консультационные и т. д. В книге объясняется технология создания красочных надписей, геометрических фигур, собственных оригинальных курсоров, бегущих строк, прочих динамических эффектов и многого другого, что делает веб странички исключительно привлекательными. Настоящее пособие – одно из первых в России пособий, дополняемых учебным сайтом (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). Несмотря на явно восточную тематику ресурса, в его оформлении использованы мотивы орнамента, наблюдаемого в рельефах майя.