During April only, save 30% on our new course, Cold Emails that Convert. Click here to learn more.
Offer expires in

Anatomy of a massive site redesign

tweet share share pin email

If you’ve ever visited the site before, you know that Graphic Design Blender just went through a massive site redesign. I am now happy to present to you the new and very much improved Graphic Design Blender. Millo is a place where graphic and web designers come to stay up to date on an ever-changing industry–that of graphic and web design.
This article will cover the ins and outs of a massive site redesign. It articulates on more in-depth considerations you may want to take into account the next time you redesign a web site or a blog. The article discusses important considerations such as overall aesthetics, Search Engine Optimization, Usability, and Sociability.

The Design (overall aesthetics)


Now, before I have a whole heap of people give me a hard time about inconsistent branding, let me explain my motives in completely changing the color scheme and appearance of the site. When I created the original theme for this site, it was my first experience creating a custom wordpress theme from scratch. Frankly, I was pretty proud of it, but it was not my best work.

In August of 2009, I began work on my brand new portfolio web site, prestondlee.com. You’ll notice the same color scheme is used on my portfolio site as this blog. This began an entire revolution of my online presence. You’ll notice my new twitter profile now matches the sites as well.

You'll also enjoy this episode of our new podcast...


The color scheme also reflects the nature of the site more considering orange is the color of creativity–the fuel that drives the graphic and web design industries. In addition, I would highly recommend reading an article from Web Designer Depot titled “How to get a professional look with color“. It will help you understand the way colors work together on a web page.


Some of you might be gawking at the small header I chose to employ on the site. Honestly, I did it for you. I know you come to Graphic Design Blender for content. You don’t come to see massive amounts of illustration or design before viewing the content. Now don’t get me wrong: I love the headers found on sites like Chris Spooner’s Blog, Web Designer Depot, or Web Designer Wall. I simple wanted to be different and give you, the readers the most help in finding what’s really important to you–the content. What do you think of the new, smaller header?

Vertical Grid Organization

You’ll also notice that Graphic Design Blender is now built on a 960 pixel wide grid system. While I didn’t follow the patter exactly, the grid system was inspired by 960.gs where you can also find resources to help you effectively layout your next web site or blog design.

A little Javascript just for fun

You might also notice a few other elements (like the popular posts menu on the right) that use subtle but sleek javascript plugins to make browsing the site all the more beautiful.

💵 Turn complete strangers into paying clients using our new easy-to-follow workbook course, Cold Emails that Convert. Disover the framework we use to book thousands in new clients each month. Save 30% in April only with promo code MILLO30. Click here to learn more.

Search Engine Optimization

We all know that a site redesign is never complete until it has been properly optimized for search engines. Just a few things I have done to the site to make it more search engine friendly include:


My new favorite aspect of web design (or any design for that matter) is usability. I firmly believe that anything we design in the future–whether online, in print, or otherwise, will be “experience design”. After being inspired by “Realigned”, a popular article outlining usability problems in Smashing Magazine’s new site, I decided to rectify some major usability problems here at Graphic Design Blender. Let me illustrate:

  1. Each link is the same color. Regardless of where it leads, the location on the page, or the importance of the link, every link is orange with the same text decoration: underlined. If you are looking for a link on Graphic Design Blender, you can expect it to be orange.
  2. The sidebar now contains links to some of the most popular posts, most commented posts, and recently published posts–allowing for easy navigation from any page.
  3. The main page now has navigation at the bottom which easily allows you to navigate through various pages of articles at once.
  4. Each individual article also contains links to the article directly following or directly previous the the article a reader is currently viewing. This allows for simple continuous reading.
  5. In addition, each individual article contains links to articles that are related to the current article. This saves readers the trouble in searching by category or returning to the home page to find more articles they might enjoy.


Is that a word? Anyway, it is much more easy to be sociable on Graphic Design Blender than ever before.

Each article now comes fully equipped with a custom-made sociable menu including links to twitter, facebook, designbump, digg, and many more.

In addition, Millo is now on twitter! Most of Millo’s tweets will be concerning new posts or features on the site. You can follow Millo on twitter here. In addition the Millo twitter feed is now found in the footer of the site.

Please be sure to let me know what other changes can be made to Graphic Design Blender in order to make it the best it can be.

tweet share share pin email

Say Goodbye to Roller Coaster Income

Your income doesn't have to be a guessing game every month. Let 4 thriving solopreneurs show you how in our free guide.

About Preston D Lee

Preston is an entrepreneur, writer, podcaster, and the founder of this blog. You can contact him via twitter at @prestondlee.

Leave a Comment



  1. Preston, great job on the redesign. I really like it better than the old design. It’s very clean and neat, and the colors are great. With that said, here are some suggestions/constructive criticisms. 🙂

    1. Subscribe and follow link on the left-side. If you shrink the page to 1024×768, it overlaps the content. Didn’t you use 960.gs to make the site fit 1024×768? I think just moving it to the right can make a big difference.

    2. The previous and next post right above the related articles. When you are in the most recent post, currently, it just has a gray box there. Maybe have some content.

    3. Oh, and personally, I would tone down the orange and maybe make it a little darker. Right now, it’s kinda hard to read it, too bright. Maybe it’s just my monitor.

    Anyway, with that said, I guess I’m just nit-picking. Keep up the great work and looking forward to reading more of your articles.

    • Jad,
      Thanks so much for taking the time for a few constructive tips.

      1. The links on the left hand side (which are now gone) were a last minute thought that I wasn’t really sure about anyway so they have been removed. Maybe in the future, I will recreate them, but for now, they weren’t working for me (due to content overlap).

      2. I didn’t notice the next post and previous post problem. Slight styling issue–it’s now been fixed.

      3. I’ve also heard from a few people that on their monitors, the orange doesn’t contrast enough. I’ll be working on that.

      Thanks for your help!

  2. Fantastic. I love the new design. As I have already told you via Twitter.

  3. Great article – very helpful to explain why you did what you did. One suggestion: The article links at the bottom of the page are hard to read. Perhaps make the background of the boxes contrast better with the orange links. Make it the light color of the two boxes below (#f2f0e4), rather than the sidebar color (#e9e7d9).

    • Thanks for the tips, Allen. Can I ask you to clarify a little on which links you are talking about? Thanks.

      • @Preston, Oops, I made a mistake anyway! Let me start fresh…

        You have links to the previous and next article at the bottom of each article. Unfortunately, it is hard for me to read the text, because the box background is too dark. It is set to #e9e7d9. Instead, you could use the color #f2f0e4, which you have utilized in the inset box of the right-hand navigation. I sure hope that is clear… but I don’t mind you asking for more clarification if you need it! 😉

        Also, I really like the smaller header!

  4. Hey Preston! Good job on a successful launch! Happy to see the new skin. 🙂

  5. Hi Preston. Overall I think it looks great! I love the colors you chose. The site is very clean and organized which I think makes a site with alot of content easier to browse. I love the 960 grid system – I use it on some of my sites – an excellent tool. I understand why you went with the smaller header, but I like the larger ones (like on prestondlee.com) but this is only my opinion. Great job overall. Keep up the excellent content!

  6. wow thanks, i really need it, especially when get some tight deadlins.. thanks for sharing your tips!


  1. Social comments and analytics for this post…

    This post was mentioned on Twitter by prestondlee: New blog post: Anatomy of a massive site redesign http://graphicdesignblender.com/anatomy-of-a-massive-site-redesign


Need more clients?

Download our free guide:
25 Top Freelance Job Sites for Real Clients with Big Budgets