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

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

Введение

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

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

Готовы к работе? Тогда отложите в сторону книгу, идите в магазин по продаже программного обеспечения («софта») и отыщите там диск со стандартным набором программ для веб-дизайна, но чтобы при этом в комплект обязательно входила великолепная программка для новичков (и не только!) под названием Web Page Maker, что означает «Конструктор веб-страниц». Установим эту программу на ваш компьютер, что совсем нетрудно сделать, так как все указания есть в прилагаемом файле Readme.txt. Вы спросите, пригоден ли ваш «комп» для профессионального, коммерческого веб-дизайна. Уместный вопрос, и ответ на него можно найти в дальнейшем. А пока не станем бежать впереди паровоза, потому что ученическую страничку сделать можно на всяком ПК, где установлена Windows XP, Windows Vista или Windows 2000. Скорее всего, у вас какая-то из этих операционных систем.

Откройте программку Web Page Maker («Веб Пейдж Мейкер»), кликнув пару раз на ярлычок, затерявшийся на рабочем столе. Перед вами выпрыгнет диалоговое окошечко Welcome (добро пожаловать), которое предложит – Create a web page through templates, то есть создайте веб-страничку с помощью шаблона (рис. 1). Как видите, в этой программке есть небольшой, но оригинальный набор шаблонов. Выберем предлагаемую нам опцию: ставьте флажок и жмите ОК. Теперь компьютер предлагает выбрать шаблоны деловые или личные. Остановимся на личных, поскольку для деловых сайтов мы еще не доросли; подберем наиболее милый шаблончик: выделим его щелчком мыши и нажмем ОК.

Рис. 1. Создание веб-странички по шаблону

Допустим вам приглянулся красивый пейзаж или большая фотография с изображением котят. Сохраним ученическую веб-страничку на своем ПК через меню File › Save, придумав для нее название index. Почему именно такое? Потому что именно так обычно называется главная страничка сайта.

Страничка перед вашими глазами имеет какой-то английский текст. Это перечисление достоинств программы Web Page Maker. Этот текст нам совершенно не нужен, поэтому мы заменяем его собственным. Во-первых, разместим на главной страничке (она называется еще домашней, Home [page]) заголовок сайта, его русскоязычное название. Поскольку это ученический ресурс, то и назовем его «Образованные котята». Для этого кликнем дважды левой кнопкой мышки, наведя курсор на буквы заголовка. Откроется окошечко Text Editor – текстовый редактор. В этом окошечке удалите исходную надпись как обычно клавишами Delete или «забой» (Back Space) и сделайте свою: «Образованные котята».

Выделите ее курсором прямо в текстовом редакторе, а потом измените буквам цвет, начертание или даже шрифт по вкусу (см. рис. 2). На вашем компьютере должны быть установлены популярные текстовые редакторы Word и Блокнот или, по крайней мере, один из них. Откройте любой из них и наберите в чистом окошке следующее: «Дорогие друзья! Образованные котята приветствуют вас!» и еще какой-нибудь текст, возможно, даже абракадабру. Теперь дважды кликните мышкой на средний текстовый блок и через редактор осуществите вставку Ctrl + V вашего текста вместо рекламы. Для красоты слова «Дорогие друзья!» отбили Enter’ом и сделали полужирными, выделив их с этой целью курсором и нажав на букву В (bold – полужирное начертание) на панели инструментов Text Editor.

Рис. 2. Работа в текстовом редакторе программы Web Page Maker

Аналогично меняем надписи сбоку на слова: «О сайте», «Фото», «Видео», «Контакты». Это будут рубрики нашего сайта. В завершение из озорства можете вставить где-нибудь сбоку милую картинку. Для этого кликните один раз на значок Image или воспользуйтесь панелью управления, проделав путь Insert › Image (Вставка › Изображение). Найдите на своем ПК оригинальную картинку и нажмите ОК. Вот только картинка эта разместилась как-то неудачно. Но это не проблема: наводим на нее курсор, захватим рисунок левой кнопкой мыши и перетащим в более подходящее на наш взгляд место.

