Разработка и создание сайта "Свадебный салон"

Размещено на http://www.allbest.ru

Министерство образования и науки РФ Уральский государственный колледж имени И.И. Ползунова

Курсовая работа

Разработка и создание сайта «Свадебный салон»

Разработала: Пермякова А.В

Екатеринбург 2010

Содержание

Введение

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

1.1 Определение целей создания сайта

1.2 Определение целевого сегмента потребителей

2. Выбор темы

2.1 Анализ сайтов «аналогов» проекта

2.2 Обоснование типа разрабатываемого Web-узла

3. Создание наброска сайта

3.1 Перечень требований по содержимому и функциям Web-сайта

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

3.3 Создание блок - схемы сайта

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

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

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

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

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

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

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

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

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

7. Вёрстка сайта

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

7.2 Детализация выбранной концепции и разработка окончательного дизайн - макета сайта

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

Заключение

Список используемых источников

Введение

web сайт свадьба разработка

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

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

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

1.1 Определение целей сайта

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

Цели сайта:

* как инструмент распространения информации о компании и её бизнесе.

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

* осуществление удаленной демонстрации товара для его продвижения.

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

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

* увеличить объем продаж, найти новых клиентов вашей компании.

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

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

1.2 Определение целевого сегмента потребителей

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

Сегмент (целевая аудитория): девушки.

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

Портрет:

Географические: Свердловская область.

Демографические:

* возраст: 18-3лет;

* пол: любой;

* семейное положение: любое.

Экономические:

* доход: выше среднего;

* род занятий: любой.

Психографические:

* социальный статус: молодежь (средний класс);

* стиль жизни: любой (свободный, упорядоченный);

* темперамент: любой;

* поведенческие признак: повод для покупки;

2. Выбор темы

2.1 Анализ сайтов «аналогов» проекта

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

Сайты я анализировала по следующей схеме:

1 доменное имя;

2 посещаемость, статистика;

3 корректное отображение сайта в различных браузерах при различных настройках экрана;

4 скорость загрузки сайта;

5 решение навигационной структуры;

6 актуальность информации, удовлетворение запросам целевой аудитории;

7 анализ содержимого и структуры страниц сайта;

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

9 анализ соответствия содержимого страниц заявленной теме, а так же наличие ключевых слов;

10 рекомендации по улучшению дизайна узла.



По данным изображением уже наглядно видно все плюсы и недостатки данного сайта. Более подробно рассмотрим их в анализе сайта:

1 доменное имя: anjelika.ru , не совсем ясно, что это, сайт свадебного салона или личная страничка;

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

3 данный сайт корректно отображается при различных настройках экрана во всех представленных браузерах (Internet Еxplorer, Opera, Mozilla Firefox), в различных браузерах при разных настройках экрана отображение сайта остается неизменным;

4 Время загрузки сайта при скорости 33,6кб\сек - составляет 193 секунд, а время загрузки при скорости 100кб\сек - 14 сек. По скольку модемы с малой скоростью давно в прошлом, то время загрузки вполне оправдывает себя;

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

6 на сайте слишком много ненужно и отвлекающей информации;

7 структура сайта довольно удобна;

8 все рубрики имеют свое название, что облегчает поиск потребителя;

9 содержимое страниц сайта полностью соответствует заявленной теме;

10 дизайн скучный: никаких интересных графических элементов, сайт выдержан в однотонно-сером стиле.

Сайт № 2 (Сайт свадебного салона «Мечта невесты»)

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

1 доменное имя: mechta-nevesty.ru, сразу понятно что сайт о свадебном салоне;

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

3 данный сайт корректно отображается при различных настройках экрана во всех представленных браузерах (Internet explorer, Opera, Mozilla Firefox);

4 хочется отметить, что сайт загружается весьма долго:

- Время загрузки (33,6kbps) - 115.34с.

- Время загрузки (100 KB/s) - 21.77с.

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

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

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

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

9 содержимое страниц сайта полностью соответствует заявленной теме;

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

Сайт№3 (Сайт свадебного салона Ивана).

1 доменное имя - ivanna.ru - не ясно, свадебный салон это, или чья то личная страничка;

2 посещаемость данного сайта:

За день:

* посетители: 45;

* просмотры: 534.

3 данный сайт корректно отображается при различных настройках экрана во всех представленных браузерах (Internet explorer, Opera, Mozilla Firefox);

4 Время загрузки (33,6kbps) - 163.12 с., время загрузки (100 KB/s) - 23.14 с.

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

6 информация обновленная, есть вся информация, в полном объеме полное удовлетворение потребностей потребителей;

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

8 все рубрики и все вкладки имеют свое название, названия соответствуют вкладкам и рубрикам, что облегчает поиски потребителей;

9 содержимое страниц сайта полностью соответствует заявленной теме;

10 в целом дизайн сайта ничем непримечателен, но и не отталкивает потребителя.

