Файл: Создание макета вебсайта Russian Startup challenge.pdf

ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ
УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
ИНСТИТУТ НЕПРЕРЫВНОГО ОБРАЗОВАНИЯ (ИНО)
КОНТРОЛЬНАЯ РАБОТА
По дисциплине: Эргономика и дизайн графических интерфейсов
На тему: Создание макета веб-сайта «Russian Startup challenge»
Санкт-Петербург
2023
Студент Ф.И.О.:
Екименков Роман Николаевич
Группа №:
ИБ-16с
Студенческий билет №:
2010234
Преподаватель:
Мусаева Татьяна Вагифовна
Дата сдачи работы:

2
ТЕХНИЧЕСКОЕ ЗАДАНИЕ
на выполнение работ по созданию макета веб-сайта «Russian Startup challenge»
Оглавление:
1.
Общие сведения
2.
Назначение
3.
Разделы и страницы
3.1. Шапка
3.2. Основная часть сайта
3.3. Подвал
4.
Дизайн
5.
Согласование с заказчиком, внесение корректировок
6.
Передача готового макета заказчику
1.
ОБЩИЕ СВЕДЕНИЯ
В документе содержится техническое задание для разработки макета сайта «Russian Startup challenge».
Наименование заказчика «Sk - технопарк»
Наименование исполнителя «ИП Екименков Р.Н.»
2.
НАЗНАЧЕНИЕ
Основная задача сайта — привлечение к участию в конкурсе для инновационных проектов в области IT и промышленных технологий
3.
РАЗДЕЛЫ И СТРАНИЦЫ
Сайт будет выполнен в стиле Landing Page (одностраничный сайт). На целевой странице будут расположены следующие элементы:
- шапка сайта (логотип, контактная информация, кнопка «Подать заявку», а также меню для быстрой навигации по Главной странице);

3
- основная часть сайта (баннер, описание конкурса, новости, направления конкурса, кого мы ищем, зачем участвовать, этапы, критерии оценивания проектов, об организаторе, эксперты и менторы, в конце основной части сайта присутствует баннер с кнопкой – ссылкой «Подать заявку»);
- подвал сайта (логотип, ссылки на социальные сети, контактная информация)
4.
Дизайн:
Макет должен быть выполнен в сине – белый тонах.
5.
Согласование с заказчиком, внесение корректировок.
6.
Передача готового макета заказчику.

4
СОДЕРЖАНИЕ
ТЕХНИЧЕСКОЕ ЗАДАНИЕ .................................................................................. 2
ВВЕДЕНИЕ .............................................................................................................. 6
ГЛАВА 1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ ................................................................. 7 1. Выбор типа разрабатываемого интерфейса ................................................... 7 1.1. Виды типа интерфейса ................................................................................. 7 1.1.1. Прикладная программа ............................................................................... 8 1.1.2. Автоматизированное рабочее место (АРМ) ............................................. 8 1.1.3.Веб-сайт ........................................................................................................... 8 1.1.4. Компьютерная игра ....................................................................................... 9 1.2. Концептуальная модель ................................................................................ 10 1.3. Исследование пользователей ...................................................................... 10 1.4. Выбор программы для разработки прототипа интерфейса ..................... 11 1.4.1. Прототипирование интерфейса ................................................................. 11 1.4.2. Выбор программы ....................................................................................... 11 1.4.2.1. MS PowerPoint .......................................................................................... 11 1.4.2.2. Adobe Photoshop ....................................................................................... 12 1.4.2.3. Adobe Illustrator ........................................................................................ 12
ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ ................................................................ 14 2.1. Блок «Header» ................................................................................................. 14 2.2. Блок «Main» .................................................................................................... 14 2.2.1. Баннер ........................................................................................................... 14 2.2.2. О конкурсе. Новости ................................................................................... 17 2.2.3. Направления конкурса ................................................................................ 17

5 2.2.4. Кого мы ищем .............................................................................................. 18 2.2.5. Зачем участвовать ...................................................................................... 19 2.2.6. Этапы ........................................................................................................... 19 2.2.7. Критерии оценки проектов ....................................................................... 20 2.2.8. Об организаторе ......................................................................................... 20 2.2.9. Эксперты и менторы .................................................................................. 21 2.3. Блок «Footer» ................................................................................................. 21 2.4. Страница «Главная» при просмотре на различных устройствах ............. 22
ЗАКЛЮЧЕНИЕ ..................................................................................................... 26
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ............................................. 27

6
ВВЕДЕНИЕ
Интернет становиться все более развитой средой для осуществления коммуникаций. В связи с глобальным развитием сети Интернет, более резко начала выделяться отдельная отрасль web-дизайн и web-программирование.
Сейчас, чтобы привлечь внимание клиентов, покупателей или партнёров, просто необходимо заявить о себе в интернете, путём создания
WEB-сайта. Для этих целей как раз и служит web-сайт, содержащий основную информацию об организации, частном лице, компании, товарах или услугах, прайс-листы, контактные данные. Сайты позволяют хранить, передавать, продавать различные типы информации, не отходя от экрана компьютера.
В данной контрольной работе было рассмотрено создание макета сайта
«Russian Startup Challenge». Создание сайта поспособствует привлечь больше внимания со стороны конкурсантов.
Целью контрольной работы является создание макета сайта.
Задачи контрольной работы работы:
•
Разработка макета сайта с использованием современных программных средств;
•
Разработка дизайна оформления, делающего сайт более привлекательным для конкурсантов;
•
Создание удобного интерфейса для возможности комфортного пребывания пользователей на сайте.

