Overview

Your best friend Brad Barren, a musician, runs a very small indie recording studio in a barn on his parents’ property. An active musician locally, he’s slowly accumulated a small roster of bands and solo musicians who occasionally trek upstate to Doglake Studios, where they record singles and albums that, until now, have been sold primarily at their concerts and, to a lesser extent, by direct mail via their Facebook or CD Baby pages.

Several of the bands have suggested that Brad form a small record label, something to give their albums a more professional affiliation. Brad can also use the opportunity to give his audio engineering and producing work some more visibility. He’s drawn up standard recording and distribution contracts and talked through them with bands he’s already recorded. He’s gathered some of the existing promo materials from those bands that he wants to use on a website. Between bands he has already recorded and leads he has with other acts, Brad figures he can have around 15 bands or musicians on his label with nearly 40 albums by the end of his first year.

Next month, he’s meeting with a loan officer at his bank to see whether he can take out a small loan to get the recording label off the ground. As part of that pitch, he’d like to show the loan officer some images of what the Doglake Records website will look like.

You’re not a web designer by trade, and you don’t know HTML from ASCAP, but you can do basic image editing, enough to mock up some pictures of a hypothetical site for Doglake Records. Brad wants you to create static images of several key web pages to serve as starting points for the designer/developer he’ll eventually hire to produce the site.

He also wants other bands to be attracted to Doglake so he can record new bands and sell new albums. So the Doglake Records site will also include some pages about Doglake Studios, to intrigue new bands. Brad says fans of the bands he works with also tend to be musicians themselves; even if they won’t be recording at Doglake Studios, they’ll be interested in the studio.

Brad’s given you a bunch of digital files with raw material you’ll use — logos for the recording label and for bands and musicians on the label, digital pictures of the studio’s recording facilities and of various musicians, and some text about the label and studio (see Raw Materials). When you ask him what he wants the website to do, he gives you three words: “Independent. Authentic. Mostly.” Unsurprisingly, that’s also the tagline he uses for Doglake Records. You press for more, but he says, “I trust you. Do something good.” Between that and the raw materials he’s given you, you’ll have to come up with something.

Brad’s also given you links to some of the indie labels he likes (see the links listed in the Background Texts section). He tells you to use them for inspiration: “These labels aren’t exactly the same as Doglake, but they’re all options for what our site might look like. Don’t copy them, but use them to think about what sort of vibe our site might have.” He doesn’t clarify what “vibe” means, but you’ll do what you can. You review the sites and can see that they represent a diverse range of music — the same sort of diversity that exists at Doglake — so they’ll be good starting points for thinking about the design you’ll work on.

You press him some more about what the site needs to do, and he’s a little more forthcoming: He wants the site to have a strong visual identity that matches the bands on the label. He says the band biography he’s giving you is a good example, so you can use that as a starting point. At one level, he says, he wants customers to feel like a part of a community, a part of a unique group of people who are willing to listen to things outside the mainstream. At another level, he wants those people to buy music from the site, to come to concerts, to buy merchandise. (No one’s getting rich in the independent music scene, but the label and bands need to make a living.)

Brad has given you a list of specific pages that he’d like mockups for. He’ll give these to the designer/developer as starting points for the final design. The pages each represent a specific type of page that will be on the final site.

Brad has also e-mailed you a “blueprint” for the site — an organizational chart that shows the main pages on the site and how they connect to one another (see below). The pages you need to mock up are in bold. The stacks of pages indicate that multiple pages will all have the same overall structure and layout but with different content. For example, there will be several dozen album pages, but you need to mock up only one. The same goes for band pages. You’ll need to include navigational links to allow users to move from any one page to the pages it’s linked to.