Сайт№4 (Сайт свадебного салона «Астория»)



Достаточно интересный дизайн данного web-узла, но есть некоторые недоработки, о которых будет сказано в анализе сайта:

1 доменное имя - astoria.su;

2 посещаемость данного сайта, к сожалению, доступна только с паролем;

3 данный сайт корректно отображается при различных настройках экрана во всех представленных браузерах (Internet explorer, Opera, Mozilla Firefox);

4 Время загрузки (33,6kbps) 66.99 с., время загрузки (100 KB/s) 6.03 с.;

5 удобная навигация, легкий переход от вкладки к вкладке без лишних движений и без перехода на главную страницу;

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

7 структура сайта удобная, но много пустых мест;

8 все рубрики и все вкладки имеют свое название, названия соответствуют вкладкам и рубрикам, что облегчает поиски потребителей;

9 содержимое страниц сайта полностью соответствует заявленной теме;

10 дизайн сайта приятен глазу, выдержан в спокойных цветах.

Сайт№5 (Сайт свадебного салона «Белый Лебедь»).

По данным изображениям видно также недоработку с текстом:

1 доменное имя: bel-leb.ru;

2 посещаемость данного сайта:

За день:

* просмотры:37;

* посетители:10;

3 данный сайт корректно отображается при различных настройках экрана во всех представленных браузерах (Internet explorer, Opera, Mozilla Firefox);

4 провайдер Skynet-online, тарифный план «Драйв», скорость входящего соединения до 12 МБ/С. При данном тарифном плане страницы сайта загружаются со скоростью от 1 до 3 секунд;

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

6 очень много информации, особенно на главной странице, настолько, что разбегаются глаза и не всегда можно уловить суть статей;

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

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

9 содержимое страниц сайта полностью соответствует заявленной теме;

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

2.2 Обоснование типа разрабатываемого Web-узла

Существует много типов web-узлов, которые делятся на: сайты для поддержки традиционного бизнеса и другие.

Сайты для поддержки традиционного бизнеса в свою очередь делятся на:

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

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

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

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

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

6 Электронная коммерция, каталог, интернет-магазин предоставляют возможность продаж через интернет конечному продавцу и потребителю. Подобные сайты могут быть интегрированы со складскими системами предприятия, логистическими цепочками, маркетинговой информационной системой (МИС).

7 Интернет - магазины предоставляют посетителю возможность совершения покупки on-line, формируют дополнительный канал распространения продуктов и услуг компании.

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

9 Корпоративные сайты - «виртуальные офисы» представляют собой интегрированные в интернет информационные и интернет - системы. Виртуальный офис может быть интегрирован с информационными системами, интернет - системами на предприятии и его представительствах и филиалах.

10 Промо-сайт- сайт о конкретной торговой марке или продукте. На таких размещается исчерпывающая информация о бренде и различных RE акциях.

К другим относят:

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

2 Блог - сетевой дневник одного или нескольких авторов, состоящий из записи в обратном хронологическом порядке. С англ. яз блог переводится « WEB-журнал». Сюда попадают все ресурсы, созданные для общения пользователей. Такие ресурсы привлекательны для пользователей возможностью опубликовать свою информацию, стать автором, не задумываясь о технических проблемах. Эти ресурсы демонстрируют большое количество RE блоков, что обеспечивает их существование в финансовом плане.

3 Развлекательный сайт- разновидность информационного сайта, решенный в более агрессивном дизайнерском решении.

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

5 Виртуальная галерея- место демонстрации разных видов исскуства.

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

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

3. Создание наброска сайта

3.1 Перечень требований по содержимому и функциям Web-сайта

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

Требования к содержимому:

Таблица 1 - Раздел требований к содержимому

Наименование содержимого	Описание	Тип содержимого	Формат содержимого
Главная	Меню подкатегорий	Изображение	Jpeg-файл
О салоне	Информация о салоне	Изображение	Jpeg-файл
О салоне 2стр	Информация о салоне	Изображение	Jpeg-файл
Каталог платьев	Флеш-галерея	Флеш	Swf фай
Обувь и аксессуары	Флеш-галерея	Флеш	Swf фай
Прокат платьев	Описание условий плаката	Изображения	Jpeg-файл
Заявка	Заявка на прокат платья	Изображение	Jpeg-файл
Координаты	Координаты, схема проезда	Изображение	Jpeg-файл

Технические требования: мой сайт будет реализован при помощи языка HTML - (от англ. HyperText Markup Language -- «язык разметки гипертекста») - стандартный язык разметки документов в Интернете. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме; и каскадных стилей таблиц CSS - технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML.

Требования к внешнему виду: разрешение - величина, определяющая количество точек (пикселей) на единицу площади. Более высокое разрешение означает более высокий уровень детализации и, соответственно, более высокий уровень качества изображения. Разрешение у всех пользователей будет разное, поэтому я буду ссылаться на среднее - 1024х768.

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

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

