38
Структура сайта – это система расположения страниц web-сайта по
определенной логически сформированной схеме, так же обозначающей
иерархию страниц на сайте, их расположение и принадлежность к другим
элементам «древа».
В вопросе формирования структуры web-сайта необходимо определить
логику поведения пользователя на ресурсе. При правильно созданной структуре
пользователь сможет с минимумом усилий найти необходимую информацию и
переходить от одной страницы на другую.
Существует несколько видов структур web-сайтов:
1. Простая структура, представляет из себя главную страницу от
которой отходят все остальные, со схожей тематикой и наполнением. Подобный
тип чаще всего используется в сайтах-портфолио (рис. 2.3).
Рис. 2.3. Схема простой структуры расположения страниц сайта
2. Древовидная структура, является наиболее распространенной на
данный момент. Представляет из себя многоуровневую систему «ветвей»,
отходящих от главной страницы и имеющие под собой дочерние элементы
системы (рис. 2.4).
39
Рис. 2.4. Пример карты сайта с древовидной структурой страниц
3. Нетипичная структура. Сама идея нарушения норм, установления
новых шаблонов и создания по-настоящему свежо выглядящих сайтов
предполагает экспериментирование дизайнеров с альтернативными подходами к
системе навигации. В силу многочисленности подобных экспериментов их
результатом часто становятся странные и непрактичные решения. Однако в
процессе экспериментирования также могут обнаружиться подходы, которые
позволят сделать сайт не только более интересным, но и более удобным в
использовании.
9
Исходя из логики поведенческих рефлексов пользователя можно
предложить следующую структуру. Главная страница, из меню которого
пользователь попадает в компоненты нижестоящего порядка: Афиша,
Коллекция, Статьи, О нас, Контакты, которые в свою очередь имеют свои
дочерние элементы. Таким образом карта web-сайта выглядит следующим
образом (рис. 2.5).
9
Макнейл П. «Веб-дизайн. Идеи, секреты, советы», – СПб.: Издатель «Питер»; 2012. – 272 с. [10]
40
Рис. 2.5. Карта разрабатываемого web-сайта музея имени Андрея
Рублева
Восприятие - это своего рода тропинка, которой пользователь
придерживается при визуальном ознакомлении с элементами дизайна. Оно
главным образом зависит от того, на чем дизайнер сделал акцент и в какой мере
он обеспечил контрастирование элементов между собой. Фактически удобство
восприятия всецело будет зависеть от того, как дизайнер скомпоновал все
элементы страницы.
10
10
Макнейл П. «Веб-дизайн. Идеи, секреты, советы», – СПб.: Издатель «Питер»; 2012. – 272 с. [10]
41
На главной странице располагаются такие информационные блоки, как
первый экран-слайдер, новостная лента, перечень партнеров музея, контактная
информация, а также схема проезда на карте, форма подписки на рассылку
новостей музея, а также элементы одинаковые для всех страниц сайта шапка с
меню, ведущим на другие страницы сайта, и подвал.
На новостной странице музея необходимо место расположения
изображения или серии изображений с возможностью их увеличения, и
сопроводительного текста произвольного объема.
К странице-афише выдвигаются следующие требования: наличие
интерактивного календаря, с отмеченными на нем типами событий, такими как
выставки, лекции, концерты и др. А также краткой сводкой по мероприятиям и
цене на билеты при выборе дня. Так же на данной странице необходима строка
поиска, позволяющая найти определенное мероприятие по названию, как
предстоящее, так и прошедшее.
Страница коллекций содержит в себе поисковую строку и миниатюры
экспонатов, отправляющие на страницу экспоната содержащую в себе название,
краткое описание и изображение.
Статьи содержат в себе статьи и публикации работников музея и
представляет из себя страницу-список, с возможностью прочтения необходимой
статьи.
Страница «О нас» содержит в себе информацию о структуре музея,
историческую справку, концепцию развития, различную документацию и статьи
СМИ о музее.
Контакты включают в себя интерактивную карту проезда к музею, часы
работы музея и некоторых отделов, а также контактную информацию и ссылки
на все социальные сети.
Предваряя дальнейшую разработку структуры страниц web-сайта
необходимо определиться с видом сетки. В веб-дизайне выделяют следующие
виды:
42
Блочная сетка – это размещение композиции макета при помощи
блоков.
Колоночная сетка – такой тип подразумевает использование
одинаковых по своим параметрам колонок.
Модульная сетка – состоит из пересекающихся прямых
(направляющих), которые образуют модули.
Иерархичная сетка – данный вид подразумевает интуитивное
расположение блоков, не привязанных к размеру и положению на макете.
Для удобного создания макета как для мониторов различного
разрешения, так и для смартфонов, наиболее предпочтительна модульная сетка
bootstrap, состоящая из двенадцати колонок (рис 2.6).
Рис. 2.6. Сетка bootstrap и варианты расположения блоков
2.2 Разработка серии эскизов графического решения веб-сайта музея
имени Андрея Рублева
Рассмотрев аналоги сайтов партнеров, а также айдентику музея имени
Андрея Рублева, была произведена разработка мудборда (рис 2.7).
Мудборд – это подборка изображений, графических элементов и
шрифтов, вдохновляющих на создание дизайн-концепции или позволяющая
43
показать видение дизайнера на разрабатываемый сайт заказчику, на основе
различных цветов, графических элементов и решений.
Рис. 2.7. Мудборд
Исходя из проведенного ранее исследования целевой аудитории и
заказчика, их предпочтений и пожеланий к составляющим web-сайта, была
начата разработка визуально-графической структуры страниц, а также
отдельных элементов интерфейса, таких как шапка, оформление меню, блока
новостей, календаря, в виде эскизов, выполненных на бумаге (рис 2.8).
Рис. 2.8. Эскизы
44
Первичная структура страниц на примере эскизов была согласована с
руководством. После внесения необходимых правок было принято решение
переходить к этапу разработки структуры странице в программе на основе
эскизов.
В программе для создания дизайна сайтов и приложений Figma был
разработан макет сайта показывающий структурное расположение
информационных блоков на главной странице (рис 2.9).
Рис. 2.9. Макет структуры главной страницы сайта
Располагая информационные блоки необходимо ориентироваться на
логическую обоснованность выбранного расположения, а также не нарушать
визуальную иерархию страницы.
Иерархия в веб-дизайне делится на несколько типов: типографическая и
визуальная.
Для более полного понимания типографической иерархии необходимо
подробно остановиться на следующих понятиях.
45
Типографика – это ряд правил и норм оформления текстовых блоков и
строк, основанная на изучении восприятия текста пользователем.
Гарнитура – шрифт или семейство шрифтов, имеющие в своей основе
стилистическое единство начертания.
Гарнитуры в свою очередь делятся на антикву – шрифты с засечками, и
гротеск – шрифт без засечек.
Кегль — высота буквы, включающая в себя нижние и верхние выносные
элементы. Измеряется в типографских пунктах (обозначается как pt).
Типографическая иерархия включает в себя самые различные текстовые
элементы, к которым относятся заголовки, подзаголовки, основной текст и
другие. Все эти элементы необходимо расположить по нисходящей иерархии.
Первый уровень (H1), представляет из себя самый крупный текст на
странице, к ним относятся заголовки и призывы к действию.
Второй уровень (H2) – это подзаголовки и аннотации к статьям.
Третий уровень (H3). Данный уровень состоит из основного текста,
которым набирается основная часть статей и текстовых элементов интерфейса
сайта. В веб-дизайне сайтов не следует делать основной текст меньше 12 pt,
лучшим вариантом является кегль в пределах от 14 до 18 pt. Также к основному
тексту предъявляют такие требования как правильно подобранный интерлиньяж
или межстрочное расстояние, которое не должно быть слишком большим или
маленьким. В большинстве случаев интерлиньяж следует сделать равным 150%
размера шрифта.
При правильном разделении текстовых элементов по иерархическим
уровням пользователю становится комфортно перемещаться между частями
текста, воспринимая информацию в правильном порядке.
К визуальной иерархии относят:
46
Размер. Человек, подсознательно, рассматривает большие элементы,
как более важные. Поэтому, в первую очередь, люди автоматически смотрят на
большие слова, или изображения.
11
Цвет. При помощи ярких цветов можно привлечь внимание к
определенному элементу интерфейса, сделав его доминирующим. Так же при
помощи изменения яркости и насыщенности цветом можно создать
многоуровневую систему, позволяющую привлечь внимание к элементам в
необходимой последовательности.
Контраст. Контрастные элементы привлекают наибольшее внимание
пользователя.
Негативное, или белое пространство — это незанятая область между
элементами. Правильно используя его можно добиться необходимого
впечатления о прочих элементах интерфейса.
Принцип близости. Поскольку люди склонны объединять
визуальные элементы в группы, элементы интерфейса необходимо располагать
таким образом, чтобы пользователь мог разделить их на определенные
категории. Так, например, если несколько блоков размещены на одинаковом
расстоянии друг от друга, то пользователь воспримет их как единую группу из
нескольких объектов.
Учитывая все вышеперечисленные аспекты управления иерархией на
странице, главная страница делится на следующие логические информационные
блоки, которые в свою очередь различаются по контенту, но в свою очередь сами
имеют определенную иерархию:
Главный экран сайта: шапка, состоящая из логотипа и меню, а также
слайдер с названием музея;
Новости: 4 блока новостей и кнопка, ведущая на все новости музея;
Партнеры музея;
11
Статья «Визуальная иерархия» [электронный ресурс] ‒ Режим доступа: ‒ URL: https://uxgu.ru/visual-hierarchy/
(дата обращения 26 марта 2020) [18]
47
Контактная информация и карта проезда к музею от ближайшего
метро, кнопки социальных сетей;
Форма подписки на новости музея;
Подвал.
2.3 Разработка элементов графической концепции веб-сайта музея
имени Андрея Рублева
В качестве фона сайта было решено использовать белый цвет с
добавлением на правой части не отвлекающего внимание полупрозрачного
графического элемента – логотипа музея имени Андрея Рублева.
К элементам графической концепции web-сайтов относятся:
Вкладки, являющиеся одним из основных средств упорядочивания
содержимого сайта, также позволяющее понять пользователю иерархию тех или
иных информационных групп. Чаще всего используются в меню сайта.
Кнопки, позволяющие выполнять различные действия на сайте как
изменение состояния различных объектов, так и обеспечивающие перемещения
на другие страницы.
Элементы управления или формы, к ним относят текстовые поля,
переключатели состояний, «флаги», раскрывающиеся списки и т.д.
Цветовая концепция сайта включает в себя фирменный бордовый цвет,
белый и несколько градаций серого (рис 2.10).
Рис. 2.10. Цвета, используемые в проекте