Что получилось у меня, вы можете увидеть, когда подключитесь к Интернету и забьете в строку поиска URL-адрес http://obrazcats.narod.ru. Советую, во что бы то ни стало посетить этот ресурс, поскольку он является электронным приложением к настоящему пособию. Сайт «Образованные котята» содержит массу полезных советов, интересных статей, ученических страничек, галерею скриншотов и видео с изображением основных этапов работы по созданию сайта, а также большую коллекцию расходных материалов, которые вы можете совершенно бесплатно скачать и использовать при создании собственного веб-узла.

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

Глава 1. Веб-дизайн: искусство или ремесло

1.1. Веб-дизайн как ремесло

Является ли искусством веб-дизайн или это всего-навсего ремесло? Вопрос, надо заметить, отнюдь не праздный: от него зависит создание креативной концепции «сайтостроения», которой и будет руководствоваться мастер при разработке очередного проекта. Гений конструирования сайтов Якоб Нильсен полагает, что веб-дизайн – это в большей степени ремесло, поскольку именно техничность обеспечивает удобство пользователя в работе с сайтом. Однако Нильсен допускает, что артистический подход тоже оправдан. Соглашаясь в последнем пункте со своим гуру, спешу заметить, что ни один подход не должен превалировать, в веб-дизайне, справедливо равенство: «техника = искусству».

Очевидно, что живопись существует для того, чтобы главным образом радовать глаз, поэтому ее мы, не мудрствуя лукаво, относим к искусству. Но вот с архитектурой сложнее. Самое распрекрасное здание на свете сооружают не только для того, чтобы украсить город: всякая постройка выполняет чисто утилитарные функции. И тем не менее, архитектуру называют искусством. А современное автомобилестроение? Это Форд имел право гордо заявлять: «Вы можете купить у меня автомобиль любого цвета, при условии, что он будет черным». Сегодня сбыт автопродукции реален лишь при условии, что техническое совершенство «стальных коней» в равной степени дополнено изысками дизайна, причем не сводящегося исключительно к расцветке.

Говоря откровенно, споры о выборе в пользу техники или искусства столь же нелепы, как и спор «физиков и лириков», развернувшийся на рубеже 50-х и 60-х гг. прошлого столетия, по поводу которого Борис Слуцкий отреагировал знаменитыми стихами:

 
Что-то физики в почете,
Что-то лирики в загоне.
Дело не в сухом расчете,
Дело в мировом законе.
 

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

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

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

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

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

В этой связи Якоб Нильсен справедливо замечает, что веб-узел не должен напоминать универмаг на 17 этаже, не отмеченный вывеской, работающий только с 15.00 до 16.00, торгующий одним видом товаров и полный мрачных продавцов. Что это значит? А то, что если вам нужен посещаемый сайт, то нужно:

> обеспечить простоту его поиска;

> сделать на него указатели в Сети;

> предлагать много интересных и полезных вещей для посетителя;

> регулярно обновлять ресурс в соответствии с событиями в жизни страны и мира;

> гарантировать гостям вежливое общение и готовность в любой момент исполнить любую просьбу клиента.

Памятуя о том, что обмен – это основа основ, продолжим наше знакомство с веб-дизайном. Все тот же Якоб Нильсен доказывает, что наилучший сайт можно создать, если следовать подходу HOME-RUN. Здесь мы имеем непереводимую игру слов, поскольку «home-run» для американца – это бейсбольная команда, одерживающая одну победу за другой. А для веб-дизайнера это еще и аббревиатура, в которой закодированы ключевые характеристики отличного сайта. Что это за характеристики?

Прежде чем ответить на этот вопрос, познакомимся с публикой, посещающей Интернет-ресурсы. Ведь понять достоинства веб-узла возможно лишь тогда, когда понятны потребности его посетителей. Перед нами опять чистой воды маркетинг. Если запросы юзера неизвестны дизайнеру, то ничего хорошего из проекта не получится (конечно, иногда может крупно повезти с каким-нибудь решением, но везение – вещь преходящая, всегда полагаться на него не стоило бы). Агентствами маркетинговых исследований в Интернете «Booz-Allen amp; Hamilton» и «Nielsen//NetRatings» была предпринята попытка классифицировать всех посетителей веб-страниц в зависимости от специфики их работы в Сети. Ключевым моментом исследования выступил анализ поведения во время сессии – небольшой по длительности работе в Интернете. В результате удалось выявить следующие типы пользователей.

