Разработка и прототипирование веб-сайтов и интерфейсов онлайн

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ  
РОССИИ
 СКОИ
  ФЕДЕРАЦИИ 
 
 
 
 
 
 
И.А. Булгакова  
 
 
 
 
РАЗРАБОТКА И ПРОТОТИПИРОВАНИЕ  
ВЕБ-САЙТОВ И ИНТЕРФЕЙСОВ  
ОНЛАЙН 
 
 
Учебное пособие для вузов 
 
 
Рекомендовано 
Учебно-методическим советом по высшему образованию 
в качестве учебного пособия для студентов, 
обучающихся по направлению подготовки 
 «Информационные системы и технологии»  
 
 
 
Москва  
Издательско-торговая корпорация «Дашков и К°» 
2024 
 
1 
 

УДК 004.386./387 
ББК 24.53 
Б90 
Автор:  
Булгакова Ирина Александровна – кандидат политических наук, доцент 
кафедры компьютерного дизаи на Института перспективных технологии  и индустриального программирования РТУ МИРЭА, ORCID: 0009-0005-6305-0536, 
SPIN-код автора: 1546-4659 
Рецензенты: 
Никодимов Игорь Юрьевич – проректор по учебнои
  и научнои
  работе 
РГСАИ, доктор юридических наук, кандидат технических наук, доцент; 
Ширшков Игорь Александрович – кандидат искусствоведения, профессор кафедры дизаи
 на РГСАИ; 
Плешаков Денис Викторович – руководитель направления «Дизаи
 нсистемы», центр компетенции
  UI/UX, Ростелеком ИТ. 
 
Булгакова, Ирина Александровна. 
Б90  
Разработка и прототипирование веб-саи
 тов и интер- 
феи
 сов онлаи
 н : учебное пособие для вузов / И.А. Булгакова. – 
Москва : Издательско-торговая корпорация «Дашков и К°», 
2024. – 215 с. 
ISBN 978-5-394-06214-8. 
DOI 10.29030/978-5-394-06214-8-2024. 
Учебное пособие содержит весь необходимыи
  теоретическии
  
и практическии
  материал для изучения курса «Разработка и прототипирование веб-продуктов». Даны основные определения, понятия и пояснения, позволяющие начинающему дизаи
 неру, студенту, научиться создавать спектр программных продуктов, в том 
числе адаптивные версии программного продукта для различных 
устрои
 ств.  
В пособии изложены и применяются инновационные разработки и технологии в сфере образования.  Эффективные технологии обучения позволяют не только быть заинтересованным в изучении, но и пошагово, с выполнением практических задании
 , подкрепленных примерами и теоретическим материалом, грамотно 
создавать качественные продукты.  
Для студентов вузов, изучающих дисциплину «Разработка и 
прототипирование веб-продуктов», обучающихся по направлению 
подготовки «Информационные системы и технологии». 
  
  
 
 
 
 
© Булгакова И.А., 2024 
ISBN 978-5-394-06214-8  
 
 
© ООО «ИТК «Дашков и К°», 2024
2 
 

СОДЕРЖАНИЕ 
ВВЕДЕНИЕ 
.................................................................................................................... 5 
ПОНЯТИЕ «ВЕБ-САИ
 Т» 
.......................................................................................... 7 
Практическая работа № 1.   
АНАЛИЗ РЫНКА МОБИЛЬНЫХ ПРИЛОЖЕНИИ
 ,   
ПОИСК ПРОТОТИПОВ ......................................................................................... 15 
Рекомендации к выполнению 
.................................................................. 17 
Определение процесса создания ................................................... 17 
Основные этапы разработки 
............................................................ 17 
Методы дизаи
 н-проектирования 
.................................................. 19 
Мобильные приложения и мобильные версии саи
 тов. 
Адаптив 
......................................................................................................... 26 
Прототипирование 
................................................................................. 31 
Составление брифа и технического задания 
.......................... 35 
Пользовательские маршруты/сценарии (User Flow) 
........ 39 
Подходы и методики ............................................................................. 53 
Роли в команде ......................................................................................... 54 
Перспективы и тенденции ................................................................ 55 
Практическая работа № 2.  
СОЗДАНИЕ КОНЦЕПЦИИ МОБИЛЬНОГО ПРИЛОЖЕНИЯ .............. 56 
Рекомендации к выполнению 
.................................................................. 58 
Разработка дизаи
 на мобильного приложения 
...................... 59 
Этапы 
.............................................................................................................. 59 
Мудборд ........................................................................................................ 64 
Референс ....................................................................................................... 82 
Мокап 
.............................................................................................................. 90 
3 

Практическая работа № 3.   
СОЗДАНИЕ ДИАГРАММЫ СВЯЗЕИ
  ПРИЛОЖЕНИЯ ............................ 96 
Рекомендации к выполнению 
.................................................................. 98 
Этапы проектирования UI/UX ....................................................... 
120 
Принципы дизаи
 на пользовательского интерфеи
 са ...... 
