Виды внутренней структуры

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

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

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

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

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

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

Анализ сайтов-аналогов

Нами были проанализированы несколько аналогов сайта

Сайт «Детский стадион» (рис. 1)

Первый аналог – это сайт Детско-юношеской спортивной школы №19 «Детский стадион» г. Екатеринбург.

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

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

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

Под меню прикреплена иконка – ссылка на сайт «ВКонтакте», нажав на которую мы можем перейти на группу данного центра в социальной сети вконтакте. Но иконка не привлекает особого внимания, увидеть ее можно не сразу.

Особое внимание привлекает темно-синий фон. По бокам контента ассиметрично расположены вставки (картинки), показывающие тематику спорта.

Под баннером располагается приветствие и описание сайта, слоган:

Если вы есть — будьте первыми,
Первыми, кем бы вы ни были.
Если вы есть — будьте первыми.
Первым трудней. И легче!

Еще ниже – отделения по видам спорта в виде ссылок. Расположены они в ряд. Не хватает графического оформления.

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

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

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

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

Сайт Спортивного клуба «Вымпел» (рис.2)

Попадая на сайт, сразу чувствуется тематика спорта. Цвета пастельные, не навязчивые.

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

Ниже расположен анимированный баннер, состоящий из трех слайдов. На первом слайде можно увидеть приветствие. На втором - фотографию Спортивного Комплекса и, связанная с ним, новость. На третьем – информацию о наборе учащихся. Цвет шрифта – синий. Так же, присутствует ссылка «Подробнее», которая при наведении сменяется на оранжевый цвет.

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

Ниже навигации расположены две иконки разных сайтов: «Сайт Администрации» и «Сайт Спорткомитета». Иконки по размеру сравнительно большие и привлекают внимание. Кликнув на одну из них мы переходим на официальные сайты Администрации или Спорткомитета.

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

Можно просмотреть и старые новости, пролистывая страницы.

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

Сайт ДЮСШ г.Черноголовка (рис. 3)

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

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

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

Ниже расположен анимированный баннер. По бокам размещены половинки баскетбольных мячей, на которых прикреплены анимированные стразы, что выглядит несуразно и не к месту. Посередине баннера один за другим сменяются слова, которые объединяются в фразу «Чемпионат России по баскетболу».

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

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

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

Шрифт, используемый на сайте, без засечек, так же удобочитаемый.

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

Сайт ДЮСШ «Дубна» (рис.4)

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

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

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

По бокам ромашки мы наблюдаем пару небольших, анимированных при наведении, планет, которые так же служат кнопками меню.

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

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

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

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

В самом низу, на каждой странице расположена некая поляна с несколькими ромашками, на которой указаны контакты и телефоны.

Сайт МОУ ДОД ДЮСШ (рис. 5)

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

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

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

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

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

Не нашли, что искали? Воспользуйтесь поиском по сайту: