CC BY
27
ДИЗАЙН КУЛЬТУРНО-ПРОСВЕТИТЕЛЬСКОГО САЙТА «ЭСТЕТИКА»
© Аббасов И.Б.1, Гривцов В.В.2, Павлов К.В.3
Инженерно-технологическая академия Южного федерального университета, г. Таганрог
Работа посвящена дизайну культурно-просветительского сайта «Эстетика». Сформулирован и обоснован композиционный замысел предлагаемого сайта и его составных частей. Разработанный адаптивный сайт содержит информацию о жизни и творчестве художников, иллюстрации их картин. Сайт призван стать современной интерактивной площадкой, направленной на интересы увлеченных искусством людей, стимулирующий творчество и обмен знаниями между участниками.
Ключевые слова: дизайн сайта, веб-интерфейс, модульная сетка, композиция, золотое сечение, адаптивный дизайн, искусство, художники.
Постановка проблемы
Статус искусства на протяжении всей истории находится в динамичном изменении и зависит не только от конкретной культуры или цивилизации, но и от темпов научно-технического прогресса эпохи, тенденций развития религии или систем мировоззрения. К сожалению, в современном обществе все меньше людей осознают важность и ценность искусства, его уникальную роль в нашей жизни и настоящую силу его воздействия.
Развитие проекта в сети интернет позволяет вести диалог с посетителями, иметь быструю обратную связь и удобную аналитику предпочтений и интересов [1, 2]. Основное предполагаемое преимущество сайта «Эстетика» над аналогичными проектами - это отсутствие рекламы (полностью некоммерческий, образовательный характер) и максимально удобные пользовательские интерфейсы, стирающие грань между просмотром картины в музее и на экране монитора. Конечно, электронная картинка не может сравниться с впечатлением от реальной работы, но именно она может подтолкнуть зрителя посетить реальный музей, узнать больше о понравившемся авторе или даже начать самому заниматься творчеством.
1 Заведующий кафедрой Инженерной графики и компьютерного дизайна, доктор технических наук, профессор.
2 Доцент кафедры Инженерной графики и компьютерного дизайна, кандидат технических наук, доцент.
3 Студент кафедры Инженерной графики и компьютерного дизайна.
Анализ существующих аналогов
В качестве основных аналогов были выбраны проекты, имеющие схожую тематику, направленность и технические возможности. Несмотря на наличие более развитых ресурсов в европейском и североамериканском сегментах сети интернет, предпочтение отдавалось ориентированным на русскоязычную часть населения сайтам, существующим именно в российском социокультурном пространстве.
Рассмотрим аналог в виде онлайн-энциклопедии визуального искусства «^ШАг!» (http://wikiart.org/ru) (рис. 1, слева). Положительными моментами являются: богатая коллекция художников и их работ, удобная система сортировки, быстродействие системы. Из недостатков можно отметить: слабо продуманный интерфейс, малый дополнительный функционал, низкая взаимосвязь материалов.
КАРТИНКИ НЕДЕЛИ 06.ВЗ
Картинки недели. 28.02 - 06.03
2Б лет «Фотошопу», Ники де Сен-Фалль с ружьем, Рембрандт перед смертью, библиотечный танк и конский скелет: самые яркие новости недели в картинках.
книги 04.03
Игорь Голоышток. Занятие дли старого городового. М.: Редакции Елены Шубиной, 2015
Мемуары советско-британского искусствоведа.
Рис. 1. Сайты «^ШАТ», «АртГид»
Онлайн-путеводитель по художественной жизни Москвы «АртГид» (http://www.artguide.com/) (рис. 1, справа) имеет продуманный пользовательский интерфейс, качественный подбор иллюстративного наполнения, но большинство материалов локальны, и сайт ориентирован на новостной характер записей.
Хотелось бы отметить ресурсы, которые не рассматриваются в рамках данной работы в качестве прямых аналогов, но отдельные идеи или приемы которых послужили мотиватором для улучшения конечной формы разработки, привнесли свежесть в поисковый процесс проектирования. К ним относятся онлайн-журналы w-o-s.ru и lookatme.ru, которые стали хорошим примером реализации интересных интерактивных новшеств в статических ресурсах.
Анализ постановки задачи
Сообщество «Эстетика» было основано одним из авторов 4 января 2012 года в виде сообщества в социальной сети Вконтакте (http://vk.com/old_art). За
более чем четырехлетнюю историю развития в проекте было опубликовано более 850 записей об истории изобразительного искусства, произведениях мировых мастеров живописи и графики, тематических подборок. Сообщество получило широкую огласку и популярность среди любителей истории искусств: на сегодняшний день у него насчитывается более 87 000 подписчиков (76 % из России, остальные - из стран СНГ, ближнего и дальнего зарубежья).
Несмотря на высокую популярность, размещение на платформе социальной сети вносит свои ограничения в работу сообщества, линейная публикация записей, отсутствие быстрой навигации, ориентированность на локальную, зарегистрированную аудиторию, отсутствие возможности настройки дизайна записей и страницы группы. Поэтому, логичным продолжением работы над развитием проекта стала разработка сайта для данного сообщества [3, 4].
Разработка дизайна сайта
Одна из первых и самых определяющих стадий художественной части проекта является разработка концепции, эскизирование, проектирование. Данный этап подразумевает создание карты сайта, поиск и обоснование информационной архитектуры решения. Согласно целям и задачам сайта были созданы основные разделы и подкатегории, обозначены все ключевые и типовые страницы.
Основополагающей точкой в работе проекта является главная страница-«лента», на которой публикуются все записи в хронологическом порядке, но с возможностью фильтрации, позволяющей сортировать их по любимому художнику, направлению и т.д. Механизм «бесконечной» автоматической подгрузки делает предпросмотр материалов плавным и естественным. Основными категориями, переход в которые осуществляется с главной страницы проекта или со страниц материалов, являются разделы «Картины», «Художники» и «Библиотека».
В разделе «Картины» помещаются все материалы-произведения сайта с удобной фильтрацией по основным параметрам-тегам, поиском по списку художников. Отдельно выделяются наиболее популярные или значимые материалы. Также спроектирован дополнительный функционал в виде страницы «Избранного» и системы авторизации, помощь новым пользователям в виде страницы «Тур по сайту», в которой также приводится краткая информация о миссии проекта.
Композиционное решение проекта, ввиду непосредственной связи материалов с изобразительным искусством, было решено строить, опираясь на традиционные, классические принципы построения, лишь адаптированные
к современной методологии разработки веб-интерфейсов. Основным базисом был выбран канон золотого сечения, наложенного на 12-колоночную модульную сетку (рис. 2). Незначительное изменение пропорций было применено с поправкой на современное широкоформатное соотношение сторон экрана (и, следовательно, размер границ браузера).
В качестве основы для расположения материалов сайта были рассмотрены преимущества и недостатки двух современных парадигм построения интерфейсов - Metro (Microsoft) и Google Material Design. После анализа преимуществ и недостатков каждого из методов была сформирована новая концепция компоновки записей сайта в единое целое, базирующаяся на мозаичном принципе. Из достоинств разработки можно отметить как эстетически приятный вид, так и интуитивно понятный, не перегруженный дополнительными элементами интерфейс взаимодействия.
Рис. 2. Композиционная основа построения блоков сайта
Следующим этапом создания художественной части проекта стала разработка основных дизайн-макетов сайта. В первую очередь был проведен поиск решения главной страницы (рис. 3). Далее был создан дизайн основных разделов сайта: «Картины», «Художники», «Библиотека». Ключевым моментом в проектировании дизайна данных разделов стало желание совместить красоту визуального ряда с максимально понятным, простым и функциональным интерфейсом.
Рис. 3. Итоговый вариант дизайна главной страницы сайта «Эстетика»
Дизайн учитывает такие интересы пользователя, как удобный просмотр изображения (записи), поиск по всему сайту или отдельному разделу, добавление материала в избранное, сортировка по стилю, направлению и т.д.
Материалы сайта включают в себя, в том числе, большое количество статей или текстов по общей тематике. Эта часть должна стать гармоничным дополнением к изобразительному материалу, не мешая образу художественных произведений. Таким образом, для сайта была продумана и создана оригинальная шрифтовая схема, включающая в себе гарнитуру PT Sans в качестве основной, а также PT Serif для отдельных подписей / выделительных надписей. Предусмотрены размеры шрифтов для любого возможного типа печатаемой информации, что позволяет достичь стилевого единства сайта [5, 6].
Разработка дизайн-макетов для предварительного тестирования было проведено в онлайн среде Invision. Средствами программного обеспечения Adobe Photoshop и After Effects были созданы анимированные визуализации динамических эффектов, применяемых на сайте, включая анимацию главного слайдера, эффекты наведения курсора на блоки, прокрутки экрана, появления всплывающих элементов (меню, интерактивные подсказки и т.п.).
Связь между различными состояниями интерфейса способствует созданию иллюзии живого взаимодействия. Разработка подобной наглядной демонстрации упрощает дальнейшую работу верстальщика, дает более опре-
деленное понимание работы сайта, предотвращает от возникновения нестыковок дизайн-макетов с реальными техническими требованиями.
I \ / ^
Рис. 4. Дизайн-концепция мобильной версии
Адаптивный веб-дизайн обеспечивает корректное отображение сайта на различных устройствах динамически подстраивающийся под заданные размеры окна браузера. Для удобного просмотра с различных устройств по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств [7,8].
Для адаптивных версий была продумана привязка к тактильным жестам (свайп для слайдера, питч для увеличения картинки и т.д.). Учтены вопросы эргономики, при проектировании были приняты во внимание так называемые «комфортные зоны» нажатия, что отразилось на расположении контрольных элементов управления мобильного интерфейса сайта (рис. 4).
Выводы
В заключение хотелось бы отметить, что при разработке проекта была проделана большая исследовательская и проектная работа. Были учтены вопросы удобочитаемости материала, продумана шрифтовая и цветовая схемы сайта. Создан дополнительный функционал в виде поисковой базы, система подсказок и рекомендаций, списки избранного, возможность фильтрации материала. Интерактивные элементы статей делают посещение сайта «Эстетика» не только полезным, но и увлекательным и приятным занятием.
Список литературы:
1. Алипатов М.В., Орехов В.В., Зезюкина К.А. Графические аспекты дизайна сайта «Три склянки» // Наука и современность. - 2015. - № 37-1. -С. 43-48.
2. Волощенко В.Ю., Ли В.Г., Никипелов М.В. Дизайн сайта «Дизайн. Четверг». Графические аспекты // Наука и современность. - 2015. - № 37-1. -С. 58-64.
3. Маркотт И. Отзывчивый веб-дизайн. - М.: Манн, Иванов и Фербер, 2013. - 176 с.
4. Буковецкая О.А. Дизайн текста: шрифт, эффекты, цвет. - М.: ДМК Пресс, 2006. - 278 с.
5. Сидерхолм Д. CSS3 для веб-дизайнеров. - М.: Манн, Иванов и Фербер, 2013. - 125 с.
6. Кит Д. HTML5 для веб-дизайнеров. - М.: Манн, Иванов и Фербер. 2013. - 180 с.
7. Function Reference / bloginfo [Электронный ресурс]. - Режим доступа: http://codex.wordpress.org/.
8. Справочник HTML [Электронный ресурс]. - Режим доступа: http://htmlbook.ru.
«WE ARE ON THE SIDE OF THE PEACE»
СПЕЦИАЛЬНЫЙ ПРОЕКТ В КОНТЕКСТЕ ПОЛИКУЛЬТУРНОГО ОБРАЗОВАНИЯ ДИЗАЙНЕРОВ
© Барвенко В.И.1
Институт радиотехнических систем и управления Южного федерального университета, г. Таганрог
В статье рассматриваются особенности художественно-конструктивного оформления детской тематической книги-игрушки «Горы», как качественного инструмента формирования культуры туризма и визуального средства, активизирующего познавательные формы восприятия окружающего мира у детей дошкольного возраста и их родителей.
Ключевые слова: дизайн, поликультурное образование, коммуникативный дизайн, арт-дизайн, педагогическая антропология.
Миграционные процессы в последнее время приобрели вид переселения народов. Особенно очевидно, что приграничные области России, например, Юго-восток Украины, который граничит с Ростовской областью, где
1 Доцент кафедры Инженерной графики и компьютерного дизайна.