7
ГЛАВА 1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
1.
Выбор типа разрабатываемого интерфейса
Пользовательский интерфейс — это интерфейсное приложение, с которым пользователь взаимодействует для использования программного обеспечения. Пользователь может манипулировать программным и аппаратным обеспечением и управлять им с помощью пользовательского интерфейса.
Пользовательский интерфейс может быть графическим, текстовым и аудио-видео, в зависимости от базовой аппаратной и программной комбинации. Пользовательский интерфейс может быть аппаратным или программным или их комбинацией.
1.1. Виды типа интерфейса
Одни виды взаимодействия позволяют получить больше контроля над компьютером или смартфоном, но требуют дополнительных навыков. Другие
— более комфортные, но предоставляют меньше возможностей. У каждого типа есть свои особенности.
Вот некоторые из них:
•
Прикладная программа;
•
АРМ;
•
Веб-сайт;
•
Компьютерная игра и т.п.
Рассмотрим их более детально.

8
1.1.1. Прикладная программа
Прикладная программа — это любая конкретная программа, способствующая решению какой-либо задачи в пределах данной проблемной области.
Например, там, где на компьютер возложена задача контроля за финансовой деятельностью какой-либо фирмы, прикладной будет программа подготовки платежных ведомостей.
Прикладные программы могут носить и общий характер, например, обеспечивать составление и печатание документов и т.п.
1.1.2. Автоматизированное рабочее место (АРМ)
Автоматизированное рабочее место (АРМ) — программно-технический комплекс АС, предназначенный для автоматизации деятельности определенного вида. При разработке АРМ для управления технологическим оборудованием как правило используют SCADA-системы.
АРМ объединяет программно-аппаратные средства, обеспечивающие взаимодействие человека с компьютером, предоставляет возможность ввода информации (через клавиатуру, компьютерную мышь, сканер и пр.) и её вывод на экран монитора, принтер, графопостроитель, звуковую карту — динамики или иные устройства вывода. Как правило, АРМ является частью АСУ.
1.1.3. Веб-сайт
Веб-сайт, часто называют сокращённо сайт — это не что иное, как совокупность логически связанных между собой веб-страниц, или просто одна страница. Страницы сайта доступны в Интернете средствами протоколов
HTTP или HTTPS. Веб-сайт имеет своё место в интернете, определяемое персональным для каждого сайта адресом, который принято называть URL.

9
Любой веб-сайт имеет своего владельца, владельцем может быть как физическое, так и юридическое лицо.
1.1.4. Компьютерная игра
Компьютерная игра (иногда используется неоднозначный термин видеоигра) - компьютерная программа или часть компьютерной программы, служащая для организации игрового процесса (геймплея), связи с партнёрами по игре, или сама выступающая в качестве партнёра.
Компьютерные игры часто создаются на основе фильмов и книг; есть и обратные случаи. Специальные разработанные игры позволяют использовать игроков в научно-исследовательских работах. По некоторым компьютерным играм проводятся любительские и профессиональные соревнования — такого рода соревнования называются киберспортом.
Компьютерные игры оказали столь существенное влияние на общество, что в информационных технологиях отмечена устойчивая тенденция к геймификации для неигрового прикладного программного обеспечения.
Компьютерные игры также с 2011 года официально признаны правительством
США и американским Национальным фондом отдельным видом искусства, наряду с театром, кино и т. П.
Вывод: так как заказчику нужен сайт для рекламы своего конкурса, мы выбираем создание интерфейса для веб-сайта.

10
1.2.
Концептуальная модель
Концептуальня модель - абстрактная модель, определяющая структуру моделируемой системы, свойства её элементов и причинно-ледственные связи, присущие системе и существенные для достижения цели моделирования.
Модель представлена на схеме 1.
Схема 1. Концептуальная модель
1.3. Исследование пользователей
Исследование пользователей может дать информацию необходимую для принятия обоснованных решений, которые положительно скажутся на проекте. Ни бизнес, ни дизайнеры не должны принимать решения вслепую, особенно когда дело доходит до улучшения пользовательского опыта.

