Anatomy of a Website Redesign
Posted in Articles, Web Design by Nick on January 26th, 2009
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:
Comments
Leave a Reply
Justin
January 27th, 2009
Hey Nick nice article. I’ve been reading all of your posts lately, as well as looking up some stuff on google. I have found that it is a common mistake for people to create and slice a template, but it not auto expand when they complete the coding. I thought that since you offer free templates on your site, and that’s basically all you did on Elitenick.Com before it died, that you could explain to the newer web designers, how to make an auto expanding template. I’ve noticed that your last few articles have been written to help people that are new to web design, so i thought that maybe this could save them some time on having to research and re slice their templates.
Nick
January 27th, 2009
@Justin: Thanks, good suggestion.
Lately I’ve realized that while I may not possess all knowledge to teach advanced web design, I did have a lot of knowledge and tips for beginning web designers, since I feel that I’ve finally reached a new level.
I’ll definitely consider your suggestion, as when I first started doing web design, I wasn’t sure how to make my designs stretch down the page, etc.
Justin
January 28th, 2009
Alright. Yeah i had the same problem when i started too
Steve
January 28th, 2009
Nice site!!! I have a quick question. Im not very familiar with any programming language besides HTML and a little java. I’ve been working on a site, and i’ve been having some troubles. I have a few spots on my site that i need to update on every page. I’ve been doing it manually, which takes foreverrrrr. How can i make it so i can just update like one page or something, and it applies the update to all of my pages. I have dreamweaver.. would that help at all? lol. THanks!!!!
Justin
January 31st, 2009
I saw some pics of sites that you’ve made for other companies.. Just wondering.. But how much do you usually charge for a custom site?
Nick
February 1st, 2009
@Steve: This can be fixed by using a programming language like PHP…what I’ve done is made a page called index.php, and then make a bunch of “include” pages for the middle part, such as about.php, programs.php, etc. and the index.php loads whichever include is requested, as so: http://site.com/index.php?page=about.
Try reading this article for more info: http://www.stevedawson.com/article0012.php
Justin
February 2nd, 2009
Do you have to have php sql apache and stuff installed on your computer for PHP scripts to work without uploading them? like for testing. Thanks
Nick
February 3rd, 2009
@Justin: Nah, I never bothered to do that…what I usually do is just make a test.php page and upload it to my server, and test like that.
Justin
February 3rd, 2009
Alright thanks
Justin
February 15th, 2009
Hey nick i’ve got another question. I’ve been looking for a script or applet or something that will upload multiple files into my designated directory. I have a script that allows the user to enter the number of uploads they need to make, and it gives them that many upload boxes. I need something that allows them to upload a whole folder or select multiple files to upload instead of each individually. I’ve found tons of Java applets, but for the full version they are 100$+. Any ideas? Thanks man!
Jordan Garn
March 4th, 2009
Good stuff, i’ll definitally have to implement some of these ideas, especially the repeating background, i’ve always wanted to do that but it seems so difficult.
jfileupload
March 26th, 2009
You can check JFileUpload applet, you have a free trial and price is $29 if you want to remove the “UNREGISTERED” message. It allows to upload mulitple files. You can even compress all in one archive before uploading. See:
http://www.jfileupload.com/products/jfileupload/index.html
Josh
March 27th, 2009
Great article, Nick! I love seeing into the design and thought process of a redesign. What really caught my eye was the amazingly realistic illustrations. I assume you made those in Adobe Illustrator, but I’d like to see an article on the process of creating those graphics!
Nick
March 27th, 2009
@Josh: Thanks Josh.
I actually made all of them in Photoshop alone. I have Illustrator but have yet to really master it. I have a tutorial on the speakers at http://elitenick.com/tutorials/how-to-draw-a-unique-desktop-speaker, but I’m working on writing a tutorial for the headphones since yes, they do look particularily realistic. It took me a good 4 hours one morning to make them. Haha.
Paul the Knight
March 28th, 2009
Great post, newest design is by far the best
Richard S Davies
March 30th, 2009
Very nice redesign, very ‘Envato’!
Nick
April 3rd, 2009
@Richard S Davies: Thanks. Yeah, some of the stuff was inspired by the simplicity of the Envato sites.
zanzzy
June 21st, 2009
Heh, is there a Razer Cooperhead on your desk ? ;)) Very nice graphics, congrats :)
Meri Garcia
October 5th, 2009
Hi Nick! Thanks a lot for your step-by-step ilustration on how to redesign a webpage. I really liked how you introduced images of things around you and fit them into your design. You have given me some ideas there.
Anyway, I am sure you are familiar with SEO and how it can help the visability of your site on the Internet later on. You might think it’s hard and expensive but we have developed a new project management tool that lets customers and webdevelopers run SEO campaigns effectively. At http://www.analytics.seo you can find and check out the tool. I thought it would be useful for the kind of work that you do, which, by the way is really good. Keep up with it.
Cheers,
Meri