Behind the Scenes of the Design Informer Redesign

• By Jad Limcaco
• February 23rd, 2010
• Events, Redesign
• 209 Comments

One of the hardest decisions that I had to face with this blog thus far is determining when it is the right time for a redesign. To some people, it is clear that their site is old and outdated and in need of a total makeover. To others, it is a lot harder to realize their need of a redesign since their site is doing well and have received great compliments about their current design. That is my case. The old design/theme of my site have gotten an incredible amount of positive remarks from the community and I’ve even received a few design jobs because of people who liked my blog’s design. I can see it now. Some of you are thinking this question in your head.

Are you crazy? Why are you doing a redesign after only 3 months, especially since your design has gotten lots of positive response thus far?

Well, in this blog post, I’d love to answer that question and take you behind the scenes of the Design Informer redesign.

The Goals and Objectives

Before I started the sketching/wireframing process, I went ahead and listed out the goals that I wanted to accomplish with the redesign. I actually came up with a list of about 15 things that I wanted to apply to this redesign, but let me just mention four of them in detail.

1. Focus on Content – With the old design, the header was attracting too much attention and when a visitor first visited the site, the header was competing for attention with the content.
2. Simplicity in Design – I wanted to strip the site of the many uneccesary design elements that it had. While not completely minimal, I wanted this redesign to be a lot simpler, which again leads to focusing on the content.
3. Typography and Readability – As with any blog, these two things are very important. I wanted the readers to have a great experience while reading through the articles and I didn’t want their eyes to get tired and stressed so I really tried my best to make the site as readable as possible.
4. New Features – If you are still new to blogging, one thing that you are constantly doing is thinking of new features that you would like to add to your site to make it better and more user-friendly. But what happens when you decided to add these features to your blog? More often than not, it ruins and clutters your design because you didn’t originally plan for it and now it doesn’t match your site at all. This is the case with a lot of websites, and it was the case with my website as well.

Sketching and Wireframing

After writing out the goals and objectives that I wanted to accomplish with the redesign, I started sketching my initial thoughts on the design. I am not an expert at sketching, but one thing that it does is it helps me to see my ideas very quickly. For initial sketches, I just use a thick blue marker as it helps me not to focus on all the little design details but rather on the main frame and structure of the site. Once the inital sketch is complete and I am satisifed with it, then I then move on to the detailed sketches where I jot down notes about the design and features of the site. You can see a few of the sketches that I have drawn above. I have a lot more sketches but I’d rather not show them to you.

The moment that I finished my sketches, I immediately proceeded to create wireframes of the website. During the wireframing process, I do use real content because like I mentioned earlier, I wanted to focus on the content.

The Design

Once I finished the wireframes, I then went ahead and started on creating and refining the little details of the site. I probably spent way too much time in this part of the redesign, as I kept changing the look and feel of the site over and over again.

Logo and Header

As I mentioned earlier, I wanted to keep the header of the site as simple as possible. I decided to include a navigation menu and a search bar on the header along with the Design Informer logo. At first, I decided to just have the logo there, but after showing it to a couple of my friends (Vitaly Friedman and Doug Neiner), they suggested that the header was too plain and I needed to spruce it up a bit. That’s when I decided on adding the city buildings, as that was on the original design, but I decided to keep it light and faded, as I didn’t want to draw too much attention to the header.

One thing that you will notice is that I also added the RSS and Twitter feed counts. This was something that I wanted to do to showcase how much the site has grown in the last three months. I’ve also decided to remove the large Design Informer mascot. Don’t worry though, he is still around and if you look for him, he might even say hello!

Content Area

For the content area, there are two slight changes that I have implemented.

1. First of all, I’ve decided to add categories at the top of the posts so readers can easily choose which category they would like to view.
2. I’ve also changed the way the post information is displayed.

Sidebar

While I was designing the sidebar in Photoshop, I wanted to make it stand out a bit more and separate it from the main section. While thinking of different ideas, the photoshop rulers stood out at me, so I decided to implement it on the sidebar design. As far as features, I’ve pretty much kept it the same with one slight change; I’ve decided to remove the Community News section for now. I was just receiving way too much spam through it, even with Akismet already turned on. Some of the articles were great, but I also noticed that some people were abusing it by submitting 12 articles at one time which would then just push other articles out of the sidebar.

Footer

While the old footer did the job, this new and improved footer is a lot more helpful and interactive. Here are some of the features of the new footer.

• Categories
• Recommended Reading
• Popular Tags
• Flickr Showcase
• Friends of Design Informer

Blog Post and Comments

With the blog post, I wanted to make it extend the width of the site and remove the sidebars, but I changed my mind and decided against it. I put much thought into it, but in the end, I wanted to stick to the traditional blog design. The comments section in the old design worked really well so I decided to keep that as well.

Related Links and Article Promotion

You will probably notice a change in the design of the article promotion section and the related posts. I’ve decided to include the post header image as well when viewing related links. I’ve also cleaned up the article promotion area. I’ve decided to include the hand of Mr. Informer with the heart, because when you promote one of our articles, then you are "sharing the love."

Visual Hierarchy

Along with a great design, you want to have the proper visual hierarchy as well. For this site, I wanted to content to stand out first, so I decided to perform a simple test which I’ve always done. If you want to learn more about this, read this excellent blog post by Lee Munroe.

If you take a look at the test below, you will notice that immediately, when you view the page, your eye automatically is attracted to the post image, which was my intended goal.

The Development

New Additions and Features

The site has some new additions and features so let me break it down for you.

1. Recommended Reading – I wanted to be able to share my favorite articles to my readers while at the same time, help promote those who are coming up with great content, so I decided to add this section. You can view it by checking it out on the footer, or by clicking on the category, Recommended Reading.
2. Archives – I’ve finally included an Archives page to the site. It’s organized by month, by popularity, and you can even view every single post we’ve ever written on Design Informer.
3. About and Contact – I’ve already had these pages in the old design, but I decided to spruce it up a bit. Go ahead and check it out to read a little bit about Design Informer and you can also see the guest authors as well.
4. 404 – With the old site, I didn’t even have a proper 404 page. As you can see here, I customized my 404 page to be more useful.

What’s Coming Next

There’s still a lot coming to Design Informer in the future. There are still little things that I will be tweaking on the design, so please bear with me as we continue to strive to make Design Informer better. Also, we are still hard at work on Coding Informer so we will definitely give you updates as things start to progress.

Your Feedback is Greatly Appreciated

I learned one very valuable lesson when I did this redesign.

I am my worst critic.

I can’t remember how many times I decided to start over while doing this redesign. While I have my own opinions, thoughts and criticisms of this design, I would love to hear yours as well. Please feel free to share your thoughts about the new design. Your honesty is appreciated! Don’t be shy, tell me what you think, what I can improve, what you like about the design, and what you don’t like. Oh, and if you notice any errors, feel free to message me on Twitter or send me an email.

Again, I appreciate you taking the time to read this really long post and please do help me promote it with a bump, float, blend, stumble and retweet. Thanks again!