Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта для страховой компании ЗАО «Доверие»

Содержание:

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

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. Разработка прототипа

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

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

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

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

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

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

Рисунок 2 - Схематичная карта сайта

2.2 Выбор типа макета сайта

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

Все типы можно условно объединить в три группы:

- жёстко фиксированные (Rigid fixed),
- адаптивные резиновые (Adaptable fluid),
- расширяемые эластичные (Expandable elastic) макеты.

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

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

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

2.3 Разработка макета главной страницы

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

Необходимо определиться с внешним видом главной страницы и отталкиваясь от него отрисовать внутренние.

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

2.4 Разработка прототипа и макетов внутренних страниц

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

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

Рисунок 3 - Прототип внутренней страницы

После разработки прототипов приступаем к созданию макетов.

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

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

Далее идет страница с горящими турами. На нее можно попасть из главного меню или при нажатии на кнопку «посмотреть все» в блоке с турами на главной странице. Страница создана с целью показать все выложенные на данный момент предложения. Любой представленный на станице тур дает возможность быстрой связи с менеджером, миную переход на страницу тура. И конечно же, дает возможность просмотра всей дополнительной информации по условиям проживания и питания при нажатии на кнопку «подробнее». Такое расположение кнопки заказа звонка или услуги, довольно часто встречается на русскоязычных сайтах, поэтому является привычной для пользователей. Можно быть уверенным, что потенциальный клиент, пожелав связаться с компанией, сможет это сделать без труда.

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

Фон — это приятная картинка природы.
Расположение статей — вертикальное.
Анонс статей — картинка, заголовок, вводный текст, дата.
Дополнительные фишки — рубрика, общее количество статей,

«хлебные крошки».

На одной странице не более 6 записей, а после них кнопка перехода на следующую страницу.
Расположение меню — вертикальное и горизонтальное.

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

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

3. Модульная сетка

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

Рисунок 4 - Схематичное изображение макета на базе модульной сетки и без нее.

Модульная сетка - это набор направляющих линеек и простых линий шаблона сайта. Структура такой сетки способна оказаться достаточно сложной, детализированной, а может быть простой и общепринятой. При разработке макета данной дипломной работы использовалась система модульных сеток grid 960. Это специальный инструмент, который предоставляет psd шаблон с рассчитанными направляющими на 12, 16 или 24 колонки.

3.1 Реализация

Верстка сайта осуществлялась при помощи Bootstrap. Это CSS/HTML фреймворк для разработки web-сайтов. Иначе говоря, это комплекс инструментов для верстки. Вот некоторые его преимущества:

- - Скорость работы — благодаря множеству готовых элементов вёрстка с бутстрапом занимает значительно меньше времени;
  - Масштабируемость — добавление новых элементов не нарушает общую структуру;
  - Легкая настраиваемость — редактирование стилей производится путём создания новых css-правил, которые исполняются вместо стандартных;
  - Большое количество шаблонов — о шаблонах Bootstrap я напишу далее;
  - Широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений.
  - Огромное сообщество разработчиков.

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

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

Шрифт состоит из глифов - векторных форм каждой буквы или символа. Следовательно размер файла шрифта тесно связан с двумя факторами: числу глифов в шрифте и сложности их векторных контуров. На сайте турфирмы Denima-Tour использован популярный среди web-дизайнеров шрифт Open Sans. Это подключаемый шрифт Google, что позволяет избежать любых возможных ошибок при отображении в различных браузерах всех версий. Open Sans содержит 897 глифов, включая латинские, греческие и кириллические символы и имеет 8 различных начертаний. На рисунке 5 представлен подключенный шрифт.

Рисунок 5 - Подключенный шрифт

3.2 Программная часть

На сайте в большом количестве реализованы различные css-эффекты, использованы подключаемые библиотеки jquery и jquery ui.

jQuery — javascript библиотека. Использование библиотеки делает разработку javascript кода проще и увлекательнее. jQuery UI — это библиотека на основе jQuery, имеющая более 20 плагинов. Среди них есть плагины, осуществляющие различные сценарии (такие как перетаскивание или растягивание элементов), восемь видов виджетов (такие как календарь, диалоговые окна, систему вкладок и.т.д) и анимационные эффекты. Более того, UI содержит несколько тем оформления. С помощью таких тем оформляются виджеты, а также темы содержат набор стандартных иконок (173 иконок). Каждая тема оформления может быть отредактирована на сайте jQuery UI, прямо перед загрузкой.

CSS, соответственно, расшифровывается как Cascading Style Sheets (Каскадные Документы Стилей). CSS помогает оформлять HTML документы. При создания сайта использовалась последняя версия CSS3 - последний стандарт оформления HTML документов, существенно увеличивший возможности предыдущего стандарта CSS2.1.

Благодаря CSS3 возможно:

Создавать элементы со сглаженными углами;

Создавать линейные и сферические градиенты;

Более гибко оформлять фоновую картинку элементов;

-Добавлять к элементам и к тексту элементов тени;

Создавать анимацию и различные эффекты переходов;

Задавать цвета несколькими новыми способами и многое другое.

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

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

При помощи анимации стало возможным делать web-страницы живыми, что придает даже типовым страницам индивидуальность и оставляет след в сознании пользователя. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after. Полный список элементов представлен на рисунке 5.

