For more than a year now I’ve been talking with my neighbor, Mark, about working together to create a website about homebrewing beer. Mark has been homebrewing for several years now and it was he who turned me on to the world of homemade brew.

While I don’t drink beer myself, I do know a lot about Internet marketing. So with Mark as the beer expert and myself as the Internet expert, we’ve decided to work together on this new website – the goal of which will be to teach people how to make their own beer at home. Mark is going to do the writing and I’m going to do the web work. We’ll be targeting beginner beer makers, sharing homemade beer recipes, and will hopefully sometime soon have an ebook/book that we can sell to teach people how to create their own batches of beer.

That said, Mark came over to my house yesterday and we sat down for about two hours to work on our new website, which we have dubbed www.drhomebrew.com.

While Mark was over yesterday, he worked on the website’s first article, which is simply some introductory information about what homebrewing is all about, how it got started, the benefits of brewing your own beer, etc. And while Mark was doing that, I started working on the design of the website.

Now that I know quite a bit about website design, CSS, HTML, etc, I know what I can and can not do when it comes to website design. So I drew up the first draft of the website in Photshop (see the picture above) and it is this template that I will use to eventually create the finalized Dr. Homebrew website.

The tricky part with the website design is going to be the logo. The image you see above is just a stock photo that is sold on iStockPhoto.com. We could buy the rights to this particular image and it would cost us about $25 for a standard license or about $150 for an extended license. But because the logo isn’t exactly what we want it to be (we would prefer that the Doctor was holding a pint of beer in his hand) we are going to try and get Mark’s girlfriend, Rebecca, who works as an illustrator, to draw up a similar logo for us. This may take some time and work to actually get, but if we can get a custom made logo for the website, that wil definitely be beneficial in the long-run, as we plan to use that logo on everything we do in the future – book covers, social media icons, videos, business cards, etc. And when it comes to these sorts of things, it is always best to have as much control as possible. If the website becomes really big, we don’t want to be using a piece of stock that we bought for $25. We want something unique!

There are three main thing that I should point out about this initial design of the Dr. Homebrew website.

1. In the header of the site you can see that there is a 728×90 pixel advertisement. While it is usually best to start a new website with no ads on it at all, I tend to think about 25 steps ahead of most people, and so I’ve inserted the ad unit in the header for the time being. I’m still not sure if we are going to put ads in the header at this point or not, but if we don’t I will have to drastically alter the design of the website’s header.

The sidebar of the website has also been designed to fit a standard 300×250 ad unit in the future if we so choose to ad that type of advertising to the website. These are the sorts of things that I think about when designing websites from scratch these days.

2. My second note also has to do with the ad unit you see in the header, but it also has to do with the green navigation bar that seems to drop down from underneath the ad unit. You see, I’ve designed the navigation bar to almost pop out from the bottom of the ad unit because I want people to be clicking on that navigation bar as much as possible. But I also want them to be clicking on those ads. So by positioning these two parts of the website right next to each other (the navigation bar and the ad unit) I am increasing my chances that some of my readers who move their mouse up to the header of the website in an attempt to click on the navigation bar, will accidently click on the ad unit and I’ll make a little money in the process. Even if the user doesn’t accidently click the ad unit, he or she is more likely to see the advertisement (rather than be blinded by it) due to its proximity to the navigation bar and the website’s main logo, and therefore be more likely to click on the ad.

3. Finally, you will note that the colors on the website are not exactly what you expect to see on your typical beer website. After looking at dozens of beer blogs, websites, etc, I quickly realized that almost all of them are designed with a piss yellow or brown sort of color arrangement. Mark even wanted to follow suit and copy what the other beer sites were doing, but after I showed Mark this new, colorful, modern design, even he agreed that what we had here was a whole lot better than the stereotypical yellow colors on our competitors’ websites. Hopefully our future readers will enjoy the bright bursts of colors that we have decided to use as well.

Other than that, the rest of the website design is pretty straightforward. We will certainly change things a bit as we go along, but this is just the first step.

Step two is to get our official custom Dr. Homebrew logo drawn up. We want the logo to look almost exactly like the one above, but we’d like the Dr. in the logo to look more like Mark (since we plan to feature Mark in some of the videos we are going to shoot for the website) and that the doctor have a beer in his hand. Once the logo is drawn up, then I can take the Photoshop image I created and transfer that over to the website we just registered. That’s when the fun begins!