Теоретическая часть



страница1/6
Дата04.05.2018
Размер0.98 Mb.
ТипРуководство
  1   2   3   4   5   6

ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
Тема 1. Веб-дизайн как ремесло
Является ли искусством веб-дизайн или это всего-навсего ремесло? Вопрос, надо заметить, отнюдь не праздный: от него зависит создание креативной концепции «сайтостроения», которой и будет руководствоваться мастер при разработке очередного проекта. Гений конструирования сайтов Якоб Нильсен полагает, что веб-дизайн – это в большей степени ремесло, поскольку именно техничность обеспечивает удобство пользователя в работе с сайтом. Однако Нильсен допускает, что артистический подход тоже оправдан. Соглашаясь в последнем пункте со своим гуру, спешу заметить, что ни один подход не должен превалировать, в веб-дизайне, справедливо равенство: «техника = искусству». Очевидно, что живопись существует для того, чтобы главным образом радовать глаз, поэтому ее мы, не мудрствуя лукаво, относим к искусству. Но вот с архитектурой сложнее. Самое распрекрасное здание на свете сооружают не только для того, чтобы украсить город: всякая постройка выполняет чисто утилитарные функции. И тем не менее, архитектуру называют искусством. А современное автомобилестроение? Это Форд имел право гордо заявлять: «Вы можете купить у меня автомобиль любого цвета, при условии, что он будет черным». Сегодня сбыт автопродукции реален лишь при условии, что техническое совершенство «стальных коней» в равной степени дополнено изысками дизайна, причем не сводящегося исключительно к расцветке.

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

Что-то физики в почете,

Что-то лирики в загоне.

Дело не в сухом расчете,

Дело в мировом законе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нецелеустремленные серферы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 Файл – это поименованный комплекс информации (нуликов и единичек) на электронном носителе, будь то старая добрая дискета, CD– или DVD-диск, флешка, жесткий диск (винчестер) компьютера, серверные компьютеры во Всемирной Сети.

В зависимости от того, какой род информации содержит файл, он приобретает присущий только ему формат. Вы уже, конечно, знаете, что текстовые файлы носят форматы *.doc («документ Winword») и *.txt (текстовый документ, «документ Блокнот»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 и выбрав команду Export to HTML в меню File. Для экспортируемого html-файла требуется указать путь к папочке, где сверстанная веб-страничка и будет благополучно храниться.

Пока на этом остановим разработку нашего проекта и продолжим чтение.
Тема 2. Веб-дизайн как искусство
Задача веб-дизайнера, как мы поняли, состоит в том, чтобы сделать красивый, привлекательный, очень-очень интересный и удобный для посетителя сайт. Веб-дизайн как ремесло отвечает на чисто технический вопрос, КАК сделать красиво. Веб-дизайн как искусство отвечает на эстетический вопрос, ПОЧЕМУ именно таким путем мы добиваемся привлекательности своего ресурса.

Итак, попробуем найти ответ на каверзный вопрос ПОЧЕМУ. Прежде всего, красиво – это когда предельно понятно и максимально удобно для использования. Представьте себе, что вы пришли в музей посмотреть на полотно великого Рембрандта. Но в музее никто и не подумал включить свет, в результате чего картина тонет в темноте. Вы знаете, что полотно прекрасно, но почувствовать эту красоту не можете. Спрашивается, почему? Да потому, что вам неудобно рассматривать произведения живописи в потемках. Точно так же дела обстоят и с сайтами. Даже очень хорошие странички можно испортить, если сделать их неудобными для ознакомления.

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

> важные тексты и картинки должны быть приметны;

> неважные тексты и картинки не должны быть свалены в кучу, они меньше нуждаются в приметности, чем важные, но не меньше – в упорядоченности;

> посетителю должны быть хорошо видны все переходы на другие странички и сайты;

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

> читателю должна быть предельно ясна тема странички.

Теперь назовем правила, которые действуют в отношении комфортности веб-узла, которая предполагает легкость ориентации в пространстве сайта:

> посетителю должны быть хорошо видны и доступны переходы во все разделы сайта, что называется удобной навигацией по сайту;

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

> при пошаговой навигации требуется соблюдать «правило трех шагов», то есть доступ к любому документу, важному для делового человека, должен открываться после трех шагов максимум. Поисковая система:

1) главная страничка вашего сайта;

2) главная страничка раздела;

3) искомый документ;

> неважные разделы меньше нуждаются в приметности, чем важные, но не меньше – в упорядоченности, то есть изначальная структура сайта должна всегда соблюдаться;

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

> родственные по тематике разделы и странички необходимо объединить более тесными связям;

> читателю должна быть предельно ясна тематика сайта.

