Разработка сайта «Каракольский автолюбитель» и размещение его в сети

Автор работы: Пользователь скрыл имя, 19 Июня 2013 в 20:16, курсовая работа

Описание работы

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

Файлы: 1 файл

отчет.doc

— 6.52 Мб (Скачать файл)

Читать полностью Добавить комментарий

Перекресток

28.03.13 22:32 |  Добавил(а) Administrator |   |   |   

 

Автосервис Перекресток 
техническое обслуживание и ремонт автомобилей 

 

Автосервис "Перекресток" занимается послегарантийным сервисным обслуживанием, ремонтом автомобилей отечественного и иностранного производства, подбором и поставками запчастей для автомобилей.

Читать полностью Добавить комментарий

СТО Братья Парфилькины

28.03.13 22:30 |  Добавил(а) Administrator |   |   | 

Высокотехнологичный кузовной ремонт автомобиля

Автосервис  «Братья Парфилькины» предоставляет  услуги качественного среднего и  крупного кузовного ремонта автомобиля по оптимальным ценам. Мы обеспечиваем проведение работ любого уровня сложности, делаем скидки и предоставляем пожизненную гарантию.

Читать полностью Добавить комментарий

 

III. Автомойки

 

3.1  Названии и логотипы  фирм

3.2 Основная навигация

3.3 Дублирующая навигация

3.4 Контакты

3.5 Форма поиска

3.6 Фотогалереи

3.7 Контент:

Brent

Добавил(а) Administrator |   |   | 

Автомойка Brent 

 

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

Читать полностью Комментарии (1)

Сапар - Ордо

28.03.13 22:33 |  Добавил(а) Administrator |   |   | 

Автомойка Сапар - Ордо

Автомойка Сапар - Ордо — это современный автомоечный комплекс, предоставляющий широчайший спектр услуг по уходу за автомобилем:

Читать полностью Добавить комментарий

Последнее обновление (30.05.13 14:32)

Автомойка Айбек

28.03.13 22:28 |  Добавил(а) Administrator |   |   | 

Автомойка Айбек

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

Читать полностью Добавить комментарий

Последнее обновление (30.05.13 14:27)

Идеал

28.03.13 22:30 |  Добавил(а) Administrator |   |   | 

Автомойка Идеал

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

 

Читать полностью Добавить комментарий

Последнее обновление (30.05.13 14:36)

Жолочу

28.03.13 22:29 |  Добавил(а) Administrator |   |   | 

Автомойка Жолочу

Автомойка Жолочу — это современный автомоечный комплекс, предоставляющий широчайший спектр услуг по уходу за автомобилем:  

 

Читать полностью Добавить комментарий

 

IV. Автозапчасти

 

4.1 Дополнительная навигация “Автозапчасти”

4.2  Названии и логотипы  фирм

4.3 Основная навигация

4.4 Дублирующая навигация

4.5 Контакты

4.6 Форма поиска

4.8 Фотогалереи

4.9 Контент (основное содержание  раздела):

Бишкек

Добавил(а) Administrator |   |   | 

Запасные части и аксессуары

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

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

Читать полностью Добавить комментарий

Ысык-Көл

Добавил(а) Administrator |   |   | 

Запчасти  для иномарок в Караколе

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

В «Ысык-Көл» в широком  ассортименте представлены запчасти для  японских автомобилей (Toyota, Mitsubishi, Mazda, Nissan, Suzuki, Subaru, Honda), американских (Ford, Chevrolet), корейских (Hyundai, KIA, Daewoo), французских, итальянских, немецких, чешских и шведских авто (Renault, Peugeot, Opel, VW, FIAT, Skoda, Volvo и др.).

Читать полностью Добавить комментарий

 

V. Живой диалог

 

5.1 Дополнительная навигация  “Живой диалог”

5.2 Название и логотип   фирмы

5.3 Основная  навигация

5.4 Дублирующая навигация

5.4 Контакты

5.5 Форма поиска

5.6 Контент (основное содержание раздела):

      Подраздел  «Отзывы»

Содержит контентную  область  с формой для гостевой книги.

 

 

1.3 Анализ сайтов конкурентов

 

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

Для поиска вышеуказанных сайтов необходимо создать запрос в нескольких популярных поисковых системах. Для наиболее эффективного ответа на запрос было определено несколько словосочетаний, которые наиболее четко и исчерпывающе характеризуют суть моего поискового запроса. Такими словосочетаниями являются: «автосервисы, автомойки, автозапчасти». Данные запросы производились в поисковых системах «yandex.ru», «google.ru». Для реализации поисковых запросов в иностранных поисковиках (в данном случае «google.com»), использованными словами были

«cars cleaning», «cars service».

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

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

  1. Автоцентры Бишкека, http://avtotsentry.bishkek.mnogonado.kg/
  2. АвтоБаза.kg, http://autobaza.kg/;
  3. Авторынок Кыргызстана, Автосалоны, Автомагазины, Автосервисы, Автозапчасти, http://avtomarket.kg/ ;

 

Рассмотрим сайт Автоцентры Бишкека, http://avtotsentry.bishkek.mnogonado.kg/ (Рисунок 1.1).

 

Рисунок 1.1.

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

На сайте находится flash-анимация, которая не связана с тематикой сайта. Цвет ссылок сливается с основным фоном.

 

 

АвтоБаза.kg, http://autobaza.kg/ (Рисунок 1.2).

 

 

Рисунок 1.2.

Цветовое решение для  данного сайта дастаточно удачное.

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

 

  1. Авторынок Кыргызстана, Автосалоны, Автомагазины, Автосервисы, Автозапчасти, http://avtomarket.kg/ (Рисунок 1.3).

 

 

Рисунок 1.3

 

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

 

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

 

2. Дизайн и юзабилити-тестирование

 

2.1 Структура отдельной страницы

 

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

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





 

 


 


 

 

 


 

 

 

 

1 – название сайта; 2- верхнее меню 3 – модуль слайд шоу 4 – модуль поиска; 5 – основная навигация; 6 – модуль регистрации; 7 – контент; 8 – модуль коментариев

Рисунок 2.1 – Макет главной страницы сайта

 

Страница сайта условно  разбита на три части: «шапку», левую  и правую часть.

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

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

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

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

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

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

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

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

 

2.2 Стилевое и композиционное решения

 

2.2.1 Цветовое решение

 

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

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

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

2.2.2 Характеристики цветов

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

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

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

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

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

Информация о работе Разработка сайта «Каракольский автолюбитель» и размещение его в сети