Рисунок 5 - Список свойств, которые можно анимировать

CSS3-анимация состоит из 2х компонентов: сперва объявляется @keyframes, которое позже требуется для определения свойства animation элемента. Правило @keyframes дает возможность разрабатывать анимацию с использованием ключевых кадров — положений объекта в данный момент времени. На рисунке 6 можно увидеть реализацию @keyframes.

Рисунок 6 - Реализация @keyframes

После объявления @keyframes, мы ссылаемся на него в свойстве animation. Это показано на рисунке 7

Рисунок 7 - Свойство animation

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

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

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

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

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

Медиазапрос состоит из правила @media, которое определяет тип носителя путем установления какой-то проверяемой характеристике носителя в данный момент времени. Вид такого запроса показан на рисунке 8.

Стили указанного медиазапроса, находящиеся с фигурных скобках, применяются тогда, когда ширина области просмотра не превышает 600px. Если увеличивается, браузер игнорирует стили указанного медиазапроса.

Рисунок 8 - Медиазапрос на максимальную ширину экрана 600 px

Чтобы сделать дизайн сайта адаптивным, нужно установить различные

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

Рисунок 9 - Адаптивный дизайн при помощи медиазапроса

ЗАКЛЮЧЕНИЕ

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

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

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

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

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

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

Якоб Нильсен. Веб-дизайн. — [Текст] СПб: Символ-Плюс, 2006, 512с
Иоханнес Иттен. Искусство формы. Мой форкурс в Баухаузе и других школах. - [Текст]М.: Издатель Дмитрий Аронов, 2011, 136с.
Иоханнес Иттен. Искусство цвета. - [Текст] М.: Издатель Дмитрий Аронов, 2015, 96с.
Стивен Круг. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!», 2-е издание - [Текст] СПб: Символ - Плюс, 2008, 224с.
Алан Купер об интерфейсе. Основы проектирования взаимодействия. — Символ-Плюс, 2009, 687с.
Web студия: задачи, функции, перспективы - http://www.ldi.ru/web- studiya-zadachi-funktsii-perspektivy.html
Rambler&Co (Компания). Сетки для адаптивного дизайна. - [Электронный документ] (https://habrahabr.ru/company/rambler-co/blog/261679/), 2015
Данил Фимушкин. Модульная сетка в веб-дизайне. - [Электронный документ] (http://fimushkin.ru/work/modulnaya-setka/), 2015
Кинзябулатов Рамиль. Landing page. Что такое. Из чего состоит. Виды. Процесс работы. - [Электронный документ] (https://habrahabr.ru/post/273917/), 2015
Я люблю ИП (Компания). 7 правил создания красивых интерфейсов - [Электронный документ] (https://habrahabr.ru/company/iloveip/blog/261857/), 2015
Кожинова Ольга. 8 распространённых ошибок в дизайне (и как их избежать) - [Электронный документ] (https://habrahabr.ru/post/260605/), 2015
Seo Design. 11 веб-дизайн трендов на 2016 год - [Электронный документ] (http://seo-design.net/trendy-web/web-design-trends-2016), 2016
Seo Design.Цвета в Web дизайне: колор-тенденции (яркие тона) - [Электронный документ] (http://seo-design.net/trendy-web/bright-colors-in- web-design), 2015
Андрей Тарицын. Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? - [Электронный документ] (https://habrahabr.ru/post/148224/), 2012
Frontender Magazine. Адаптивно-отзывчивый: разбираемся в терминологии. - [Электронный документ] (http://frontender.info/adaptive- vs-responsive-terminology/), 2013
Carrot quest. Капельный маркетинг. Создание цепочек сообщений и продвинутых сценариев продаж. - [Электронный документ] (https://habrahabr.ru/company/carrotquest/blog/299352/), 2016

17.1С-Битрикс (Компания). Конверсионный дизайн: создание онлайн- сервисов, которые искренне полюбят пользователи. - [Электронный документ] (https://habrahabr.ru/company/bitrix/blog/276683/), 2016

Pechkin-mail.ru (Компания). UX для начинающих: практическое руководство. - [Электронный документ] (https://habrahabr.ru/company/pechkin/blog/301290/), 2016
SimbirSoft (Компания). Информационная архитектура в Интернет. - [Электронный документ] (https://habrahabr.ru/company/simbirsoft/blog/301444/), 2016
Айкен (Компания). 16 инструментов для создания прототипов. - [Электронный документ] (https://habrahabr.ru/company/aiken/blog/129653/), 2012
Итан Маркотт. Отзывчивый веб-дизайн. – [Электронный документ] М.: Манн, Иванов и Фербер, 2012
Люк Вроблевски. Сначала мобильные. – [Электронный документ] М.: Манн, Иванов и Фербер, 2012
Аарон Уолтер. Эмоциональный веб-дизайн. - [Электронный документ] М.: Манн, Иванов и Фербер, 2012
Дэн Роэм. Практика визуального мышления. Оригинальный метод решения сложных проблем. - [Электронный документ] М: Манн, Иванов и Фербер, 2014
Алексей Ёжиков. Что такое проектирование сайта и почему его нужно делать: [Электронный документ]. -(https://habrahabr.ru/post/115738/). 2011