28
Сайт Музейно-выставочного комплекса Новый Иерусалим (рис. 1.11):
https://njerusalem.ru/
Рис. 1.11. Скриншоты сайта Музейно-выставочного комплекса
Новый Иерусалим
Логотип Музейно-выставочного комплекса Новый Иерусалим выглядит,
как фирменный блок состоящий из знака-крыла и текстовой части набранной
гельветикоподобным шрифтом.
Текстовая часть сайта представлена семейством шрифтов MyriadPro в
следующих кеглях: основной шрифт – 16 px, заголовки варьируются в пределах
от 18 до 36 px.
В цветовой гамме сайта превалирует бордовый цвет, резко
контрастирующий с белым цветом фона, на котором некоторые блоки выделены
плашками цвета мокрого асфальта (рис. 1.12).
29
В пурпурно-красном – цвете кардиналов – объединена светская и
духовная власть.
7
Рис. 1.12. Айдентика сайта Музейно-выставочного комплекса
Новый Иерусалим
На главной странице последовательно расположены главный экран –
слайдер со ссылками на актуальные статьи сайта, афиша, новости музея, блок
случайного экспоната, выставки и выступления на сцене, после чего идет блок,
включающий в себя контакты музея, интерактивную карту проезда и список
партнеров, футер.
Навигация на сайте представлена в шапке сайта следующими
наименованиями с выпадающими списками страниц-рубрик: Музей,
Посетителям, Выставки, Экскурсии, Мероприятия, Детский центр и Контакты.
7
Иттен И. «Искусство цвета», ‒ М.: Изд.: Издатель «Д. Аронов»; 2018. – 96 с. [7]
30
Сайт Музея русской иконы (рис. 1.13):
http://new.russikona.ru/
Рис. 1.13. Скриншот Музея русской иконы
Логотип Музея русской иконы представляет из себя название в три строки
выполненным древнерусским шрифтом, сами строки не имеют какое-либо
выравнивание.
На сайте используется семейство шрифтов HelveticaNeueCyr. Для
основного текста используется кегль 14 px, для заголовков – 24 px.
В цветовой концепции данного сайта можно увидеть главенство белого
цвета фона, мятно-бирюзового для выделения некоторых элементов и темно
серый в шапке для меню и других элементах (рис. 1.14).
Если зелёный принимает синий оттенок, то это приводит к увеличению
его духовной значимости.
8
8
Иттен И. «Искусство цвета», ‒ М.: Изд.: Издатель «Д. Аронов»; 2018. – 96 с. [7]
31
Рис. 1.14. Айдентика сайта Музея русской иконы
На главной странице можно увидеть такую структуру: шапка сайта, блок
новостей и футер.
Функцию навигации на сайте выполняет шапка с представленными на ней
страницами-рубриками: Коллекция, События, О музее, Научная деятельность,
Посетителям, Медиа, Виртуальный тур.
1.8 Целевая аудитория
Перед разработкой графической концепции веб-сайта требуется выяснить
целевую аудиторию проекта, их основные требования к сайтам. Постоянными
посетителями являются группы учащихся школ, дизайнеры, студенты
профильных и смежных вузов, современные художники и реставраторы,
любители русского декоративного искусства.
Также следует учитывать, что в музее есть не только основная
экспозиция, но и проводится множество иных мероприятий, таких как: игровые
мероприятия для детей, премьерные выставки книг, мастер-классы, лекции и т.д.
Для понимания требований к сайту целевой аудитории были созданы три
вымышленных персонажа с их особенностями и пожеланиями для удобного
пользования разрабатываемым веб-сайтом (см. табл. 1).
32
Таблица 1
Портреты целевой аудитории сайта музея имени Андрея Рублева
ФИО
Евгения
Никитична
Махрова
Валерия
Федоровна
Бажедук
Никифор
Геннадиевич
Шугалов
Возраст
28 лет
72 года
44 года
Социальный
статус
Молодой
реставратор
Пенсионерка
Учитель в
средней школе
Ценности
Ценит свое
время
Любит ходить на
различные
выставки,
посвященные
иконам и
картинам,
написанным в
древности, ходит
на различные
мастер-классы
Любит своих
воспитанников,
просвещает их
на тему русской
культуры
Что
обязательно
Простота
навигации и
возможность
быстро найти
нужную
информацию,
возможность
связаться с
оператором при
помощи
специальной
формы
Большой и
контрастный
шрифт,
возможность
приблизить
интересующие
иконы
Возможность
оперативно
узнавать о
планируемых
выставках и
расценках на
посещение
группой
Типичные
проблемы
Сложность в
нахождении
определенного
произведения
искусства,
сложность связи
с операторами
по телефону
Слишком
маленький
шрифт не
читается из-за
плохого зрения
Слишком поздно
узнавать о
проходящих
выставках
33
Пожелания
Сайт должен
быть легким и в
тоже время
подчеркивать
важность икон и
других
представленных
произведений
искусства.
Возможность
легко найти
информацию о
выставках, датах
и ценах на их
посещение
Удобный для
чтения шрифт на
контрастном
фоне, большие
иллюстрации для
наглядного
представления в
классе
1.9 Вывод
Проанализировав историю сайтостроения и разные виды веб-сайтов,
можно прийти к выводу, что для разрабатываемой графической концепции
подходит информационный (корпоративный) сайт, в котором свое место найдут
все необходимые элементы структуры сайта.
Были исследованы принципы необходимые для создания удобного
дизайна сайта.
Исследован объект проектирования – Музей древнерусской культуры и
искусства имени Андрея Рублева, а также его айдентика, на основе которой
будет разрабатываться графическая концепция web-сайта.
Таким образом можно понять, что единой цветовой гаммы у сайтов-
аналогов нет, однако в следствии изучения можно увидеть и схожие визуальные
элементы такие как:
Привлекающий внимание главный экран;
Анонсы статей, которые могут заинтересовать пользователя сайта;
Большая часть контента скрыта в меню сайта, но пользователю
интуитивно понятно на что нажать для получения результата.
При исследовании аналогов сайтов различных музеев схожей тематики
был сделан вывод, что эти сайты в своей основе несут не какой-то определенный
стиль присущий данной сфере, а свой собственный фирменный стиль присущий
каждой компании.
Получив определенный список проблем и пожеланий целевой аудитории,
можно выяснить, что к сайту предъявляется следующий список требований:
34
удобочитаемый шрифт, большие иллюстрации с возможностью увеличения,
удобная навигация и окно быстрой связи с одним из операторов музея для
перенаправления на интересующий отдел.
35
2. ПРОЕКТНО-ГРАФИЧЕСКАЯ ГЛАВА
2.1 Проектирование структуры сайта музея Андрея Рублева
Разработка графической концепции web-сайта подразумевает
прохождение следующих важных этапов проектирования сайта:
Создание брифа работы при участии заказчика;
Создание ментальной карты;
Разработка структуры сайта и определение наполнения страниц
контентом;
Разработка мудборда;
Эскизирование и поиск графических идеи и визуальной
структуризации композиции проекта;
Создание макета страниц с использованием графических программ,
показывающие ключевые элементы структуры, без добавления контента;
Разработка элементов интерфейса: иконок, информационных
блоков, вспомогательных элементов.
Заполнение разработанных макетов страниц контентом;
Правки.
Определив перечень работ, с руководителем организации был составлен
бриф на разработку графической концепции web-сайта, в которой расписана
целевая аудитория, ее пожелания и необходимые элементы дизайна (табл. 2).
36
Таблица 2
Бриф
Название компании
Музей древнерусской культуры и искусства
имени Андрея Рублева
Целевая аудитория
Группы учащихся школ, дизайнеры, студенты
профильных и смежных вузов, современные
художники и реставраторы, любители русского
декоративного искусства
Целевые
платформы
Компьютеры и смартфоны
Цвета
Светлые тона и фирменные цвета
Требования
Удобочитаемый шрифт, большие иллюстрации с
возможностью увеличения, удобная навигация
Ментальная карта – это способ структурирования информации, в виде
древовидной системы, включающая в себя такие аспекты как психология,
мнемоника и нейролингвистика человека. При помощи ментальных карт
происходит создание множества ассоциативных рядов и получения интересных
дизайн-концепций на их основе.
Для формирования идеи и структурирования имеющейся информации
была составлена ментальная карта (рис. 2.1-2.2).
37
Рис. 2.1. Ментальная карта разрабатываемого проекта
Рис. 2.2. Ментальная карта дизайна элементов интерфейса