Торопыги. Короткие сессии (1–2 минуты), просмотр 1–2 сайтов. Скорость работы – 1 страница за 15 секунд. Главная цель состоит в приеме и отправке электронной корреспонденции, знакомство с рекламой не интересует.

Искатели фактов. Сравнительно длительная сессия (около 9 минут), но скорость работы аналогична (15–20 секунд на страничку). Мало интересуются рекламой.

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

Повторные посетители. Сессия длится около 14 минут, причем длительность просмотра одной страницы возрастает до 2 минут. Тратят до 95 % времени на сайты, на которые некогда заходили по меньшей мере 4 раза. Адекватно реагируют на рекламу.

Нецелеустремленные серферы[1]1
  Длительное блуждание по Сети, особенно без определенной цели, называется серфингом, поэтому и юзера такого склада нужно называть серфером (серфингистом)


[Закрыть]. Очень длинная сессия (33 минуты), при низкой скорости просмотра одной страницы (около 2 минут). Неактивно посещают коммерческие сайты, но очень восприимчивы к рекламе.

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

Обычные серферы. Исключительно долгая сессия (70 минут). Обязательно совершается несколько не особенно длительных остановок на знакомых сайтах со скоростью просмотра 1–2 минуты на страничку. Изучение каждой страницы обширное, но не глубокое. Посещаются главным образом сайты массовой информации.

Перечисленные пункты подсказывают нам, как лучше обустроить ресурс, чтобы он показался привлекательным для максимального числа пользователей из числа тех, которые интересны для компании как потенциальные клиенты (в случае с некоммерческим сайтом это могут быть партнеры, спонсоры, читатели и т. д.). Этим целям в полной мере отвечает подход HOME-RUN. Он состоит из двух компонентов – обязательного HOME и продвинутого RUN. Обязательный компонент включает в себя меры по улучшению ресурса, которые остро необходимы, поскольку в противном случае сайт просто не будет работать.

High quality content – высококачественный контент.

Often update – частые обновления.

Minimal download time – минимальное время загрузки.

Easy of use – легкость в использовании.

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

Но уникальные посетители – это не самое главное в жизни дизайнера. Дело в том, что большое число уникальных посетителей отнюдь не гарантирует стойкого интереса к сайту и появления постоянных клиентов, что невыгодно ни для некоммерческих, ни для коммерческих (тем более!) ресурсов. Кстати, когда у вас появится собственный сайт, обратите внимание на колебание читательского интереса после обновлений. Вы увидите, что сначала число уникальных пользователей возрастает в 2–3 раза, но и держится такое их количество лишь 1–2 дня, затем уровень внимания снижается примерно к прежнему уровню, зато стремительно, в десятки раз возрастает число «неуникальных» обращений к сайту.

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

> relevant to user’ s need – соответствие нуждам пользователя;

> unique to the online medium – уникальность интернет-проекта в Сети;

> net– centric corporate culture – веб-ориентированная корпоративная культура.

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

Все, что было названо в этом перечне, в том или ином составе присутствует на современных сайтах. И вряд ли можно говорить о пределе «веб-синтеза». Сегодня каждый веб-сайт – это электронный журнал, который поступает на ваш компьютер через Сеть WWW (World Wide Web, то есть Всемирная Паутина). От веб-мастера требуется довести потенциал управления ресурсом до уровня, при котором навигация становится столь же легкой и приятной, как перелистывание настоящего журнала – интересного и хорошо сверстанного, чего можно добиться, сокращая объем бесполезных мультимедиа и рекламы. И вместе с тем сайт есть инструмент маркетинга, поскольку сама по себе Сеть, как среда, с которой веб-узел жизненно связан, представляет собой совершенно особое поле ведения дел, персонального развития и межличностного взаимодействия.

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

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

