These days there are many ways to connect your music to fans. Though many of these options are useful, the personal website is still the way to go for the ultimate in power and flexibility. This article takes a look at a music website project from start to finish. Along the way it discusses both technical issues as well as valuable insights on music distribution that a website project like this reveals.
The Advantages of a Website
A website offers several advantages over other options like social media services. Most of the strengths of a website revolve around the it’s potential for complete customization. With this customization, a designer can turn a website into a unique presentation which can in turn more deeply express the message of the content it presents. A website also frees you from the unexpected and frustrating design changes that social media companies are known to implement. Finally, unlike trendy social media, a website can adapt to the times and, if properly maintained, will never go obsolete. With your own website, you are a property owner on the digital frontier. With a little bit of effort, the value of your virtual property has nowhere to go but up.
The Modern Music Album
Now that some advantages of a website have been shown, it’s time to take a look at a real project, alivemachine.com. This project, at it’s most basic level, is a website built to release online a cohesive set of music, images, videos, and sound. At a deeper level, it seeks to re-envision the traditional album in the modern day format of an interactive, online experience. Primary to this goal was to build meaningful relationships amongst the audio, visual, and text-based content. These relationships are what provide meaning in both the old album and possible models of the future. Thus, the driving force or thesis, of alivemachine is to both explore new types of relationships amongst media, and to implement these with the aim of providing new dimensions of experience for the visitor.
The considerable ground lost by the album to the single over the past decade does not however diminish the importance it has as a medium of expression. With it’s carefully selected songs, artwork, lyrics, and credits, an album can express meaning that a single song can’t. A main contributing factor to the album’s loss of importance is the mainstream acceptance of relatively new, digital-based distribution models for music. Most of these models make the single far more accessible than the previous compact disc format. Making matters even worse for the album is that it’s modern digital version is no more than a low resolution (lower quality sound and images) copy of it’s earlier versions. Whether a result of short-term greed or just plain thoughtlessness, the result has been a downward spiral for the album and the rise of the single.
Though the future for the album may look bleak, it’s not one set in stone, particularly since the current revolution is one based in software rather than hardware. Unlike hardware, software is extremely flexible and can be developed at a low cost. Thus, if approached differently, the same technology that is currently killing the album has the power to bring the album back to prominence, albeit in a new and potentially more powerful digital format.
If the album is to make a comeback, it will not be an easy one. Much of the technology and skills needed (UI and UX) are relatively new and constantly changing. This is further complicated by the sheer number of technological options, platforms, standards, and formats. These technological roadblocks are however easy compared to those of perspective and it’s almost complete lack of precedants. To be fair, a handful of music apps have been attempted, one of the more prominent being Bjorks “Biophillia”. Even with big budgets, it’s obvious that there’s a way to go before something meaningful or revolutionary arrives. But big budgets aren’t necessary to get a handle on some of the fundamentals for exploring the future of music distribution. Building even a relatively simple website can provide the basic tools and the perspective necessary to take a serious look at the future of the music album and music distribution in general.
Organizing the Content and Planning the Site:
When building a music website prominently featuring audio and visual information, a good place to start is by organizing the content. Spending time working hands-on with the content gives a good sense of the possibilities for the project to focus on. It’s from these possibilities that the structure and core concepts arise.
In the case of Alivemachine, the content consisted of a professionally mastered album, singles, individual sound samples, album artwork, additional artwork, and a video. It was during the process of organizing that the conceptual link between the sound samples and the music was discovered. As the project progressed, this relationship between sound and music would go on to form a major part of the structure and flow of the website.
The bridges from media content to idea, and from idea to reality, are not necessarily easy ones to cross. A pencil and paper can help out with this. Sketching layout concepts by hand or building photoshop prototype collages are effective tools during this stage. Studying other websites provide insight into webdesign, not to mention a good source of ideas for your own site. Take a look at the diagram below to see the flow from photoshop to actual website for early designs of Alivemachine.
It’s important to remember that the process of taking an idea and turning it into physical reality is no small feat. Because of this, serious obstacles can arise at the point where an idea for a site is transformed into an actual website. Just remember that it’s a process involving a lot of trial-and-error. Though these experiences may seem difficult and unproductive at the time, they are necessary for understanding what to do by clearly seeing first-hand what not to do.
Alivemachine was no exception and presented a serious obstacle early on: how to organize the different types of media content onto a single page format that made sense. Even though each image, video, and sound related to the album, each played a different role in the overall picture. Early photoshop prototypes revealed that simply separating each visually through interface graphics would be too unfocused and chaotic. This content needed to be separated in a more meaningful way. After some research, it was determined that the blog format with it’s “articles” on the front page would be the solution. In a blog, each article is separated from the next by various markers including release date, comments, and links. By using multiple articles on a single page, with each article containing a separate piece of the content, everything could now be displayed logically and effectively on a single page. From this point it was a matter of finding what technology would be the best choice and adapting the ideas and content to the format of that technology.
Enter the Blog:
When it comes to blog platforms, there are currently three main choices: WordPress, Blogger, and Tumblr. A comparison of each is beyond the scope of this article and it may be time well spent researching each. The industry standard for serious blogs is WordPress. It’s not the easiest to learn of the bunch, but for sheer power and flexibility, it’s the clear winner.
The specifics of installing and setting up a WordPress site is also beyond the scope of this article, but it’s easy to find information online regarding this. A few good places to check out are the Official WordPress Install page and this article on Setting Up WordPress. One tip not often mentioned is that there two different WordPress entities: WordPress.org and WordPress.com. Both of these are owned by the same company called Automattic. The difference between the two is that WordPress.org is self-hosted while a WordPress.com blog is hosted by Automattic. Going with WordPress.org is the best choice for the long-term since it offers the most freedom, at the cost of learning about domains and hosting.
Once the domain name is setup with the hosting company and WordPress is installed, the content of the site needs to be formatted into a the framework of WordPress. Those earlier sketches and photoshop prototypes can be helpful at this stage to be used as a guide or visual reference. The diagram below illustrates this basic WordPress layout. Each of the boxes are representations of the underlying framework which defines the look of the site.
This is the default layout, or a “theme” in WordPress speak, and comes included in the WordPress install. Additional themes can be easily installed, quickly changing the layout and look of a site. These third-party themes are created by other WordPress users and come in both free and paid versions. However, if the goal is to create something unique, it’s a good idea to stick with the defualt theme and learn how to modify it. This route requires learning the basics of web design including HTML and CSS. These skills will come into play down the line and can be the deciding factor on whether the interactive and visual potential of the site is unleashed.
Go with the Flow:
The visual presentation is important, but it’s only half of the story. Behind the graphics are the intentions and goals of the site for it’s visitors. People in marketing refer to these objectives as “call-to-action”. On a music site, call-to-action examples include buying the album, downloading free content, providing an email address, etc. The purpose in this regard of alivemachine.com is to have the visitor click on the “Buy Album” button found on the music page. Since a website is non-linear (more than one way to travel through it), there are many pathways available to take towards this end goal. It’s the job of the designer to think like a visitor might think and figure out a logical and efficient way to lay out these pathways. But before going any further, it’s important to first understand the difference between static and dynamic pages.
The concept of static and dynamic pages is one of the primary differences between a blog and non-blog website. The difference between the two types of pages is relatively simple. A static page is a page on a site whose content does not change. This is the type of page found on most older websites that resemble brochures. Static pages offer complete freedom when it comes to layout and design since they don’t have to accommodate any changes to the content. Dynamic pages on the otherhand are pages with content that constantly changes. The front page of a blog is a good example of this. New content is constantly added in the form of “posts”, with the most recent appearing at the top of the page. Most modern websites combine static and dynamic pages. They use the strengths of each to create pathways through the site which move the visitor towards the call-to-action.
This combination of dynamic and static pages is used to full effect on alivemachine.com. The front “New Release” page of the site is dynamic, while all of the other pages including “sound”, “music”, “about”, and “contact” are static. Both the front page and others are connected through links with the aim to bring the visitor eventually to the “music” page.
More specifically, the front page is used to organize the releases of individual content (music singles, video, sound samples, etc.) by date in a sort of timeline fashion. These releases or posts each contain catchy audio or visual material, brief text summaries, and a “more info” link. This link connects the more curious visitors to the other static pages of the site. An example of a single post on the front page can be seen here:
The goal of a post on the front page is to catch the eye of the visitor with sound and images. If the visitor sees something they like, they then have the option of clicking on the “more info” button which takes them to one of the interior static “music” or “sound” pages. These are each specially designed to present the content the best way possible. An example of one of these pages can be seen below.
Finally, just as the front page articles link to the static pages, static pages can also link to one another. For example, each sample pack on the sound page links to the music album page. Again, this has to do with the aim of of guiding the visitor to the music page where the call-to-action button to buy the album is located. The gaol of a site should be to have all links throughout the site work in a logical and user friendly way.
Customized Music Players:
One important decision to make while building a music site is what technology to use for the sound player. In most situations, the choice will involve either Soundcloud or a custom built player. Soundcloud is a versatile, cloud-based solution offering useful social and tracking features. Soundcloud also have great compatibility across devices, particularily iOS devices like the iPhone and iPad, since they are built in HTML5.
For Alivemachine, it was decided that Soundcloud players were to be used for all audio on the front page. The primary reason for this was compatibility. For the more specific “sound” and “music” pages of the site however, the design and layout was more important than compatibility. These pages each use custom built players in Flash to give them a seamless look that would be impossible to achieve using Soundcloud. Compare the screenshot below with the ones above to see the difference custom sound players can make on a page.
Again though, this freedom of design comes for a price. Flash is not supported by iOS and thus shows up as a blank space on an iPad and iPhone. These devices are already wildly popular and iOS will still has some room to grow. Because of this Flash is not recommended. To get the best of both design and compatibility, a custom HTML 5 audio player is the smart choice.
Integrating Social Media:
Social media is an important element of online experience and there are different ways to integrate it into a website. The Alivemachine project uses two different methods. The first of these the addition of a second bar underneath the menu that appears at the top of every page. This additional bar was built by adding custom CSS/HTML code to the layout. As you can see in the example below, it contains links to Facebook, Twitter, and the RSS feed (a subscription feature of blogs) on the right, and a Facebook like button on the left. With this sort of design element, a visitor has quick and obvious access to these links from anywhere on the site.
Another way that social media integrates into Alivemachine is through links to various sites found at the bottom of each post on the front page. These allow the featured content to be shared via facebook, twitter, and email both from the front page as well as to each individual page addresses of the posts. These icons at the bottom of posts are an almost universal standard of the blog format. They are created by using plugins, which are miniature programs installed into wordpress to increase functionality. When it comes to the layout of these icons, there are numerous plugins to choose from to give the site a custom look.
The Whole is Greater than the Sum of it’s Parts
Most of this article so far has focused on the various components of a website. Though understanding these parts is crucial to building a site, the real power of a site comes from the sum of these parts. The aim is for the visitor not see the Soundcloud player, the like button, or different pages… but instead to take part is an experience. Done right, the result is a unique experience tied to the music. One of the key factors in this is to design thoughtful, creative relationships amongst the content on the site through the interactive audio-visual capabilities a website offers.
A large part of Alivemachine focuses on the link between the music on the album and the individual sounds used to create this music. The sounds themselves are available as downloadable sound sample packs on the site. For those who are curious about production, the samples provide a more detailed look into the music’s creation. More importantly though, since the downloaded sounds are free to use in new music, a basic form of interactive music appears. All in all, the availability of these samples opens up a new dimension of the music for the listener. Though it remains to be seen just how interactivity will tie into music in the future, this example show that you don’t need advanced technical skills to work with meaningful ideas in interactive music. Though many current apps are questionable on how they approach things, it’s likely that interactive music will play some sort of role in the future of music.
The Future
The Alivemachine project set out to release a music album in the most cutting-edge way that skills would allow. Though the potential a website had for music was obvious early on, it wasn’t until the project’s completion that the full implications came to light. Following the project, it’s now easy to see that the physical album actually shares a lot in common with a website. Both are built from parts and create an interactive experience out of sight, sound, and information. And both bring the listener further into the vision of the music than the music alone can achieve. But as time goes on, so does the evolution of the power of technology. The differences between a vinyl record from a few decades back to a website of today are massive. Just imagine what the possibilites will be five or ten years from now. But even with these technological advancements, the goal remains the same: to expand the experience of music for the listener.
The things you will learn while building a website for your music go far beyond the site itself. Many of the concepts needed are the same that are used in all sorts of interactive media projects, including apps. An app however is far more technical and to build one requires a serious background in software design. Because of this, it’s useful to view a music website as a prototype or better yet, as the foundation of knowledge necessary for the future exploration of interactive music. So though your next project might need a larger team, it will still be you who is the one making the primary decisions on how your fans interact with your music. With this in mind, there’s really no better way to start conceptualizing the music apps of the future than to build a site for your music today.
—————
If you enjoyed this article and would like to see more in the future, consider checking out the music featured in it here.
Great concept. Your assembled presentation is outstanding! I will be sharing.