CC BY
0
Медиасреда. 2024. № 1. С. 34-41. ISSN 2070-0717 (print). Mediasreda. 2024; 1: 34-41. ISSN 2070-0717 (print).
Научная статья УДК 070:004.774
DOI 10.47475/2070-0717-2024-1-1-34-41
ВЕБ-САЙТ О ХИП-ХОП-КУЛЬТУРЕ И РЭП-ИНДУСТРИИ КАК МЕДИАПРОДУКТ: ПРОЦЕСС СОЗДАНИЯ
Каролина Андреевна Шуляк
Челябинский государственный университет, Челябинск, Россия [email protected]
Аннотация. Данная статья посвящена изучению процесса комплексного создания веб-сайтов, посвященных хип-хоп-культуре и рэп-индустрии. Основной целью исследования является анализ и демонстрация вебсайта в качестве платформы для распространения и развития данной музыкальной культуры. Исследование акцентирует внимание на аспектах, делающих сайт привлекательным для целевой аудитории: контенте, дизайне, удобстве в использовании и функциональности. В работе рассматриваются технологические основы создания веб-сайта: с использованием инструментов Figma для создания дизайна страниц и Tilda -для последующей верстки. Материалом исследования служит собственный медиапродукт - веб-сайт о хип-хоп-культуре и рэп-индустрии FRONTIER. Статья вносит практический вклад в область веб-дизайна, т. к. предоставляет детальный план создания веб-сайта и глубокий анализ каждого процесса. Исследование опирается на четыре референса - русскоязычные и зарубежные сайты, посвященные схожей тематике. Целевая аудитория продукта: лица в возрасте от 16 до 45 лет, увлекающиеся классическим хип-хопом, историей жанра, граффити и уличным искусством, новыми трендами, активно участвующие в социальных сетях, интересующиеся влиянием культуры на общество, предпочитающие глубокие аналитические статьи, воспитывающие детей в духе данной музыкальной культуры. Для продвижения веб-сайта был создан канал в мессенджере Telegram. Результаты продвижения показывают успешное привлечение аудитории: на канал подписалось более 70 человек для отслеживания дальнейшего развития сайта и просмотра публикуемых материалов о хип-хоп-культуре и рэп-индустрии.
В статье также подробно описываются задачи, связанные с созданием сайта, включая разработку прототипов, мудборда, UI Kit и User Flow, что является ключевым при определении структуры и дизайна сайта, а также описан процесс верстки с помощью конструктора сайтов и подключение доменов. В работе подчеркивается актуальность изучения веб-дизайна и веб-разработки в современном мире и роль интернет-платформ в укреплении культурной идентичности в контексте хип-хоп-культуры.
Ключевые слова: веб-сайт, хип-хоп-культура, рэп-индустрия, музыкальная культура, медиапродукт, дизайн веб-сайта, авторский проект веб-сайта «FRONTIER».
Для цитирования: Шуляк К. А. Веб-сайт о хип-хоп-культуре и рэп-индустрии как медиапродукт: процесс создания // Медиасреда. 2024. № 1. С. 34-41. doi: 10.47475/2070-0717-2024-1-1-34-41
For citation: Shulyak K. A. (2024). Website about hip-hop culture and the rap industry as a media product: the creation process. Mediasreda, 1: 34-41. (InRuss.). doi: 10.47475/2070-0717-2024-1-1-34-41
В эпоху цифровых технологий веб-сайты стали неотъемлемой и доминирующей частью хип-хоп-культуры. Они не только освещают последние события и релизы, но и формируют общественное мнение, влияя на восприятие и развитие культуры. Необходимо отметить, что к теме развития хип-хоп-культуры обращались различные исследователи, в числе которых В. А. Луков (Луков 2005), Д. А. Садыкова (Садыкова 2013), Р. Хестанов (Хестанов 2016), О. С. Горбатых и И. В. Долженкова (Горбатых, Долженкова 2019), Е. И. Сахаров (Сахаров 2022) и др.
Изучению влияния интернет-сети на эволюцию жанра посвятила работу Е. Василевич (Василевич 2019), подчеркнув, что в 2017 году в десятку финалистов явлений года вошло понятие «рэп-баттл», и отметив рост популярности жанра хип-хопа. Вопрос влияния хип-хоп-культуры на мировоззрение молодежи рассмотрели А. А. Попова и К. М. Ольховиков (Попова, Ольховиков 2018), подчеркнув положительные факторы развития субкультуры в виде «возможности творческой реализации личности в одном из направлений», И. А. Трякина (Трякина 2013), Д. А. Шмакова и Д. П. Колозов (Шмакова, Колозов 2022).
К. И. Гудин и В. А. Брыкина (Гудин, Брыкина 2022) рассмотрели хип-хоп- и андеграунд-культуру как современные виды искусства, а К. И. Поздняков (Поздняков 2018) посвятил работу поиску новой формы музыкальной журналистики в виде паблика и сделал вывод о том, что в настоящее время трудно обозначить качественное музыкальное СМИ.
Отдельно процесс создания сайта с использованием html-кода рассмотрели С. Н. Назарова и Б. К. Атаджанова (Назарова, Атаджанова 2023), а дизайн и стили сайтов - Х. Б. Исмойилов (Исмойилов 2018).
В эпоху современной цифровой эры хип-хоп-культура стала играть ключевую роль в формировании медиакультуры и активном взаимодействии между артистами и аудиторией. Развитие интернета и социальных медиа значительно расширило возможности для распространения хип-хоп музыки, а также обогатило способы взаимодействия внутри хип-хоп сообщества.
Начиная с середины 2000-х годов хип-хоп исполнители стали активно присутствовать в социальных сетях. Это выражалось в продвижении музыки через такие соцсети, как MySpace, видеохостинг YouTube, позволяющий публиковать как видеоклипы, так и музыкальные синглы, стриминговые сервисы Spotify и Apple Music, предлагающие новый уровень доступности музыки для обычных слушателей. Социальные медиа облегчили процесс нахождения и прослушивания музыки путем алгоритмов рекомендаций, помогающих пользователям открывать новых исполнителей на основе их рекомендаций, а также позволили прослушивать музыку без необходимости покупки альбомов.
Благодаря возросшей популярности стриминговых сервисов появился новый поджанр хип-хопа -SoundCloud Rap, получивший свое название из-за музыкальной платформы и характеризующийся низким качеством записи и прямым эмоциональным содержанием.
В настоящее время в информационном пространстве доминируют веб-сайты, так как они предоставляют доступ к информации и новостям, служат платформой для продвижения новых треков и альбомов, а также предлагают пользователям мультимедийный контент, такой как видео и музыка, что делает их привлекательными для аудитории.
Главная творческая задача, стоящая перед создателем медиапроекта и претворенная в итоговый продукт FRONTIER, - исследование и анализ всех аспектов создания веб-сайта, посвященного хип-хоп-культуре и рэп-индустрии, а также его влияние на развитие данных направлений в музыке и культуре. В работе над проектом было использовано 4 референса: русскоязычные и зарубежные веб-сайты, посвященные схожим темам.
Целевая аудитория проекта - люди в возрасте от 16 до 45 лет, увлекающиеся уличной модой, классическим хип-хопом, историей жанра и влиянием культуры на общество, граффити и уличным искусством, новыми трендами, активно участвующие в социальных сетях, предпочитающие глубокие аналитические статьи, воспитывающие детей в духе культуры, а также следящие за галереями уличного искусства. Для веб-сайта был создан канал и проведено продвижение в социальной сети Telegram. На канал подписалось более 50 человек для отслеживания дальнейшего развития сайта и просмотра публикуемых материалов о хип-хоп-культуре и преимущественно жанре рэпа. Мы считаем результат продвижения достаточно успешным для такого нишевого и начинающего проекта, как FRONTIER. В настоящее время с популяризацией таких профессий, как веб-дизайнер и веб-разработчик, изучение создания веб-сайтов как никогда актуально, а присутствие темы хип-хоп-культуры дает возможность понять, как интернет-платформы могут служить инструментом для укрепления культурной идентичности.
Актуальность медиапроекта FRONTIER. Люди все активнее интересуются жанром хип-хопа, но русскоговорящая аудитория не имеет альтернативы, кроме веб-сайта the-flow.ru, который направлен не только на освещение новостей из мира хип-хопа, но и тем, которые интересны молодежи. Исходя из этого, мы предлагаем создать веб-сайт, посвященный исключительно хип-хоп-культуре и рэп-индустрии, который объединит в себе элементы истории музыкального жанра, стрит-арта и граффити, биографии исполнителей и художников, а также глубокий анализ музыкальных альбомов и синглов. С помощью этих материалов аудитория жанра сможет больше погрузиться в любимый жанр и узнать интересующую информацию в интересном ключе.
Цель проекта заключается в установлении связующего «моста» между прошлым и настоящим жанра, объединении музыки и искусства воедино как для молодой аудитории, так и более взрослой. Таким образом, на сайте вместе с представлением новых талантов есть статьи об истории жанра, о выдающихся личностях и подборки плейлистов для каждого этапа развития течения.
Целевой аудиторией проекта могут стать люди, интересующиеся хип-хоп-культурой как поверхностно, так и углубленно, для этого сайт предлагает различные статьи о жанре и исполнителях. Также целевой аудиторией могут стать читатели интернет-сообществ, публикующие новости из мира хип-хопа (Fast Food Music, Translate Hip-Hop, No Cap и др.). Привязанность к определенной стране и городу, а также доход не имеют значения.
В ходе работы мы определили, какие страницы должны присутствовать на сайте. Мы выделили четыре основные страницы, являющиеся отправными точками пользователя при знакомстве с контентом нашего сайта: главная страница - «Лайфстайл» - олицетворяющая площадку для вдохновения как художников, так и музыкантов, «статьи» с глубокими исследованиями в области музыкального жанра и «плейлисты». Также мы решили, что отступим от классических страниц подобных сайтов путем исключения страницы с освещением новостей, так как пользователи охотнее читают новости в более удобных социальных сетях, таких как Telegram и Вконтакте.
Вторым шагом в создании нашего медиапродукта стало создание User Flow, или же «потока пользователя» - диаграммы из блоков и связей, которая описывает путь пользователя по сайту для выполнения определенной задачи (От классной идеи до качественного продукта: зачем вам нужен User Flow. - URL: https://vc.ru/design/370515-ot-klassnoy-idei-do-kachestvennogo-produkta-zachem-vam-nuzhen-user-flow (дата обращения: 08.05.2024)). Чаще всего User Flow включает в себя все от первоначального контакта пользователя с сайтом до конечной цели, в нашем случае - до получения информации.
Первый этап пути нашего пользователя - попадание на главную страницу. Так как на нашем сайте нет личного кабинета пользователя, мы пропускаем этапы «регистрации» и «входа». Далее пользователь видит панель навигации, а именно меню страниц сайта. Пользователь выбирает взаимодействие с одной из страниц, либо же остается на главной. Повторное взаимодействие происходит, когда пользователь кликает на страницу из раздела, например, статью или плейлист. Далее пользователь выполняет конкретную задачу - получение информации, прослушивание плейлистов. Далее, для повторного взаимодействия пользователь может вернуться к предыдущим шагам для выполнения новой задачи.
Рис. 1. Поток пользователя
Далее мы занялись прототипированием и созданием wireframes - каркаса веб-сайта, который помогает визуализировать расположение элементов на странице (Вайрфрейм. - URL: https://media.contented. ru/glossary/vayrfreym/ (дата обращения: 08.05.2024)). Обычно вайрфреймы не содержат в себе такие элементы дизайна, как цвета, шрифты и изображения, фокусируясь именно на расположении элементов и блоков на странице, а также их функциональности. Мы выбрали создание вайрфрейма Low-Fidelity, то есть с минимальной детализацией. Для их создания мы выбрали программу Figma, так как она имеет все необходимые условия для создания макетов. Учитывая каждый раздел из нашего плана, мы воплотили их на страницах вайрфреймов. Всего мы имеем 4 основные страницы, по 3-4 раздела на каждой, меню навигации вверху каждой страницы, название страницы на главном экране и «подвал» сайта с контактами и повторным вертикальным списком меню. Ниже представлены вайрфреймы для каждой страницы сайта.
Рис. 2. Вайрфреймы
Компоновка мудборда. Мудборд - группа элементов или коллаж, помогающая дизайнеру понять общее направление и эстетику сайта (Мудборд для дизайнера: что это и зачем нужен. - URL: https://itlogia.ru/article/ mudbord_dlya_dizainera_chto_eto_i_zachem_nuzhen (дата обращения: 08.05.2024)). Он представляет собой различные референсы для вдохновения, палитру цветов, графические паттерны, шрифты, изображения и иконки. Также мудборд должен передавать общее настроение и стиль сайта, в нашем случае передавать его современный и экспертный настрой.
При его создании мы использовали референсы с таких площадок, как Pinterest и Behance. Основными цветами стали фиолетовый, черный и белый, стиль менялся от большого количества градиентов и модульного дизайна до минимализма с использованием минимального количества линий и изображений. Также в качестве основного шрифта мы выбрали семейство шрифтов Unbounded, предоставляющее возможность использования кириллицы, а также разные варианты стилей написания, в качестве второстепенного шрифта выступил Most Wazted, представляющий именно написание в стиле граффити. Были созданы векторные иконки, такие как стрелки для пролистывания карусели из музыкальных альбомов, стрелки для перехода на страницу с определенной статьей, а также звезды, используемые как логотип нашего сайта.
Рис. 3. Мудборд
Следующим шагом мы создали UI Kit - набор готовых компонентов для создания графического интерфейса (Усикова 2024). В нем собрана информация о возможных состояниях каждого элемента интерфейса: типографика, используемые отступы, цвета и эффекты. В ходе создания Ui Kit мы составили карту шрифтов под каждое состояние, в том числе для написания названия страниц, заголовков, кнопок, названий и описаний статей. Всего получилось 8 стилей. Были выделены 6 цветов - 4 оттенка фиолетового, белый и черный. Основной цвет веб-сайта - белый, он является фоном для страниц и статей, черный цвет используется преимущественно в качестве цвета текста, линий и графических элементов дизайна, таких как векторные изображения и иконки. Оттенки фиолетового также служат как цвет текста, а также графических элементов, преимущественно в виде градиентов от светло-фиолетового до черного. Также было выделено 7 типов отступов, от 8 пикселей до 104. В качестве эффектов на нашем сайте используется прозрачность определенных элементов, а именно плашек статей. Прозрачность равняется 24%.
Рис. 4. UI Kit
Следующим шагом мы приступили к созданию дизайна всех страниц сайта. В качестве программы для реализации нашей идеи мы выбрали Figma, так как ее функционал предоставляет возможность осуществить все наши идеи, а также позволяет перенести готовый дизайн сразу же в Tilda - программу для верстки сайтов. Мы создали 4 основные страницы: «Главная», «Лайфстайл», «Статьи», «Плейлисты», имеющие общие размеры, ширину в 1200 пикселей, создали уникальный дизайн для каждого раздела и установили последовательность разделов для каждой страницы с чередующимся местоположением названия раздела, чтобы пользователь удобно ориентировался по сайту. Между разделами мы выставили отступ в 96 пикселей, между элементами раздела отступ составил 8-16 пикселей, наибольший отступ в 104 пикселя используется на главном экране и в «подвале», его цель - отделить панель навигации от верхнего края, а также отделить контент «подвала» от основных разделов. На каждой странице мы применили графические элементы в виде линий, которые делят разделы между собой, графические элементы в виде стрелок, а также радиальные градиенты, вынесенные на задний план. В качестве логотипа мы используем векторное изображение двух звезд, также добавляем их в названия разделов страниц.
Отдельно мы создали 4 страницы с биографиями артистов музыкального жанра, 4 страницы со статьями из мира кино и литературы, 4 исторические статьи и 12 плейлистов. Все они представлены в минималистичном стиле с графическими элементами и интеграцией таких сервисов, как «Яндекс.Музыка» и Spotify.
Ниже представлены готовые дизайны страниц.
Рис. 5. Готовый дизайн страниц
Далее мы приступили к переносу сайта на платформу Tilda. Данная платформа была выбрана из-за ранее полученного опыта работы с ней, наиболее удобного интерфейса и понятного функционала. Для
осуществления переноса сайта мы ранее переименовали все элементы сайта: векторные элементы имеют название svg, изображения - image, текст - text, а кнопки меню и статей - button. Далее нам предстояло получить API-токен, чтобы Figma предоставила нам возможность переноса готового дизайна. Получив его, мы создали Zero Block на вкладке нашего сайта и импортировали каждый раздел сайта отдельно, это нужно для конкретной работы приложения.
После мы подключили домен к нашему сайту. Для этого мы приобрели домен frontiermag.ru на специализированном сайте reg.ru, в разделе управления NS-серверами мы прописали соответствующие имена, указанные в инструкции в справочном центре Tilda. Обновление настроек происходило в течение дня, на следующий день домен был подключен. Также мы зарегистрировали поддомены для каждой страницы нашего сайта. После мы опубликовали наш сайт. Таким образом, проект представляет собой готовый веб-сайт, освещающий историю жанра, биографии исполнителей, обзоры музыкальных релизов и подборки плейлистов.
Однако при создании проекта мы столкнулись с несколькими проблемами: первая и важнейшая -необходимость в поиске баланса между традиционными элементами хип-хопа и инновационными подходами, способными привлечь более широкую аудиторию; вторая - поиск подходящего оформления и контента, которые эффективно передадут атмосферу хип-хоп-культуры и будут понятными и привлекательными для пользователя; третья - поиск подходящего продвижения для такого нишевого продукта, как FRONTIER. Для решения этих проблем нам помогли тщательное изучение целевой аудитории и ее интересов, соответствующее исследование в виде анкетирования, а также решение начать продвижение путем создания канала в мессенджере Telegram. По итогам продвижения на канале увеличилось количество подписчиков до 70-ти, увеличился охват вовлеченной аудитории до 11 реакций в среднем на одном посте. Теперь люди, увлеченные хип-хоп культурой, осведомлены о нашем медиапродукте.
Выводы
В настоящее время хип-хоп является одной из передовых культур, вносящих свой вклад в развитие социальной сферы общества, а веб-сайты, в свою очередь, значительно влияют на развитие и популяризацию жанра путем предоставления платформы для обмена творчеством и идеями. Также они способствуют взаимодействию и укреплению фан-сообщества, создавая пространство для диалога между артистами и поклонниками, выполняют образовательную функцию, информируя посетителей об истории жанра, его значении как культурного и социального явления. Однако создание успешного веб-сайта требует преодоления ряда технических и креативных проблем, связанных с дизайном сайта, версткой и наполнением контентом.
Список источников
Василевич Е. Литературное «поколение интернета» и рэп-культура: векторы научной и критической рецепции // European journal of literature and linguistics. 2019. № 4. С. 37-41. DOI: 10.29013/EJLL-19-4-37-41.
Горбатых О. С., Долженкова И. В. Хип-хоп: история, особенности, основные направления // Образование и воспитание. 2019. № 6 (26). С. 28-30.
Гудин К. И., Брыкина В. А. Хип-хоп и андеграунд культура как современные виды искусства // Наука-2020. 2022. № 3 (57). С. 107-113.
Исмойилов Х. Б. Стили сайтов в веб-дизайне // Современные материалы, техника и технологии. 2018. № 2 (17). С. 49-53.
Луков В. А. Хип-хоп культура // Знание. Понимание. Умение. 2005. № 1. С. 147-151.
Назарова С. Н., Атаджанова Б. К. Технология создания веб-сайтов // Символ науки. 2023. № 9-2. С. 39-40.
Поздняков К. С. Паблик как аналог фэнзина (новые формы отечественной музыкальной журналистики на примере паблика «interesting Punk») // Поволжский педагогический вестник. 2018. Т. 6, № 1 (18). С. 111-114.
Попова А. А., Ольховиков К. М. Влияние хип-хоп культуры на мировоззрение молодежи // Развитие технологий здоровьесбережения в современном обществе : Материалы докладов участников международного студенческого научного конкурса (21 мая 2018, Екатеринбург). Екатеринбург: Издательство Уральского университета, 2018. С. 44-50.
Садыкова Д. А. Хип-хоп в пространстве современной культуры // Омский научный вестник. 2013. № 5 (122). С. 236-238.
Сахаров Е. И. История развития хип-хопа в России // Вестник магистратуры. 2022. № 11-5 (134). С. 29-30.
Трякина И. А. Влияние хип-хоп субкультуры на установки молодого поколения // Социальные явления. 2013. № 2. С. 99-106.
Усикова Е. Что такое UI-кит? / 24 января 2024. URL: https://bangbangeducation.ru/point/ux-ui-dizain/chto-takoie-ui-kit/ (дата обращения: 08.05.2024).
Хестанов Р. Хип-хоп: культура молодежной контрреволюции // Логос. 2016. Т. 26, № 4 (113). С. 7-27.
Шмакова Д. А., Колозов Д. П. Влияние российской музыкальной субкультуры хип-хоп на политические взгляды молодежи // Общество: политика, экономика, право. 2022. № 6 (107). С. 58-62. DOI 10.24158/ pep.2022.6.9.
Информация об авторе
К. А. Шуляк - студентка факультета журналистики Челябинского государственного университета.
Научный руководитель: Журавлева Анна Аркадьевна - доцент, кандидат филологических наук, доцент кафедры теории медиа факультета журналистики Челябинского государственного университета.
Статья поступила в редакцию 16.05.2024; одобрена после рецензирования 30.05.2024; принята к
публикации 15.06.2024.
The article was submitted 16.05.2024; approved after reviewing 30.05.2024; accepted for publication 15.06.2024.
Автор заявляет об отсутствии конфликта интересов.
The author declares no conflicts of interests.
