Процесс создания сайта лейбла Digital Om Productions

6 ноября 2015 · Даниил Соколовский

Дизайн Процессы Веб-разработка

Digital Om Production — музыкальный лейбл, расположенный в Индии и Непале. Лейбл выпускает современную электронную танцевальную музыку в стилях Progressive и Psychedelic Trance, а также работает как букинг-агентство для своих артистов.


Общаемся с клиентом, проясняем задачу, которую должен решать сайт. Его цель — помочь музыкальным фанатам купить издаваемую лейблом музыку, а также познакомить их ближе с артистами. В то же время для самих музыкантов сайт должен стать «домашней страничкой» с дискографий, биографией, пресс-китом.

Изучаем рынок, смотрим сайты других лейблов:

Сайты других лейблов

В целом ситуация в индустрии печальная: на сайтах других лейблов куча полупустых разделов, ненужных страниц и страшных социальных плагинов. Такого точно не хотим. Вместо этого предлагаем клиенту начать с малого — только основных и действительно нужных разделов и функций, а именно с каталога релизов и ростера артистов.

Закладываем фундамент — продумываем структуру будущего сайта, попутно разбивая разработку на несколько интераций. Получается такая схема:

Схема сайта

Вместо главной страницы, традиционно с которой начинается работа, мы начали с внутренней страницы музыкального релиза — скорее всего посетители будут чаще переходить на эти страницы по прямым ссылкам, чем на главную.

Размышляем: «прежде чем купить музыку, слушатели захотят ознакомиться с фрагментом. Значит нужна возможность выкладывать сэмплы».

Вместо того, чтобы писать собственный аудиоплеер, что потратило бы немало времени, решаем использовать API сервиса SoundCloud, лидера в области облачного хранения музыки. Для клиента такой вариант оказался удобным — лейбл активно пользуется Саундклаудом, на его страничке больше шести тысяч подписчиков.

Приступаем к дизайну. Делаем тёмную цветовую схему подстать музыкальному жанру, но разбавляем её колоритными обложками альбомов и яркими кнопками.

Размышляем: «Так, сверху — большие и яркие кнопки, ссылки на магазины, где продаётся музыка. Но что если добавить на сайт альбом, который еще не вышел? Что будет вместо кнопок?».

Решаем сделать пунктирный контур с надписью «Forthcoming» (грядущий релиз). Эта надпись будет автоматически выводится, если дата выхода альбома будущее число, значит менеджеру сайта не придется менять её вручную.

Чтобы на сайте не было «тупиков», связываем все страницы сайта друг с другом с пользой для посетителей: со страницы альбома или сборника можно попасть на страницу связанных артистов или другие релизы; на странице артиста можно посмотреть все альбомы или сборники, в которых он участвует.

Продумывая такие мелочи, тем временем, рисуем остальные страницы и разделы: главную, артисты, контактную информацию и другие.

Не забываем и про страницу ошибки 404 (это когда пользователь случайно попадает на несуществующую страницу, например, когда ошибается в написании адреса): чтобы зашедшему сюда пользователю не было скучно, размещаем небольшую историю о том, что такое «Ом».

Отдельные макеты делаем для мобильной версии сайта:

Собираем все макеты, готовим презентацию и показываем клиенту:




Клиенту всё очень нравится. Приступаем к вёрстке, программированию, скриптам, настройке панели администрирования, словом — к сбору рабочего сайта из картинок.

Владелец лейбла — настоящий любитель музыки, поэтому и к сайту он тоже относится с большим энтузиазмом, постоянно предлагая какие-то новые дополнения. Впрочем, большинства из этих идей нет на сайте. Да, бывает и такое: если мы убеждены, что какие-то решения сделают конечный продукт хуже, мы вынуждены мягко но настойчиво отказать в них, даже если инициатива исходит от клиента.

Сайт сделан в студии за 4 недели. Поддерживается и наполняется сотрудниками лейбла. Выражаем благодарность владельцу лейбла Нишану за горячий интерес к проекту.

О проекте

Разработка сайта лейбла Digital Om

в проектах студии

Читайте также

Процесс работы над логотипом детского магазина "Тютюпки"

Процесс работы над логотипом детского магазина «Тютюпки»

Интересное название у магазина детской одежды — Тютюпки! Не правда ли? :-) Мы тоже были удивлены, но, как оказалось, у названия есть история.

7 октября 2015
Дизайн сайтов в программе Sketch 3

Дизайн сайтов в программе Sketch 3

После публикации процесса работы над сайтом для лейбла Digital Om Productions меня просили рассказать, что это за странный графический редактор на скриншотах, в котором мы делали макеты. Рассказываю.

26 ноября 2015
Книга про буквы от Аа до Яя. Конспект. Часть 1

Книга про буквы от Аа до Яя. Конспект. Часть 1

Замечательная книга Юрия Гордона лежит у меня на столе и очень помогает в работе с буквами. «Книга про буквы от Аа до Яя» — это настоящая энциклопедия и учебное пособие. Чтобы лучше усвоить информацию, я сделала конспект книги. Надеюсь, другие дизайнеры и начинающие шрифтовики тоже найдут конспект полезным.

7 сентября 2016