128 
Практическая работа № 4.  
СОЗДАНИЕ НАБРОСКА КАРТЫ ЭКРАНОВ ПРИЛОЖЕНИЯ ........... 
130 
Рекомендации к выполнению 
................................................................ 
131 
Презентация в FIGMA: гаи
 д и шаблоны 
................................... 
131 
Содержание страниц и описание их элементов 
.................. 
132 
Генерация страниц ............................................................................... 
132 
Кастомныи
  и шаблонныи
  дизаи
 н.  Кастомизация  
и персонализация ................................................................................. 
149 
Фреи
 мворк ................................................................................................ 
155 
Приложение.   
ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА РАЗРАБОТКУ САИ
 ТА ......................... 
162 
СПИСОК ЛИТЕРАТУРЫ 
..................................................................................... 
211 
 
4 

ВВЕДЕНИЕ 
Информационные системы сегодня – это комплекс программных и аппаратных средств, представляющии
  собои
  уникальную систему, обладающую способностью масштабироваться, модернизироваться и ставить новые задачи перед разработчиками, дизаи
 нерами, программистами. Эти задачи система 
ставит по причине развития технологии
 , потребностеи
  пользователеи
 , имеющегося пользовательского опыта (UX) и совершенствования систем. Технологии в информационных системах 
сегодня – это комплекс мер, призванныи
  оптимизировать наши 
жизненные процессы в социальнои
  среде, – это и система транспорта, и ЖКХ, и медицинское обеспечение, и электронная торговля, и безопасность (от систем мониторинга и реагирования 
до систем принятия решении
 ), и социальное обеспечение всех 
слоев населения, и образование, и т.д. и т.п. 
Задача дизаи
 неров информационных систем сегодня заключается в том, чтобы предвидеть будущии
  пользовательскии
  
опыт. Для этого нужно анализировать интересы пользователеи
  
и создавать интерфеи
 с на основе полученных знании
 . Специалисты идут путем разработки и внедрения новых технологии
 , 
оптимизации процессов использования ресурсов, вплоть до 
внедрения нулевого интерфеи
 са в информационные системы.  
Дизаи
 н информационных систем по отраслям представляет собои
  совокупность направлении
 , от медицины до безопасности, от лендинга до портала. 
Дизаи
 н информационных систем – это наука и творчество, 
сочетающие в себе технологические возможности и понимание 
человеческои
  психологии для создания удобного, понятного 
пользователю информационного пространства, в котором информация предоставляется ему быстро, эффективно и приятно. 
5 

Создание такого сбалансированного механизма, в котором все 
работает слаженно, – основная задача современного дизаи
 нера. 
Учебное пособие содержит весь необходимыи
  теоретическии
  и практическии
  материал для изучения курса «Разработка 
и прототипирование веб-продуктов». Даны основные определения, понятия и пояснения, позволяющие начинающему дизаи
 -
неру, студенту научиться создавать спектр программных продуктов, в том числе адаптивные версии программного продукта 
для различных устрои
 ств, таких как планшет, смартфон. 
Учебное пособие составлено на основании Рабочеи
  программы дисциплины «Разработка и прототипирование веб-саи
 -
тов и интерфеи
 сов онлаи
 н» 2024–2025  гг. для направления подготовки бакалавров 09.03.02 Информационные системы и технологии (профиль – Компьютерныи
  дизаи
 н) РТУ МИРЭА. 
В данном учебном пособии приводятся в качестве примеров дизаи
 н-системы: Дизаи
 н-система Ростелекома [25], Контент 
и дизаи
 н Госуслуг [24], Руководство по использованию бренда 
Госуслуги [22], Дизаи
 н государственных систем России [23] – 
разработанные по ГОСТ. 
6 

ПОНЯТИЕ «ВЕБ-САЙТ» 
Сайт, или веб-сайт (от англ. website: от web – паутина, сеть, 
и site – место), также веб-узел – это набор логически связанных 
между собои
  веб-страниц, расположенных в Сети под единым 
именем – доменом.  
Веб-сайт – это одна страница или набор связанных по 
смыслу страниц, связанных между собои
  какими-либо способами (включая их связи с иными ресурсами), которые доступны 
под единым доменным именем, оптимизированных для отображения в браузере и объединенных одним URL. Виды веб-саи
 тов: 
портал, сервис, агрегатор. 
 
Рисунок 1.  Виды саи
 тов 
7 

Саи
 ты различают по размеру, они бывают одностраничными и многостраничными. Как понятно из названия, одностраничныи
  (landing page, или лендинг) – это саи
 т, занимающии
  
ровно одну страницу, на которои
  обычно размещается информация о конкретном товаре или услуге. 
Корпоративные сайты. К этому виду относятся наиболее 
часто встречающиеся в интернете саи
 ты. Главнои
  задачеи
  этого 
веб-ресурса является полномасштабное размещение информации о какои
 -либо компании или проекте, истории создания, целях и возможностях, качестве товаров и услуг, ценах, контактах 
и пр. Корпоративные саи
 ты-галереи и саи
 ты-каталоги больше 
