Разработка дизайна Web-страницы

Дизайн играет важную роль в привлечении внимания пользователей сети Internet к определенной Web-странице. При разработке дизайна Web-страницы прежде всего нужно учитывать особенности восприятия целевой аудитории. При этом оформление должно соответствовать содержанию Web-страницы.

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

Все Web-страницы одного сервера должны быть оформлены в едином стиле. Это создаст дополнительное представление о фирме и ее товарах.

Дизайн Web-страниц предполагает разработку следующих элементов:

· цвет

· шрифт

· графика

· компоновка Web-страницы

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

Единая цветовая гамма Web-страниц способствует быстрому и полному восприятию содержания. Как правило, лучшая комбинация цветов для чтения - белый фон и черный текст.

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

При выборе шрифта необходимо принимать во внимание следующие рекомендации:

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

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

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

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

Литература

Алтухов Д. Свой сервер в Internet. // Планета Internet. - 1997
Бабушкин М., Коростелев В. Web-мастер - новая профессия. // Мир Internet. - 1997
Бабушкин М., Коростелев В. Как правильно организовать свой Web-сервер. // Мир Internet. - 1997
Гринфельд М., Кенигфест Г. Реклама и Public Relations в сети Internet.// Yes!-1997
Задорожный А. Я другой такой сети не знаю... // Yes!-1997
Имери В. Как сделать бизнес в Internet. - Киев: Комиздат, 1997
Николаев Д. Горячая десятка ошибок Web-мастера. // Мир Internet. - 1997
Преображенский К. Еще один шанс для России. // // Мир Internet. - 1997

Битва за посетителя

webmaster - Основы сайтостроения

Из рубрики: Начинающему Web-мастеру. С чего начать и как создать сайт самому. Основы сайтостроения.

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

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

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

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

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

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

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

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

Появляется новая задача - сделать вашего нового гостя постоянным посетителем, но об этом - в других статьях.

Начинающему Web-мастеру: Структуризация сайта

webmaster - Основы сайтостроения

Из рубрики: Начинающему Web-мастеру. С чего начать и как создать сайт самому. Основы сайтостроения.

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

Структуризация сайта

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

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

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

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

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

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

Где-то на этом этапе эволюции синдром расширения пещер въелся в ДНК. Виртуально такой же процесс происходит и с веб-сайтами.

Большинство обитателей Сети начинают просто с «домашней» страницы. Они ещё немного подучиваются и разрабатывают собственный стиль. Развитие продолжается, рост идет и идет. Гостевые книги и информационные странички собираются прямо на месте и никогда не знаешь, что тут окажется в следующий раз. Ой! Пора уделить время перепланированию сайта.

Хорошо, говорит любой, в этот раз я распланирую и сделаю всё правильно. Знакомые мысли, правда? Ну, перед тем как начать, если оно вам, конечно, нужно, вот небольшое напутствие. Для того что б успешно сделать перепланировку вам нужно иметь довольно уверенную точку зрения насчет общей структуры сайта ещё до того, как вы начнете писать первый открывающий тэг <html>.

Итак, какие же основные типы структуры сайта?

Какие достоинства и недостатки у каждого из них?

Мы уже сделали для себя выводы, что ни пещерный вариант, ни овощное рагу не подойдут окончательно, но какую структуру применить лучше всего?

Простая линейная

O-o-o-o-o-o

Примитивная линейная организация страниц сайта предполагает равномерное продвижение по всей информации. Страница А читается до страницы Б, а потом В… и так по-порядку до Я, или сколько их там…

Незачем отклоняться от последовательности — это как чтение очередного карманного романа. Это методика презентаций типа слайд-шоу, хорошая для последовательного представления информации; идеальна для презентации товара или учебного пособия.

В связи с простотой этой структуры легко добавить визуальные элементы для того, что б пользователь знал, где он сейчас находится: это может быть строка с номерами страниц, где текущая подсвечена. Очень полезно знать, сколько страниц всего, сколько уже прочитано и сколько ещё «листать». Читателей удовлетворяет такая информация.

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

Линейная с альтернативами

o-o o-o
o-o-o-| |-o-| |-o-o-о
o-o o-o

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

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

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

Линейная с вариантами

----- -----
| | | |
o-o-o-o-o-o-o-o-o-o-o

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

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

Линейная с ответвлениями

o o
| |
o-o-o-o-o-o-o-o-o-o-o-o
| |
o o
| |
o o

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

На какую ссылку он бы не нажал, путь до сих пор контролируемый— он всё равно возвращаются на основную тропу к единому завершению.

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

Решетчатая структура

o-o-o-o-o-o
| | | | | |
o-o-o-o-o-o-o-o-o
| | | | | |
o-o-o-o-o-o

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

Плоские деревья

o
/ \
o o
/ \ \
o o o
/ \
o o

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

Широкие деревья

o
|
-------------------
| | | | | | |
o o o o o o o
| | |
------- ---- ---------
| | | | | | | | |
o o o o o o o o o

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

Главный её недостаток— то, что она быстро расширяется до тех пор, пока не становится слишком много вариантов выбора. У страниц может быть очень много продолжений. Широкие деревья способствуют достижению заветной цели — получение нужной информации двумя щелчками мыши от «домашней» страницы.

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