http://tsokolovskaya.ru/blog/tags/digital-om-productions/ Раскрываю процессы, конспектирую книги, пишу советы. en Aegea 11.3 (v4134e) mail@tsokolovskaya.ru Раскрываю процессы, конспектирую книги, пишу советы. no 33 http://tsokolovskaya.ru/blog/all/digital-om-website/ Tue, 27 Oct 2015 18:54:40 +0100 http://tsokolovskaya.ru/blog/all/digital-om-website/ <p><a href="https://digitalom.in">Digital Om Production</a> — музыкальный лейбл, расположенный в Индии и Непале. Лейбл выпускает современную электронную танцевальную музыку в стилях Progressive и Psychedelic Trance, а также работает как букинг-агентство для своих артистов.</p> <p>Над проектом работали совместно с коллегой. Пообщавшись с клиентом, прояснили задачу, которую должен решать сайт. Его цель — помочь музыкальным фанатам купить издаваемую лейблом музыку, а также познакомить их ближе с артистами. В то же время для самих музыкантов сайт должен стать «домашней страничкой» с дискографий, биографией, пресс-китом.</p> <p>Изучаем рынок, смотрим сайты других лейблов:</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-1.jpeg" width="1200" height="1152" alt="" /> <div class="e2-text-caption">Сайты других лейблов</div> </div> <p>В целом ситуация в индустрии печальная: на сайтах других лейблов куча полупустых разделов, ненужных страниц и страшных социальных плагинов. Такого точно не хотим. Вместо этого предлагаем клиенту начать с малого — только основных и действительно нужных разделов и функций, а именно с каталога релизов и ростера артистов.</p> <p>Закладываем фундамент — продумываем структуру будущего сайта, попутно разбивая разработку на несколько интераций. Получается такая схема:</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-2.jpeg" width="1200" height="939" alt="" /> <div class="e2-text-caption">Схема сайта</div> </div> <p>Вместо главной страницы, традиционно с которой начинается работа, мы начали с внутренней страницы музыкального релиза — скорее всего посетители будут чаще переходить на эти страницы по прямым ссылкам, чем на главную.</p> <p>Размышляем: <i>«прежде чем купить музыку, слушатели захотят ознакомиться с фрагментом. Значит нужна возможность выкладывать сэмплы»</i>.</p> <p>Вместо того, чтобы писать собственный аудиоплеер, что потратило бы немало времени, решаем использовать API сервиса SoundCloud, лидера в области облачного хранения музыки. Для клиента такой вариант оказался удобным — лейбл <a href="http://www.soundcloud.com/digital_om">активно пользуется Саундклаудом</a>, на его страничке больше шести тысяч подписчиков.</p> <p>Приступаем к дизайну. Делаем тёмную цветовую схему подстать музыкальному жанру, но разбавляем её колоритными обложками альбомов и яркими кнопками.</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-3.jpeg" width="2000" height="1102" alt="" /> </div> <p>Размышляем: <i>«Так, сверху — большие и яркие кнопки, ссылки на магазины, где продаётся музыка. Но что если добавить на сайт альбом, который еще не вышел? Что будет вместо кнопок?»</i>.</p> <p>Решаем сделать пунктирный контур с надписью «Forthcoming» (грядущий релиз). Эта надпись будет автоматически выводится, если дата выхода альбома будущее число, значит менеджеру сайта не придется менять её вручную.</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-4.jpeg" width="1794" height="1130" alt="" /> </div> <p>Чтобы на сайте не было «тупиков», связываем все страницы сайта друг с другом с пользой для посетителей: со страницы альбома или сборника можно попасть на страницу связанных артистов или другие релизы; на странице артиста можно посмотреть все альбомы или сборники, в которых он участвует.</p> <p>Продумывая такие мелочи, тем временем, рисуем остальные страницы и разделы: главную, артисты, контактную информацию и другие.</p> <p>Не забываем и про страницу ошибки 404 (это когда пользователь случайно попадает на несуществующую страницу, например, когда ошибается в написании адреса): чтобы зашедшему сюда пользователю не было скучно, размещаем небольшую историю о том, что такое «Ом».</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-5.jpeg" width="1200" height="753" alt="" /> </div> <p>Отдельные макеты делаем для мобильной версии сайта:</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-6.png" width="1200" height="851" alt="" /> </div> <p>Собираем все макеты, готовим презентацию и показываем клиенту:</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-7.jpeg.jpg" width="774" height="2560" alt="" /> </div> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/dom-8.jpeg.jpg" width="904" height="2560" alt="" /> </div> <p>Клиенту всё очень нравится. Приступаем к вёрстке, программированию, скриптам, настройке панели администрирования, словом — к сбору рабочего сайта из картинок.</p> <p>Владелец лейбла — настоящий любитель музыки, поэтому и к сайту он тоже относится с большим энтузиазмом, постоянно предлагая какие-то новые дополнения. Впрочем, большинства из этих идей нет на сайте.</p> <p>Сайт сделали за 4 недели. Поддерживается и наполняется сотрудниками лейбла.</p> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/digital-om-20151015.jpg" width="900" height="1347" alt="" /> </div> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/distances-20151015.jpg" width="900" height="979" alt="" /> </div> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/music-20151015.jpg" width="900" height="1806" alt="" /> </div> <div class="e2-text-picture"> <img src="http://tsokolovskaya.ru/blog/pictures/digital-om.jpg" width="524" height="2560" alt="" /> </div> <hr /> <p><b>Участники проекта</b></p> <table cellpadding="0" cellspacing="0" border="0" class="e2-text-table"> <tr> <td>Ведущий дизайнер<br/>Таня Соколовская</td> <td>Дизайнер<br/><a href="http://dsokolovskiy.ru">Даниил Соколовский</a></td> <td>Разработчик и верстальщик<br/>Максим Сильнов</td> </tr> </table>