Впрочем, говорить о целом сайте пока еще рановато. Намотаем сказанное на ус и вернемся к проблеме комфортности отдельной странички. Рассмотрим, как соблюдаются перечисленные правила, на примере нашей собственной ученической странички, для чего откроем вновь файл index.wpm. Столь удачный шаблон в полной мере соответствует высоким требованиям юзабилити. Здесь много свободного места, тексты и картинки не наляпаны друг на дружку, навигация предельно проста и понятна. Любой человек легко перейдет в нужный ему раздел сайта «Образованные котята». И в то же время глаз не натыкается на пустые, незаполненные пятна.

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

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

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

> за минимальное количество кликов мог найти на сайте искомый документ;

> мог найти материалы по смежной тематике «не отходя от кассы»;

> знал о материалах неродственной тематики, но потенциально интересных, зовущих в большое путешествие по ресурсу.

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

> форму поиска – на каждой странице;

> главное меню – на страницах, открывающих какие-либо разделы, после чего оно не повторяется;

> ссылки на главную и карту сайта присутствуют на всех страничках, причем ссылка на главную оформлена, как правило, в виде логотипа ресурса или компании, размещенного в левом верхнем углу странички.

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

1. КОРНЕВАЯ ПАПКА (папка на хостинге, выделенная под ваш веб-узел).

1.1. Главная страничка (часто называется index.html или default.html).

1.2. Контакты (страничка с контактными данными и, иногда, формами для осуществления обратной связи).

1.3. ГРАФИКА (папка, а точнее – субдиректория, обычно называемая images) – сюда сбрасываются графические элементы, общие для всех страничек сайта. Это преимущественно различные рисунки в формате GIF, в особенности общие детали интерфейса страничек и баннеры, а также иконки (в том числе favicon). Обо всем этом мы еще поговорим, когда конкретно остановимся на графике.

1.4. РАЗДЕЛ 1. Такие папки отведены под тематические разделы и повторяют логическую структуру сайта с богатым контентом. Сколько тематических блоков можно выделить в контенте вашего ресурса, столько и папок «Раздел» нужно создать. Внутри каждой папки такого рода целесообразно выделить следующие субдиректории второго порядка:

1.4.1. ТЕКСТОВЫЕ МАТЕРИАЛЫ. Субдиректория содержит только html-странички, содержащие нужный контент.

1.4.2. ГРАФИКА. В субдиректорию загружаются рисунки *.gif и *.jpg, относимые только к отдельным или всем страничкам данной субдиректории. Это схемы, графики, диаграммы, фото, сканированные копии с репродукций и тому подобные материалы, предназначенные для иллюстрирования статей, выложенных на веб-узле. Внутри этой папки бывает уместно выделить следующие субдиректории третьего порядка.

1.4.2.1. Превьюшки – рисунки предварительного просмотра (preview), очень небольшие, кликнув на которые можно получить крупное изображение. Мы непременно научимся делать такие.

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

1.4.2.3. Аватары и т. д.

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

1.4.2.1. Сорта роз (фото, демонстрирующие образцы цветов того или иного сорта).

1.4.2.2. Сорта гладиолусов (то же самое).

1.4.2.3. Сорта гортензий и т. д.

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

1.4.3. АУДИО/ВИДЕО. Не стоит даже пояснять подробно. Здесь хранятся файлы со звуковыми и видеозаписями, если такие нужны. Когда на сайте много аудио и видеоматериалов, то целесообразно разбить эту субдиректорию на две самостоятельные папочки.

1.4.4. КУРСОРЫ. Папка не обязательна. Она применяется в том случае, если для разных страниц сайта используются разные типы курсоров, что облегчает ориентировку в пространстве ресурса и делает его более живым и интересным. (Понятно, что при разработке солидных бизнес-ресурсов такой подход неприемлем.).

1.4.5. DOWNLOAD(S) – загрузка. Папка обычно востребована на подавляющем большинстве ресурсов, поскольку здесь хранятся материалы, предназначенные для скачивания посетителями. Содержимое этой папки должно быть представлено преимущественно (если не сказать более категорично: исключительно!) заархивированными файлами. Дело в том, что скорость скачивания архива ниже, что несомненно оценит посетитель. Сюда сваливаются отчеты, прайсы, рекламные проспекты, электронные книги и прочие полезные для клиента материалы. Иногда сам факт, что все это имеется на сайте, уже настраивает посетителя на благодушный лад, пусть даже гость и не собирается ничего скачивать. Как говорится, дорог не подарок – дорого внимание!

1.5. РАЗДЕЛ 2 (папка, отведенная под материалы тематического раздела 1, обладает той же физической структурой, что и предыдущая папка).