1 Группировка элементов.

Я не буду затруднять работу себе и поиск посетителям и просто назову элементы соответственно их тематике:

* О Салоне;

* Каталог Платьев;

* Обувь и аксессуары;

* Прокат платьев;

* Координаты.

2 Количество уровней в каждом разделе:

У меня будет 4 тематических элемента навигации плюс навигация на главную страницу в виде графического изображения.

3 Элементы навигации:

* О Салоне: в данном элементе будет 1 уровня;

* Каталог платьев: 0 уровней;

* Обувь и аксессуары:0 уровней;

* Прокат платьев: 1 уровней;

* Координаты: 0 уровней.

4 Приоритет для каждой группы:

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

- 3 -наиболее важным элементам,

- 2 - группе с меньшим приоритетом,

- 1 с наименьшим приоритетом:

- О салоне ***;

- Каталог платьев ***;

- Обувь и аксессуары ***;

- Прокат Платьев ***;

- Координаты, схема проезда ***.

Значимость этих групп одинакова, поэтому количество звездочек тоже везде одинаковое.

3.3 Создание блок-схемы сайта

Набросок, который я создала для Web-сайта, можно преобразовать непосредственно в карту сайта.

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

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

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

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

Схему размещения контент-зон я составила по следующим принципам:

* в России большинство пользователей Интернета мыслят преимущественно зрительным, визуальным образом (в среднем 60-70%). Мыслят преимущественно ощущениями 20-30%. Меньшинство составляют пользователи, сопоставляющие факты - 10-20%;

* логотип (в моем случае шапка), и название сайта расположены традиционно сверху страниц для того, чтобы посетители сразу видели на какой сайт они зашли;

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

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

* вся подробная информация о том, которая заинтересует посетителя, расположена по центру страницы;

* низ страницы будет занят координатами разработчика.

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

В своем сайте я постараюсь максимально приблизить дизайн к магазинам люкс - уровня.

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

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

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

Как показывают специальные исследования, 80% цвета и света «поглощаются» нервной системой и только 20% -- зрением.

Основным цветом своего сайта (в качестве фона) я выбрала черный цвет. Это цвет символизирует элегантность.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* ссылки;

* цвет фона;

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

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

Style (Стиль)	Example	Font settings
Графические ссылки		width:100%;
		height:55px;
		color:#03C;
		font-size:14px;
		text-align:center;
		text-decoration:none;
		display:block;
Body text	.	font-family: Times New Roman;
		text-align:center; border:none;
		padding:20px;
Text (Заголовок)		position:absolute;
		width:273px;
		height:27px;
		background:url(image/text.png);
		top:125px;
		left:280px;
Background(фон)		Цвет фона:background-color: #E0EDF0;
Image 1		width:450px;
		height:338px;
Image 2		Header: width:780px;
		height:151px;
Image 3		knop1 :width: 157px;
		height: 55px;
Image 4		Knop2 :width: 200px;
		height: 55px;

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

Данную главу можно условно поделить на 2 раздела:

- текстовый,

- графический контенты.

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

- Первое: я взяла только часть информации, так как на сайтах очень много информации.

- Второе: убрала все ссылки, как текстовые, так и цифровые «пометки», так как на моем сайте они не нужны и будут просто текстом, а не ссылками.

- Третье: убрала все подзаголовки, так как у меня нет подразделений.

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

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

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

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

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

7. Вёрстка сайта

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

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

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

Имя файла	Директория	Описание
index.html	/WWW	Стартовая страница сайта
salon.html	/salon	Первая страница раздела
catalog.html	/catalog	Первая страница раздела
Catalog2.html	/ catalog2	Первая страница раздела
procat.html	/procat	Первая страница раздела

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

7.2 Детализация выбранной концепции и разработка окончательного дизайн - макета сайта

Людей встречают по одежде, так и сайт «встречают» по главной странице, поэтому я начинаю делать верстку с главной страницы:



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



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

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

* очень спокойные цвета, не надоедают, но и не вызывают чувство депрессии;

* красиво подобран шрифт, несмотря на сложность, он легко читаем;

* интересно с точки зрения дизайна выполнена главная страница;

* удобно переходить с одной страницы на другую, удобная навигация;

* нет нарушений в композиции, все гармонично;

* весь сайт выполнен в одном стиле, дизайне;

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

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

Заключение

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

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

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

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

Список используемых источников

1. Гарретт Дж. Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия». - Пер. с англ. - СПб.: Символ-Плюс, 2008. - 192с. ил.

2. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. -- СПб: Символ-Плюс, 1999 -- 376 с.: цв. ил.

3. www.artflasher.com

4. www.designformasters.info

5. www.promo-it.ru

6. ru.wikipedia.org

Размещено на Allbest.ru