Проектирование web-сайта

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

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

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

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

Наиболее распространенными  модульными сетками являются:

1)  Одноколонная сетка

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

2)  Двухколонная сетка

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

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

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

3)  Трехколонная сетка

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

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