48
Шапка сайта включает в себя меню, логотип, кнопки социальных сетей и
переключение языков (рис 2.11).
Рис. 2.11. Блок новостей сайта
Блок новостей включает в себя такие элементы, как иллюстрация, дата
публикации, заголовок статьи, краткий анонс и кнопку перехода на страницу
полной статьи (рис 2.12).
Рис. 2.12. Блок новостей сайта
Слайдер изображений внутри статей, используемый если длинна статьи
не позволяет расположить больше двух изображений в вертикально
ориентированном ряду (рис 2.13).
Слайдер – это специализированный элемент веб-дизайна, который
представляет из себя информационный блок определенной ширины и высоты,
располагаемый чаще всего в шапке веб-страницы. Функциональное его
особенностью является изменение в блоке элементов в ручном или
автоматическом режиме – картинок, текстов или ссылок.
49
Рис. 2.13. Слайдер изображений
Календарь событий разработан с учетом того что в один и тот же день
может происходить несколько типов событий таких, как выставки, лекции,
концерты и др. (рис 2.14).
Рис. 2.14. Календарь событий
Все разработанные элементы оформления интерфейса сайта с вариантом
заполнения контентом представлены на изображении (рис 2.15).
50
Рис. 2.15. Разработанные элементы интерфейса сайта
При разработке элементов интерфейса использовался фирменный шрифт
Pragmatica, в дополнение к которому был добавлен шрифт HelveticaNeueCyr, как
один из наиболее подходящих для web-сайтов (рис 2.16, 2.17).
Для основного текста выбрано семейство шрифтов HelveticaNeueCyr в
начертании Roman с оптимальным для чтения текста кеглем 16 pt. Интерлиньяж
в текстовых блоках составляет 22 pt.
Заголовки статей и некоторые элементы интерфейса – HelveticaNeueCyr с
начертанием Light и кеглем 18 pt. Интерлиньяж в текстовых блоках заголовков
составляет 23 pt.
Некоторые элементы интерфейса такие как, например, кнопки и
разделители информационных блоков представлены фирменным шрифтом
организации музея имини Андрея Рублева – Pragmatica Bold 28 кегля.
Названия страниц и заголовки статей выполнены шрифтом Pragmatica
Bold 48 кегля. Интерлиньяж в заголовках составляет 64 pt.
51
Рис. 2.16. Используемые шрифты
Рис. 2.17. Используемые гарнитуры и начертания шрифтов
2.4 Разработка графической концепции веб-сайта с учетом адаптивной
верстки
С использованием всех разработанных элементов интерфейса, а также
модульной сетки bootstrap в программе Figma были разработаны страницы сайта
для разрешения экрана 1920 на 1080 p (рис 2.18).
Рис. 2.18. Дизайн страниц сайта в программе Figma
52
Адаптивная верстка подразумевает возможность использования одного
дизайна сайта на совершенно различных устройствах. На текущий момент
можно выделить три типа адаптивного дизайна сайтов:
1. Адаптивный макет. Проект сайта создается на основе нескольких
макетов, фиксированных для стандартных размеров экранов и переключаемых в
зависимости от разрешения устройства.
Подобный тип макета создается при помощи реструктуризации. При
помощи этого метода дизайнеры могут разрабатывать макеты для наилучшего
отображения на каждой из платформ с конкретной средой, такой как мобильное
устройство с сенсорным управлением или гибридное устройство с сенсорным
экраном или компьютер с мышью и клавиатурой (рис 2.19).
Рис. 2.19. Реструктуризация при разработке адаптивного макета
2. Отзывчивый макет. При таком подходе создается проект сайта с
гибкой модульной сеткой. Размер блоков при подобном варианте задается в
процентах от размера используемого экрана. Для такого дизайна не имеет
значения, открыт сайт на мобильном устройстве или на компьютере 16:9, 4:3 или
широкоформатных вариантах.
К методам разработки отзывчивого макета относятся:
Изменение структуры проекта: подразумевается перемещение
информационных блоков под подходящий размер экрана. Таким образом если на
53
компьютере некоторые блоки могут располагаться на горизонтальной оси
относительно друг друга, при определенной вертикализации экрана эти блоки
перемещаются и начинают находиться друг под другом, все еще не нарушая
общей структуры построения проекта;
Изменение размеров элементов дизайна: некоторые элементы
дизайна такие как текстовые блоки, изображения, графические элементы
оформления web-сайта и др. при необходимости могут менять свои размеры
относительно других элементов дизайна интерфейса или всего рабочего
пространства – экрана;
Скрытие элементов интерфейса: часто в мобильной версии
скрываются те элементы, которые не обязательны для постоянного видения
пользователем. К ним можно отнести пункты меню, которые можно скрыть под
кнопкой-«бургером», или блоки новостей, оставив 2-3 новости, скрыть все
остальные под кнопкой «Другие статьи» или «Больше статей».
3. Смешанный макет. Данный вариант подразумевает возможность
использования как гибких элементов, так и фиксированных. Данный вариант
подразумевается в случае желания сделать макет web-сайта максимально
эффективным на всех доступных платформах. Это повышает уровень юзабилити
проекта за счет индивидуального управления каждым вариантом экрана, а также
дает плюсы обоих предыдущих вариантов.
Таким образом для разрабатываемого проекта был разработан
отзывчивый макет, подходящий под большее количество устройств, чем
адаптивный вариант (рис 2.20 – 2.22).
54
Рис. 2.20. Дизайн страниц сайта в программе Figma: вид для
экранов компьютера 16:9
Рис. 2.21. Дизайн страниц сайта в программе Figma: вид для
планшетов
55
Рис. 2.22. Дизайн страниц сайта в программе Figma: вид для
смартфонов
Для рекламы разрабатываемого проекта, а также последующего
распространения информации о предстоящих и действующих мероприятиях был
разработан дизайн web-баннеров.
Баннер – это анимированное или статическое изображение, основной
функцией которого является рекламирование продукта или услуги
потенциальному потребителю. При нажатии на баннер пользователь попадает на
сайт рекламодателя.
56
Баннеры делятся на следующие виды:
1. Графический баннер – форматы JPEG, PNG, реже GIF,
представляющие из себя статическое изображение, нажатие на которое приведет
пользователя на рекламируемую страницу.
2. Анимированный баннер – формат GIF, анимированное изображение
или видеоролик в большинстве случаев не превышающий по своей длительности
30 секунд.
3. Flash-баннер – используют векторную графику, из за чего на
небольших и больших экранах получается более качественная картинка. Flash-
баннеры могут сопровождаться звуком. Такие баннеры более эффективны, чем
графические и анимационные.
Был разработан шаблон графического баннера, включающего в себя
информацию о названии, дате проведения мероприятия, при нажатии на который
происходил бы переход на страницу мероприятия и возможностью покупки
билета (рис 2.23).
Рис. 2.23. Шаблон web-баннера сайта музея имени Андрея Рублева
для расположения на сторонних информационных ресурсах с
целью привлечения аудитории
57
2.5 Вывод
В проектно-графической главе, в первую очередь был составлен бриф на
разработку графической концепции web-сайта музея имени Андрея Рублева в
виде таблицы, в котором была расписана целевая аудитория, ее пожелания и
необходимые элементы дизайна с точки зрения потенциального потребителя и
заказчика проекта.
Далее была создана ментальная карта, на основе которой была
сформирована идея проекта, а также структурирована вся необходимая
имеющаяся информация. Была разработана дополнительная ментальная карта
поиска дизайна элементов интерфейса.
Последующее изучение классификаций структур расположения страниц
сайта привело к разработке карты сайта и структуры меню, включающего в себя
следующие основные страницы: Главная, Афиша, Коллекция, Статьи, О нас,
Контакты, которые в свою очередь имеют свои дочерние элементы – страницы
сайта.
Необходимые информационные блоки сайта были распределены по
соответствующим страницам. Изучены типы сеток сайтов была выбрана
подходящая. Для создания макета для мониторов различного разрешения
компьютеров и смартфонов, наиболее предпочтительна модульная сетка
bootstrap, состоящая из двенадцати колонок, на основе которой и будет создана
графическая концепция сайта.
Создан мудборд из концептов, шрифтов, изображений и цветовых
сочетаний, показывающих будущие графические особенности web-сайта музея
имени Андрея Рублева.
Исходя из проведенного ранее исследования целевой аудитории и
заказчика, их предпочтений и пожеланий к составляющим web-сайта, была
начата разработка визуально-графической структуры страниц, а также
отдельных элементов интерфейса, таких как шапка, оформление меню, блока
новостей, календаря, в виде эскизов.