Опубликовано в журнале «М.A.DE»
№6 за 2002 год;
Введение
Процесс рождения нового сайта – всегда немного таинство. Веб-дизайнер - тот
творец-ремесленник, который демонстрирует людям нечто новое, в духе времени,
способное удовлетворить как нетребовательного пользователя, так и взыскательного
ценителя современных форм компьютерной графики и функциональности. Каждый
сайт имеет свои особенности создания, но всех их объединяет наличие идеи,
её воплощение в дизайне и конечная реализация в готовом сайте.
Немного статистики. Более 600 млн. человек в мире имеют доступ к Интернету.
Сейчас в Сети насчитывается около 10 млрд. страниц. Количество серверов перевалило
за 35 млн. У нас в Уанете наблюдается ситуация непрерывного увеличения количества
сайтов. Ежедневно в одном из старейших отечественных каталогов PING регистрируется
в среднем более 30 новых сайтов. Возрастание числа сайтов связано с ростом
заинтересованности бизнес-структур и частных лиц в освоении новой информационной
среды, коим есть Интернет. Пользователи изучают и берут на вооружение его
возможности по улучшению информированности, увеличению уровня и качества жизни,
продвижения новых идей, товаров, услуг и жизненно необходимой деятельности
- коммерческой, рекламной и т.д. В целом, Интернет формирует новые потребности,
одной из которых есть желание и потребность иметь свой сайт.
Концептуальные аспекты
Любой сайт начинается с идеи. Мы бы выделили два полюса в мире идей.
Один связан с оригинальностью и новаторством. Он соответствует креативному
типу мышления создателя. Сайт, выполненный на основании свежей идеи, не имеет
конкурентов и может открыть новое направление в развитии Интернета. Так было
в своё время с каталогами, поисковыми машинами, корпоративными сайтами, Интернет-аукционами,
порталами, сайтами Интернет-сообществ, и более сложными коммерческими системами
B2B, B2C и пр.
Другой полюс отражает традиционно-консервативные подходы и соответствует
имитационному типу мышления. Например, корпоративные сайты – визитки, построенные
по образу и подобию миллионов своих собратьев и состоящий из четырёх пунктов
меню - о предприятии, наша продукция, наши партнёры, контактная информация,
- вряд ли будут позитивно оценены нынешними пользователями. Они предпочитают
изюминку, индивидуальность и уникальность ресурсов. Именно поэтому мы рекомендуем
призадуматься управленцам и специалистам маркетинговых и PR служб предприятий
о судьбе своих посредственных сайтов и призываем прекратить плодить сиамских
близнецов. Нужно помнить, что конкурентное преимущество любой корпорации находится
в сознании тех, кто генерирует новые идеи, в том числе и для сайтов.
Между двумя вышеупомянутыми полюсами располагается многообразие идей и подходов,
которые могут быть результатом объединения оригинальности и традиционности,
новаторства и консерватизма. Преимущественно все наиболее удачные сайты Уанета
появились на стыке традиции и инновации.
Кроме идеи, определяющей является цель, для которых создаётся сайт.
При этом, часто цель устанавливается раньше, чем какая-либо стоящая идея приходит
в голову создателям, поскольку среди многообразия заказчиков и уникальности
их требований всё же можно выделить четыре главных цели, достижение которых
преследуется при создании сайта:
1) информационная – насытить пользователя крайне необходимой,
а иногда избыточной информацией по заданной теме, тематическому направлению,
или просто обо всём или ни о чём;
2) презентационная – показать себя, корпорацию, товар в выгодном
свете, произвести позитивное впечатление, создать требуемый образ (имидж!),
в общем, пустить пыль в глаза;
3) коммерческая – получить доход (основной или дополнительный)
от проведения коммерческих операций и сделок в Сети при помощи создания системы
заказов или электронных магазинов;
4) гибридная (информационно-презентационно-коммерческая) – соотнести
несоотносимое, как-то ценную и бесполезную информацию с фотографиями «первых
лиц» с сомнительными коллажами и flash-роликами, и, кроме того, постараться
ещё заработать на этом.
После определения целей формулируются задачи, которые находят своё отображение
в утверждённом техническом задании (ТЗ). Грамотно составленное ТЗ (в соответствии
с требования ГОСТа 34.602-89 или ISO 9001) – это, по большому счёту, большая
редкость. Именно написание подобного ТЗ свидетельствует о профессиональном
подходе веб-мэйкера.
Для достижения поставленных целей и задач нужно правильно подобрать средства.
К ним относятся стиль и техника исполнения, необходимые инструменты -
программные продукты, и прочее. Стиль в веб-дизайне – вещь тонкая и практически
неосязаемая. Но, несмотря на сложность его определения, можно точно установить
перечень его элементов. Это - логотип, цвета, шрифты, модульные сетки, графический
ряд - техника исполнения графической составляющей и технология ее реализации
(например flash). До сих пор в среде веб-дизайнеров идёт спор о том жёстко
определять или не определять, регламентировать или не регламентировать стили,
о возможности, например, микширования элементов гранжа (рис.1),
органика или hi-tech (рис.2),
(рис.3).
Так как одни просто творят, а другие пытаются это классифицировать и придумывать
ему названия. По нашему мнению, стиль в веб-дизайне - это всегда форма реализации
доминантных качеств автора в заданном направлении творческой импровизации,
соотносимой с духом времени (и, конечно же, корректировка заказчика).
Техника исполнения сайтов прямо зависит от идеи, цели, задач, стиля, а также
от профессиональных средств, которыми владеет веб-дизайнер. Так, если сайт
задумывается как информационный, то, соответственно, техника его исполнения
будет выдержана в рамках информационного стиля, т.е. с минимальным использованием
графики. Сайты, создаваемые для того, что бы поражать и завораживать (презентационные)
закономерно должны содержать динамическую графику – macromedia flash, shockwave,
svg-графику (только начинает набирать популярность), анимированные gif и dhtml,
т.д. Коммерческие проекты должны быть максимально удобными для пользователя,
ведь их задача предоставить необходимую как текстовую, так и визуальную (а,
возможно, и аудио) информацию о товарах, продуктах или услугах. Поэтому для
каждого отдельного коммерческого сайта желательно оптимальное соотношение
текста и графики, с одной стороны, не перегружающее пользователя, а с другой
стороны, способное максимально удовлетворить его любопытство и подтолкнуть
к заключению сделки.
Что касается использования программных продуктов, то веб-дизайнер сам для
себя определяет, какими инструментами он будет пользоваться для создания дизайна,
это может быть и программы 3D-графики и векторные редакторы, конечная цель
– создание нужного образа. В общем случае, без нюансов, в джентенльменский
набор профессионального веб-дизайнера входят: графический редактор, средство
для «нарезки» и оптимизации графики, а также HTML-редактор для сборки шаблонов
для сайта. Примером может служить такая «связка» Adobe Photoshop - Adobe ImageReady
- Macromedia Dreamweaver, или Adobe Photoshop - Macromedia Fireworks – Home
Site, а возможно Corel Draw/Adobe Illustrator/XaraX - Macromedia Fireworks
- BBEdit. Безусловно при создании сайта используется еще множество других
программных средств по управлению проектом и созданию программной части сайта,
но это отдельный разговор.
Реализация идеи, достижение цели и эффективное использование средств воплощается
в готовом сайте – программной, многофункциональной, интернеториентированной
системе, которая соответствует ожиданиям заказчика и удовлетворяет потребности
пользователя. На сегодняшний день непременной составляющей любого серьезного
сайта является наличие CMS – content managment system, которая позволяет управлять
контентом (текстом, графической информацией, html-шаблонами дизайна, функциональностью).
Это значительно снижает трудозатраты на обслуживание сайта, повышает эффективность
его обновления и функционирования. Многие студии разрабатывают свои системы
управления конвентом. На нашем рынке эти системы разрабатываются с использованием
таких свободных серверных языков программирования как PHP/Perl и баз данных
MySQL/PostgreSQL. Это обусловлено тем, что на Украине преимущественно на хостинг-серверах
установлен UNIX-системы, в отличие от „запада”, где коммерческие решения базируются
на платформе Microsoft (серверные языки ASP/ ColdFusion, базы данных MS SQL/Oracle).
Учитывая различия в требованиях, выдвигаемых к контенту различных сайтов,
на рынке нно устанок то решения на платформе и й части предлагаются различные
виды CMS от простых с незамысловатыми функциями заливки текста и графики до
сложных систем документооборота крупных компаний в интернет- и интранет-сетях.
После установки, тестирования и исправления „багов”, следует запуск сайта
и передача его заказчику. И последними штрихами, которые призваны обеспечить
успех сайта является проведение акций по его продвижению и «раскрутке» уже
непосредственно в Сети. На этом заканчивается родовой период и начинается
самостоятельная жизнь сайта. От того насколько ответственно, профессионально
подойдёт веб-мэйкер к начальному этапу создания сайта без преувеличения зависит
будущее последнего. Поэтому мы более подробно остановимся на некоторых прикладных
аспектах сайтостроительста.
Прикладные аспекты
Нами приведены три примера-истории создания сайтов, первый из которых отражает
аспект свободного творчества (мы сами были и заказчиком и подрядчиком ресурса),
второй – аспект незначительного вмешательства клиента в творческий процесс,
когда он только устанавливал общие требования к выполнению проекта, и третий
отображает систему разработки сайта крупного клиента жёстко очерченную корпоративным
стилем.
История первая
Идея создания проекта «Студенческий
центр» возникла как результат преподавательских изысканий одного из авторов
статьи (рис.4). Это
была попытка гуманизации процесса обучения курса информационных технологий
в одном из ВУЗов. Задумка была следующая – нужно создать ресурс по типу интернет-сообществ,
который от начала и до конца будет творением рук студентов, созвучный студенческой
жизни, её успехам и проблемам. Так, в 2000 году появилась первая версия сайта
– с кое-каким, а скорее никаким дизайном, неплохим контентом, с никакими возможностями
обновления и, главное, с хорошей командой ребят-энтузиастов. К сожаленью,
технико-технологическая сторона проекта в тот момент желала много лучшего.
В средине 2001 года нами было принято решение создать новый сайт «Студенческого
центра» с ярким дизайном, с продвинутой системой обновления, с качественным
юзабилити, с интересным и оригинальным наполнением. Работа началась с разработки
логотипа. Он стал визуальным отражением слогана сайта – «в центре студенческой
жизни!». Центральной частью логотипа стало разноцветное, незамкнутое изображение
цели с вписанной латинской буквой S и C. Все остальные элементы дизайна выполнены
в стиле логотипа. Это преимущественно яркие, округлые изображения, в таком
же стиле созданы пиктограммы для разделов сайта, а также отдельных функциональных
блоков. Все пиктограммы выполнены в технике пиксельной графики, что делает
их максимально выразительными и „лёгкими” для загрузки. Для эффективного функционирования
сайта как информационного интернет-сообщества мы выбрали трёхколоночную модульную
сетку, которая позволяет максимально упростить навигацию по сайту, улучшить
восприятие и размещение информации. В целом дизайн сайта, по нашему мнению,
создаёт оптимистичное настроение, созвучное теме беззаботной студенческой
жизни. Кроме яркого дизайна, сайт обладает многофункциональной системой управления
контентом, которая предоставляет возможность публикации и редактирования материалов,
создания виртуальной среды пользователя, администрирования доступа, выполнения
функций поиска, подписки, комментирования статей, участия в дискуссиях на
форуме и др.
Наши впечатления от работы над этим проектом можно определить
как очень хорошее, поскольку в своём лице мы совмещали как заказчиков, так
и разработчиков, поэтому свобода творчества ничем не ограничивалась, вернее
ограничивалась особенностями самой идеи. Сроки выполнения сайта – кратчайшие.
Но, не смотря на все положительные моменты, как-то яркий дизайн, высокая функциональность,
возможность обновления, нужно отметить, что самым слабым звеном оказался человеческий
фактор. А именно, когда один из создателей сайта перешёл на другую работу,
начались проблемы организационного порядка, что и стало причиной упадка ресурса.
Сейчас проект находится в замороженном состоянии.
Наша главная ошибка при создании «Студенческого центра»
заключалась в том, что не была обеспечена преемственность организационной
структуры сообщества или его самоорганизация.
Рекомендации создателям или владельцам подобных
сайтов – не повторите нашей ошибки.
История вторая
Сайт Черкасского государственного
технологического университета является примером создания корпоративного
сайта, который выполняет информационно-презентационные цели. Заказчиком был
предоставлен логотип и примерная корпоративная цветовая гамма. При создании
сайта мы учитывали специфику образовательной деятельности университета, предполагающей
подготовку специалистов, которые владеют современными технологиями. Поэтому
естественным было использование в дизайне элементов технологического стиля
– векторного стилизированого изображения главного корпуса, чертёжной графики,
стрелок, пиксельных сеток, инструментов и т.д. Информация организована при
помощи трёхколоночной модульной сетки. Для улучшения навигации по сайту используются
несколько элементов, а именно главное меню слева, меню разделов справа, навигационная
строка над текстом, а также карта сайта. Для управления контентом разработана
CMS. В целом, при условии наполнения ресурса информацией он может стать вполне
добротным корпоративным сайтом.
При работе над сайтом мы столкнулись с проблемой сбора
информации, поскольку в такой крупной организации сложно осуществлять координацию
по достижению поставленной цели - созданию корпоративного интернет-ресурса.
Наша рекомендация: в начале реализации проекта целесообразно
создать проектно-ориентированное подразделение в рамках организационной структуры
заказчика и документально закрепить функции и ответственность исполнителей
- его представителей.
История третья
Корпоративный сайт Национальной
акционерной страховой компании «Оранта» изначально задумывался как информационно-презентационный.
Соответственно, была выбрана трёхколоночная модульная сетка для первой страницы
и двухколоночная модульная сетка для последующих страниц ресурса. Предусмотрена
система управления контентом. Первоначально предполагалось, что сайт будет
поддерживаться на трёх языках – украинском, русском и английском. Сайт выполнен
в едином корпоративном стиле. Разработку корпоративного стиля осуществил Bates
Ukraine. При создании визуальных образов мы отталкивались от стиля логотипа,
поэтому все изображения на сайте изначально нарисованы в векторной форме.
К сожалению, в Bates Ukraine при создании корпоративного стиля НАСК «Оранта»
не предусмотрели интерпретацию корпоративных цветов в RGB-палитре (палитра
была предоставлена только в Pantone), что значительно замедлило выполнение
работ по сайту. Наша палитра не была воспринята заказчиком, поэтому мы обратились
к нему с просьбой установить соответствующие цвета. Только после второй итерации
Bates Ukraine предоставил приемлемые цвета. В процессе создания сайта заказчик
произвёл пересмотр целей и задач. Теперь предполагается, что сайт должен
стать презентационно-информационным (рис.6).
Не смотря на то, что вся документация по созданию сайта была оформлена надлежащим
образом и у заказчика есть менеджер, который занимается данным проектом, но
этого явно недостаточно для эффективной реализации задуманного.
В целом, такая ситуация достаточно характерна для создания
сайтов крупных клиентов. Отношения с крупным клиентом сложно построить на
равных. Он всегда и однозначно довлеет над подрядчиком. Но тут подрядчику
нужно выбирать - либо выполнять крупный заказ, либо оставаться при своих
интересах. Учитывая небольшую ёмкость рынка веб-дизайна на Украине, заказчика
терять никому не хочется. Возможно со временем культура как заказчиков, так
и подрядчиков существенно повысится, что положительно повлияет на взаимоотношения
между ними.
Наши рекомендации: решение подобных проблем выходит
за рамки веб-дизайна и находится в сфере управления и права. Повышайте уровень
собственной компетентности в этих сферах и тогда вы сможете найти верное решение
(но это тема другой публикации).
Некоторые практические
рекомендации
1) При составлении договора на создание сайта введите дополнительные
пункты, оговаривающие ответственность заказчика (его представителей) за несоблюдение
договорных обязательств, например, несвоевременного предоставления материалов,
оттягивание сроков приёмки отдельных этапов и сайта в целом, переделке авторских
шаблонов и т.д.
2) На начальном этапе обязательным является формирование технического
задания на создание сайта, которое предусматривает все технические особенности
реализации проекта, этапы и сроки выполнения работ.
3) Если в процессе работы над сайтом заказчик или его представитель
жаждет внести некоторые дополнительные функции, разделы или виды работ, непредусмотренные
договором и ТЗ – веб-мэйкеры имеют право на заключение дополнительного договора
и увеличения оплаты;
4) В начале работы заказчик обязан предоставить элементы корпоративного
стиля – логотип, корпоративную цветовую гамму, фотографии и прочие графические
материалы, в первую очередь для того, что бы подстраховать себя в дальнейшем
и ускорить выполнение работ;
5) Учитывая длительность раскачки заказчика рекомендуем требовать
предоставления всех информационных материалов для сайта с момента заключения
договора;
6) Оплату любого проекта целесообразно производить поэтапно
или, по крайней мере, должен быть предусмотрен авансовый платёж;
7) Количество вариантов дизайна для сайта не должно превышать
двух-трех, поскольку при наличии большего числа вариантов заказчику сложнее
сделать выбор (тем более, если несколько человек принимает решение), т.е.
он может растеряться и отложить принятие решения по сайту;
8) Наиболее важной частью создания сайта является взаимодействие
между веб-мэйкерами (дизайн-студией) и заказчиком. Как правило, качество этих
отношений определяет и качество новых сайтов. В случае, если отношения между
дизайн-студией и заказчиком не складываются, то и любая удачная идея в самом
лучшем исполнении превращается в конечном счете в нечто весьма неприглядное.
При этом не обязательно конфликтовать с клиентом. Достаточно будет того, что
он самостоятельно, без ведома веб-дизайнеров поменяет шаблоны сайта. Ярким
примером подобного может служить сайт газеты
«Антенна» созданный еще в далеком 1999 году. Мы предлагаем сравнить дизайн
на действующем сайте с авторской версией - http://www.nightriver.com.ua/works/works/antenna/;
9) Каждая из сторон должна выполнять возложенный на неё функции
и не вмешиваться не в свою сфер полномочий и компетенции, т.е. специализироваться
на выполнении определённых видов работ. Так, заказчик должен обеспечить предоставление
материалов сайта, контроль выполнения работ и приёмку готового сайта, а веб-мэйкер
обязан обеспечить творческую и техническую сторону реализации проекта.
В заключении, хотим пожелать всем участникам процесса создания сайтов терпения,
взаимоуважения и оптимизма.
Вставка по пиксельной графике
Пиксельная графика (не сглаженная) появилась еще на заре компьютерной техники
– в компьютерных играх. Изобразительные средства компьютера тогда были скудными,
но хотелось сделать красиво и что б работало быстро. В дальнейшем она нашла
свое развитие в иконках графических интерфейсов программ и ОС. Сейчас эта
тенденция пиксельной графики распространилась и в Сети, и все по тем же причинам,
маленький размер способствует быстрой загрузке и, практически, на любом мониторе
она будет выглядеть более-менее пристойно, так как использует малое количество
цветов. В этой технике выполнены и иллюстрации к проекту «Студенческий центр».
Особенность создания ее состоит в том, что бы нарисовать плавный (насколько
этого позволяет пиксельная графика) контур объекта контрастным цветом, и затем
в середине объекта раскрасить его так, что бы придать наибольшей реалистичности.
