Designing Outside the Lines: Stretching the Music-Site Template Without Going Premium

While pour-and-serve web templates allow for fast, simple and cost-effective music-site creation at places like Bandcamp, SoundCloud and MixCloud, design and layout remain the trade-off. An artist, for example, can create any type of avatar or banner graphic that best reflects his or her music. Yet the size and placement of those graphics within the site stand fixed by the hosting service, which isn’t fundamentally a bad thing. Standardization means one site functions like the next, making it easy for users to find and play recordings, and that serves everyone. A homogenous approach also keeps server-use maximums level between artists, encouraging companies to continue offering free hosting service. And let’s face it. Some people just don’t care that much about visual design. As long as a site functions and fans can download or stream recordings, it’s all good, and that’s definitely a valid outlook. However, for those looking for a bit of visual distinction while staying on the wallet-friendly side of those paid premium packages, here are a few tricks, beginning with a look at the whole.

RadXPic1 abm creative servicesThe compartmentalization of upload features for things like banner graphics and avatars means there’s a tendency to see elements in isolation, and end-result combinations can be undesirable. I found this when designing a new banner graphic for a podcast site on MixCloud. Working from a design I’d previously used to good effect on Facebook and WordPress, I re-worked the graphic to MixCloud’s banner dimensions, but when I refreshed the page, the template’s avatar field sat jarringly right in the middle of the logo. (Obviously this was no good.) So I stepped back and treated the avatar field as part of the whole. Taking a screen shot of MixCloud, I assembled the same color palette for both the avatar and banner images, working them separately in Illustrator until, when blended on upload, the entire top portion of the page appeared as a single graphic. Such blurring of field definitions is one of the simplest ways to add subtle difference to a static template, and is easily applied in other ways.

RadXPic2 abm creative servicesKey in “Bandcamp album cover” in Google Images, for example, and you’ll see a waterfall of images, compositionally different but all aligned at 90 degrees, meaning one begins to blur into the next after a while. So one of the simplest ways to stand apart from the waterfall is to consider not being at 90 degrees—an effect that I applied some while ago to a personal music site. Choosing a tan-colored background from the site’s color picker, I took a screen shot and created a separate image template to the dimensions required by Bandcamp for an album-cover upload. Coloring the template tan from the screen shot, I overlaid the tan template with different album-cover art, skewing each and setting drop shadows before saving them out as completed PNG files. The end result: The final images appeared to sit seamlessly askew on Bandcamp, and while the images wouldn’t seamlessly flow should I change the background color on Bandcamp, I felt any re-working of the art on new inset templates was a minor inconvenience to not have images at 90 degrees.

In the end, it may seem to some like small creativity in lieu of full-on website design, but where a free site makes sense for an artist, small ideas like the above and others can go beyond the lines, and that may be a large part of what music has fundamentally always been about.


One thought on “Designing Outside the Lines: Stretching the Music-Site Template Without Going Premium

  1. Thanks for this post! While looking everywhere to find some kind of template or any information at all for this type of thing. I sat back and thought, ‘everyone has to have wanted to do this so there must be a template!’ Boy was I wrong. At least now I know I am not the only one who wanted to try to do this sort of thing and that it worked for you.

    The pain I’m running into is that my banner has text (the tracks from the latest release) and even though I’m trying to just get it to mesh in a browser, I know the mobile version will probably go out of sync.

    Anyway, I enjoy your site and I appreciate the post.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s