нацелены на представление результатов работы компании либо 
демонстрируют каталог ее продукции. 
Информационные сайты. Этот вид интернет-саи
 тов размещает разного рода информацию по тем вопросам, которые интересуют пользователеи
 . Зарабатывают они либо на рекламе, 
либо на платном контенте. К информационным саи
 там относятся: 
 Новостной сайт. Его задача состоит в оперативном размещении новостеи
  и последнеи
  информации из различных областеи
  общественнои
  жизни. 
 Тематический сайт. Обычно посвящается вопросам по 
узкои
  тематике, но может охватывать и более широкии
  круг вопросов. Тематические саи
 ты пользуются большим спросом, поскольку люди уже привыкли искать на них нужную им информацию. Поэтому создатели таких ресурсов должны внимательно 
следить за удобством использования и качеством размещаемого 
контента. 
 Тематический портал. Крупныи
  интернет-ресурс, на котором размещена исчерпывающая информация по конкретнои
  
тематике. Портал во многом похож на тематическии
  саи
 т, но 
имеет и дополнительные возможности: на нем организована обратная связь с посетителями, они могут общаться друг с другом 
в рамках портала через форумы или чаты. 
8 

 Блог. Чем-то похож на тематическии
  портал, но обладает 
меньшим размером. Кроме того, автор блога хотя и старается 
донести информацию по конкретнои
  теме до своих подписчиков, но при этом излагает ее на основе собственнои
  точки зрения. Блоги подразделяются на личные (персональные) и корпоративные. Последние обычно ведут компании, тем самым обеспечивая дополнительное продвижение своему бренду. Задача 
такого блога – представить компанию как эксперта в определеннои
  сфере, способного лучшим образом решить вопрос клиента. 
 Персональный блог. Авторскии
  блог представления информации. Автор вправе рассказывать о собственнои
  жизни, 
увлечениях, путешествиях, бизнесе, составлять обзоры автомобилеи
 , электронных устрои
 ств и многого другого. 
Интернет-магазины. Это саи
 ты с каталогами товаров и 
услуг, на которых посетители могут приобрести любои
  интересующии
  их продукт. Интернет-магазин может существовать в 
сети как представитель определенного офлаи
 н-магазина, а может быть независимои
  торговои
  платформои
 . 
Веб-сервисы – это программное обеспечение; программная система, разработанная для поддержки межмашинного взаимодеи
 ствия по сети.  
Функции веб-сервисов:  
− предоставление API – это интерфеи
 с прикладного программирования, которыи
  нужен для взаимодеи
 ствия с другими 
приложениями;  
− обработка данных – сервисы могут выполнять обработку 
данных, например, анализировать информацию, генерировать 
отчеты;  
− интеграция – программы могут использоваться для интеграции различных приложении
  и систем, обеспечивая их взаимодеи
 ствие, обмен данными;  
− безопасность – разработчики внедряют механизмы 
аутентификации пользователеи
 , принимают меры по защите 
передаваемых данных;  
9 

− автоматизация бизнес-процессов – многие приложения 
могут использоваться для автоматизации определенных бизнес-процессов, что упрощает выполнение рутинных задач.  
Также веб-саи
 ты – это крупные интернет-ресурсы, созданные для решения определенных задач: поиска информации, общения и т.д. Классификация интернет-ресурсов: 
 Поисковые сервисы – с их помощью пользователи находят 
в сети нужную информацию (Google, «Яндекс», Rambler). 
 Почтовые сервисы – ресурсы, обеспечивающие работу 
электроннои
  почты (Mail.ru, Gmail). 
 Доска объявлений – ресурс, созданныи
  для размещения 
публичных объявлении
  о продаже или покупке товара, услуги 
(Avito, irr.ru). 
• Сайт-агрегатор – на этих ресурсах предоставлена возможность прямого контакта продавца определенных услуг и покупателя этих же услуг. Сфера общения может быть самои
  разнои
  – от путешествии
  до оптовых закупок (Booking, Aviasales и др.). 
 Видеохостинг – Youtube, Rutube. 
 Социальные сети – «Мои
  мир», «ВКонтакте», «Одноклассники» и др. 
Классификация интернет-ресурсов по способу создания: 
HTML-сайты – это ресурсы, написанные на языке HTML. 
Такои
  саи
 т легко написать даже в блокноте и вручную сверстать 
его. Расширение страниц – .htm и .html. Удобны для создания 
саи
 та-визитки или лендингов. 
CMS – модуль управления саи
 том в CRM-системе, позволяет 
в режиме конструктора с помощью готовых шаблонов, например оформление заказа в Битрикс24, использовать встроенные 
сервисы лидогенерации для повышения конверсии саи
 та. 
 Лид в интернет-маркетинге – это интерес пользователя к 
товарам или услугам, это контакты человека, которыи
  выполнил целевое деи
 ствие: оставил контакты на саи
 те, подписался 
на рассылку, написал или позвонил в клиентскую поддержку.  
10