Дизайн вэб-сайтов (Типы сайтов, устройство сайта, формат страницы).

Web-дизайн — отрасль Web-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских Web-интерфейсов для сайтов или Web-приложений.

Типы сайтов:

1. Личные страницы - (англ. home pages), по традиции называемые «страницами», хотя многие из них представляют собой полноразмерные сайты. Обычно личная страница становится первой (и чаще всего последней). С точки зрения дизайнера подавляющее большинство этих страниц никакого интереса не представляет.

2. Сайты некоммерческие, принадлежащие всевозможным добровольным объединениям, временным проектам, международным или благотворительным организациям. К этой же категории можно отнести и многочисленные страницы учебных заведений, университетов и научных центров, официальные сайты некоммерческих программных проектов (например, www.lynx.browser.org ), а также организаций вроде ISO (www.iso.ch ) или Консорциума W3 (www.w3.org).

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

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

Устройство сайта:

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

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

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

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

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

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

Как вы наверняка знаете из собственного опыта, если веб-страница превышает по размеру окно броузера, ее содержимое придется промотать влево или вверх с помощью услужливо появляющихся в окне полос прокрутки (scrollbars, — иногда их называют еще «панелями прокрутки» или «движками»). Полосы эти не только нарушают стилистическое единство дизайна, но и представляют собой эргономический нонсенс, мгновенно переводящий страницу из категории произведений искусства в категорию рутинных «объектов интерфейса». Страницы сайтов — это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя (монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением в неё таблицы стилей на языке CSS при разработке веб сайта, что позволяет централизовать в определенном файле все элементы форматирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.

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

 

Принципы успешной навигации.

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

Основы навигации

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

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

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

· линейные - характерно для книг журналов. Предполагает последовательный просмотр страниц.

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

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

Рис. 38. Топология сайтов.

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

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

Рис. 39. Главное меню. Обратите внимание, как выделен раздел,
в котором мы находимся в данный момент.

Вспомогательное меню может состоять уже из достаточно большого числа объектов. Если ссылок много - группируйте их по какому-нибудь значимому признаку. На рисунке 40 показаны разные варианты вспомогательного меню: (1) - вспомогательное меню раздела «О компании». (2) - пример группы ссылок, они не только взяты в рамку, но и еще озаглавлены. (3) - еще одна группа, все ссылки снабжены маркерами, которые облегчают визуальное разделение отдельных объектов. При наведении мыши, ссылка меняет цвет.

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

Рис. 40. Вспомогательные меню (они взяты из разных фрагментов сайта).

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

Рис. 41. Строка с кнопками интерактивных сервисов.

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

Рис. 42. Хлебные крошки показывают, что мы находимся на странице посвященной жидкокристаллическим телевизорам и позволяют быстро перейти на верхние уровни сайта.

На современных системах управления контентом (SMC), например, PHP-Nuke вся информация располагается в базах данных, поэтому при добавления нового раздела, новой страницы по индексам такие ссылки формируются автоматически. В статичных страницах «хлебные крошки» придется создавать вручную.

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: