18
Мягкие тени и паралакс позволяют ненавязчиво добавить сайту
глубины и интерактивности, что придаст сайту больший интерес в глазах
пользователя.
Сочетание векторной и растровой графики зачастую является
ключевым в современных сайтах, так можно улучшить понимание или изменить
настроение присущее странице сайта, а также оживить и разнообразить.
Сегодня дизайнеры экспериментируют с различными способами
использования пустого пространства (фактически это пространство любого
цвета, и не только белого цвета). Обрамляя элемент дизайна большим
количеством негативного пространства, мы делаем акцент на этом элементе. В
те же время, такой дизайн остается чистым и не перегружен деталями.
2
Минимализм в навигации так же присущ многим современным
сайтам и позволяет не перегружать шапку излишними элементами, а порой и
полностью скрывать их за кнопкой – «бургером».
1.3 Виды веб-сайтов
В большинстве своем веб-сайты можно разделить на следующие
категории:
1. Личный сайт – подобный тип веб-сайта представляет собой небольшой
по объему (несколько страниц) пласт информации, заключающейся в
размещении резюме, портфолио, либо небольшого блога, содержащего
периодически добавляемые или обновляемые данные в виде статей,
изображений или мультимедиа.
2. Сайт-визитка – подобные сайты обычно используются для
предоставления какой-либо контактной информации касательно компании или
частного лица, также возможно присутствие краткого описания
предоставляемых услуг или товаров.
2
Статья «10+ трендов веб дизайна 2020» [электронный ресурс] ‒ Режим доступа: ‒ URL:
https://www.templatemonster.com/blog/ru/trendy-veb-dizajna-2020/ (дата обращения 21 марта 2020) [16]
19
3. Интернет-магазины – это сайты, по сути, являющиеся каталогами
разнообразных товаров с возможностью просмотра информации о товаре,
функции покупки. Так же имеется контактная информация, часто возможность
связаться с операторами при возникновении вопросов.
4. Лэндинг (сайт-одностраничник) – это веб-страница, цель которой –
максимально эффективно продать товар или услугу. Лэндинг обычно
оформляется очень красиво, чтобы привлечь внимание и заставить пользователя
купить предлагаемое.
5. Информационный сайт (корпоративный сайт) – это структурированный
массив информации, включающий в себя множество разделов с различными
функциями или тематиками. Основной задачей подобных сайтов является
обеспечение пользователей сайта информацией.
6. Сайт-блог – подобный сайт представляет из себя набор статей,
написанных на определенную тематику одним или несколькими авторами. В
большинстве случаев подобные сайты можно также отнести к числу личных-
сайтов.
Безусловно, видов веб-сайтов значительно больше, однако
представленные выше являются основными в деятельности веб-дизайнеров и
разработчиков.
1.4 Построение сайта, его навигация, удобство пользования
Одним из главных элементов разрабатываемого дизайна сайта является
его визуальная иерархия.
Иерархия – положение частей или элементов чего-либо в порядке от
высшего к низшему.
Визуальная иерархия на сайте – это организация и оформление
информации таким образом, чтобы посетитель мог быстро разобраться с
интерфейсом сайта и отличить главное от второстепенного.
3
3
Статья «Визуальная иерархия сайта» [электронный ресурс] ‒ Режим доступа: ‒ URL:
https://tilda.education/articles-visual-hierarchy (дата обращения 22 апреля 2020). [18]
20
Для хорошо продуманной визуальной иерархии на сайте необходимо
пройти несколько шагов:
1. Выделите уровни иерархии контента;
2. Выберите приемы визуальной иерархии контента – с помощью чего
будут сделаны акценты на главном.
Необходимо определить те линии, по которым будет двигаться взгляд
пользователя, F или Z. Для блогов и сайтов-магазинов чаще всего используется
модель F, а для лэндингов – Z (рис. 1.5). Исходя из выбранной модели и стоит
располагать свой контент в необходимом порядке.
Рис. 1.5. Основные модели F и Z просмотра web-страниц
Для создания иерархии контента можно использовать множество
способов выделения: размер, цвет, шрифты, пустое пространство и т.д.
Навигация сайта разрабатывается в виде иерархического древа,
называется «картой сайта», где страницы статей собираются в рубрики, которые
в свою очередь входят в те или иные разделы сайта. В данные разделы можно
попасть из меню сайта. Для большего удобства необходимо таким образом
разработать иерархию, чтобы пользователь мог интуитивно понять куда ему
нужно перейти для того чтобы попасть на необходимую ему статью или
страницу.
Высокого удобства использования сайта (юзабилити) можно достичь,
используя следующие принципы:
21
Правило 2-х секунд. Данное правило заключается в том, что не
следует перегружать страницу информацией настолько что страница будет
загружаться у пользователя дольше 2-х секунд (данное значение условно). Чем
выше скорость загрузки сайта и каждой страницы, тем лучше.
Правило 3-х кликов. Так же в основном относится к меню и означает
что посетителю с момента попадания на главную страницу до выполнения,
желаемого им действия должно понадобиться не более 3-х кликов. Значение 3
весьма условно.
Перевёрнутая пирамида. Согласно данного правила основная или
ключевая информация должна располагаться в начале страницы, для понимания
ценности информации пользователем с первых секунд. Если ничего
необходимого ему не бросится в глаза сразу же, посетитель, скорее всего всего,
уйдет искать другой источник.
Правило семи сущностей. Кратковременная память человека может
в среднем удерживать 7 сущностей (от 5 до 9). К таким результатам привели
проведенные Джорджем Миллером исследования на счет способности
человеческого мозга воспринимать и обрабатывать полученную
информацию. На практике данное правило применяется следующим образом: в
списке пунктов меню не следует делать количество, превышающее 9. Если сайт
содержит очень много блоков информации, то их можно сократить или
переместить их на уровень ниже.
Правило Паретто. 20% действий реализуют 80% общего эффекта. В
контексте юзабилити сайта примером применения этого закона может быть
выявление 20% постоянных пользователей вашего ресурса. Ведь именно эта
группа составляет основу аудитории проекта, и, согласно правилу, совершает
80% целевых действий.
4
Принцип логичности структуры. На странице все должно
подчиняться общей структуре, должна быть обозначена единая иерархия. Не
4
Статья «Как сделать сайт удобней: юзабилити» [электронный ресурс] ‒ Режим доступа: ‒ URL:
https://pro-wordpress.ru/poleznoe/kak-sdelat-sajt-udobnee-yuzabiliti.php (дата обращения 22 апреля 2020). [20]
22
стоит размещать лишнюю и неуместную информацию на странице без веской
необходимости.
Эффект неопределенности, недосказанности. Исследования
психолога Б. Зейгарник показывают, что человек не любит неопределенности и
недосказанности. Оборвавшаяся информация пробуждает любопытство и
заставляет искать недостающий фрагмент. В итоге, человек лучше запоминает
такую информацию. Таким образом на главной странице вы можете
расположить анонс статьи – короткий фрагмент, который пользователь прочтет,
перейдя на полную версию статьи.
Для оценки удобства использования сайта, часто методом фокус-групп,
используют следующие параметры:
1. Ориентирование. То с какой легкостью среднестатистический
пользователь находит необходимую информацию и совершает нужные действия
для получения результата.
2. Эффективность. Как быстро человек может совершить нужные ему
действия и ориентироваться в информации сайта.
3. Запоминаемость. Насколько просто пользователь может совершить
необходимые ему действия после длительного отсутствия на сайте.
4. Ошибочность. Насколько много ошибок совершает пользователь для
получения необходимого результата и насколько легко устранить их
последствия.
5. Удовлетворённость. Какого общее впечатление пользователя от
использования сайта.
1.5 Исследование объекта проектирования
Музей древнерусской культуры и искусства имени Андрея Рублева в свой
деятельности выполняет такие основные задачи, как сбор, хранение, изучение
различных произведений, а также реставрационные работы над экспонатами
музея.
23
Музей ведет свою безусловно богатую историю с 10 декабря 1947 года,
когда по постановлению правительства, он был учрежден с инициативы
Барановского П. Д. Сам музей был открыт 21 сентября 1960 года насчитывая 317
памятников. На сегодняшний день благодаря многочисленным экспедициям,
приобретениям, а также ценным дарам на музейном хранении находится около
13 тысяч предметов, включая иконы, произведения декоративно-прикладного
искусства, оригиналы и копии фресок, рукописные и старопечатные книги,
памятники археологии.
5
Сохранение, собирание, изучение, показ и популяризация русского
художественного наследия – главные цели музея.
Сайт музея выполняет такие функции как ознакомление пользователя с
экспозицией, календарем выставок, лекций, мастер классов и других событий,
предоставляет данные о расценках различных абонементов, дает краткую
информацию по иконам, содержит в себе статьи, написанные сотрудниками
музея и обладающие высокой культурной ценностью.
1.6 Айдентика
Айдентика организаций является важной частью визуального
представления компании. Баннеры, листовки, буклеты, сувенирная продукция и
порой оформление помещения выполняется в фирменном стиле компании.
К фирменному стилю можно отнести такие графические элементы, как
логотип, фирменный шрифт, а также цветовые сочетания.
Логотип музея имени Андрея Рублева представляет из себя лигатуру,
исполненную в русском старославянском стиле алфавита из букв М, и, А, Р,
которые представляют из себя аббревиатуру названия музея имени Андрея
Рублева (рис. 1.6). Данный логотип способен выполнять функцию, как
дополнения к названию, так и обособленного элемента оформления.
5
Статья «История музея имени Андрея Рублева» [электронный ресурс] ‒ Режим доступа: ‒ URL: https://rublev-
museum.ru/about/history-of-the-museum/ (дата обращения 20 марта 2020) [19]
24
Рис. 1.6. Логотип музея имени Андрея Рублева, его составляющие
К фирменным цветам относится красный цвет (рис. 1.7) используемый в
фирменном знаке компании, но так е имеет возможность быть используем и в
других элементах фирменного стиля.
Рис. 1.7. Фирменный цвет, используемый в айдентике музея имени
Андрея Рублева
Шрифтом, используемым в оформлении названия музея и в других
элементах визуального оформления, является семейство шрифтов Pragmatica
(рис. 1.8).
25
Рис. 1.8. Шрифт Pragmatica Regular, используемый в айдентике
музея имени Андрея Рублева
1.7 Исследование аналогов, цветовых концепций
В качестве аналогов разработки визуально-графической концепции веб-
сайта были выбраны несколько московских музеев, связанных по схожей
тематике музейно-храмовой деятельности и культурно-религиозной
направленности основной экспозиции.
Сайт Музея Московского Кремля (рис. 1.9):
https://www.kreml.ru/museums-moscow-kremlin/
Рис. 1.9. Скриншот сайта Музея Московского Кремля
26
Логотип Музея Московского Кремля представляет из себя название,
выполненное в легком шрифте с засечками, слова которого расположены в три
строки и выравненные по центру.
На сайте используется два семейства шрифтов Circe – для заголовков и
Calibri – для основного текста, в разных начертаниях, кегль основного шрифта –
14 px, для заголовков – 24 px.
Фоном сайта является белый цвет, который контрастно отделяется от
шапки и футера оформленных в кобольтово-синем цвете.
Синий цвет обладает мощью, подобной силам природы зимой, когда всё,
скрытое в темноте и тишине, копит энергию для зарождения и роста. Синий
всегда производит впечатление тени, а в зените своего великолепия стремится к
темноте. Синий – это неуловимое ничто, которое всё же постоянно присутствует
как прозрачная атмосфера. В земной атмосфере синий цвет разлит, начиная от
светлейшей небесной лазури до глубочайшей синей черноты ночного неба.
Синий привлекает нас трепетностью веры в бесконечную духовность. Для нас
синий цвет – символ веры, как для китайцев он – символ бессмертия.
6
На сайте кроме белого и кобольтово-синего используются также,
контрастный шапке, бежевый цвет (рис. 1.10) для выделения элементов
интерфейса, а также навигационных кнопок.
6
Иттен И. «Искусство цвета», ‒ М.: Изд.: Издатель «Д. Аронов»; 2018. – 96 с. [7]
27
Рис. 1.10. Айдентика сайта Музея Московского Кремля
На главной странице расположены такие информационные блоки, как
непосредственно шапка, слайдер в котором располагается актуальная
информация музея в виде изображений-баннеров, новостная колонка, а также
статьи, которые могут заинтересовать посетителя посетить музей.
Навигация на сайте представлена в шапке сайта следующими
страницами-рубриками: Главная, О музеях, Посетителям, Выставки, Наука,
Образование, Пресс-центр, Музейный магазин, а так же страницами покупки
билетов, календаря событий, партнеров, медиа и контактов музея.