Ответим для себя на вопрос, что такое файл. Со школьной скамьи мы знаем, что всякая электронная информация воспринимается машиной как последовательность нуликов и единичек. Например, набранное заглавными буквами название сайта «WWW.ONLYJOLIE.COM», посвященного блистательной американской кинозвезде А. Джоли, в двоичном коде примет вид 01010111 01010111 01010111 00101110 01001111 01001110 01001100 01011001 01001010 01001111 01001100 01001001 01000101 00101110 01000011 01001111 01001101. Поскольку цепочки из одинаковых цифр могли бы легко перепутаться между собой в памяти ПК, им придают вид файла.[2]2
  Строго говоря, буквы любого алфавита, иероглифы, пиктограммы и математические символы представляют собой тоже разновидности кодов, так как информация в незакодированном виде для человека недоступна.


[Закрыть] Файл – это поименованный комплекс информации (нуликов и единичек) на электронном носителе, будь то старая добрая дискета, CD– или DVD-диск, флешка, жесткий диск (винчестер) компьютера, серверные компьютеры во Всемирной Сети.

В зависимости от того, какой род информации содержит файл, он приобретает присущий только ему формат. Вы уже, конечно, знаете, что текстовые файлы носят форматы *.doc («документ Winword») и *.txt (текстовый документ, «документ Блокнот»[3]3
  Такие файлы открываются еще в программах из семейства текстовых редакторов «Мастер» и «Лексикон». Однако в наши дни «Мастер» и «Лексикон» почти не известны компьютерщику.


[Закрыть]). «Хвостик» после имени файла, отделяемый точкой, носит название расширения. Веб-дизайн, будучи синтетическим видом искусства, совмещает в себе:

> фотографии, которые существуют в виде файлов с расширением *.jpg (*.jpeg) или, значительно реже, *.gif (другие форматы графических файлов в Сети не применяются);

> рисунки, графику, живопись, которые существуют в виде файлов с теми же расширениями *.jpg и *.gif;

> динамическую графику, которая существует в виде файлов с расширением *.gif, а также *.html, *.mhtml, *.xhtml и т. д. (файлы типа «а также» – html, mhtml, xhtml и т. д. – не кодируют изображения, но могут придавать динамические эффекты статичным картинкам GIF и JPEG);

> тексты, которые существуют в виде файлов с расширением *.html, *.mhtml, *.xhtml и т. д.;

> а в последнее время – музыку и кино, которые существуют в виде файлов с самыми разными форматами (а значит, и расширениями), но довольно часто с расширением *.wav и *.avi.

Таким образом, сайт представляет собой совокупность связанных между собой по журнальному принципу веб-страничек (отчего он и называется веб-узлом), а каждая из таких страничек является совокупностью скрепленных между собой файлов – графических, звуковых и прочих. Основу, тело странички составляет файл, приспособленный для несения текста и скрепляющий все остальные файлы. В современном Интернете он чаще всего имеет формат HTML или PHP, но может обладать расширением *.mhtml, *.xhtml и т. д. Мы с вами будем учиться созданию наиболее простых и одновременно наиболее широко представленных в Сети страничек с расширением *.html. Осилить конструирование остальных будет несложно самостоятельно после знакомства с html-форматом. Почему? Да потому, что в основу веб-дизайна изначально положен особый язык программирования, который так и называется – HTML (подробнее о нем см. пункты 1.2 и 3.2 настоящего пособия).

Откройте на своем ПК программу Проводник и найдите там нашу первую ученическую страничку index. Посмотрим, какое расширение стоит после названия «index». В Проводнике значится index.wpm. Это расширение, как и многие другие, представляет собой аббревиатуру. В данном случае сокращение выполняется от названия программы Web Page Maker. То есть wpm-файлы предназначены для создания и редактирования в программе Web Page Maker. В нашем списке интернетовских файлов этот формат не упоминался, что правильно. Загрузить на свой сайт wpm-страничку вы пока не сможете. Для этого нужно экспортировать ее в html-формат, что мы и делаем, открыв ее в «родном» конструкторе[4]4
  «Родной» принято называть на сленге компьютерщиков программу, в которой как раз и создавался файл, используемый в текущий момент.


[Закрыть] и выбрав команду Export to HTML в меню File (см. рис. 3). Для экспортируемого html-файла требуется указать путь к папочке, где сверстанная веб-страничка и будет благополучно храниться. Пока на этом остановим разработку нашего проекта и продолжим чтение.

Рис. 3. Экспорт wpm-файла в формат HTML