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

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

ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ

Федеральное государственное образовательное бюджетное учреждение высшего профессионального образования

«Санкт-Петербургский государственный университет телекоммуникаций им. проф. М.А. Бонч-Бруевича»

Кафедра информационных управляющих систем

КУРСОВОЙ ПРОЕКТ

«Редизайн сайта Санкт-Петербургского зоопарка»

Преподаватель

Радевич С.П.

Санкт-Петербург

2014

• Содержание
• Введение
• 1. Анализ предметной области
• 1.1 Анализ существующего ресурса
• 1.2 Определение целей и типа сайта
• 1.3 Целевая аудитория сайта
• 1.4 Профили пользователей и алгоритмы их взаимодействия с системой
• 1.5 Анализ конкурентов
• 1.5.1 Создание списка сайтов-конкурентов
• 1.5.2 Анализ тройки ресурсов-лидеров
• 1.5.3 Анализ сайтов-конкурентов по критериям
• 1.5.4 Оценка результатов и выводов
• 2. Проектирование ресурсов
• 2.1 Структурирование контента
• 2.2 Проектирование структуры ресурса
• 2.3 Проектирование навигации
• 2.4 Прототипирование
• 2.4.1 Модульная сетка
• 2.4.2 Прототипы типовых страниц
• Заключение
• Список использованных источников

Введение

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

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

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

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

1. Анализ предметной области

Прежде чем проектировать сайт, проанализируем уже существующий ресурс (http://www.spbzoo.ru/). Для этого выберем страницы трех уровней: Главная (Рис.1), Посетителям (Рис.2), Отдельное мероприятие (Рис.3).

Рисунок 1 - Главная страница

Рисунок 2 - Страница «Посетителям»

Рисунок 3 - Страница отдельного мероприятия

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

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

Еще одним важным недочетом можно отметить отсутствие одинаковой и четкой модульной сетки.

Но наиболее важным минусом оказалось неправильно структурированное меню. Ниже приведем таблицу первоначальной структуры сайта (Таблица 1).

Таблица 1 - Структура первоначального ресурса по уровням

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

Главными задачами редизайна становятся: новая структура и дизайн по модульной сетке.

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

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

Цели и задачи ресурса:

1. Создание благоприятного впечатления о зоопарке

2. Привлечение новых посетителей

3. Привлечение новых сотрудников

4. Размещение информации об услугах и их стоимости

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

1.3 Целевая аудитория сайта

Основные группы посетителей сайта:

1. Частные клиенты

2. Сотрудники/Соискатели

3. Партнеры

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

1.4 Профили пользователей и алгоритмы их взаимодействия с системой

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

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

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

Персонаж №1: Частный клиент

ФИО: Иванова Светлана Ивановна

Возраст: 30 лет

Цель: Получить больше информации работе зоопарке перед его посещением со своим ребенком

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

Схема взаимодействия пользователя с ресурсом приведена на рисунке 4.

Рисунок 4 - Сценарий взаимодействия с системой

Персонаж №2: Соискатель/Специалист

ФИО: Иванов Петр Иванович

Возраст: 42 года

Цель: Узнать о вакансиях, записаться на собеседование, оставить резюме.

Этому посетителю сайта важно наличие раздела с предложениями по сотрудничеству и трудоустройству.

Схема взаимодействия пользователя с ресурсом приведена на рисунке 5.

Рисунок 5 - Сценарий взаимодействия с системой

Персонаж №3: Партнер

ФИО: Соколова Надежда Олеговна

Возраст: 49 лет

Цель: Узнать о проектах, в частности, о возможности опеки над животными.

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

Схема взаимодействия пользователя с ресурсом приведена на рисунке 6.

Рисунок 6 - Сценарий взаимодействия с системой

1.5 Анализ конкурентов

Составим список основных конкурентов, проанализировав результаты различных запросов в самых крупных поисковых системах (Таблица 2 и Таблица 3). Конкурентами будем считать только веб-сайты других зоопарков.

Таблица 2 - Список конкурентов

Таблица 3 - Ранжированный список

1.5.2 Анализ тройки ресурсов-лидеров

Выберем три, наиболее часто упоминаемых в нашем списке, сайтов и выделим особенности каждого из них (Таблица 4). Но не станем рассматривать наш собственный ресурс, как конкурента.

Таблица 4 - Особенности главных конкурентов

Рисунок 7 - http://www.moscowzoo.ru/

Рисунок 8 - htp://www.minskzoo.by/

Рисунок 9 - http://tambov-zoo.ru/

1.5.3 Анализ сайтов-конкурентов по критериям

Составим список критериев, подходящих для направленности наших сайтов. Оценим соответствие ресурсов-конкурентов данным критериям по пятибалльной шкале (Таблица 5).

Таблица 5 - Сравнение конкурентов по критериям

1.5.4 Оценка результатов и выводы

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

2. Проектирование ресурса

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

Таблица 6 - Структура ресурса по уровням

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

2.2 Проектирование структуры ресурса

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

Структура проектируемого ресурса представлена на рисунке 10.

Рисунок 10 - Структура сайта

2.3 Проектирование навигации

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

Рисунок 11 - Навигация

2.4 Прототипирование

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

Ширина сайта - 1024 рх,

Ширина сетки - 748 рх,

Кол-во колонок - 4,

Ширина колонки - 178 рх,

Расстояние между колонками - 12 рх.

Рисунок 12 - Модульная сетка

2.4.2 Прототипы типовых страниц

На основании всего вышеизложенного, приступим к созданию прототипов страниц трех уровней. Для этого были выбраны страницы: «Главная», «Посетителям», «Афиша». После, с помощью Adobe Illustrator, были созданы статические прототипы трех уровней (Рисунки 13, 14, 15).

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

Рисунок 13 - Прототип первого уровня

Рисунок 14 - Прототип второго уровня

Рисунок 15 - Прототип третьего уровня

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

Заключение

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

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

Разработанный ресурс удовлетворяет современным тенденциям в области веб-разработки, а именно, теории проектирования опыта взаимодействия.

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

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

2. Алан Купер, Роберт М. Рейманн, Дэвид Кронин «Алан Купер об интерфейсе. Основы проектирования взаимодействия»/Сивол-Плюс, 2009г, 688 стр.

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