Дизайнер web-страниц

Владимир Молочков

НОВЫЙ ТЕРМИН

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

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

Дизайнер, как минимум, должен свободно владеть HTML, JavaScript и CSS. Строго говоря, web-мастер и web-дизайнер - не одно и то же. Эти профессии настолько же различны, насколько созвучны их названия. Web-дизайнер сайт делает, а web-мастер поддерживает. Дизайнер компонует web-страницу, используя фон, количество и качество графических и других элементов оформления. Кроме того, в его обязанности входит создание стилевых образцов (шаблонов) web-документов. Это значит, что помимо общих, необходимых каждому дизайнеру знаний, web-дизайнер должен обладать некоторыми специфическими умениями и навыками. Творческий дизайнер знает и умеет применять весь аппаратный и программный комплекс для создания сайта и размещения его в Сети, а также владеет арсеналом компьютерной графики, понимает основы композиции в дизайне, эстетику работы с текстом и графикой, и много-много другого. Знание программы Adobe Photoshop еще не делает человека web-дизайнером. Необходимо, как минимум, еще и знакомство с теоретическими основами дизайна, умение применять основные правила и законы дизайнерского искусства на практике в современных технологиях и приемах компьютерной графики.

Стандартные элементы дизайна web-страницы

Кнопки

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

Рис. 1. Примеры кнопок для сайта

Баннер

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

Стандартный баннер для сети имеет размер 468х60 пикселей (рис. 2). Баннеры такого размера обычно содержат название, интернет-адрес, логотип компании или иные узнаваемые элементы фирменного стиля.

Рис. 2. Название рисунка

Первые баннеры выполнялись в виде JPG или GIF картинок. Позднее появились SWF (Flash-баннеры) и Java-баннеры. Последние представляют собой обычные Java-апплеты, встраиваемые в HTML-документы. Чтобы такой баннер корректно отображался в браузере пользователя, необходима специальная программная надстройка (plug-in), которая на сегодняшний день входит в состав всех современных программных пакетов для работы в Интернете. К достоинствам Java-баннеров относится их интерактивность, к недостаткам то, что они нередко требуют много времени на загрузку. Практика показывает, что преобладающее количество Java-баннеров разрабатывается на игровую, развлекательную тематику.

Логотип

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

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

ПРИМЕЧАНИЕ

Слово логотип появилось в эпоху ручного типографского набора, когда слова составлялись из отдельных свинцовых букв. Для ускорения набора часто употребляемые слова складывались на общей металлической подложке. Такие слова назывались логотипами. Буквально логотип (logotype) переводится с греческого как "отпечаток слова" (logos слово + typos отпечаток).

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

Контент

Основную часть экрананного web-документа занимает текстовое поле - участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы называют еще "контент" (от английского content - содержание).

Поле контактов

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

Счетчик

В нижней части каждой web-страницы желательно разместить счетчик посещений - небольшой сценарий, вызывающий установленный на сервере CGI-скрипт, который фиксирует каждое открытие документа в браузере пользователей, изменяя значение индикатора счетчика. Благодаря этому web-мастер без труда определит количество посетителей, навестивших его страничку в течение какого-либо времени. Счетчик посещений можно устанавливать либо только на первой странице (если ведется подсчет только хостов главной страницы, вызываемой при обращении к сайту), либо на всех html-документах (для получения подробной статистики о перемещениях посетителей и их активности). Один из возможных вариантов счетчиков посещений показан на рис. 3.

Рис. 3. Один из вариантов счетчика посещений

Распространенные ошибки в web-дизайне

Использование самых новых технологий

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

Медленная загрузка страниц

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

Появление новых окон браузера

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

Размещение большого количества баннеров и счетчиков

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

Редкое обновление контента сайта

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

Грамматические ошибки

Ошибки в правописании вызывают недоверие и к авторам сайта, и к их профессиональной компетентности.

Советы

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

• Оптимизируйте графику и тем самым разгрузите ваш сайт. Старайтесь придерживать "вес" до 50 kb на страницу.

• Не все возможно сделать. В большинстве случаев сайт проектируется на любого пользователя Сети. И только профессионалы знают, как создать сайт, чтобы его можно было посмотреть без проблем на Pentium I с монитором 14 дюймов или на Pentium IV с монитором 21 дюйм. Поэтому, если web-дизайнер говорит, что это невозможно сделать, то заказчику лучше прислушаться к его советам.

• При создании дизайна сайта его стиль идет от тематики. Стиль должен быть единым для всех страниц сайта. Для корпоративных сайтов предпочтительнее классический дизайн, для развлекательных веселый и обязательно для всех сайтов - уникальный.

• Сленгу - нет! С мнением, что "дык" - слово паразит - ничего не значит, но всех радует, автор не согласен. Слова "прога" (программа), "рулез" (очень хорошо), ЧаВо или faq (frequently asked questions - наиболее часто задаваемые вопросы), имхо (imho - in my humble opinion - по моему скромному мнению) и так далее желательно знать, но употреблять их в каждом сайте совсем не обязательно.

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

• Постарайтесь не полениться и продумать следующие методы повышения привлекательности сайта: графические изображения; анимация; цветовая гамма; объект внимания (эротика; юмор; интрига) и т.д.

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

• По закону Мюллера считается, что одновременно глаз человека может воспринимать около 7¦2 однотипных элементов. Поэтому наиболее эффективным будет меню из 5-7 пунктов. Такое количество ссылок в меню позволит пользователю быстро привыкнуть и запомнить меню вашего сайта. В текстовом дизайне, при прочтении, человек одним взлядом охватывает тоже примерно 7 слов. Поэтому редко можно увидеть слоган длиннее 5-7 слов.