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

Технические требования: использование HTML,CSS.

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

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

3.2 Создание рабочего наброска сайта

Создание наброска сайта нам необходимо для того, чтобы мы смогли создать дизайн сайта, карту сайта. А также для того, чтобы было удобней работать.

Основные мысли:

1)  История бойцовых (происхождение породы).

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

3)  Статьи с отрицательным характером (статьи 1, 2).

4)  Познавательные статьи (легенда, статья 3).

5)  Контактная информация.

Данные мысли я планирую вынести в заголовки (черновые названия):

1)  История.

2)  Опасные породы.

·  американский стаффордширский терьер;

·  бультерьер;

·  бульмастиф;

·  кавказская овчарка;

·  доберман пинчер.

(К каждой породе будут прилагаться фото и краткая характеристика).

3)  .Мнения.

·  хроника убийств;

·  законопроекты;

·  интервью;

·  заслуживают ли бойцовые собак ненависти людей;

·  бойцовые породы – крик души.

4)  Это интересно:

·  легенда;

·  шарпеи – тоже бойцовые;

·  анализ поведения собак;

·  собачий юмор.

5)  Контактная информация

Рисунок 12 - блок схема сайта

4. Разработка набора макетов страниц

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

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

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

4.1 Определение функциональных зон страниц сайта

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

Правильное использование гиперссылок является важнейшим фактором повышения юзабилити сайта. Известный специалист по юзабилити Якоб Нильсен (www.useit.com) утверждает, что навигация сайта должна в любой момент предоставлять посетителю ответы на три вопроса:

1)  Где я нахожусь?

2)  Где я уже был?

3)  Куда я могу пойти?

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

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

·  логотип компании, который является ссылкой на стартовую страницу, а также краткое описание сферы деятельности;

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

·  поле поиска по сайту.

Классификация элементов навигации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Идет время и меняется дизайн web-страниц, он становится смелее, ярче, интереснее.

1)  Стилизованная и негабаритная графика

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

2)  Эскизный / рисованный дизайн

Рисованный стиль не совсем новая тенденция в веб-дизайне, но мы все чаще замечаем ее проявление. Многие дизайнеры даже нишуются под рисованный стиль, восхищаясь им. Далеко не каждый дизайнер в совершенстве владеет карандашним рисованием. Конечно, не каждая работа заслуживает место в художественном музее, но подобный дизайн передают смысл фантазий и стирают грань между пользователем и ресурсом, тем самым делая его еще более уютным и особенным. Идея: скетч (рисованный стиль) с успехом внедряется в веб-дизайн и в дальнейшем станет его обычной частью.

3)  Заглавная и неоднотонная типографика

Заглавные шрифты являются относительно новыми в веб-дизайне, но они уже более 200 лет используются в средствах массовой информации. Раньше, склоняясь к правилам юзабилити, дизайнеры боялись использовать разновидность шрифтов, размер и все его заглавные буквы. Соответственно, здесь нет места хаосу, должен соблюдатся порядок и правила типографики, но согласитесь, сайт гораздо интересней и внушительней выглядит с правильно подобранными 2-3 заглавными шрифтами. Идея: данная тенденция используется для того, чтобы смело выражать контент и эффективно доносить до пользователя необходимые мысли.

4)  Типографика

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

5)  Одностраничный дизайн

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

6)  Большие изображения

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

7)  Фокусы с перспективой

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

8)  Интерактивный / интуитивный дизайн

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

9)  Модальные окна

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

10)  Минимализм

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

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

Таблица2 - Графические стили текста:

6. Оптимизация контента сайта

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

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

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

·  контент не ранжируется высоко поисковой системой;

·  уменьшается удельный вес страницы за счет большого количества исходящих ссылок;

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

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

Этапы подготовки контента

Вся работа по подготовке контента может быть условно подразделена на этапы:

·  определение целей и задач;

·  подготовка семантического ядра;

·  сбор информации и анализ конкурентов;

·  написание статей и их форматирование для улучшения восприятия;

·  разработка таблиц, иллюстраций;

·  перелинковка материалов между собой с целью улучшения навигации по сайту.

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

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

Правильно подобранное семантическое ядро — это набор ключевых фраз, по которым материал в поисковой системе будет находить потенциальный посетитель. Для этого используются специальные сервисы Яндекса, Гугла и Рамблера, которые показывают статистику частоты запросов определенного словосочетания. При подборе ключевых слов необходимо проводить анализ их конкурентности.

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

7. Верстка

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

На предыдущих этапах Web-сайт уже разделен был на несколько тематических рубрик и распланированы гиперссылки между его частями. Теперь пора задуматься о физической структуре.

Физическая структура подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.

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

Рисунок 18 - Логическая структура сайта

Рисунок 19 - Физическая структура сайта

8. Тестирование сайта

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

Функциональное тестирование программного кода сайта –

·  проверка наличия ошибок в программном коде сайта, исправление ошибок;

·  тестирование usability (эффективность восприятия интерфейсов сайта пользователями) сайта - на данном этапе мы проверяем насколько удобно пользователям работать с сайтом. Это позволяет узнать, будет ли «среднестатистический» пользователь адекватно воспринимать информацию размещенную на Вашем сайте;

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

·  тестирование контента – тщательно проверяем текстовый контент сайта на предмет ошибок (орфографических, стилистических, смысловых и пр.).

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

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

Заключение

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

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

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

Список использованных источников

1.  http://www.intelwebs.ru/dizain-saita.html

2.  http://www.intelwebs.ru/dizain-saita.html

3.  http://www.flenov.info/favorite.php?artid=24

4.  http://psyberia.ru/work/color

5.  http://www.comprog.ru/OtherAboutWebTehnologies/article_3727.htm

6.  http://www.linkz.ru/site-create/proektirovanie_navigatcionnoj_sistemue_sajta.html

7.  http://mikhalkevich.narod.ru/kyrs/kompozicia/ds2.html

8.  http://www.tepka.ru/sitestroy/7.html

9.  http://www.tepka.ru/sitestroy/5.html

10.  http://comvest.net.ru/school/id79.htm

11.  http://comvest.net.ru/school/id79.htm

12.  http://www.seop.ru/regulations.html

13.  http://www.kgau.ru/distance/FPK/structure.html