Anatomy of a Website Redesign

When trying to redesign your website, you may get stuck since there’s so many different ways you could take it. You may also run into the problem of not knowing how you even want it to look. In this article, I’m going to show you every version of my new design, from the first concept, to the final result, and explain what I did and why. This should hopefully help you on your next redesign as well.

Version One

I started with the new design by basing it off of the old one. At first, my idea was that I was simply going to make the old version better, by keeping the same idea but adding more whitespace, a more professional layout, etc. This usually does not work, and I don’t recommend trying to make an old version better. As you’ll see here, it didn’t work, and I ended up making a completely new design. Now, of course you can use the same site colors and general feel, but the design itself usually needs to be started over from scratch to be a true redesign. As you can see from even this first version, I wanted the site to be wider, and have a lot more whitespace.

You can also see the 3 bars on the top left that say “1″, “2″ and “3.” I made those to either have the top 3 articles, pages, or whatever. I wasn’t sure yet, but I knew I wanted something of that aspect there. The actual design of those bars was inspired from MariusRoosendaal.com. I just loved how smooth and great they looked, and decided to see if I could make something similar myself.

Version Two

In this next version, I decided I was going to take a new look with the site instead of changing the old one. I added a tab-based navigation that seems to stretch all the way across the screen, I changed the colors to all grey/white/black, and I added a search bar on the top right, along with an RSS feed icon. This is where I knew I wanted the new design to be light, good-looking, fast-loading and easy to read.

Version Three

At this point, I decided to add 1 pixel horizontal lines in a few spots to add small detail, change the colors from neutral to blue and a light brown color, and move the “Latest Posts” area to the right. I also moved the search bar to the top, off of the navigation to make room from the rest of the links.

Version Four

Here, I changed the colors again, going for a more light aqua blue, and a very light brown. I also made the font a tad bit smaller for the navigation, and put them all in caps. I did this because the navigation is one of the most important things on the page, and if anything is in caps, it should be that.

I added a “Hey there!” in a different font called Delicious, and added a small description of the website and what I do on it. I added this because on my old design, many people said “it looks cool, but what is it for?” If you have that same issue, think about how you can make people understand what your site is right away, without having to click to your about page. If people are confused, they will leave.

You’ll also noticed I ditched the long used “EliteNick” logo. I decided it was too high-tech for this design, and needed to go.

I also added a huge calendar I drew based off a tutorial. I thought, “wait a minute, that looks great!” It was at this point that I realized a large illustration really adds a lot to a website design if done right.

Version Five: The Final Design

Here, I changed the colors yet again, adding some purple into the top mixed in with the light/aqua blue. This really adds some liveliness to the site. I was inspired by the Mac OSX design on the top and decided the light purple would flow well along with the new background I added behind the search bar.

I also added a “tab” on the right under the navigation that says “ABOUT / CONTACT.” I added this because anywhere else and it would look out of place or be hard to find in the footer.

On the left you can see where it says “HOME” again. That is a breadcrumb navigation, meaning the further you go into the site, the breadcrumb continues to update, showing exactly how deep into the site you are, making it easy for the visitor to go back one page, or more.

I also changed the RSS icon from the default that is widely and freely available on the internet to my own self-designed icon. I tried to stick to the same recognizable design, but have a little more detail to blend with my newly redesigned site.

Another thing you will definitely see is the huge illustration of my Bose headphones. I spent one Saturday morning entirely devoted on that illustration. I decided that there needed to be something large there, but wasn’t sure what. I looked around my desk and saw my headphones, and said “hey, I use these all of the time when working on my computer, so why not show that on my site?” Before I had just them, I was thinking I should show headphones, a monitor, etc. to illustrate that I did many things, but decided that one large illustration was better than a bunch of smaller ones put together.

I also decided to make the top 3 bars the most popular pages and posts, instead of the last 3 articles, as I have found that most people visiting my site for another reason also clicked at least one of those links afterwards.

A subtle but important change I made was make the background of the entire site a seamlessly repeating texture. a great tutorial on how to do this is on PSDTuts. When this is done right, it adds a whole different feel to the site, compared to a solid color.

In the articles, I made a decision that nearly every article would have a custom image for it, unless it was a simple update, as show in this screen shot. This general layout for the article preview area was inspired by PSDTuts, although they were not the first ones to implement it.

Another big decision I made was that for every new “category” you visited on my site, there would be a new illustration on the top for it, as well as the top 3 downloaded/listened to/viewed items relating to it. This took custom PHP coding and some extra labor, but was well worth it in the end. As an example, when you click “Music,” you get the top 3 most downloaded/listened to songs, and an illustration of my keyboard and speakers.

With those speakers, again, all I simply did was look around my desk, saw them, opened Photoshop and started trying to clone them. Now yes, you can take a picture and trace over it, which is what I did with the Bose headphones, but I wanted to challenge myself with these and try to really draw without tracing. Here’s a picture of one of the speakers on my desk and my end result of trying to draw them:

What This All Means

I wrote this article to help anyone who is either new to web design, or having trouble taking their site to the next level. After reading through this, hopefully you will have more of an idea of how to get inspired from other websites, and how to go from a simple reorganization to a complete redesign. If you have any questions, please leave a comment below and I will get back to you! Thank you for reading.

You may also be interested in reading:

• Top Tips for Beginning Web Designers
• How Many “Web 2.0″ Sites Pass W3C Validation?
• 55 Amazing & Inspirational Website Designs
• How to be a Better Web Designer
• 20 Useful Web Design Articles, Generators and Tutorials