11
1.4. Выбор программы для разработки прототипа интерфейса
1.4.1. Прототипирование интерфейса
Прототипирование интерфейса — эффективный инструмент для создания структуры страниц сайта или сервиса. Прототип — это набор набросков, основное внимание в которых уделяется содержимому. Наброски создаются без графических изысков, чаще всего в оттенках серого.
Прототипирование позволяет экономить время и деньги, так как позволяет принять большинство решений по реализации функциональных возможностей до этапа передачи проекта дизайнеру или программисту.
1.4.2. Выбор программы
1.4.2.1. MS PowerPoint
Большинство людей признают MS PowerPoint как удобное приложение для создания презентаций, однако, что многие не знают о том, что PowerPoint также способен другой мощной функцией, то есть для создания моделей прототипов для приложений, каркасные, конструкции вебсайта и т.д. На самом деле, считается, что PowerPoint был также использован для процесса разработки известных продуктов Microsoft, таких как Internet Explorer,
Windows Home Server, Windows Live, а также операционной системы
Windows.
Некоторое время назад Long Zheng скомпилирован демонстрацию для пользователей, чтобы показать им, как MS PowerPoint могут быть использованы для целей прототипирования. В этом посте мы рассмотрим его слайд палубе, чтобы показать вам, как опытных образцов может быть сделано в PowerPoint для разработки дизайна пользовательского интерфейса и каркасные.

12
Этот набор инструментов начинается с нескольких основных примеров относительно того, как можно создавать проекты приложений, каркасные и различные виды прототипов в PowerPoint.
1.4.2.2. Adobe Photoshop
Adobe Photoshop — это отличный инструмент для быстрого прототипирования. С каждой новой версией программа открывает все больше возможностей для веб-дизайнеров, желающих быстро создавать макеты сайтов для совместного использования с клиентом или дизайн для разработчиков.
Самые полезные функции быстрого прототипирования в Photoshop CC включают в себя возможность изолировать слои, изменять углы в любой момент с помощью инструмента Rounded Rectangle и копировать атрибуты
CSS из отдельных слоев. Кроме того, Creative Cloud предоставляет полезные элементы совместной работы.
Возможность копировать CSS-стили слоя — это отличная функция
Photoshop CC для создания HTML-прототипа.
1.4.2.3. Adobe Illustrator
Adobe Illustrator – это программа, созданная для работы с векторной графикой. С помощью Adobe Illustrator дизайнеры создают красочные иллюстрации, иконки, паттерны, логотипы, различные макеты для печати и многое другое.
•
Работа с геометрическими фигурами. В Иллюстраторе можно ловко работать с фигурами - объединять их, вычитать, дополнять другими контурами и так далее. Геометрические формы часто являются основами для иконок и логотипов, поэтому работа с ними – вещь фундаментальная.

13
•
Создание иллюстраций. Делайте яркие иллюстрации из фигур, линий и контуров, применяйте различные эффекты и текстуры. В Adobe
Illustrator можно создавать любые формы, накладывать их друг на друга с помощью слоев и применять различные эффекты: градиенты, тени, текстуры и прочее.
•
Трассировка
растровой
графики.
Иллюстратор дает возможность переводить растровое изображение в векторное за пару кликов.
•
Редактирование
контуров.
Рисуйте самостоятельно инструментом «Перо» или редактируйте чужие иллюстрации. Вы можете скачивать проекты в Ai-формате со стоков и редактировать каждый элемент.
•
Применение заливок. В Adobe Illustrator можно с легкостью применять различные заливки к объектам и контурам. Пусть все будет так, как вам хочется!
•
Подготовка к печати. Визитки, плакаты или огромные рекламные щиты. Так как векторная графика масштабируется до любых размеров, в Иллюстраторе можно создавать рекламные щиты размером с дом.
Параметры экспорта файла позволяют настроить вылеты, цветовой профиль для печати, а также выбрать формат.
•
Работа с монтажными областями. С помощью монтажных областей удобно, к примеру, делать баннеры для сайта в различных размерах.
•
Преобразование текста в кривые. Любой текст в Adobe
Illustrator можно перевести в кривые, то есть сделать векторным. Это позволит работать с ним так, будто это векторная форма – можно изменять форму букв, сделать логотип или красивую надпись.
•
Создание кистей. Сделав собственные кисти, вы сможете добавить еще больше уникальности своим иллюстрациям. Если на создание своих кистей времени нет, их можно загружать со сторонних ресурсов.
Вывод: в ходе анализа программ, выбор был сделан в пользу Adobe
Photoshop, эта самая универсальная программа, функций данной программы хватит для реализации прототипа интерфейса веб-сайта.

14
ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ
2. Страница «ГЛАВНАЯ»
2.1. Блок «Header»
В разработке были учтены все требования заказчика. На главной странице, в блоке «Шапка сайта» находятся – логотип, контактная информация, кнопка «Подать заявку», а также меню для быстрой навигации по Главной странице (Рисунок 1).
Рисунок 1. Шапка сайта
2.2. Блок «Main»
В блоке «Main» расположены разделы сайты каждый как отдельный блок. При клике на определенный пункт меню страница плавно прокручивается к этому блоку на странице. Далее подробно будут подробно описан каждый блок.
2.2.1. Баннер
В блоке «Баннер» находятся: название конкурса, описание конкурса, тематическое изображение, а также кнопка «Подать заявку»(при наведение на