Создание веб-ресурса «Мастерская модельера Марии Мамоновой»

Жукова Галина Витальевна

Создание веб-ресурса «Мастерская модельера Марии Мамоновой»

Работа посвящена представлению творчества молодого петербургского модельера Марии Мамоновой в глобальной сети Интернет. Создан веб-ресурс, обеспечивающий пополнение и развитие контента через веб-интерфейсы и реализующий программную генерацию страниц в соответствии с дизайнерской идеей и требуемой функциональностью. Для представления коллекций модельера проведён ряд фотосессий с соответствующей обработкой результатов, ориентированных как на веб-публикацию, так и на дальнейшее использование в полиграфческой продукции. В отчёте освещаются такие разделы, как особенности создания фотографического материала и проведение фотосъемок, изучение массовой и элитарной культуры в контексте определения целевой аудитории веб-ресурса, разработка концепции и реализация дизайна, создание сайта с использованием системы управления контентом. Необычные модели дизайнера уже привлекли к себе внимание зрителей; с помощью веб-ресурса и качественного фотоконтента творчество этого художника будет открыто для широких масс.

Искусство. Искусствоведение

Дипломы

Вуз: Санкт-Петербургский государственный университет (СПбГУ)

ID: 5a6f882b7966e12684eea1e7

UUID: 3629151b-5ac3-4a85-8a10-8b89aeb25961

Язык: Русский

Опубликовано: около 6 лет назад

Просмотры: 7

Жукова Галина Витальевна

Источник: Санкт-Петербургский государственный университет

Комментировать 0

Рецензировать 0

Скачать - 7,5 МБ

Поделиться работой

ПРАВИТЕЛЬСТВО РОСССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ДОПУСТИТЬ К ЗАЩИТЕ Профессор с возложенными обязанностями заведующего Кафедрой информационных систем в искусстве и гуманитарных науках ___________(Борисов Н.В.) “_____”_______________2017 г. ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА Направление 09.03.03 «Прикладная информатика» Уровень Бакалавриат Основная образовательная программа «Прикладная информатика в области искусств и гуманитарных наук» На тему Создание веб-ресурса «Мастерская модельера Марии Мамоновой» Студента Жуковой Галины Витальевны _______________________ (подпись студента) Руководитель канд. физ.-мат. наук, доцент, Захаркина Валентина Валентиновна __________________________ (подпись руководителя) Рецензент: генеральный директор издательства «Русская коллекция», Кудеров Дмитрий Евгеньевич _____________________________ (подпись рецензента) Санкт-Петербург 2017

