Проектирование и реализация Web-интерфейса

Министерство науки и высшего образования РФ 

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

высшего образования 

«Липецкий государственный педагогический университет имени 
П.П. Семенова-Тян-Шанского» 

Кафедра информатики, информационных технологий и защиты 
информации 

Г.А. Никулова 

ПРОЕКТИРОВАНИЕ И РЕАЛИЗАЦИЯ WEB-ИНТЕРФЕЙСА 

Учебно-методическое пособие 

Липецк – 2020 

УДК  004.43
ББК 32.973.4я73
Н653

Рекомендовано к печати кафедрой информатики, 
информационных 
технологий 
и 
защиты 

информации 
ФГБОУ 
ВО 
«Липецкий 

государственный 
педагогический 
университет 

имени П.П. Семенова-Тян-Шанского»
Протокол № 2 от 13.09.2019 г.

    Никулова, 
Г.А. 
Проектирование 
и 
реализация 
Web-интерфейса: 
учебно-методическое пособие   / Г.А. Никулова. –  Липецк: ЛГПУ имени 
П.П. Семенова-Тян-Шанского, 2020. – 66 с. 

В 
учебно-методическом 
пособии 
«Проектирование 
и 
реализация 
Web-интерфейса» представлены теоретические материалы и лабораторные 
работы по основам разработок современных Web-ресурсов, связанных с 
формированием компетенций проектирования и последующего создания 
интерфейса. 
Пособие  входит в состав УМК подготовки бакалавров по направлениям 
«Информационные системы и технологии», «Информационная безопасность», 
бакалавров и специалистов по направлению «Педагогическое образование» 
(профили «Профессиональное обучение», «Информатика» «Информатика и 
математика», «Информатика и дополнительное образование»). 
Рекомендовано 
для 
слушателей 
программ 
дополнительного 
профессионального образования соответствующего направления подготовки.

УДК 004.43 
ББК 32.973.4я73 
Н653 

Рецензенты: 

В.Н. Малыш, д-р техн. наук, профессор 

зав. кафедрой гуманитарных и естественнонаучных дисциплин 
Липецкого филиала Российской академии народного хозяйства и 
государственной службы при президенте РФ 

Л.Н. Боброва, канд. пед. наук, доцент 

ЛГПУ имени П.П. Семенова-Тян-Шанского 

© ФГБОУ ВО «Липецкий государственный педагогический университет имени 
П.П. Семенова-Тян-Шанского», 2020 
© Никулова Г.А., 2020 

ОГЛАВЛЕНИЕ 

 
ВВЕДЕНИЕ………………………………………………………….……….….......4 
Вводные теоретические сведения 
Пользовательский интерфейс. Понятия, стандарты................................................9 
Классификация ресурсов…………………………………………………………..11  
Эргономика интерфейса. Usability. Accessability. UX-дизайн Webинтерфейсов...............................................................................................................12 
Этапы проектирования и разработки интерфейса ресурса..….......…………......16 
Лабораторная работа №1 
КОНЦЕПЦИЯ, ТЕХНИЧЕСКОЕ ЗАДАНИЕ И МАКЕТ РЕСУРСА……………….21  
Лабораторная работа №2 
ФОРМИРОВАНИЕ 
РАЗМЕТКИ 
ДЛЯ 
СОЗДАНИЯ 
СТРУКТУРЫ 

РЕСУРСА...………………………………………………………………………..28 
Лабораторная работа №3 
СТИЛИЗАЦИЯ 
ЭЛЕМЕНТОВ, 
БЛОКОВ 
ИНТЕРФЕЙСА 
И 

ПРЕДСТАВЛЕНИЯ КОНТЕНТА С ПОМОЩЬЮ CSS3..................................41 
 
ЛИТЕРАТУРА…………………………………………………………………….57 

ВВЕДЕНИЕ 

 
В процессе формирования современных Web-ресурсов разработчикам 

приходится 
одновременно 
решать 
ряд 
проблем, 
связанных 
с 
их 

эффективностью в будущем, наиболее значимыми из которых являются: 
 
подготовка грамотного и оригинального контента; 

 
адекватное с точки зрения тематики и информационных задач 

оформление; 
 
создание условий для удобного и эргономичного использования ресурса с 

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

ассоциированных с ресурсом сервисов и виджетов. 

Достижение последних в списке целей невозможно без целенаправленной 

