Категория > Самоучитель CSS > Лучшие дизайны музыкальных сайтов - «Веб-дизайн»

Лучшие дизайны музыкальных сайтов - «Веб-дизайн»


11-12-2016, 11:23. Автор: Thornton

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


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


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


Интересно будет посмотреть на некоторые нюансы в реализации этих веб-проектов. Например, иногда вместо полноценного сайта изначально открывается лендинг страница с рекламой последнего релиза или товаров исполнителей (предложение скачать альбом или как для сайта Джастина Тимберлейка реклама мультфильма, в работе над которым он участвовал). В таком случае дабы попасть на сайт исполнителя пользователю приходится делать лишние клики, что, конечно, немного странно. С другой стороны, музыкантов можно понять, продажа товаров — дополнительная часть их доходов. Поэтому на некоторых примерах ниже вы даже можете встретить функциональность магазинов.


Местами в статье встречаются небольшие комментарии к дизайнам музыкальных сайтов, которые могут вам пригодиться. Переход на сам веб-сайт — по клике на картинку.


Yello Rainbo




Patrick Kunka




Gavin Castleton (Old Site)




Старая версия сайта имеет хоть какой-то оригинальный дизайн, тогда как в новой — просто список ссылок на сторонние ресурсы (Youtube, Soundcloud, Facebook, Instagram, Twitter). Подобные линки, кстати, встречаются и во многих музыкальных сайтах (учитывая популярность соц.сетей это не удивительно).


Alicia Keys




Вот как раз пример промо акции для своего диска + ссылка на все магазины, где его можно купить. В самом низу — незаметный линк для перехода на сайт.


Ingrid Michaelson




Jason Mraz




Josh Groban




Mat Kearney




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


Jimi Hendrix




Красивая шапка со слайдером сразу же создает приятное впечатление от сайта.


Snow Patrol




Social Distortion




Rolling Stones




Дизайн, конечно, мягко говоря на любителя, но хорошо, что здесь представлено достаточно много полезной информации о группе + простая навигация. Иногда на сайтах нет даже такого.


Tim McGraw




Zac Brown Band




ZZ Top




Guns N’ Roses




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


Brad Paisley




Josh Garrels




Justin Timberlake




Francesca Battistelli




Eminem




The Kills




Jamie Cullum




Сайт выглядит неплохо, компактно так и со всей нужной информаций. В нижней части расположена трансляция постов из соц сетей (Facebook, Twitter), есть ссылка на Spotify и т.п.


Steven Wilson




Lights




Sound Garden




Musique Nomade




Логично, что на многих сайтах имеется фоновая музыка. Иногда она сопровождается фото или видеорядом на фоне. Это, в принципе, смотрится неплохо.


More Hazards




Rock Werchter




Nightshiftent




Billy Harvey




Крайне оригинальная навигация. Даже если из Билли не получится профессионального музыканта, креатива ему определенно не занимать.


Plan B




Robbie Seay Band




Pendulum




The Chemical Brothers




Plants And Animals




Samfeldt




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


Reach Records




Avenvan




Un Plan Simple




American Fangs




Brigitte




Mississauga Symphony Orchestra




Kenji Endo




Toro




Broken Bells




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


Suie Paparude




Достаточно оригинальная навигация.


Dub Fire




Conoce Valencia




Green Man




Креативный и необычный дизайн музыкального сайта.


Напоследок представляем несколько концептов дизайнов с Dribbble, которые также могут помочь вам с вдохновением. Эти работы выглядят ярче чем большинство дизайнов выше.


Music Web




M83 Web Concept




BRMC Website




RemQIU Music Events Landing




Eton Messy Website




Music Lyrics Webpage




Lafur Arnalds




BOSS




Если честно, выбирать лучшие музыкальные сайты было достаточно сложно. Как мы уже говорили выше, очень много проектов имеют посредственный, шаблонный дизайн, хотя по идее данная ниша требует каких-то ярких и необычных решений. Возможно, исполнители не рассчитывают на аудиторию, которая заходит из поиска, а больше коммуницируют со своими слушателями через соц.сети. Сам веб-проект, по сути, им нужен только для организации продажи товаров — новости можно читать в Facebook или Twitter, для фото и видео придуманы Instagram и YouTube.


Перейти обратно к новости