Файл: Создание собственного ресурса: сайта-визитки, корпоративного портала или интернет-магазина.pdf

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

1 ВЫБОР ПРОГРАММНЫХ И АППАРАТНЫХ СРЕДСТВ

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

Первым этапом создания сайта является проработка карты сайта. Это позволяет запланировать все необходимые разделы и продумать пути взаимодействия пользователя с будущим web-ресурсом.

Для построения струкуслуги сайта был использован сервис Coggle. Coggle

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

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

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

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

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

При проектировании прототипов также был задействован онлайн сервис InVision. Он предоставляет возможность анимировать прототипы и макеты страниц для оценки удобства взаимодействия пользователя с сайтом.

После того, как прототипы всех страниц будущего сайта проработаны, наступает время для создания самих макетов. Для нашего сайта был выбран программный пакет Adobe Creative Cloud в силу привычности удобства использования. Все инструменты Adobe Creative Cloud прекрасно взаимодействуют друг с другом, что значительно сокращает время работы. Для создания макетов был использован Adobe Photoshop,как наиболее удобный и популярный инструмент web-дизайнера. А для создания векторной графики и проработки текстовых иконок сайта был использован Adobe Illustrator CS6.

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

Одной из таких программ является редактор Brackets. Этот редактор разработан на HTML, CSS и JS, поэтому является мультиплатформенным и работает на любой системе. Редактор имеет множество различных плагинов и расширений, которые дают возможность полностью настроить его под свои нужды. Так же программа дает возможность тут же просматривать получившийся результат в отдельном окне.

Microsoft FrontPage. Если прислушаться к разработчикам, то FrontPage помогает создавать веб-узлы, обладающие большими возможностями и дает средства управления ими. FrontPage поддерживает Html, Css, Dhtml, Javascript, а так же такие технологии, как ASP, XML, VBScript, XSL. Предоставляет широкие возможности по управлению flash-роликами и изображениями. В последней версии FrontPage борется за чистоту кода, т.к. ранее этот пункт был не самом высоком уровне.

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

Ну и последним в списке рассмотренных редакторов является Adobe Dreamweaver. Это профессиональный инструмент для создания web-сайтов и приложений. Пожалуй, это лучший из визуальных редакторов на данный момент. Основной функционал программы заключается в создании HTML и CSS кода, а также в работе с различными файлами сайта. Визуальный интерфейс Dreamweaver делает работу с этими вещами быстрой и интуитивно понятной. Тут же можно увидеть результат сгенерированного кода, однако отображаемый в программе результат не всегда соответствует действительности, особенно если многие вещи на сайте написаны с помощью javascript и css . Для верстки нашего сайта был выбран редактор Adobe Dreamweaver.

2. ПРОЕКТИРОВАНИЕ

2.1 Основные цепи и задачи

Цель, поставленная в данной курсовой работе, - разработка сайта для страховой компании ЗАО «Доверие».

Дадим краткую характеристику этой компании.

ЗАО «Акционерная страховая компания «Доверие» (лицензия 4358Д от 10 июня 2003 года и 3926Д от 3 сентября 2002 года) было учреждено в 2001 году. С момента образования до отзыва лицензии компания предоставляла широкий спектр страховых услуг физическим и юридическим лицам. Уставной капитал страховой компании по состоянию на 1 января 2005 года составлял 30 000 тыс. рублей.

В соответствии с приказом ЦБ РФ от 7 июля 2005 года № 129 у ЗАО «Акционерная страховая компания «Доверие» была отозвана лицензия.

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

Рисунок 1 - Данные Яндекс метрики по типу устройств

Поставленная в работе цель конкретизируется в следующих задачах:

1. Разработка прототипа. Решение этой задачи позволяет определить структуру сайта, требуемое количество разделов и информационный контент.
2. Определение концепции сайта. Решение этой задачи позволяет сделать выбор стиля оформления и цветовых решений, максимально привлекательных для целевой аудитории.
3. Отрисовка главной страницы, а также всех внутренних страниц ресурса.
4. Проработка требуемой графики, которая будет использоваться при оформлении страниц.
5. Окончательная сборка сайта.

2.2 Разработка прототипа

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

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

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

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

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

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