АННОТАЦИЯ выпускной квалификационной работы Жуковой Галины Витальевны Создание веб-ресурса «Мастерская модельера Марии Мамоновой» Отчет содержит 54 ст., 42 изображения, 11 источников, 1 приложение  Работа посвящена представлению творчества молодого петербургского модельера Марии Мамоновой в глобальной сети Интернет. Создан вебресурс, обеспечивающий пополнение и развитие контента через вебинтерфейсы и реализующий программную генерацию страниц в соответствии с дизайнерской идеей и требуемой функциональностью. Для представления коллекций модельера проведён ряд фотосессий с соответствующей обработкой результатов, ориентированных как на вебпубликацию, так и на дальнейшее использование в полиграфческой продукции. В отчёте освещаются такие разделы, как особенности создания фотографического материала и проведение фотосъемок, изучение массовой и элитарной культуры в контексте определения целевой аудитории веб-ресурса, разработка концепции и реализация дизайна, создание сайта с использованием системы управления контентом. Необычные модели дизайнера уже привлекли к себе внимание зрителей; с помощью веб-ресурса и качественного фотоконтента творчество этого художника будет открыто для широких масс. Автор работы ___________________ _____________________________ подпись (фамилия, имя, отчество  Руководитель работы ____________ _____________________________ 2

подпись (фамилия, имя, отчество) Оглавление Generating Table of Contents for Word Import ... Введение  Бытует мнение, что творческая среда полна соперничества и конкуренции, между деятелями одного направления искусства нередко прослеживается тенденция противоборства — каждый старается найти свою нишу и заполнить её. Однако в настоящий момент происходит популяризация кооперации деятелей различных направлений. Именно это сотрудничество позволяет создавать качественные проекты, предоставляя достаточное развитие по каждому направлению. Данная работа — пример результата подобной взаимопомощи. Часто разработчик веб-проекта выступает в нескольких ролях — например, программист и создатель дизайна, однако редко он же берет на себя роль художника, это задача иной категории. Представляемый же проект — попытка изменить этот порядок и соединить разные направления деятельности по созданию веб-ресурса. Эта работа позволяет применить на практике знания различных дисциплин, полученных в рамках освоения учебной программы. Живя в век информационных технологий мы понимаем, что при создании любой продукции, и, в частности, информационного ресурса следует определить, кто является целевой аудиторией, какова направленность этой аудитории, где и как наиболее верно представить конкретный товар, а также провести пиар-кампанию. Данная работа посвящена ресурсу одного художника, однако следует отметить, что в технологическое обеспечение уже заложена потенциальная 3

возможность развития сайта как площадки для молодых творцов, где каждый сможет иметь свое личное пространство. 1. Аспекты создания и обработки фотоматериала В широком смысле под фотографией мы понимаем искусство получения фотоснимков, где основной творческий процесс заключается в поиске композиционного решения, освещения и самого момента съемки. Такой выбор определяется умением и навыком фотографа, а также его личным вкусом и предпочтениями, это характерно для любого вида искусства. [1] Цифровая фотография — технология фотографии, которая вместо светочувствительных пластин, основанных на галогениде серебра, использует преобразование света светочувствительной матрицей. Итогом фотографирования в данном случае является цифровой файл, далее используемый для обработки и печати. [2] Однако автоматизм фотографического процесса не отменяет творческих усилий фотографа, который выбирает кусок реальности и передает смысл через визуальное сообщение. К цифровой фотографии относится все тоже самое, что и к аналоговой, меняется сам метод получения изображений. Таким образом, цифровую фотографию можно отнести и к цифровому искусству, и к области информационных технологий. С появлением цифровой фотографии метод монтажа стал прост и доступен почти любому пользователю, трансформация изображений открылась широкому кругу лиц, тогда как прежде техники маскирования, оптического монтажа и коллажирования практиковали лишь единицы. Сейчас же нам уже привычна пост-обработка изображений посредствам цифрового монтажа, коллажа, внедрения разнообразных графических элементов или других компьютерных возможностей. 4

Следует понимать, что фотография бывает разной, у каждой есть свои задачи и как следствие — свои средства выразительности. Что уместно в одном жанре, может быть совершенно неприемлемо в другом.  В проекте "Мастерская модельера Марии Мамоновой" стоит цель познакомить зрителя с творчеством молодого модельера, художественно и гармонично продемонстрировать созданные изделия, используя фотографию и техники монтажа. 1.1. Композиция. Композиционное построение кадра В изобразительных искусствах и литературе композицией называют само построение произведения, соотношение его отдельных частей, образующих единое целое. [3] Фотография как и картина основывается на композиционных связях. Каждый снимок построен на смысловых и изобразительных связях. [3] За смысловые принимают то, что изображено на фотографии – люди, жесты, предметы. То есть все то, что помогает понять зрителю смысл происходящего.  В реальности есть и другие связи – зрительные, они же изобразительные.   При восприятии объекта реальности мы почти никогда не замечаем таких связей, однако когда момент фотографически "зафиксирован", мы можем рассмотреть и заметить то, что в реальности упустили.   Именно изобразительные связи являются основой композиции, которая организует ее цельность. К понятием таких связей относят: • целое; • части; • контраст светлого и темного; 5

• форма; • ритм ; • цвет; • пропорции; • конструкции; • текстура; • пространственное построение; • пластика ; • знак; • движение; • баланс.  Преподавая основы композиции, художник и педагог И. Иттен [4] основывался на учении о контрастах – контрастные сопоставления просты для понимания, их легко объяснить и изобразить. Такими контрастами являются большое и маленькое, длинное и короткое, широкое и узкое, черное и белое, тонкое и толстое, горизонтальное и диагональное, точка и линия, твердое и мягкое, площадь и линия, гладкое и шершавое, острое и тупое, цветовые контрасты. Без знания взаимодействия этих понятий никогда не получится качественная работа. Поэтому знание основ композиции сильно влияет на качество изображения. Гармоничное сочетание этих элементов, что собственно и является изобразительной композицией. Выстраивание композиции и композиционных связей – первая задача, которую должен решить фотограф. Она же сама главная, так как от этого зависит качество полученного изображения. 6

1.1.1. Композиционный анализ фотографии   Человеческий глаз так устроен, что в любом сочетании объектов стремится найти какую-то закономерность и организацию, уловить смысл. Работая с камерой, задача фотографа вложить этот смысл в изображение – включая в кадр определенные объекты и отвергая другие, определяя отношения между выделенными объектами. Границей в данном случае служит рамка кадра. Работая с видеоискателем камеры, фотограф "ищет" наиболее удачное композиционное решение.   Цифровая фотокамера позволяет делать множество однотипных кадров и выбирать их них наиболее удачный, что существенно повышает шансы на успех. Уникальность фотографического искусства в том, что в нем всегда присутствует влияние момента.  Несмотря не множество нюансов, от которых зависит гармоничность кадра нужно понимать, что композиция каждого отдельного снимка четко связана с сюжетом и задачами конкретной работы. Например, в репортажной съемке композиция важна, но вторична, ведь главной задачей такой съемки является информирование зрителя о чем-либо, документирование и детализация процесса.  С целью получения качественного фотоматериала для текущего проекта, был проанализирован ранее созданный снимок "Остановка" (рис.1).    7

  X Рис. 1 - "Остановка" Жукова Г.В.  Смысловые связи снимка достаточно прозрачны для понимания.  Зритель догадывается, что действие происходит на перроне, видит женщину в задумчивой позе, несколько удаляющихся мужчин и локомотив поезда. Однако ряд вопросов остается открытым для фантазии.    Важным психологическим аспектом снимка является то, что женщина – единственны объект, который повернут к нам лицом, именно на нем при первом просмотре останавливается взгляд и формируется эмоциональная связь со зрителем. Зритель уверен, что женщина – это центр композиции.    Центр композиции. Для определения центра композиции нужно пересечь все направляющие линии. [5] При пересечении мы видим, что центр находится на фигуре наиболее удаленного от нас мужчины (рис.2).  8

  X Рис.2 - Центр фотографии  Ритм.   Ритм основан на повторах и созвучиях точек, форм, пятен. Ритм возникает при тактовом повторении элементов. На данном снимке можно выделить две группы обозначенные разными цветами: ритм диагоналей и вертикалей людей (рис.3).   X Рис. 3 - Ритм фотографии 9

Анализ по свету и тени.    Разобьем изображение на светлые и темные пятна (рис 4,5).    Y Y Рис. 4 -Тень и свет Рис.5 - Тень Трое мужчин, навес и поезд – теневые зоны. Однако к ним можно отнести и туфли с головным убором женщины, и отброшенные на землю тени людей – эти пятна выделяются вследствие расположения на светлом фоне и воспринимаются скорее темными. [4]  Также тональность берета и обуви женщины зрительно уравновешивает ее относительно фигуры мужчины. Экспрессия изображения. Главная экспрессия данного изображения – перспектива. Экспрессивные формы создают светлая и темная трапеции (навес и перрон), также здесь можно выделить локомотив, который направлен на зрителя. Экспрессия формы тесно связана с эмоциональной составляющей рассматриваемой фотографии (рис. 6). 10

X Рис. 6 - Трапеции  Все элементы вместе в достаточной мере раскрывает зрителю название фотографии: он уже видит не только остановку определенного вида транспорта, но и ему предоставляется возможность видеть остановку одного человека, замирание его фигуры, его мыслей и его жизни. 1.2. Проведение съемки  Создание мультимедийного контента включало в себя важнейший этап – съемку новой коллекции одежды. По дизайнерской задумке тема коллекции – луна (moon), а её слоган "of moon and other sides". Использование английского языка в названиях определяется его интернациональностью, то есть возможности привлечения зарубежной аудитории.   Съемку было решено проводить в два этапа: подготовительный (он же тестовый) и основной – итого было два съемочных дня. 1.2.1. Первая съемка  11

Работа по всем фронтам проекта велась параллельно, в том числе и по созданию самой коллекции одежды. На момент первой съемки было отшито 5 моделей. По задумке представлять ее должна светловолосая девушка, сохраняющая в себе "образ луны" с присущей ей амбивалентностью: спокойствием и безумием одновременно.   Съемки проводились в одной из студий Петербурга. В качестве фона было задействовано серое однотонное бумажное полотно. Использовалось оборудование: Камера Nikon D5200, Объектив Nikon 50mm f/1.8G AF-S Nikkor и Объектив Nikon 18-55mm f/3.5-5.6G AF-S VR DX Zoom-Nikkor. Подобный выбор оказался очень удачным, однако для использования светосильного объектива Nikon с фокусным расстоянием 50mm было затруднительно в связи с небольшими масштабами помещения.   Из осветительных приборов: моноблочная студийная вспышка PROFOTO D1 500 Air и Софтбокс Creative Light 60x90cm RF для рассеянного света.  Схема освещения (рис.7).   X Рис.7 - Свет После съемки шёл этап пост-обработки и ретуши материала в программе Adobe Photoshop, (рис.8,9) подробнее этот момент освящен в главе "1.4. Процесс обработки материалов в соответствии со сформированной концепцией ". 12

Y Y Рис.8 - Фото №1019 с первой съемки съемки Рис.9 - Фото №952 с первой Далее был проведен анализ тестовой съемки по пунктам – освещение, фон, организация, взаимодействие с моделью. Подобный подход позволил разработать эффективный сценарий проведения второй съемки и обеспечил успешный результат. 1.2.2. Процесс подготовки и организации съемки  На успех фотосъемки влияет множество факторов. В современном мире для успешной реализации поставленных задач нужно обладать достаточными компетенциями не только в области фотографии, но и в организаторской деятельности: владеть необходимой информацией, опытом взаимодействия и координации действий.  Организаторская деятельность включает в себя: 13

• Разработку концепции съемки; • Подбор локации; • Подбор команды (модели, визажист, стилист, декоратор) • Реквизит для съемки. Опыт первой съемки показал, что однотонное решение фона более приемлемо для съемки каталога одежды, где требуется представить вещь такой, какая она есть на самом деле, например, для интернет-магазина. Творческая же фотография требует организации пространства и позволяет вносить больше виденья художника, однако требует не менее детального подхода. Такая фотография стремится вызвать эмоции у зрителя, апеллирует к его чувственной натуре, каталог же намерен "продавать", там действуют иные законы.  Сравнение каталожной и художественной фотографии (рис.10, 11).     X Рис.10 - Пример каталога 14

  X Рис.11 - Пример работы с пространством Мы можем увидеть нечто схожее, сравнив итоги первой и второй съемки ниже (рис.12,13).   X Рис.12 - Коллаж со съемки № 1 15

  X   Рис.13 - Коллаж со съемки № 2 Поэтому фотопространство и реквизит были модифицированы для достижения нужного художественного результата 1.2.3. Съемка  Сложность съемки состояла в том, что в ней нельзя сухо использовать присущую фотографии документальность — показать предметы одежды без идейного содержания, без контекста, иначе вместо моделей можно было бы использовать манекены. Сухая фотофиксация в данном случае недопустима.  Четырнадцать отшитых изделий были разделены поровну между двумя моделями. Концепция съемки строилась на противостоянии двух моделей, их противоречии друг другу, как черное и белое. Формирование нужного образа было достигнуто в том числе и средствами макияжа.    Процесс позирования – сложное искусство, на результат которого влияет 16

взаимодействие модели и фотографа. Важно подобрать нужный подход к человеку, который стоит перед камерой, объяснить детали и желаемый результат, помочь модели раскрыть свой потенциал.   То есть перед фотографирующим стоит сразу несколько задач – проводить работу со светом, подобрать выразительные позы для фотосессии, в зависимости от ее цели, и найти подходящее композиционное решение.  Со временем у каждого фотографа вырабатываются свои собственные приемы установления контакта для продуктивной работы. Главное – это достичь взаимного уважения и установить здоровую рабочую атмосферу. Проведение тестовой съемки помогло познакомиться с одной из моделей, узнать её сильные и слабые стороны, что существенно помогло при проведении основного съемочного дня.  Так же тестовая съемка показала, что источником освещения может являеться не только специальное оборудование, но и естественный свет от окна, который в дальнейшем был использован. У подобного решения существуют как положительные, так и отрицательные моменты. К положительным относится доступность, отсутствие дополнительного оборудования, в том числе электроэнергии. К "минусам" можно отнести непостоянную природу естественного света и тщательный подбор помещения – особенность в том, что источник света остается неподвижным, он лишен различных регуляторов как в студийной установке, и съемочной группе следует подстраиваться под имеющиеся факторы.  1.3. Формирование концепции представления фотографий Множественная структура восточной культуры, отражаясь в европейском стиле дизайна одежды, получила интересное развитие в моделях Марии 17

Мамоновой. Перед нами стояла задача не только продемонстрировать созданные модели одежды, главной целью было передать на фотоснимках основные черты творчества и индивидуального видения молодого модельера. Вопрос представления материалов на сайте тщательно обговаривался с заказчиком. Итогом этих переговоров стало решение, используя техники коллажирования и монтажа, экспонировать фотографический материал на страницах виртуального журнала. Подобный метод позволяет сопровождать зрителя, задавать сценарий просмотра изображений, предоставляя хорошую альтернативу привычной хаотичной демонстрации слайдов. Также такой метод находит исторический отклик в индустрии моды в целом. Это связано с тем, что потенциальному зрителю привычно знакомиться с модными тенденциями именно на страницах журнала – первые специализированные журналы, полностью посвященные моде, появились еще во второй половине XVIII века и актуальны по сей день. [6] Пропорции макета журнала были выбраны 3:2  Представлен макет, сформированный на основе первой съемки (рис. 14). 18

  X Рис.14 - Макет журнала 1.4. Процесс обработки материалов во взаимодействии со сформированной концепцией   Нужно понимать, что момент съемки – это далеко не заключительная точка в работе фотографа и далеко не последний этап в его творческой активности. Последующий анализ и отбор отснятого материала дают неограниченные возможности для настоящего творчества и большое поле работ, предстоит оценить пластичность и выразительность кадра, оценить его смысл – именно здесь проявляется личность. То есть можно сказать, что фотограф выбирает дважды: один раз при съемке, второй – после нее, по отснятым кадрам. Это наиболее ответственный выбор, существует мнение, что именно проблема выбора – самая главная и трудная в творчестве фотографа, для этого необходим немалый опыт и сформированный художественный вкус.  Тут важно понимать, что при обработке фотограф имеет дело уже с новой реальностью, с тем, что изображено, а не с самим изображенным объектом. Если на второй можно было воздействовать лишь с помощью света, 19

оптики, выбора точки съемки, то в воздействии на изображение проявляется больше художественная суть – можно ослабить или усилить тот или иной тон, перестроить связи за счет кадрирования или добавления инородного элемента. Сейчас существует масса программ для обработки изображений, однако наиболее распространенные среди фотографов – Adobe Photoshop и Adobe Lightroom, однако последняя не имеет возможности работать со слоями изображения и предназначена больше для пакетной обработки фотографий, поэтому от нее пришлось отказаться. Так же использовался профессиональный пакет инструментов для редакции изображений – Nik Collection, в состав этого пакета входят несколько различных плагинов, помогающих оптимизировать свою работу с фотографиями. Работа с плагинами возможна в программах Adobe Lightroom и AdobePhotoshop. В составе коллекции плагинов особо использовался Analog Efex Pro. Он предназначен именно для фотографов, с его помощью можно применить разные оптические и винтажные эффекты, тонко и точно отрегулировать яркость, контрастность, насыщенность цвета и другие параметры отдельных объектов или участков фотоснимка. И не менее важна возможность сохранить настройки для дальнейшего использования. Сравнение изображений до и после обработки в редакторе (рис.15,17). 20

  X Рис.15 - Фотография № 0790 сравнение до и после обработки    В редактировании изображений было задействовано множество слоев, выполняющих разные функции и имеющих разную прозрачность (рис.16). X Рис.16 - Процесс обработки в Adobe Photoshop 21

X Рис.17 - Фотография № 0949 сравнение до и после обработки По итогу двух съемок было отснято порядка трех тысяч фотографий. Весь объем полученных фотографий был разделен на несколько частей: одна была обработана для представления в виде журнала, другая для показа в социальных сетях, а следующая для отображения на веб-ресурсе. 22

2. Взаимодействия с общественностью в контексте массовой и элитарной культуры  Целью создания веб-сайта "Мастерская мастерская Марии Мамоновой" является знакомство широкой аудитории с деятелем искусства, а именно с создателем одежды. Одежда – часть материальной и духовной культуры нашего общества. Для успешной реализации проекта важно определить к какой культуре относятся демонстрируемые предметы гардероба – к массовой или элитарной, это позволит правильно выделить целевую аудиторию и общую направленность развития сайта. 2.1. Массовая и элитарная культуры. Введение в терминологию. Согласно теории философа Х. Ортеги-и-Гассета на рубеже XIX - XX веков произошло становление массового общества, и как следствие появилась массовая культура.[7] Катализатором подобных перемен стало развитие научно-технического прогресса: переход к машинному производству резко увеличил не только объем продукции, но и удешевил стоимость товаров. Однако индустриальное машинное производство требует точности и стандартизации. Под этот процесс попали не только предметы – оборудование и сырье, но и людей – их навыки. Чтобы определить массовую культуру, рассмотрим отдельно понятия культуры и массы. Насчитывается множество определений понятию "культура". "Совокупность генетически ненаследуемой информации в области поведения человека" – такую трактовку дал философ и семиотик   23

Ю.М. Лотман. Культуролог Д. Пивоваров рассматривает культуру, как идеалообразующую сторону жизни и деятельности человека.[8] Ширина взглядов на понятие культуры определяет то, что это понятие включает. В самом широком смысле культура определяется как совокупность материальных и духовных продуктов жизнедеятельности человека.   Культура отражает и определяет настоящее общества, накапливает багаж прошлого и закладывает точку отсчета будущего. Для понятия «масса» выделяют множество толкований, вот некоторые из них: • «недифференцированное множество» (Г. Блумер); • «агрегат людей, в котором не различаются группы или индивидуумы» ( У. Корнхаузер); • обще ство, отличающее ся отсутствием отличий и целей, единообразием и отчужденностью. (Э. Ледерер, X. Арендт); • толпа, поведение которой основывается на страстях и подчинено «массовому психозу». Подобный психологический смысл массы сформулировал Леблон, а после продолжил изучать З.Фрейд. Утрата личной ответственности и индивидуальности, преобладание чувств над разумом и стихийность являются типичными признаками "человека толпы"; [9] • «сверхорганизованное», бюрократизированное общество с преобладанием тенденции к единообразию и отчуждению. Человек в этой системе понимает, что от него ничего не зависит, и ощущает свою неполноценно сть, лишается инициативы. Лично сть 24

растрачивает свои черты в пользу стадности. [10]   «Человека массы» был порожден массовым обществом и стал главным потребителем массовой культуры. Массовая культура — это совокупность общемировых потребительских элементов культуры, которые производятся масштабными объемами промышленным способом. Это культура повседневности, которая представлена большей части общества, используя различные каналы и средства массовой информации, с которыми она тесно связана. [10] Массовая культура охватывает различные культурные продукты, прежде всего это произведения искусства, литературы, индустрии моды, кино. Но затрагивает и нематериальные категории — образцы повседневного поведения, стиль жизни, выбор идеологии и хобби. Подобные продукты и образы формируются с помощью средств массовой информации, через рекламу, институт моды, а базируются на универсальных психологических характеристиках и механизмах восприятия, которые работают независимо от уровня образования и степени подготовленности аудитории. Выделяются основные признаки массовой культуры: общедоступность, простота, тиражируемость, развлекательная сущность, направленность на инстинкты, пассивность восприятия, коммерциализация. Создатели продукции массовой культуры ориентируются именно на запросы широкого круга потребителей. В данном контексте массовой культуре противопоставляет элитарная культура, а массе – элита. 25

В отношении термина «элит а» мы будем придерживаться меритократического подхода, который базируется на исходном смысле понятия «элита» – лучшее. Подразумевается, что входящие в элиту индивидуумы обладают более высокими интеллектом, выраженным талантом, способностями по сравнению со средними показателями конкретного социума. С точки зрения художественной теории элитой считаются представители интеллектуальной среды, деятелей науки, искусства, религии. То есть элитарная культура обращается к специализированной, профессионально подготовленной части общества, наиболее способной к духовной деятельности или обладающей властными возможностями в силу своего положения. Круг потребителей элитарной культуры – высокообразованная часть общества, то есть она функционирует в среде интеллектуалов и духовной интеллигенции. Поэтому уровень элитарной культуры выше, а её восприятие требует специальной подготовки. В то же время элитарная культура постоянно нуждается в контексте массовой культуры. Это происходит из-за того, что она основывается на механизме отторжения ценностей и норм массовости, разрушении стереотипов и шаблонов. Элитарной культуре важно показать свою инаковость. [8] В общественном сознании модная индустрия в целом воспринимается скорее как элитарная, нежели массовая. Хоть и производит продукцию для массового потребителя. Это можно связать с тем, что модельеры вне зависимости от направления своих изделий создают нечто новое, присутствует акт творчества. 26

Изучив черты массовой и элитарной продукции, предметы творчества Марии Мамоновой следует отнести к элитарным. Подобное убеждение основывается на определении элитарности: восприятие ее моделей требует определенного уровня подготовки, апеллирует к культуре Востока в смешении с европейскими чертами, эпатирует и главное – внешнее сходство слабо напоминает продукты массовой культуры, то есть не рассчитано для потребления широкими массами. То есть создавая веб-ресурс, мы представляем массовой культуре предметы элитарной культуры, тем самым размываем границу между элитарностью и массовостью, приближая элиту и элитарность для широких масс. Однако в эпоху информационного прогресса можно говорить о формировании концепции просвещенного интеллигента – практический каждый человек имеет доступ неограниченному объему информации и возможности для собственного развития. 2.2. Определение портрета аудитории В современном мире для многих интернет является основным источником информации, поэтому так важно создавать качественные ресурсы и соответствующий контент. Впечатление посетителя о сайте переносится и на представленный на нем продукт, следует с особым вниманием относиться к дизайну и к наполнению.   Демонстрируя продукт нужно четко понимать, на какую, среди всего многообразия людей, группу он в большей степени ориентирован, то есть чьи потребности от удовлетворяет и кто будет его использовать.  27

В нашем случае четкое представление о целевой аудитории позволит грамотно создать дизайн ресурса и сам веб-ресурс. Обычно маркетологи стремятся добиться наиболее полного представления о потребителе, но на практике компании чаще всего ориентируются на достаточно общие характеристики, такие как пол, возраст, ценности и потребности, уровень дохода. [11]   На данный момент у дизайнера существует своя группа в социальной сети Вконтакте. Несмотря на то, что страница группы недостаточно развита и редко пополняется, на основе уже существующих участников можно проводить анализ по категориям: пол, возраст, место пребывания (рис. 18,19,20). X Рис. 18 - Диаграмма 1    Как и было ожидаемо, все участники группы – женщины, это обусловлено отсутствием мужских коллекций. 28

Возрастная планка до 27 лет говорит о том, что более взрослая аудитория в меньшей степени заинтересована в продукте, но нужно учитывать, что не все используют социальную сеть Вконтакте. Именно создание сайта позволит поднять возрастной ценз. Однако опираясь на возраст мы помним, что люди одного возраста могут иметь разный статус, разные условия жизни и разные ценности.   X Рис. 19 - Диаграмма устройств Больше половины посещений группы идет не со стационарных компьютеров, а с мобильных устройств. Это объяснимо общим трендом молодого поколения – смартфон практически заменил ПК. Из этого следует вывод, что при формировании концепции представления материала на сайте требует учитывать адаптивность под разные устройства. 29

X Рис.20 - Диаграмма геолокаций   Эпицентр участников сосредоточен в Санкт-Петербурге – это родина дизайнера и место, в котором началась ее творческая деятельность. Однако видно, что другие города России тоже заинтересованы в данном продукте. Дизайнерская одежда, как и другие вещи ручной работы, и по сей день относится к предметам роскоши, то есть слабо доступна человеку с доходом ниже среднего. Итого имеем: женский пол, молодое поколение 18-27 лет, активные пользователи смартфонов, ценящие индивидуальность, ручной труд и готовые за него платить. 3. Разработка сайта   Параллельно с созданием контента шла работа по созданию веб-ресурса, 30

где будет представлен контент. Сначала разрабатывалось визуальное представление сайта, а затем реализовывалось с помощью технологий. 3.1. Разработка внешнего представления веб-ресурса. 3.1.1. Структура сайта. Необходимость дать представление о творчестве модельера в понятном визуальном решении отразилась и на дизайне ее сайта. Прежде чем приступить к созданию самого дизайна важно определить структуру и концепцию будущего веб-ресурса. Для этого были изучены аналоги. Принято считать, что одну из важнейших ролей при создании удобного сайта играет грамотное оформление блоков (модулей). Они представляют собой структурные элементы интернет-страницы.  Для начала обозначим главные блоки сайта, а после исследуем примеры. Основы успешного web-дизайна — это удобство и эстетика. Стандартная модульная сетка состоит из навигационного меню, шапки – header, основной информационной зоны – content и подвала – footer (рис.21). X 31

Рис.21 - Модули Соотношения этих блоков могут быть любыми, в зависимости от дизайнерской задумки. Для примера было рассмотрено несколько сайтов и приведено соотношение блоков Header, Content и Footer (см. таблицу 1). 32

Таблица 1. № Ресурс Header Content Footer 1 Студия Артемия Лебедева. 2% 95% 3% 2 Студия Чердак 16% 80% 4% 3 coma.com.au 20% 80% 0 4 DigitalHands 2,7% 80% 17,3% 5 Lakbi 5,9% 90,5% 3,6% 6 Expressionists 7,7% 81,8% 10,5% 7 Colors 1,3% 90,7% 8% 8 yse-lingerie 1,3% 95% 3,7% 9 MaxMara 10% 85% 5% 10 Yulia Che 33,2% 53,8% 13%   Наглядно видно, что как бы ни был спроектирован сайт наиболее важной и информативной его частью является зона контента. Исходя из потребностей пользователей были определены смысловые блоки будущего ресурса. Главная страница (Home), Журнал (Magazine), Быстрые зарисовки моделей (Sketches), Информация о модельере (About) и Контакты (Contacts) (рис.22). 33

X Рис.22 - Структура сайта Эти блоки расположены друг за другом и также на них имеются ссылки в навигационной панели, что позволит пользователю без труда найти и перейти к интересующей информации. Страница Home должна давать четкое представление о деятельности, представленной на сайте. Созданный фотографический материал содержится в разделе Журнал. Он представляет собой имитацию печатного журнала, это позволит разнообразить ресурс и заинтересовать пользователя – потенциальному зрителю привычно знакомиться с модными тенденциями именно на страницах журнала.  Блок Sketches демонстрирует начальный этап работы над коллекцией – это позволяет формировать доверие у потенциального клиента.  Задача блока Contact связать заинтересованных пользователей напрямую с 34

модельером через социальные сети либо электронную почту. Для этого блока разработано отдельное визуальное решение. 3.1.2. Цветовая схема и выбор шрифта Наиболее сложной задачей предстояло подобрать цветовую схему сайта. Цветовое оформление внешнего вида веб-ресурса напрямую связано с во сприятием. Цвет позволяет создать желаемую атмо с феру, соответствующую тематике и назначению, а также вызвать необходимые эмоции и подтолкнуть посетителей к определенным действиям. В ходе общения с модельером были получены исходные данные, которые были взяты за основу. К ним относился логотип MORI и три цвета: черный, белый и темно-красный. Надпись сопровождающая логотип несколько преобразована (рис.23,24). X Рис.23 - Исходные цвета Рис.24 Логотип 35

Одно из самых основных правил в выборе цветов – это простота. Чем больше цветов будет использовано, тем более странный и вызывающий разные эмоции дизайн получится в конце. Изучив цветовые схемы популярных брендов, стало ясно, что они стремятся к простоте и минимализму. Попробовав придерживаться данной теории, далее представлена используемая цветовая палитра (рис.25). #222222 #333a40 #72787c #c1c1c1 #f0f5f9 #f7f7f7 #ffffff   Рис.25 - Цветовая палитра Выбранные цвета отвечают правилам логики и гармонируют между собой. Самый темный цвет – #22222  Самый светлый цвет – #ffffff     3.1.3. Шрифтовое решение и взаимодействие с логотипом Типографика – это искусство и техника организации шрифтов. Она включает в себя выбор шрифтов, позиционирование букв в специально выбранном месте, изменение размера шрифтов или добавление пробелов между строками (leading) и между буквами (tracking). Шрифт в данном случае служит инструментом для эффективного донесения сообщения к пользователю, а также позволяет улучшать его восприятие.  Выбор был сделан в пользу шрифта Myriad Pro (рис.26). 36

Y Рис. 26 - Шрифтовое решение Сочетание восточного и европейского стиля, а также когнитивные законы восприятия, стали основной мотивацией выбора именно этого шрифта, достаточно легко и быстро читаемого. 3.1.3. Созданный дизайн   Основой созданного дизайна послужили тенденции современного вебдизайна – минимализм и длинные страницы с прокруткой.   Масштабное распространение длинные страницы с прокруткой получили благодаря развитию мобильных устройств – люди все чаще используют их для выхода в интернет. Поэтому дизайнерам пришлось найти способ, как лучше всего нужно отображать контент на маленьких и узких экранах. И бесконечный скроллинг здесь оказался незаменим – пользователю нужно лишь прокручивать страницу, знакомясь с содержанием сайта. Длинные страницы при этом одинаково хорошо выглядят как на десктопе, так и на 37

мобильных устройствах, а это означает, что у сайтов с длинным скроллингом определенно большое будущее.    Для создания макета сайта была использована многофункциональная программа Adobe Photoshop (рис.27,28). Y Рис.27 - Разметка сайта в Adobe Photoshop Y Рис.28 - Дизайн главной страницы в Adobe Photoshop 38

Стартовая страница по своему значению, именно для сайта с длинной прокруткой, несет на себе одну из основных задач для привлечения внимания. Ее можно сравнить со сложным логотипом. Он должен быть выразительным и заставляющим прокрутить страницу вниз. Именно поэтому была выбрана графика, некое бесцветное представление о стиле модельера. Композиция намеренно неравновесная, она не должна заставлять вглядываться, она должна давать направление. Главной кнопкой веб-ресурса является кнопка MAGAZINE –Журнал (рис. 29,30).   X Рис.29 - Макет страницы журнала 1 39

X Рис.30 - Макет страницы журнала 2 3.2. Выбор технологий.  Базовым вопросом при создании любого веб-ресурса является выбор технологии для реализации созданного дизайна и обеспечения требуемой функциональности. Основополагающими требованиями к создаваемому веб-ресурсу являются: • возможность пополнения ресурса через веб-интерфейс силами контент-менеджера без специализированных навыков; • реализация разнообразных форм вывода фотоматериала, в том числе создание "журнала", имитирующего печатное издание. При рассмотрении типовых решений для данных задач был сделан вывод, что наиболее удобным для данного ресурса является использование CMS (систем управления контентом). Такой подход обеспечивает: 40

• наличие серьезной базовой функциональности (авторизация, разделение ролей и прав доступа, работа с контентом посредством соответствующих веб-интерсфесов); • наличие широкого спектра программных модулей, обеспечивающих дополнительную функциональность; • возможность гибких настроек тем оформления. Можно выделить три наиболее распространенные системы управления контентом, которые предоставляются на бесплатной основе (исключая некоторые модули).  Это Wordpress, Drupal и Joomla. В данном случае все три системы достаточно схожи по предоставляемым возможностям, исключая некоторые детали, которые могут быть компенсированы установкой дополнительных плагинов.   Таким образом, при ближайшем рассмотрении, каждая из систем управления содержимым оказалась в достаточной мере стабильной и отвечающей поставленным требованиям. С учетом личных предпочтений выбор остановился на системе Drupal. Была проведена установка Drupal 7.54, проведены первоначальные настройки. Дальнейшая работа включала: • создание формального описания страниц требуемых типов, различающихся набором полей и особенностями программного вывода изобразительного ряда; • разработку темы оформления, реализующей дизайн; • создание шаблонов вывода содержимого отдельных полей; • программную реализацию представления вывода фотоматериала. 41

3.3. Создание темы оформления для cms Drupal.   Существенной задачей была реализация созданного дизайна. Эта процедура заключается в создании темы оформления.   Понятие «тема» в концепции знаний о системах управления содержимым включает разработку формального описания: • шаблонов страниц различных типов (.tpl.php) с выделенными структурными зонами; • параметров внешнего отображения структурных сущностей в соответствии с концепцией дизайна (CSS); • нестандартного вывода содержимого отдельных полей (в нашем случае фотографий); • функциональности клиентских интерфейсов (JavaScript). За основу была взята тема Nexus с минимальным CSS, именно это позволяет модифицировать её под свои нужды. Элементы стандартных инструментов Drupal, функциональность которых была недостаточна, мы модифицируем с использованием шаблонов и JavaScript. А именно, шаблоны страницы для просмотра журнала. 3.4. Функциональные модули сайта.  Помимо модулей ядра Drupal для повышения функциональности и оптимизации работы был установлен ряд следующих дополнительных модулей: • Модуль текстового редактора CKEditor  После установки и настройки этого популярного модуля 42

пользователь, ответственный за пополнение веб-ресурса, имеет возможность вводить и редактировать текст на сайте без знания языка разметки и навыка разработчика (рис.31). То есть подобно Microsoft Word позволяет легко форматировать текст нужным образом. Важно отметить совместимость модуля CKEditor с большинством браузеров: Яндекс.Браузер, Safari 3.0+, Internet Explorer 6.0+, Google Chrome, Camino 1.0+, Firefox 2.0+, Opera 9.5+.   X Рис.31 - Скриншот CKEditor • Administration menu Toolbar style  Мод ул ь , п о з в ол я ю щ и й п р е о б р а з о ват ь с т а н д а рт н у ю административную панель к более удобному представлению. После его установки в верхней части страницы отображаются два меню установленное и меню из модулей ядра (рис.32). Последнее имеет имя Toolbar, его требуется отключить в панели модулей (рис.33).    43

Рис.32 - Скриншот после установки модуля Administration menu Toolbar style X Рис.33 - Скриншот представления модуля Administration menu Toolbar style • Pathauto Модуль, осуществляющий автоматическую генерацию url-адресов для различных видов контента.   • Backup and migrate  Модуль удобен в использовании, позволяет восстанавливать файлы и базы данных сайта, создавать резервную копию.  • Multiupload Imagefield Widget  Модуль является дополнением к модулю Multiupload Filefield Widget и позволяет оптимизировать процесс загрузки изображений на сайт, что крайне необходимо в нашем случае при наличии множества фотографий для разных разделов. Однако следует учитывать, что модуль использует возможности HTML5 и возникает некоторое ограничение на поддерживаемые браузеры, а именно Internet Explorer версии 9 и более ранних. 44

3.5. Структурные типы страниц После установки Drupal предоставляет возможность создания двух типов содержимого, а именно Article и Basic page (рис.34.) Это элементарные шаблоны для отображения контента, содержащие два поля: заголовок и тело. Для реализации задуманной функциональности потребовалось создать свой тип материала – Журнал, а также дополнить базовую страницу набором полей (рис.35), обеспечивающих загрузку и правильный вывод материала. Рис.34 - Скриншот всех типов материалов в Drupal X Рис.35 - Скриншот набора полей типа Базовая страница В существующее тело базовой страницы было добавлено три поля с названиями: текст перед галереей изображений, галерея изображений и текст после галереи изображений (рис.36,37,38). 45

X Рис. 36 - Скриншот административного интерфейса редактирования многострочного текстового поля с внутренней html-разметкой базовой страницы и страницы журнала   X Рис. 37 - Скриншот административного интерфейса редактирования поля "Галерея изображений" базовой страницы.  X   Рис. 38 - Скриншот формы загрузки изображений в галерею Галерея позволяет загружать необходимые изображения, которые на клиентской странице представляются желаемым образом. В нашем 46

случае вывод реализован в виде набора программно формируемых миниатюр с возможностью укрупнения до полномасштабного изображения (рис.39). При этом используется адаптированный программный модуль FancyBox.js. X Рис. 39 - Скриншот вывода изображений на сайте с помощью модуля FancyBox.js На странице типа Журнал представлены те же поля, однако на клиентской странице изображения выводятся в виде стилизованного "журнала" (рис.40,41).   При этом используется радикально переработанный программный модуль turn.js. 47

X Рис. 40 - Вывод изображений для страницы типа Журнал, используя модуль turn.js X Рис.41 - Скриншот набора полей типа Журнал 48

X Рис.42 - Скриншот структуры административной панели Drupal Текущая версия сайта загружена на сервер и доступна по техническому домену: yuna-may.ru.host1559478.serv68.hostland.pro  49

Заключение Цель дипломного проекта заключалась в представлении широкой публике творчества петербургского модельера посредством создания веб-сайта с оригинальным фотографическим контентом. В процессе выполнения работы были решены задачи разной сложности и направленности: • анализ целевой аудитории сайта в контексте массовой и элитарной культуры; • изучение законов фотографической композиции и планирование фотосессий; • проведение съемок с целью создания качественного фотоматериала; • обработка отснятого материала; • разработка структуры и дизайна сайта; • реализация сайта на базе CMS.   Результатом проделанной работы является готовый веб-ресурс, посвященный молодому художнику. Цель проекта была достигнута.   50

Список использованных источников  1. Фотография // Википедия. - URL: https://ru.wikipedia.org/wiki/ Фотография (дата обращения: 20.01.2017). 2. Цифровая фотография // Википедия. - URL: https://ru.wikipedia.org/ wiki/Цифровая_фотография (дата обращения: 20.01.2017). 3. Лапин А.И. Фотография, как... . – издание шестое, исправленное . – М. : Тримедиа, 2015. – 306 c.: ил. 4. Иттен И. Искусство формы. Мой пропедевтический курс в Баухаузе и других школах. – М., 2001. 5. Голубева O. Л. Основы композиции : учеб. пособие. – 2-е изд. – М. : Изд. дом "Искусство", 2004. — 120 с: ил. 6. История журналов мод [Электронный ресурс] // Энциклопедия моды. – URL: https://wiki.wildberries.ru/глянец/magazines/история-журналовмод/ (дата обращения: 11.04.2017). 7. Ортега-и-Гассет Х. Эстетика. Философия культуры. - М.: Искусство, 1991. - 588с. 8. Гуревич П.С. Культурология: элементарный курс: Учебное пособие. М.: Проект, 2003. - 336с. 9. Лебон Г. Введение. Эра толпы // Лебон Г. Психология народов и масс. – СПб.: Макет, 1995. – 542 с. 10.Акифьева Н.В. Массовая культура [Электронный ресурс]: учебное электронное текстовое издание. Екатеринбург, 2010. –URL: http:// study.urfu.ru/Aid/Publication/9542/1/Akifyeva.pdf (дата обращения: 2.04.2017). 51

11.Методика описания целевой аудитории [Электронный ресурс] // Power Branding. – URL: http://powerbranding.ru/potrebitel/tadescription/ (дата обращения: 14.05.2017). 52

Приложение А 53

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв