58
В программе для создания дизайна сайтов и приложений Figma был
разработан макет сайта показывающий структурное расположение
информационных блоков на главной странице без заполнения контентом.
Изучив способы управления иерархией, страницы были поделены на
логические блоки.
В качестве фона сайта было решено использовать белый цвет с
добавлением на правой части не отвлекающего внимание полупрозрачного
графического элемента – логотипа музея имени Андрея Рублева. В качестве
шрифтового набора выступило сочетание фирменного шрифта Pragmatica для
заголовков и семейства шрифтов HelveticaNeueCyr для основного текста и
других элементов интерфейса.
С использованием всех разработанных элементов интерфейса, а также
модульной сетки bootstrap в программе Figma были разработаны страницы сайта
под различные форматы в виде отзывчивого макета.
59
3. ТЕХНОЛОГО-ЭКОНОМИЧЕСКАЯ ГЛАВА
3.1 Расчет затрат на создание графической концепции веб-сайта музея
имени Андрея Рублева
При расчете затрат на создание графической концепции веб-сайта
необходимо учитывать несколько аспектов, таких как стоимость программного
обеспечения, используемого при разработке, затраты времени и усилий, а также
на привлечение сторонних специалистов по необходимости.
Большая часть программного обеспечения распространяется по модели
подписки, то есть расчет ведется за определенный период времени. В случае с
проектом это 1 месяц, как минимальная величина времени действия подписки на
лицензионное ПО.
1. Adobe Illustrator CC 2020 – 1 932,00 руб. в месяц без НДС (первый
месяц бесплатно);
2. Adobe Photoshop CC 2020 – 1 932,00 руб. в месяц без НДС (первый
месяц бесплатно);
3. Adobe Premier Pro 2020 – 1 352,00 руб. в месяц без НДС (первый
месяц бесплатно);
4. Figma – бесплатная программа.
Средняя цена по местному рынку дизайн-компаний на разработку дизайн
концепции крупного корпоративного сайта варьируется в пределах от 10 000 до
25 000 руб., цена так же влияет на качество выполняемой работы и сроки ее
выполнения в среднем это от недели до месяца.
Если смотреть на фриланс биржу, то ее участники берут за свою работу в
данном направлении от 5 000 до 20 000 руб. с расчетом на две – четыре недели
работ над проектом.
В данном проекте не используется привлечение сторонних специалистов,
однако в подобном проекте могут быть использоваться команда из следующих
специальностей: фотографа, ретушера, верстальщика и программиста по
необходимости.
60
3.2 Вывод
Для разработки графической концепции веб-сайта музея имени Андрея
Рублева используется следующее программное обеспечение Adobe Illustrator,
Adobe Photoshop, Adobe Premier Pro общей стоимостью подписки Creative Cloud
1 932,00 руб. в месяц без НДС, и бесплатная программа Figma.
Стоимость услуги разработки графической концепции веб-сайта музея
имени Андрея Рублева основываясь на местный рынок дизайн-компаний и
фриланс биржу составляет приблизительно 20 000 руб.
61
ЗАКЛЮЧЕНИЕ
Проанализировав историю сайтостроения и разные виды веб-сайтов,
можно прийти к выводу, что для разрабатываемой графической концепции
подходит информационный (корпоративный) сайт, в котором свое место найдут
все необходимые элементы структуры сайта.
Были исследованы принципы необходимые для создания удобного
дизайна сайта.
Исследован объект проектирования – Музей древнерусской культуры и
искусства имени Андрея Рублева, а также его айдентика: фирменные цвета
компании, шрифтовые наборы, логотип. На основе всего этого была проведена
разработка графической концепции web-сайта музея имени Андрея Рублева.
Таким образом можно понять, что единой цветовой гаммы у сайтов-
аналогов нет, однако можно увидеть и схожие визуальные элементы такие как:
Привлекающий внимание главный экран;
Анонсы статей, которые могут заинтересовать потенциального
пользователя сайта;
Большая часть контента скрыта в меню сайта, но пользователю
интуитивно понятно на что нажать для получения необходимого и ожидаемого
результата.
При исследовании аналогов сайтов различных музеев схожей тематики
был сделан вывод, что эти сайты в своей основе несут не какой-то определенный
стиль присущий данной сфере, а свой собственный фирменный стиль
организации.
Получив определенный список проблем и пожеланий целевой аудитории,
можно выяснить, что к сайту предъявляется следующий список требований:
удобочитаемый шрифт, большие иллюстрации с возможностью увеличения,
удобная навигация и окно быстрой связи с одним из операторов музея для
перенаправления на интересующий отдел.
62
На данном этапе, в первую очередь был составлен бриф на разработку
графической концепции web-сайта музея имени Андрея Рублева, в котором была
расписана целевая аудитория, ее пожелания и необходимые элементы дизайна с
точки зрения потребителя и заказчика проекта.
Далее была создана ментальная карта, на основе которой была
сформирована идея проекта, а также структурирована вся необходимая
имеющаяся информация. Была разработана дополнительная ментальная карта
поиска дизайна элементов интерфейса.
Последующее изучение классификаций структур расположения страниц
сайта привело к разработке карты сайта и структуры меню, включающего в себя
следующие основные страницы: Главная, Афиша, Коллекция, Статьи, О нас,
Контакты, которые в свою очередь имеют свои дочерние элементы в виде
страниц.
Необходимые информационные блоки сайта были распределены по
соответствующим страницам. Изучены типы сеток сайтов была выбрана
подходящая. Для создания макета для мониторов различного разрешения
компьютеров и смартфонов, наиболее предпочтительна модульная сетка
bootstrap, состоящая из двенадцати колонок, на основе которой и будет создана
графическая концепция сайта.
Создан мудборд из концептов, шрифтов, изображений и цветовых
сочетаний, показывающих будущие графические особенности web-сайта музея
имени Андрея Рублева.
Исходя из проведенного ранее исследования целевой аудитории и
заказчика, их предпочтений и пожеланий к составляющим web-сайта, была
начата разработка визуально-графической структуры страниц, а также
отдельных элементов интерфейса, таких как шапка, оформление меню, блока
новостей, календаря, в виде эскизов.
В бесплатной программе для создания дизайна сайтов и приложений
Figma был разработан макет сайта показывающий структурно-иерархическое
63
расположение информационных блоков на главной странице без заполнения
контентом.
Изучив способы управления иерархией, страницы были поделены на
логические блоки.
В качестве фона сайта было решено использовать белый цвет с
добавлением на правой части не отвлекающего внимание полупрозрачного
графического элемента – логотипа музея имени Андрея Рублева. В качестве
шрифтового набора выступило сочетание фирменного шрифта Pragmatica для
заголовков и семейства шрифтов HelveticaNeueCyr для основного текста и
других элементов интерфейса.
С использованием всех разработанных элементов интерфейса, а также
модульной сетки bootstrap в программе Figma были разработаны страницы сайта
под различные форматы в виде отзывчивого макета.
Также для дальнейшего продвижения сайта и привлечения новой
аудитории на предстоящие мероприятия был разработан шаблон статичных web-
баннеров.
Для разработки графической концепции веб-сайта музея имени Андрея
Рублева используется следующее программное обеспечение Adobe Illustrator,
Adobe Photoshop, Adobe Premier Pro общей стоимостью подписки Creative Cloud
1 932,00 руб. в месяц без НДС, и бесплатная программа Figma.
Стоимость услуги разработки графической концепции веб-сайта музея
имени Андрея Рублева основываясь на местный рынок дизайн-компаний и
фриланс биржу составляет приблизительно 20 000 руб.
В процессе работы над разработкой графической концепции web-сайта
музея имени Андрея Рублева были достигнуты все поставленные цели
основными из которых являлись:
Рассмотреть аналоги разрабатываемого сайта по основным
параметрам;
Определить целевую аудиторию разрабатываемого сайта;
Определить цветовую концепцию и шрифтовое оформление;
64
Разработать сетку сайта и его визуально-иерархическую структуру;
Разработать элементы интерфейса web-сайта;
Разработать графическую концепцию web-сайта музея имени Андрея
Рублева;
Разработать отзывчивый макет web-сайта, подходящий под
различные форматы устройств.
При выполнении выпускной квалификационного проекта обучающийся
применил навыки разработки графической концепции web-сайта, элементов
интерфейса и визуальной и текстовой иерархии информационных блоков.
65
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ
Нормативные правовые акты и иные официальные документы
1. ISO 9241-110 «Эргономика взаимодействия человека с системой. Часть
110. Принципы взаимодействия» [Электронный ресурс]. – Режим доступа – URL:
https://www.iso.org/standard/75258.html
2. ISO 9241-112: 2017 «Эргономика взаимодействия человека с системой.
Часть 112: Принципы представления информации» [Электронный ресурс]. –
Режим доступа – URL: https://www.iso.org/standard/64840.html
3. ISO 9241-161: 2016 «Эргономика взаимодействия человека с системой.
Часть 161. Руководство по визуальным элементам пользовательского
интерфейса» [Электронный ресурс]. – Режим доступа – URL:
https://www.iso.org/standard/60476.html
4. ISO 9241-125: 2017 «Эргономика взаимодействия человека с системой.
Часть 125: Руководство по визуальному представлению информации»
[Электронный ресурс]. – Режим доступа – URL:
https://www.iso.org/ru/standard/64839.html
5. ISO 9241-210: 2019 «Эргономика взаимодействия человек-система. Часть
210. Проектирование интерактивных систем, ориентированное на человека»
[Электронный ресурс]. – Режим доступа – URL:
https://www.iso.org/standard/77520.html
Литература
6. Гарретт, Д. «Веб-дизайн. Элементы опыта взаимодействия», - СПб.:
Издатель «Символ-плюс», 2015. – 192 c.
7. Иттен И. «Искусство цвета», ‒ М.: Изд.: Издатель «Д. Аронов»; 2018. – 96 с.
8. Круг, С. «Веб-Дизайн: книга Стива Круга или "не заставляйте меня
думать!» – М.: Издатель «Символ-Плюс», 2008. – 224 c.
9. Ломов, С.П. Цветоведение: / С.П. Ломов, С.А. Аманжолов. – Москва:
Владос, 2018. – 153 с.: ил. – (Изобразительное искусство). – Режим доступа: по
66
подписке. – URL: http://biblioclub.ru/index.php?page=book&id=264038 (дата
обращения: 27 марта.2020). – Библиогр. в кн. – ISBN 978-5-907101-27-2. – Текст:
электронный.
10. Макнейл П. «Веб-дизайн. Идеи, секреты, советы», – СПб.: Издатель
«Питер»; 2012. – 272 с.
11. Роббинс Д. «Web-дизайн. Справочник», – СПб.: Издатель «КУДИЦ-
ПРЕСС», 2008. – 816с.
12. Сырых, Ю. «Современный веб-дизайн. Настольный и мобильный» – М.:
Издатель «Диалектика», 2019. – 384 c.
13. Уэйншенк, С. «Интуитивный веб-дизайн», – М.: Издатель «Эксмо», 2011.
– 160 c.
14. Якоб Нильсен «Веб-дизайн», – СПб.: Издатель «Символ-Плюс»; 2003. –
512 с.
15. Якоб Нильсен, Хоа Лоранжер «Web-дизайн: удобство использования Web-
сайтов = Prioritizing Web Usability», – М.: Издатель «Вильямс», 2007. – 368 с.
Электронные источники
16. Статья «10+ трендов веб дизайна 2020» [электронный ресурс] ‒ Режим
доступа: ‒ URL: https://www.templatemonster.com/blog/ru/trendy-veb-dizajna-
2020/ (дата обращения 21 марта 2020)
17. Статья «Веб-дизайн и основные стили сайтов» [электронный ресурс] ‒
Режим доступа: ‒ URL: http://www.webmarketinglist.ru/view_article.html (дата
обращения 24 марта 2020)
18. Статья «Визуальная иерархия» [электронный ресурс] ‒ Режим доступа: ‒
URL: https://uxgu.ru/visual-hierarchy/ (дата обращения 26 марта 2020)
19. Статья «Визуальная иерархия сайта» [электронный ресурс] ‒ Режим
доступа: ‒ URL: https://tilda.education/articles-visual-hierarchy (дата обращения
22 апреля 2020).
67
20. Статья «История музея имени Андрея Рублева» [электронный ресурс] ‒
Режим доступа: ‒ URL: https://rublev-museum.ru/about/history-of-the-museum/
(дата обращения 20 марта 2020)
21. Статья «Как сделать сайт удобней: юзабилити» [электронный ресурс] ‒
Режим доступа: ‒ URL: https://pro-wordpress.ru/poleznoe/kak-sdelat-sajt-udobnee-
yuzabiliti.php (дата обращения 22 апреля 2020).