Musicians, Need a Website for your Projects? Lean on your Guitars for Design Inspiration!
Alex Kraieski
So you want to be a guitarist on the internet? You probably should have your own website at some point.
From Jack McDade's Radical Design Course (which I highly recommend purchasing, btw), one of the big process things I learned about designing stuff is the importance of curating your inspiration and letting your influences mix together from various parts of your life. As musicians, we already do this. We like to surround ourselves with guitars that we find inspiring. And that inspiration can carry to media besides music, like web design.
Designing stuff can definitely be tricky, and I have no doubt that some musicians and bands who would otherwise love to have a website are put off because they aren't sure where to start. But if you simply look at your guitars, you'll start to see things that inspire you. Yes, I'm serious. And I'll show you what I mean.
Different Approaches to Custom Websites
If you want to have a website design that actually reflects your personality/branding and helps you stand out from the crowd, you probably quickly come to the conclusion that throwing up some uncustomized Wordpress theme isn't going to get you too far. But surely a custom website is limited to artists with major label backing who can hire agencies with hordes of designers and engineers, right?
Nope! But I do think that it is important to explain how there are different ways where you can end up with some degree of a "custom website" since it affects how you would actually use the information I'm going to give you about finding inspiration for website designs.
Start with a premade website theme or starter kit and customize: There are a lot of products out there (both on public marketplaces and privately used by freelancers) that do a good job of giving you a head start on a website theme that can be customized. This means you can defer to certain existing choices if you are ok with the taste/functionality of someone else. If you are hiring a developer, they can focus billable hours on differentiating features instead of reinventing the wheel.
Sketch up a website design (or commission one), then hire a freelance developer that specializes in accurately building custom website designs: This option may tend to be pricier than the first (although the line is blurry between this and option 1 in reality because the developer isn't going to be starting totally from scratch behind the scenes with each new website), but there are freelancers who can get you very good results here. Conversely, if you don't know what you want exactly from a design perspective, then you don't want to hire someone who specializes in pixel-perfect implementations of custom designs.
Hire a freelancer with both design and development skills and give them a lot of discretion to build something that fits your "branding": This can be a good direction to go if your preferences are articulable but vague or if you have some other sort of designed medium for promotion that you can copy from (tour posters, merch, etc.)
See what you can get with genAI: It is still worth hiring a pro developer for this (at least at some point in the process) to make sure you avoid security, accessibility, and maintainability footguns, but you can get pretty far iterating on a website frontend (the UI that your visitors see) with an AI coding agent. This can be good if you have words that can describe the appearance of the website you want but can't quite picture how things might come together without starting
To some extent, the distinction between these paths (and other alternatives too) are artificial. No web developer or designer is truly ever starting from scratch in their work, so any of these can be a derivative of option 1. But my point is to demonstrate that different paths expose different choices that let you shape the design of your site.
This website is an example of option 1. I chose a free starter kit and customized it with colors and textures from guitars I own. This let me quickly get started with writing content for the site, which was always the main goal here. If I wanted to design and build my "ultimate guitar blogging website theme" from scratch, that probably would have taken a detour of a week or so because it would have upped the amount of inspiration gathering necessary to have things start overflowing into creation.
Mining your Guitars for Inspiration
As a musician, this is probably already obvious in a musical sense, but it applies to web design too.
They say the 2 hardest things in computer science are naming things and cache invalidation, but in building websites, picking colors and building out a color palette is often a non-trivial task. There are people that build their entire careers by engineering "design systems." You almost certainly need more colors than you think. If you want part of your website to have some green, for example, your site will likely need several other greens for different accents and states of interacting with the site. What happens when a user hovers their mouse over your green buttons?
I have very practical reasons for all the guitars I buy, but part of it is to nudge my mood in different ways from pure aesthetics when I play. I don't think you can can't look at these 2 "Stratocaster-ish" guitars and say that you would play exactly the same kind of music on them naturally if you picked them up (even if we ignore the unplayable baseball bat of a neck that the PRS has):
Just from color alone, the Charvel is going to psychologically push you into a "lord of shredding and punishing riffs" mode, and the "Dandy Lion" PRS is going to encourage more playful, bright playing. The colors of our guitars influences our emotions and our playing. That is the point. So I think it stands to reason that if you have multiple guitars, there are probably some finish colors in there that resonate with you emotionally. For this site, I ended up picking the "Primer Gray" from my hardtail Charvel to use in my navbar.
The contrast between those two guitars also shows that colors can be "loud." Loud colors can definitely work in designs, but you do need to be conscious of how loud they are and use excessively loud colors sparingly. They can be good for accents.
I have another Charvel that is "Ferrari Red", and boy is it inspiring! But at the same time, it is easy to see how this bold red could get annoying in a website background, for example:
It's the kind of guitar that grabs your eye and puts a smile on your face when you enter the room, but it is easy to see how such a red color could be overdone in countless possible ways in a website design. Initially, I wasn't even sure if I was going to use this red in this website, but eventually a perfect use came to me that I'll get to later.
Also, keep in mind that red is not a neutral color in UI design. It is frequently used to caution the user about destructive actions. For example, a button to delete your account in a website or app is frequently red. If you are going to use red in your designs outside this role, you need to be careful that you aren't accidentally saying "hey, don't click this button/link, something destructive might happen." That's not to say that you can't use red in a website though! Slayer certainly does.
Typography and Textures
We can also look at guitars for inspiration in terms of typography and textures. Every website needs fonts, and your choice of fonts can make a huge statement aesthetically. If you are in a band, you might already have fonts that you use for promotional stuff. But if you are solo, there is an even greater chance that you might not have thought about what fonts you should use to present yourself.
Anyway, I'm not a font expert, and I don't see it as my job to teach you about fonts here. But I do want you to look at the fonts on your guitar. In fact, the font on the headstock is actually an example of where guitar manufacturers can stand out even as their peers produce similar-looking designs. From my own guitars, I think the Charvels stand out again with their usage of the font to evoke a guitar. I love when brands do stuff like this!
See what you find on your headstocks, and with the fonts that work, think about what makes them work.
Web designers also love textures like images of tiles, rocks, wood grains etc to use in parts of designs. Wait, wood? You mean the thing guitars are made of? Exactly! I took a photo of my hardtail Charvel's neck and used it directly to make this site's footer. This seems like a fairly repeatable thing to me (for designs where wood textures work of course), and there are countless other ways you can use close up shots of your guitars, basses, and more in your site. Get creative!
Steal the Designs of Borrow Inspiration from Industry and Artist Websites
If you are a guitarist, you are familiar with the Fender Stratocaster. You are also familiar with a world of "super strats", ''S-style guitars", and "double cuts." The idea of copying elements of someone else's design without crossing certain lines is a part of your lived experience. Successful artists and designers will tell you that the same thing applies in web design. Designs borrow from each other.
Continuing along the lines of using our guitars to help get website inspiration, you can also look at the websites of guitar brands that you like. Since the websites for a guitar brand and a guitarist have different goals, don't get too hung up on their overall page structure and content. Instead, look for small bits that you think could be worth partially borrowing. Is their anything interesting about their buttons? Their navigation menu? Their forms? Don't just passively stare at it, either. Try various interactions and note what happens to components on the site (this is where you can see just how many color variations are required on a lot of websites.
With this design from Charvel's website, one thing that stood out to me is that 'view now' button. It's not the fanciest thing it in the world, but I liked its aesthetic for the brand. The angular corners convey strength and precision (in contrast to a more rounded, playful design), and the designer also made some good choices with regard to the button's yellow color. Yellow, similarly to red like we discussed earlier, tends not be neutral in interfaces. The wrong shade of yellow used poorly in your design can make it look like you are putting up caution tape around part of your website. But I don't get that at all here.
If you want to look at website design examples more holistically, obviously websites of famous artists give you better starting points because they have similar or the same goals as you: getting people to listen to music, buy merch, etc.
What is your Site Trying to Accomplish?
Although there are many design cues you can pick up from your guitars, the more important part of designing a website is structuring the content in a way that encourages the visitor to do what you do want them to do. If you are primarily trying to sell guitar lessons, that requires a different design than a website that's intended to support/grow your streaming and touring audience. No matter how good of a visual inspiration source your guitars are, you still have to think about your sites goals and how real people are going to use it.
As I was writing this article, there was a feature I realized I sort of had to implement that serves as perfect example of what I mean by "thinking about how real people will use it." If we are being honest, most readers who will find their way to this article will find it from a search, read this single article, and then leave. There might not be any chance to build up context/rapport/credibility from the reader looking at multiple articles or my "About" page. And I don't want to have to explain who I am somewhere in every article! Therefore, it became clear that I needed a quick "About the Author" box at the bottom of the page. And this was a perfect place to finally sneak in the Ferrari-red from my Charvel with the Floyd.
Recap: how did I incorporate my guitars into the design of TubesAndCode.Studio?
Grey in nav inspired by my hardtail Charvel
Footer uses a picture of the wood in the neck of the same Charvel
"About the Author" section has a red border inspired by my other Charvel (HSS with a Floyd Rose)
At the end of the day, my approach here has probably been more literal than it would be in lot of other real world projects. Not every musician website should be "Hey, here are my guitars in CSS format!" but I think I've shown that there is ample material to pull from for designs if you have guitars (and basses!) around you.
Look for Beauty and Contradiction in the World Around You
A great website can be an asset to your career as a musician. And let's be clear: the design is the asset. You need it to be tailored to your goals.
Luckily, us musicians, often without consciously realizing it, tend to curate inspiring physical objects in the form of our gear. This is a very tangible way in which you are not starting from scratch in the quest to get a website designed and launched that will meaningfully accelerate your career. Good luck!
