Файл: Основные понятия и нормативная база.pdf

1.3. Основные требования к дизайну современных веб-ресурсов

Веб-дизайн – это такой вид графического дизайна, который ориентирован на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества.

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

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

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

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

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

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

HTML5 - язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. В HTML5 реализовано множество новых синтаксических особенностей.

Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы [13].

CSS3 (англ. Cascading Style Sheets 3 - каскадные таблицы стилей третьего поколения) - активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое. Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL [13].

С утверждением стандартов стилевых таблиц CSS3 и языка разметки HTML5 появилось новое направление – адаптивный дизайн. Такой web-дизайн называется еще называется отзывчивым.

Адаптивный веб-дизайн (англ. Responsive web design) – дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету. Благодаря адаптивной верстке сайт будет качественно и удобно отображаться на разных устройствах, таких как: персональные компьютеры, ноутбуки, планшеты, смартфоны и других.

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

Основные характеристики отзывчивого дизайна:

1. Шаблон трансформируется под разрешение экрана.

2. Текст на мобильных устройствах легко читается без «zoom in».

3. Нет горизонтальной прокрутки.

«Сердцем» адаптивного веб-дизайна является media query. Media Queries – это то, что позволяет вашим веб-сайтам подключать различные стили CSS, опираясь на текущие значения размеров окна просмотра. Таким образом, можно определять различные стили отображения объектов на экранах разной ширины (смартфонах, планшетах, десктопах). Например, можно указать различную ширину блоков, отступы и так далее. На простоте данного механизма базируется ядро адаптивной верстки.

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

Twitter Bootstrap уже имеет готовые списки стилей CSS, встроенную поддержку JQuery, а также располагает несколькими популярными инструментами JavaScript. В ядро фреймворка Bootstrap версии 3.1 интегрирована поддержка мобильных устройств с шириной окна браузера менее 992 пикселей. Это позволяет шаблону сайта адаптироваться под размер экрана разных устройств, в том числе планшетов компьютеров и мобильных телефонов [16, с.11].

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

1.4. Этапы проектирования и разработки веб-приложения

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

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

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

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

Осознавая важность роли технического задания в создании программного обеспечения, можно выделить его основные пункты, опираясь на ГОСТ 19.201-78 «Техническое задание. Требования к содержанию и оформлению». Данный стандарт устанавливает порядок построения и оформления технического задания на разработку программы или программного изделия для вычислительных машин, комплексов и систем независимо от их назначения и области применения.

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

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

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

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

На следующем этапе, как правило, разрабатывается дизайн веб-сервиса. Данный этап включает в себя 2 параллельных направления деятельности (BackEnd и FrontEnd). Вообще, дизайн проекта разрабатывается дизайнерами и утверждается заказчиком. В дизайн входит создание визуальной составляющей всех элементов проекта.

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

Затем переходят в этапу тестирования. Данный этап является одним из наиболее ответственных, так как проект тестируется на все функции, которые в нем предусмотрены с разными условиями. Тестирование проходит в два этапа: Альфа и Бета. На первом этапе создается список всех необходимых доработок, на втором этапе все еще раз проверяется перед запуском проекта.

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

2. ПРАКТИЧЕСКАЯ ЧАСТЬ

2.1. Постановка задачи

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

Выделим основные цели совершенствования существующего сайта:

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

Основные задачи, которые должен выполнять сайт:

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

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

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

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

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

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

2.2. Разработка макета страниц сайта

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