Разработка и создание сайта "Синьор Пекарь" (стр. 5 из 7)

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

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

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

Мой сайт будет выполнен в теплой гамме.

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

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

Рисунок 14 – Фон сайта

Кнопки панели навигации выполнены желтым цветом, текст красным.

Желтый – олицетворяет ум, влияние доминанта. Он самый гибкий, везде проникает, помогает преодолеть трудности, способствует концентрации внимания.

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

Сочетание красно–желтого выражает импульсивность, т.е. моему посетителю захочется скорее "пробежаться" по всем ссылкам.

Рисунок 15 – Кнопки навигации сайта

Цвет текста – красно коричневый. Красно – коричневый отличается спокойной уверенностью в себе и энтузиазмом, которым так полны мои посетители!

Рисунок 16 – Цвет текста на фоне

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

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

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

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

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

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

Рисунок 17 - Баланс в композиции

Рисунок 18 - Баланс в композиции

2 Контраст – это взаимодействие противоположных элементов композиции, таких как цвет, размер, текстура и т.д. Примеры контраста: большой и маленький, шероховатый и гладкий, толстый и тонкий, черный и белый.

Рисунок 19 - Контраст в композиции

3. Значимость и подчиненность. Этот принцип предполагает выделение, так называемого, центра интереса, на котором предполагается сосредоточить внимание зрителя. Объекты должны находиться в иерархии по значимости и подчиненности. Если все объекты будут иметь одинаковую значимость, то внимание пользователя рассеивается.

Рисунок 20 - Значимость и подчиненность в композиции

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

Рисунок 21 - Направление внимания в композиции

5 Пропорция – это отношение отдельной части ко всему объекту, а также соотношение отдельных частей друг с другом. В данном примере показано "Золотое сечение".

Рисунок 22 - Пропорции в композиции

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

Рисунок 23 - Масштаб в композиции

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

Рисунок 24 - Повторение элементов в композиции

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

Рисунок 25 - Единство в разнообразии в композиции

Я начну с набросков главной и внутренней страниц в монохромном режиме.

Рисунок 26– Главная страница в монохромном режиме

Рисунок 27– Внутренняя страница в монохромном режиме

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

Рисунок 28– Главная страница в цветном варианте

Рисунок 29– Внутренняя страница в цвете

Я определилась с цветами сайта, пора поговорить об идеи решения основных зон страниц сайта.

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

Завершив предварительный этап создания макета, можно приступать к детализации содержания основных контент–зон.

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

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

· текстовые блоки, рисунки и элементы мультимедиа, их относительное расположение на страницах сайта;

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

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

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

Требования к представлению элементов макета страницы:

· все элементы навигации, а также заголовки основных элементов содержимого сопровождаются разборчивыми подписями, удобными для чтения;

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

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

.

После того, как мы определились с тем, какие элементы должен содержать макет, попробуем его собрать.

Рисунок 30– Эскиз главной страницы с решением основных контент – зон

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

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

Рисунок 31– Эскиз внутренней страницы с решением основных контент – зон

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

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