Далее список продолжается по числу разделов. (Увидеть конкретное воплощение данной структуры можно на иллюстрации 5, где автор проследил физические взаимосвязи между компонентами странички с воображаемого сайта «Bikini Girls», предоставляющего юзерам обои на рабочий стол.). Должен сказать, что предложенная схема очень сложна, хотя для логически и физически сложного сайта, а тем более для сайта, созданного в коммерческих целях, она просто необходима, иначе ресурс не сможет полноценно выполнять свои функции. Малоемкие персональные сайты не требуют такой скрупулезности, вот почему их структура обычно сугубо физическая и весьма тривиальная.

1. КОРНЕВАЯ ПАПКА.

1.1. Html-странички, не имеющие собственной субдиректории.

1.2. Images – субдиректория для рисунков (сюда же загружаются немногочисленные аудио– и видеоматериалы, если таковые имеются).

1.3. Downloads – субдиректория для скачиваемых архивов.

Добиться безупречной логической структуры (которая подскажет нам построение структуры физической) позволяет high quality content, высококачественный контент, который вдобавок ко всему хорошо изучен веб-дизайнером. Контент, как вы помните, – это смысловое, текстовое содержимое ресурса. Обратим внимание на то, что податливое содержимое способно обеспечить эффективное управление всем ресурсом.

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

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

Уж если мы заикнулись о «белизне», то следует подумать о таком немаловажном для сенсорики факторе ориентации в пространстве, как цветовая гамма. Цвет – король веб-среды. Если мы полагаемся на зрение в 90 % случаев в реальном мире, то наша зависимость от глаз в мире виртуальном возрастает до 99,99 %. Совокупность цветов, оформляющих странички ресурса, носит название цветовой гаммы. От тщательности подбора цветовой гаммы зависит:

> восприятие сайта в целом (удобный, удачный, смелый, нелепый, неумелый, некрасивый);

> психологическое и физиологическое состояние гостя, включая его настроение;

> читабельность информации;

> форма объектов и видимость мелких деталей.

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

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

Закрывая «цветную» тему, сообщим несколько технических данных. В компьютере применяется несколько моделей цвета. Если вы создаете или обрабатываете формат JPEG, то обязаны в вашей программе для рисования (скорее всего в Фотошопе) проверить модель цвета. Для этого пройдите путь Image › Mode – «Изображение › Режим»: на открывшейся панельке флажок должен стоять напротив букв RGB. Эта модель цвета обеспечивает получение богатой палитры путем смешения трех исходных цветов – Red, Green и Blue, что означает красный, зеленый, синий. Эта модельопирается на аддитивный механизм цветовосприятия, имеющий физиологическую основу (сетчатка глаза имеет клетки, чувствительные только к указанным цветам; богатство красок в окружающем мире мы видим за счет смешения импульсов от этих трех клеток). Рядом с буквами RGB на означенной панельке вы увидите надпись «Индекс цвета» (Index Color). Индексированный цвет – еще одна модель, применимая к рисунку GIF. Чтобы перевести (экспортировать) JPEG в GIF, мы сначала должны изменить модель цвета с RGB на индекс, а как это делать. Гифы должны преобладать в графике сайта, поскольку передача ими цвета наиболее полноценна на всех компьютерах.

Крайне редко используется в сети цветовая модель Grayscale (Ч/Б), которая представляет собой опять же индексированную палитру, вот только значениям цвета в ней придается градация серого (всего 256 степеней). Черно-белый режим необходим для старого фото или имитаций под него.

А еще на той же панельке вы можете заметить упоминание о четырехцветной субтрактивной модели CMYK (от англ. Сyan, Magenta, Yellow, blacK – голубой, пурпурный, желтый, черный), которая создана и используется в полиграфии. Перед выводом на печать графический файл должен быть конвертирован в CMYK, что называется цветоделением. Вам нужно применять цветоделение тогда, когда собираетесь импортировать файл JPEG в CorelDraw или любой другой векторный редактор для дополнительной обработки. После обработки рисунок из CorelDraw экспортируется обратно в формат JPEG с моделью RGB. Экспортировать изображение сразу в гиф (если есть такая нужда) не рекомендуется, лучше это проделать потом в Фотошопе.

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

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

> собственно графические файлы – статичные и анимированные, несущие надписи или только изображения. Эту красоту нужно использовать умеренно, чтобы не отягощать страничку избыточным «весом»;

> обычные заголовки (Headings), которые получаются посредством простого введения кода в html-документ.

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

> фоновые рисунки (Backgrounds), образующие базовый элемент темы странички.

Иногда целесообразно применять вместо фонового рисунка фоновую заливку, что выгоднее, поскольку страничка становится легче и загружается быстрее;

> кнопки (Buttons), являющиеся частью навигации и по способу исполнения представляющие собой гифы;

> графические маркеры (Bullets, они же пульки), а также вообще маркированные и нумерованные списки, о которых мы тоже непременно поговорим;

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

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

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

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

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

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

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

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

