From Scratch – Adventures in Independent Music Making

Posts Tagged ‘Website’

How did I do that?

During the 3rd week of the 2nd wave of the Music Success in Nine Weeks blog challenge, I did a complete overhaul of my website from creating a brand new background graphic (from scratch) to re-designing the layout of the content. A few people wanted to know how I did it and so I decided to take this week to finally complete the description and share it with everyone in case there are more people out there that could benefit from the answers. It’s laid out in a relatively simple format with links to sites, articles and videos I found useful during the design process. I had absolutely no training in graphic design and very little knowledge of web design going into this challenge, so if you find yourself in the same shoes you might find it interesting to read. It is posted on my website under “About: My Web Design“.

Since most or many of the people in the #Msi9w3 challenge use Bandzoogle (the builder I use for my website) and may read this blog, I thought I would include a snippet from the description of my process that guides you specifically through the Custom Style builder in the Bandzoogle platform, using my website as an example.

• First step: I selected “Custom Styles” and uploaded the custom graphic! Then set the background colour to white.
• Under “options”, which is beside the thumbnail of your image in the control panel, I chose to have the image aligned in the top-center part of the page with no repeat (you would use this if you were tiling so that the image would appear all over the page, but I have just one big image so it wasn’t necessary). I decided not to have the image scroll with the page and selected ‘no’ for that option That means that my background image stays still and the content moves up and down while someone scrolls along my website. If you select ‘yes’ for this option the image will also move with the content. Like most of this stuff, it’s easier to understand once you try it and play around with it.
• Under “Page Layout” I made the “Top Margin” 438 px (that means the menu bar will be 438 pixels below the top of the page), checked the ‘standard width’ box and ‘position’-ed it on the left.
• I chose not to put in a header, as the background image serves that purpose
• I chose the option to have the menu placed after (below) the header instead of the top of the page with 0px  padding (px = pixels & the more “padding”, the taller the menu and more space between the menu buttons and the borders of the menu bar)
• I decided not to use a solid colour instead of an image as the background of the menu bar, but I could have done either. The colour I selected in Photoshop with the eye dropper tool. I copied the colour code (this shade of orange is #9c510f) and pasted that into the colour choice box in the Bandzoogle colour picker. Opacity set to 90%.
• The Menu Button spacing I set to 5 px (that’s the distance between menu buttons) with font “Mailbomb” (a font that’s in theBandzoogle library) size 20 px
• I chose not to use custom background images for the buttons, but you can. There are a lot of things you can use custom images for in this builder.
• For the Sub Menu (aka drop down menu) I used 2 shades of grey colours from my background graphic and set the opacity to 100%. I used colour #333333 for a dark background & a lighter #525252 for when the visitor’s mouse rolls over that button in the list. This gives it the effect of being highlighted and shows the visitor which page they will be selecting if they click the mouse. You can do the same thing with the font colour, but I decided one roll over option is enough for my page and set both the font and roll over colours to white (#ffffff) so that there would be no change to the font when the visitor hovers over that submenu button.
• Under “Content” I kept the padding at 0px because my menu bar is already pretty far down the screen, I didn’t want the content of the page to be any lower (the padding in this section determines how far away your content is from the menu). I set the background to the same shade of white, but this time made the opacity 80% so that my background image still shows through a little bit when the visitor is scrolling.
• I chose Verdana (size 14px) for the content font because it is easy to read and is thin. I write a lot, as you can probably tell, so being able to fit more words in less space is important. For that same reason, I made the line spacing 0% (as close together as possible). Because the content font is on a white background I made the text colour black (#000000) and made the link colour the same orange that is in my menu background and background graphic (#9c510f) to make it easier for readers to recognize when a word is clickable.
• Under “Sub Headers” (not to be confused with sub menu, the sub headers are lines of text to indicate a new section in the actual content of your website, not in the drop down menu. I didn’t use any padding for the sub headers, though you do have the option to use vertical and/or horizontal padding in this part (meaning you can decide how far from the side and/or top of the page your sub headers will appear (this does not change the position of your content).You can also choose to have a colour or custom background image for your sub headers, but I wanted mine to be completely transparent so I chose no image and turned off colour. I used the “MailBomb” font that is already in the Bandzoogle builder library. Because I didn’t want the subheaders to be too distracting from the background graphic, I set the colour Black so that they would blend in with the rest of the text, but still create enough distinction at size 20px to create clear divisions of the content on the page.

You can read the rest of the example here

There Was More Work to Be Done …

The website wasn’t the only thing I had to consider optimizing this week though.  Caught in a fit of inspiration on Wednesday night, I emailed the most awesome person I met at NMS 2010: Vladimir Vukicevic at RocketHub to find out how fast we could put a campaign together. He responded within minutes and we spoke on the phone the next morning. It was my hope that by the weekend I could send out my newsletter with news of my latest adventure: I’m starting a button making service to go with my webcast and general music business! As some of you may have noticed, I didn’t send out the newsletter this weekend (In fact, this blog is even late because of it), but I sure did optimize the h*ll out of my campaign page! So why am I so excited about this? And why am I blogging about it? Because RocketHub provides a really cool service to artists to help you acquire funds for your music and I think you might want to check them out yourself.

In brief, I want to pay independent artists to perform on my webcast. The show isn’t ready for approaching sponsors yet, so we need to be entrepreneurs! We make fine art pieces during each show and I want to be able to make buttons out of them, sell them on my website, and give the profits to the artists :) I’d also like to be able to make buttons for artists on the cheap and rent them the machine so they can learn to do it themselves. I am offering 100 buttons for $20 (shipping included) to those who pre-order now and help me get the machine by Dec 1st so that we can start making buttons in time for the Webcast Art Show  I’m organizing (concert and auction to raise funds for the food bank during the holidays). I have exhausted my funds on new cameras/computers etc for the webcast and recognized that I needed help raising the funds for the button making machine . Many artists need similar help for financing their next album, a tour, or even music videos. I hope they’re reading this :)

If we get enough pre-orders to reach our goal by December 1st, RocketHub will give us the funds and we start making and shipping buttons! If we don’t reach our goal, everyone gets their money back and I start over from scratch (noooo!). If we raise more money than we need, we’ll put the extra funds toward other gear and programs that will improve the webcast (see the campaign page for more details).

Recognizing that a lot of my friends don’t have credit cards and lots of people don’t like to give out that information online anyway, I created a “friends without credit cards” profile so that after people contact me and make alternate arrangements for payment (paypal, cash or email money transfer) I can fuel up the rocket on their behalf. You might want to do the same if you decide to start a campaign. I’ll be blogging about my experience with RocketHub as the campaign and blog contest progress to let you know my thoughts on the service. So far I love it!

Some of Examples of our Products & Services During our Start-Up Campaign:

• 100 custom buttons for $20 (shipping included… what?! Well, express post is extra)
• Magnetic X’s and O’s game for your fridge or locker (fully customizable and comes with a gift box & card to match)
• Just one lovely button. Send me the picture you want or choose a piece from the Webcast Art Gallery OR send me your friend’s funniest facebook profile picture and surprise them with it as a gift (comes with matching gift card)

For More details go to my project page on RocketHub: http://www.rockethub.com/projects/536-i-want-to-push-your-buttons

More? I didn’t sleep much this week …

I think that’s why I’ve caught a cold. Bleh.

Naturally, after developing a webcast pitch I had to incorporate that pitch into my webcast page and the ustream page that hosts my stream. Basically, I just made adjustments to my original website background by flipping most of the horizontal images 90 degrees and shrinking them to fit along the left hand side of the screen (becuase the content is in the middle, like Twitter. In fact, you can import your Twitter background to use as your background in Ustream … and that’s just what I did!). Then I used the magnetic lasso tool in Photoshop to cut and paste images of my guests performing on the show and made a small profile picture with my pitch written on it (this shows up where the video would be when streaming). Voila! Time for a nap … no, soundcheck for the webcast starts in one hour. AH! haha Feel free to join us in the chatroom starting at 8pm EST and bring your instruments:

www.meghanmorrisonmusic.com/webcast

Sign Up for My Monthly Newsletter & Get My Album FREE

I will never sell, rent or lend your email address to anyone else and you can unsubscribe at any time