Anatomy of a massive site redesign

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. GDB 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)

Branding

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.

Color

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.

Header

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.

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:

Usability

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.

Sociability

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, GDB is now on twitter! Most of GDB’s tweets will be concerning new posts or features on the site. You can follow GDB on twitter here. In addition the GDB 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.

Like what you've read?

If so, join 12,000+ designers and stay updated on all our best business-building tips delivered for free to your inbox a few times each week. PLUS, we'll throw in a free ebook to get you started. Click the button below!

Comments

  1. says

    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.

    • says

      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. says

    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).

      • says

        @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!

  3. says

    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!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>