Форум – место для общения. Cобеседниками здесь выступают гости ресурса, они ведут между собой перепалку, дают советы и т. д. Форумом в Риме называлась базарная площадь, если кто подзабыл. Для определения слова «базарный» можете воспользоваться словарями Даля или Ожегова. Когда дойдете до конца списка, вообразите себе, какой негативный заряд приобретет ваш сайт благодаря форуму. Разумеется! Коммерческому ресурсу форум необходим столь же мало, как и гостевая книга.8 Поэтому гораздо более полезны для наших целей контактная информация и контактные формы. С их помощью каждый может связаться с владельцем сайта в любой момент, в том числе не покидая сайта. Контактная информация важнее контактной формы.

Конечно, форма облегчает быстрое оформление заказа, но ведь не все в жизни сводится к купи-продайским отношениям! Пребывать на сайтах, где нет адреса электронной почты (email), попросту противно. А что если возник очень важный вопрос, но вы не можете его сразу сформулировать? Или, быть может, нужно задать несколько вопросов, чтобы определиться в своем выборе, а это предполагает отправку нескольких писем. Адрес электронной почты должен присутствовать обязательно, равно как и почтовый адрес (для компаний). А злоупотребление контактными формами при отсутствии полноценной обратной связи гарантирует по большей части поступление невнятных заказов такого рода, как в известном анекдоте: «Мне, плз, ДВД с киной про того чувака, который еще снимался в том кине».

Гипертекст и язык HTML. Ранее читателя уже предупредили, что понадобится освоить азы языка HTML, на котором пишутся веб-странички. Аббревиатура HTML означает в расшифровке Hyper Text Markup Language, то есть язык разметки гипертекста. Сказанное нуждается в пояснениях. Дело в том, что WWW представляет собой не только паутину, но и технологию поддержания информационного потока, в основу которой положена гиперсвязь в виде системы переходов между источниками данных. Такая связь осуществляется за счет гипертекстовых ссылок, или, если называть их короче, гиперссылок. Ссылкой может служить фрагмент текста и рисунок. Причем на вашей html-страничке могут полностью отсутствовать переходы (гиперссылки), однако она все равно остается HTML-документом, поскольку написана на языке HTML, что и обеспечивает переход на нее по ссылке с других страничек сайта либо с поисковика (поисковой системы).

Найдем в Проводнике нашу ученическую страничку index.html и, выделив ее курсором, зададим команду Открыть с помощью… › Интернет-Эксплорер. Интернет-Эксплорер (Internet Explorer), как вам уже известно, представляет собой программу для просмотра веб-страничек. Эта программа определенно установлена на вашем ПК, поскольку она относится к числу стандартных.

Первое, что мы увидим, это непонятный набор символов вместо нашего текста. Так передаются Эксплорером русские буквы, и подобная передача нас, естественно, не устраивает. Тогда выполним первую в нашей жизни работу с HTML языком. Для начала пройдем путь Страница › Кодировка (или Вид › Кодировка). Тогда мы увидим, что наш файл имеет кодировку ISO. Именно она и делает русские шрифты непонятными для компьютера. Выберем другую кодировку – «Кириллица (Windows)». Установив ее, посмотрим лишний раз на ученическую страничку: теперь она в нормальном виде. И мы можем смело пройти путь Страница › Просмотр HTML-кода (или Вид › Просмотр HTML-кода).

Перед нами в программе Блокнот откроется записанная на HTML языке верстка нашей странички. Документ начинается словами, заключенными в какие-то странные кавычки:

‹HTML›‹HEAD›‹meta http-equiv=“content-type" content=“text/html; charset=iso-8859-1"›. Слова в кавычках называются тэгами (тегами), они задают форматирование html-документа. Каждый тэг имеет определенные свойства – атрибуты, обладающие неким значением. В ходе html-программирования мы выбираем для тэгов подходящие атрибуты и задаем последним оптимальное значение.

Первое слово показывает нам, что перед нами действительно html-документ. Второе начинает собой «шапку» (заголовок, англ. head) этого документа, куда включается вся наиболее важная информация о страничке. Что такое content, понятно: это информационное наполнение. Оно имеет вид текста text, внедренного в тело HTML-документа. Буквы ISO во фразе charset=iso-8859-1 подсказывают, что этот атрибут и есть указатель кодировки.

Сейчас мы сменили кодировку на кириллицу, и теперь остается сделать так, чтобы компьютер всегда использовал в отношении этой странички кодировку кириллицы. Поэтому удалите значение атрибута charset – вместо iso-8859-1 напишите windows-1251. Вот вы уже и научились писать на HTML кое-что важное.

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




Поделитесь с Вашими друзьями:
  1   2   3   4   5   6


База данных защищена авторским правом ©vossta.ru 2019
обратиться к администрации

    Главная страница