РАЗРАБОТКА И СОЗДАНИЕ САЙТА "СИНЬОР ПЕКАРЬ"

Рисунок 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– Эскиз внутренней страницы с решением основных контент –  зон 

 

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

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

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

 

5. ДЕКОМПОЗИЦИЯ МАКЕТА НА СТРУКТУРНЫЕ  БЛОКИ И МОДУЛИ 

 

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

 

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

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

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

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

 

Рисунок 32– Пример двухколонной модульной  сетки

Рисунок 33 – Двухколонная модульная  сетка внутренней страницы моего  сайта 

 

5.2 Разработка руководства  по стилю

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

·  заголовки и подзаголовки;

·  основной текст;

·  ссылки;

·  форматирование таблиц;

·  цвет фона;

·  размер графических элементов.

 

Таблица 2 – Руководство по стилю  графического и HTML–текста для Web–сайта

Style (Стиль)	Example	Font settings
Headlines (Заголовок)	Приготовление песочного  теста дома	Графический текст. Cambria Bold Курсив, 8 pt, Color# 9f193e
Subheads (Подзаголовок)	Состав:	HTML текст. Arial, size 14 pt, Color# 9f193e
Body text	·  мука – 260 г, ·  сливочное масло – 150 г, ·  1 яичный желток или целое яйцо, ·  сметана – 1 столовая ложка, ·  сахар – 2–3 столовых ложки, ·  ванильный сахар – 1 чайная ложка, ·  щепотка соли, ·  лимонная цедра – 1 чайная ложка (по желанию)	HTML текст. Arial, size 14 pt, Color# 9f193e
Background(фон)		Цвет фона: графический  текст IMG=" fon.jpg"
Image 1		width:235px; height:314px;
Image 2		Header: width:958px; height:320px;
Image 3		width: 314px; height: 209px;
Image 4		width:495px; height:324 px;
Image 5		width:500 px; height:375 px;
Image 6		width:450 px; height:403 px;
Image 7		width:515 px; height:400px;
Image 8		width: 448px; height:336 px;
Image 9		width:410px; height:589 px;
Image 10		width:400 px; height:220 px;
Image 11		width:640px; height:480px;
Image 13		width:448 px;  height:336px;
Image 14		width:478 px;  height:594px;
Image 15		width:314 px;  height:10px;
Image 16		width:314 px;  height:10px;
Image 17		width:160 px;  height:76px;
Image 18		width:160 px;  height:33px;
Image 19		width:448 px;  height:15px;

 

6. ОПТИМИЗАЦИЯ КОНТЕНТА САЙТА

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

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

Исходный текст:

Одна из задач Направления "Медиа–Холдинг" – это продвижение сайтов Системы в Интернет, опыт работы в этой области – 3 года. Мы готовы предложить Структурам и Направлениям Системы только качественные и недорогие услуги в этом вопросе. Сотрудничая с нами, вы можете рассчитывать на увеличение переходов с поисковиков на продвигаемый вами сайт только тех посетителей, кто реально заинтересован в реализации проектов Системы и подключении к ним. Затраты напродвижение сайтов начинают окупать себя уже со второго месяца раскрутки!

Текст после оптимизации:

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

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

Графическая оптимизация  – все изображения подобраны по своей тематике. [3] Если это, например, песочное тесто, то и фотографии соответствующие. 

 

Рисунок 34 – Пример оптимизации  изображения

Все изображения на сайте представлены в цветовой модели RGB, изображения  формата JPEG и PNG.

В зависимости от назначения изображения  у меня вышли следующие эмпирические размеры: большие изображения – 410px × 589px (367 kb), средние изображения  – 448 px × 336 px (91 kb), основное изображение  – 235px ×314px (30 kb),кнопки навигации – 314px × 31 px (11 kb), фоновое изображение – 960 px × 595 px (18 kb).

 

7. ВЕРСТКА САЙТА

7.1 Разработка физической и логической  структуры сайта

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

Таблица 3 – Оформление документированного проекта

Имя файла	Директория	Описание
index.html	/www	Стартовая страница сайта
pesochnoe_testo.html	/pesochnoe_testo	Стартовая страница "Песочное тесто"
biskvitnoe_testo.html	/ biskvitnoe_testo	Стартовая страница раздела "Бисквитное тесто"
drozhzhevoe_testo.html	/ drozhzhevoe_testo	Стартовая страница раздела "Дрожжевое тесто"
sloenoe_testo.html	/ sloenoe_testo	Стартовая страница раздела "Слоеное тесто"
recept_dnya.html	/ recept_dnya	Стартовая страница раздела "Рецепт дня"