подготовки специалистов, владеющих навыками проектирования и реализации  
Web-интерфейса [1, 2] для решения профессиональных задач.  
 

Целью настоящего пособия является формирование базовых знаний в 

области проектирования и разработки  Web-интерфейса, что включает: 
 
базовый понятийный аппарат в области разработки Web-интерфейсов; 

 
концепции и этапы построения Web-интерфейсов; 

 
основы проектирования взаимодействия в Web-пространстве; 

 
основные инструменты, необходимые для проектирования и создания 

интерфейсов сетевых ресурсов;  
 
основные законы эргономики и UX-дизайна интерфейса; 

 
требования usability и accessability. 

Во время обучения студенты должны научиться: анализировать Web- 

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

Основной акцент в данном пособии сделан на формировании 

практических 
навыков 
проектирования 
Web-интерфейсов 
конкретного 

информационно-тематического и функционального назначения с учетом 
требований современных Web-стандартов.  

Методические указания к лабораторным занятиям содержат: 

 
краткие теоретические сведения по вопросам проектирования Web
интерфейсов, отражающие современные тенденции обеспечения эффективного 
человеко-машинного взаимодействия, в том числе с учетом достижений 
когнитивной науки (как одной из ступеней приближения к проектированию и 
созданию нейроинтерфейсов); 
 
примеры воплощения приемов и методов создания Web-интерфейсов на 

базе современных языков разметки и спецификаций (XHTML, HTML5, CSS3 и 
т.п.); 
 
задания, цель которых –  

 ознакомление 
с 
основами 
проектирования для 
дальнейшего 

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

интерактивного взаимодействия для конкретной целевой аудитории;  
 изучение и оценка существующих в Сети интерфейсов  конкретной 
тематической направленности; 
 разработка собственных интерфейсов ресурсов; 
 экспериментирование 
с 
параметрами 
элементов 
интерфейса, 

значениями свойств в различных форматах для воплощения 
оригинальных идей;  

 
список испольуемой и рекомендуемой литературы  и  internet-источников 

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

Использование данного пособия не требует наличия  у студентов 

лицензионных программ. Однако необходимо использовать лицензионную 
операционную систему со встроенным набором инструментов (текстовый 
редактор для набора кода страниц, браузер для их отображения, простейший 
графический редактор для создания иллюстраций и элементов декора). Кроме 
того, рекомендуется периодически использовать валидатор (для проверки 
корректности написания кода на языке разметки, соответствия спецификации 
HTML и исправления возможных ошибок) (validator.w3.org). 

По 
мере 
приобретения 
и 
расширения 
практических 
навыков 

целесообразно 
использовать 
профессиональные 
инструменты 
создания  

Web-страниц, сайтов и более крупных специализированных ресурсов, а именно:  
 
набор современных версий наиболее популярных браузеров (Google 

Chrome 
(www.google.com/chrome?hl=ru), 
Mozilla 
Firefox, 

(www.mozilla.ru/products/firefox/), Opera (ru.opera.com/download/), Safari под 
MacOS и Windows от Apple (www.apple.com/ru/safari/)); 
 
один из профессиональных редакторов текста с выделением (подсветкой) 

