Разработка структуры сайта

1 Разработка структуры WEB-сайта.

 

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

Разработка структуры – основоопределяющий, после цели, вопрос создания сайта. Дизайн, стилистика, компоновка, программные средства, технологии и проч. разрабатываются и/или выбираются исходя из структуры – можно даже сказать, что они являются структурными элементами сайта. Именно выбор правильной структуры обеспечивает «высокое юзабилити» сайта (удобство пользования) и гарантирует доступ ко всей информации - быстроту и легкость нахождения; адекватность материалов, находящихся в разделах, их тематике.

 

Структурность – многоплановое  понятие, которое применяется как  к информации (контенту), так и к визуальным элементам.

 

Структура информационная.

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

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

Index (Главная страница – т.е. та которая загружается при наборе доменного имени сайта в строке браузера. В подавляющем большинстве сайтов, главная страница содержит колонку News)

About (О нас, О компании, ect.)

News (Новости - периодически дополняемая информация)

Products (Наши услуги, Наши продукты, Наши туры)

Price (Цены, прайс-лист)

Support (Техническая и/или сервисная поддержка, горячая линия и/или e-mail связь)

Search (Поиск – модуль поиска по введенному слову)

 

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

 

Структура элементная.

Сайт – это не только то, что  мы видим, это программный продукт  с разделением содержания и представления.

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

Текст – основное содержание страницы, т.н. контент.

Акцентуированный текст – специальным  образом форматированный текст, чаще всего с наложенным стилем CSS (каскадная таблица стилей), использующийся и для оформления контента, и как элемент интерфейса сайта – меню, разделы, заголовки…

Фон – цвет страницы или ячейки таблицы.

Линки – ссылки гипертекста.

Картинки  – фотографии и графика контента, графические элементы оформления сайта

 

 

2 Структура сайтов (типология веб сайтов)

 

2.1 Линейная структура сайта.

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

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

 
2.2 Линейная структура сайта с альтернативами и вариантами.

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

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

 
2.3 Линейная структура сайта с ответвлениями.

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

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

 
2.4 Древовидная структура сайта.

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

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

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

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

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

 

2.7 Разветвленная структура – это более сложное понятие по сравнению с древовидной. И сравнить эту структуру можно с множеством “деревьев”, которые переплетаются между собой. Примером такой структуры могут быть информационно-развлекательные порталы (Mail.ru например).

Такая структура  очень объемна, и составление  такой структуры может занять много времени. Более наглядно эта  структура будет выглядеть, если ее представить не в виде деревьев, а в виде картины. Сделать это  можно с помощью листа бумаги и цветных карандашей. Также существуют специальные программы – планировщики, например MindManager.

Можно привести пример такой карты, пусть это  будет карта вымышленной студии по созданию сайтов.

Это простейшая карта, но суть должна быть понятна.

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

Если  же информации много, то конечно придется поработать над структурированием.

 

3 ОСНОВНЫЕ ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА

 

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

Все предугадать  невозможно, но на начальном этапе  можно придерживаться следующих правил:

– если разрабатывается  сайт научного или академического содержания, особое внимание следует обратить на то, как сайт работает в Lynx (или в другом неграфическом браузере);

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

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

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

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

3.1 Правила Web-дизайна

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

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

Основные элементы стиля  сайта:

Логотип  
Модульность   
Шрифты  
Цвета

Иллюстративный ряд (приемы обработки  изображений)

 

На данный момент можно определить как типы -

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

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

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