50378 (Проектирование web-сайта "Бойцовые собаки – кто они?"), страница 4

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

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

Текстовая ссылка как элемент навигации

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

Рисунок 13- Главная страница моего сайта

Рисунок 14- Второстепенная страница моего сайта

4.2 Нахождение идеи пластического решения, определение колорита страниц

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

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

Правила сочетания цветов

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

Не существует правильного сочетания цветов, существует только удачное сочетание цветов.

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

Первый тип – однотонный:

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

Второй тип – гармоничный:

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

• для красного: розовый – фиолетовый и оранжевый – яичный желтый;

• для оранжевого: красный – розовый и яичный желтый – желтый;

• для желтого: оранжевый – яичный желтый и лайм – салатовый;

• для зеленого: лайм – салатовый и цвет морской волны – синий;

• для синего: зеленый – цвет морской волны и сиреневый – фиолетовый;

• для фиолетового: синий – сиреневый и розовый – красный.

Третий тип – игра на контрастах:

Для любителей оригинального и яркого дизайна – игра на контрастах. У каждого цвета на палитре есть свой «антипод»:

• красный – зеленый;

• оранжевый – цвет морской волны;

• яичный желтый – синий;

• желтый – сиреневый;

• лайм – фиолетовый;

• салатовый – розовый.

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

Я создаю сайт о бойцовых собаках – основная черта этих собак, как считают многие люди – это агрессия, злость, сила и мудрость в бою. Основной цвет агрессии – это, конечно, красный (в больших количествах может провоцировать ярость, гнев, кровь). Но данный цвет очень сложно воспринимать, он будет мешать восприятию информации и, возможно, читатель просто покинет данный сайт. «Разбавить» красный я планирую фиолетовым и черным, дабы отразить всю сущность бойцовых. Фиолетовый цвет – это знание, интеллект, эмоциональность. Цвет является смешением красного (огонь, страсть или земля) с синим (вода или небо, интеллект). Фиолетовому цвету присуще большое внутреннее напряжение, даже предполагается некая трансформация. Он отражает такие качества бойцовых как: ум, эмоциональность (их необъяснимые приступы агрессии), некую возвышенность над другими собаками (благодаря силе и уму они всегда готовы к бою, в котором победят). Бежевым цветом я планирую сделать фон – чтобы создать контраст агрессии и способствовать легкому чтению текста.

Таким образом, сайт будет выдержан в трех цветах: красный, фиолетовый и бежевый.

4.3 Разработка композиционного решения страниц сайта

Основные законы композиции: цельность и единство, равновесие, соподчинение.

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

Основные черты закона целостности:

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

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

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

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

Динамическое. Это состояние композиции, при котором сбалансированные между собой элементы производят впечатление ее движения и внутренней динамики.

1. Соподчинение и равноценность элементов. Соподчинение -это выделение центра композиции (доминанты), которому подчиняются все остальные элементы (причем, не просто подчиняются, а усиливают его значимость), т.е в композиции возникает иерархия.

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

• двухуровненный (доминанта и второстепенный [-ые] элементы или доминант и акцент);

• трехуровненный (например: доминант, акцент и второстепенные элементы).

Композиционный центр зависит от:

• своей величины и величины остальных элементов;

• положения на плоскости. Вокруг элемента организуется пустое пространство, а все остальные сближаются. И на главный элемент указывают силовыми линиями второстепенные;

• формы элемента, которая отличается от формы других элементов;

• фактуры элемента, которая отличается от фактуры других элементов;

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

• проработки элементом. Главный элемент более проработан, чем второстепенные;

• освещения элемента.

4.4 Нахождение идеи решения основных зон страниц сайта

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

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

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

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

Макет страницы должен содержать следующие элементы:

1. схему глобальной навигации (элементы навигации, которые содержатся на всех страницах сайта);

2. текстовые блоки, рисунки и элементы мультимедиа (Flash-анимация или видеофайлы), их относительное расположение на страницах сайта;

3. все элементы навигации, а также заголовки основных элементов содержимого;

4. интерактивный дизайн (как пользователи будут работать с элементами на странице);

5. основные компоненты текстовой части.

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

Я выбрала именно такое цветовое решение и размещения контента на странице по следующим причинам:

• главная страница в темных оттенках фиолетового цвета - направляет читателя о мысли чего-то холодного, скрытой агрессии;

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

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

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

5. Декомпозиция макета на структурные блоки и модули

5.1 Разработка модульной сетки на основе утвержденного макета