различных типов конструкций и элементов кода, объединяющих проверку кода 
на ошибки (встроенный валидатор) и возможность предварительного 
просмотра результатов (Notepad++ (notepad-plus.sourceforge.net/ru/site.htm), 
EditPlus (www.editplus.com), PSPad (www.pspad.com/ru/download.php), Sublime 

Text 3  (www.sublimetext.com/3), который обладает большими возможностями 
по обеспечению кроссплатформенности разрабатываемых ресурсов; 
 
свободно 
распространяемые 
графические 
редакторы 
Gimp 

(gimp.ru/download/gimp/) 
или 
Paint.Net  
(www.getpaint.net/download.html); 

профессиональный редактор Corel WebDraw (http://www.corel.com/).  

Существует 
ряд 
сервисов, 
преимущественно 
платных 
(часто 
с 

бесплатным 
тестовым 
периодом 
или 
ограниченным 
функционалом 
в 

бесплатном доступе), позволяющих создавать Web-интерфейсы целевых 
страниц в автоматизированном или полуавтоматизированном режимах. К 
таковым относятся сервисы-конструкторы: 
 
LPgenerator (https://lpgenerator.ru/features/); 

 
WIX  (https://ru.wix.com/); 

 
Webstarts (https://www.webstarts.com/); 

 
Webnode (https://www.webnode.ru/); 

 
Tilda (https://tilda.cc/ru/); 

 
1C-UMI  (https://portal.1c.ru/applications/46); 

 
Voog (https://www.voog.com/, мультиязычная платформа); 

 
Xweb (https://www.xweb.io/, англ.); 

 
Bookmark (https://www.bookmark.com/, англ.); 

 
uCraft (https://www.ucraft.com/, англ.); 

 
Webflow (https://webflow.com/, англ.); 

 
IM Creator (https://www.imcreator.com/, англ.); 

 
Shopify (https://www.shopify.com/, англ.); 

 
Simbla (https://www.simbla.com/, англ.); 

 
и бесплатные сервисы 
 
Google Sites (https://sites.google.com/new?pli=1); 

 
Setup (https://www.setup.ru/); 

 
Mobirise (https://mobirise.com/, англ.). 

Подробный обзор online конструкторов можно найти в следующих 

интернет-источниках: 
 
Лучшие 
конструкторы 
сайтов 
Рунета 
(UGUIDE.RU 
30.01.2019,  

https://uguide.ru/rejting-luchshij-konstruktor-sajtov-runeta) ; 
 
Обзор ТОП-30 конструкторов сайтов от Andrew Chornyy (13 March, 2019. 

CEO Plerdy,  https://www.plerdy.com/ru/blog/website-builders-review/); 
 
17 лучших конструкторов, которые помогут создать мобильное 

приложение, 
не 
написав 
и 
строчки 
кода! 
(02. 
12. 
2018, 

https://xmldatafeed.com/article-17-luchshix-servisov-kotorye-pomogut-sozdatmobilnoe-prilozhenie-ne-napisav-i-strochki-koda/).  

Однако, как в любом деле, эффективное использование инструментов, 

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

В. Дунаева [3-4], Э. В. Мержевича [5], Робсона, Э. Фримена [10], Б. Скотта,  
Т. Нейла  [11], П. Ташкова и В. Дронова [12, 13],  Р. Унгера, Б. Хогана [14, 15]. 
Вместе с тем основательное овладение технологией разработки ресурсов 
невозможно без систематической проработки теоретических сведений в 
области Web-технологий [6-10]. 

Для 
осмысленного 
формирования 
иллюстративных 
объектов 
и 

проектирования страниц сетевых ресурсов необходимо ознакомиться с 
советами и рекомендациями  специализированных источников по направлению  
«Web-дизайн» [4, 9, 14] с целью постепенного формирования навыков 
грамотного преставления контента, поскольку исключительно технологические 
компетенции не могут решить задачи обеспечения привлекательности и 
успешности разрабатываемых ресурсов.  

Одним 
из 
требований 
к 
студентам, 
выполняющим 
задания 
к 

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

содержимого как в вербальной, так и в графической форме.   

При работе с пособием рекомендуется: 
 
освоить технологические приемы, описанные в лабораторных 

работах; 
 
поэкспериментировать с параметрами элементов страницы, создав 

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

 
 

 

 

 

 

 

 

 

 

 

 

ВВОДНЫЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ 

Проектирование 
интерфейса 
Web-ресурсов 
находится 
на 
стыке 

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

 
UX-дизайн;  

 
Usability;  

 
проектирование взаимодействия;  

 
эргономика взаимодействия;  

 
когнитивная наука;  

 
суггестология и проч.  

 
Пользовательский интерфейс. Понятия 

Интерфейс пользователя представляет собой совокупность средств, 

методов и связанных с ними инструментов и компонентов, осуществляющих 
взаимодействие в системе «Web-ресурс – пользователь – Web-приложение – 
Web -сервер». Согласно ГОСТ З ИСО 9241-151-2041 (п. 3.35) [16] понятие 
«пользовательский веб-интерфейс (Web user interface, World Wide Web user 
interface)» включает «аспекты Web-сайта или Web-приложения, относящиеся к 
информационному наполнению, функциональным возможностям, навигации, 
взаимодействию и представлению, которые существенны для использования 
Web-приложения 
или 
Web-сайта». 
Иными 
словами, 
пользовательский 

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

С другой стороны, с графическим интерфейсом связывают элементы 

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

верстки, декоративное оформление интерактивных элементов: фреймов, меню, 
ссылок, кнопок и проч. 

Основные принципы эргономики и доступности Web-интерфейсов (для 

отдельных категорий людей со специальными потребностями) регламентируют 
официальные документы [16, 17]. 

Эталонную модель человеко-ориентированного проектирования 

пользовательских Web-интерфейсов, представленную в Государственных 
стандартах, иллюстрирует рисунок 1. 

Уровни  этой модели отражают необходимые в соответствии со 

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

трансформируемости 
рассматриваемых 
объектов 
по 
форме, 
смыслу, 

функциональности, организации (высокоуровневые аспекты проектирования). 

 

 

 

Рис. 1. Эталонная модель человеко-ориентированного проектирования 

пользовательских Web-интерфейсов [16] 

 
При определении стратегии проектирования учитывают:  

 
состав и характер информационного наполнения ресурса;  

 
виды объектов информационного наполнения и необходимые и 

достаточные 
для 
достижения 
целей 
ресурса 
 
его 
функциональные 

возможности;  
 
определяют навигационные схемы и типы поиска;  

 
планируют особенности представления информационного наполнения. 

 

Классификация ресурсов 
 
Любая 
классификация 
не 
является 
эталонной, 
поскольку 
априори 

ориентируется на критерии, значимые для ее составителя. Интегрально 
выделяют 7 базовых типов, краткие характеристики которых представлены в 
таблице 1. 

 На рисунке 2 приведена типологическая схема ресурсов, на которую 

обычно ориентируются студии-разработчики и SEO-компании (см. также 
список источников 6-15).  

 

Рис. 2. Типология ресурсов (взято с сайта 

http://kondertsev.ru/klassifikaciya-internet-resursov/) 

 

 

Табл. 1. Характеристики основных типов ресурсов 

 

Тип ресурса 
Назначение
Особенности

Одностраничный 

сайт (Landing 

Page)

Эффективный инструмент продаж
Приемы, побуждающие клиента 

совершить нужное действие прямо 

сейчас; имеет четкую структуру 
предъявления информации по 

товару или услуге, вертикальную 

прокрутку

Сайт-визитка

иногда выделяют 

«имиджевый» 

сайт

Аналог традиционной визитки с 

указанием владельца 

(юридического и физического), 
основных видах деятельности, 

контактах. Создание 

положительного впечатления о 

владельце

Простая навигация, уникальный и 

функциональный дизайн, 
фотографии, иллюстрации

Промо-сайт
Дополнительный ресурс как 
презентация для продвижения 
какого-либо товара (группы 

товаров) или услуги

Стильный, яркий, запоминающийся 
дизайн, объемная и динамическая 
графика, выразительные текстовые 

эффекты

Продолжение таблицы 1 

Информационный 

ресурс

Тематический агрегатор 

информации, четко 

ориентированный на целевую 

аудиторию

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

тематическим голосованиям и 

форумам, опросам

Корпоративный 

ресурс

Фирменный ресурс компании с 
задачами поддержки бизнеса 
компании и автоматизация еѐ 

деятельности

Интегрирует функции визитки, 

информационного, продвигающего 
ресурса, коммерческой площадки. 

Имеет сложную навигацию (по 

каталогам) и высокую 

насыщенность интерактивными 

компонентами и виджетами.
Обеспечивает обратную связь.

Интернет-магазин
Презентация, создание и 
обслуживание заказов от 

формирования корзины до оплаты 

и доставки с оповещением

Наличие баннеров, витрин, 
каталогов, рекламных статей. 

Развитая поддержка 

взаимодействия с пользователем: 

корзина, калькулятор, чат, 

избранное, оплата, отзывы и проч. 

Повышенные требования к

безопасности

Портал
Информационно
коммуникативные функции в 

определенной области, объединяет 

ресурсы, приложения

Многоуровневое объединение 

сервисов, графический 
минимализм, постоянная 

актуализация информации. Ложная 

навигация, обязательна карта 

портала

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

Эргономика интерфейса. Usability. Accessability. 

UX-дизайн Web-интерфейсов 

Эргономические 
принципы 
проектирования 
пользовательских 
интерфейсов 
определены 
государственными 
стандартами 
РФ 
[16-20]. 
Перечислим основные из них. 

Структурирование интерфейса и информационного содержимого

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

пользовательских 
задач. 
Подходы 
к 
структурированию 
частей

информационного наполнения, обусловленных применением программного