Behind the Scenes of the Design Informer Redesign

Advertisement

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

Redesigning a blog is no easy task and there are many different factors that must be considered before one decides to redesign. With Design Informer’s old design, I started to notice that it was getting cluttered with different features that I was adding due to the fact that a lot of those features were not part of the original design.

Not only that, but the code was getting bloated and the site was starting to slow down due to so many different factors. At first, I thought of just re-aliging the site and just cleaning everything up. Later, I decided against that and instead, I opted for a complete redesign from the ground up.

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

Sketch and Wireframes

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

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

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 Friedman2 and Doug Neiner3), 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

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

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

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

Love

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

Visual Hierarchy

The Development

I decided to keep WordPress as the backend. The site is coded in XHTML 1.0 Transitional. Does it validate? No, there is one error. The CSS doesn’t validate as well because I am using CSS3 effects5 on the site. I use validation to check for errors, but if it doesn’t validate completely, then that’s not too important.

As long as I fix all of the errors that I can fix, then it’s okay. I also didn’t use a grid-system. I ended up using my own personal framework as I am more effective with it and it meets the needs of this site. I did use the 960 grid-system for the design.

New Additions and Features

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

  1. Recommended Reading6 – 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. Archives7 – 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. About8 and Contact9 – 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. 40410 – 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 email11.

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!

Footnotes

  1. 1 http://designinformer.com/lorem-ipsum-killing-designs/
  2. 2 http://www.smashingmagazine.com
  3. 3 http://www.dougneiner.com
  4. 4 http://www.leemunroe.com/visual-hierarchy/
  5. 5 http://designinformer.com/use-css3-now/
  6. 6 http://designinformer.com/recommended-read
  7. 7 http://designinformer.com/archives
  8. 8 http://designinformer.com/about
  9. 9 http://designinformer.com/contact
  10. 10 http://designinformer.com/404
  11. 11 http://designinformer.com/contact

↑ Back to top Tweet itShare on Facebook

Former editor in chief of Designinformer.

Advertisement
  1. 1

    Looks great Jad! Footer is really nice.

    0
    • 52

      Thanks Grant! I can only imagine how busy you are running Colorburned so I appreciate you stopping by. BTW, you are one of the first bloggers who inspired me to start blogging. :D

      0
  2. 103

    Superb work! Color scheme is awesome. It’s now looking much cleaner.
    I love the way you display post information, and idea with rulers is great!

    Keep up the great work Jad!
    .-= Nikola Lazarevic´s latest Blog Entry – How To Create An Undersea Abstract Wallpaper In Illustrator =-.

    0
  3. 205

    Looking pretty awesome, super clean and with a lot less distractions.
    Pure content focus, keep up :)

    0
  4. 307

    excelleredesign feels like a step from giood to great – the whole site feels more pro thanks for letting us in on what your though processes were
    .-= Benjamin Rama´s latest Blog Entry – Some Small Changes – Digital Art Empire Update =-.

    0
    • 358

      Hi Jad, your redesign turned out to be clean, classy and minimal which is one of those art directions that not everyone is going to like. Personally I love it, I don’t like fancy graphics distracting me from what I want to read, the most important is the content. And one thing with your blog, you have great content. More success to your blog and GOD bless :)

      0
  5. 460

    I have done the same as you Jad, changed my design only after 3 months .
    And you just wonder, if you have made the right decision ?
    Well, I do believe you have buddy !- its clean and very pro looking & I like it a lot.
    A pat on the back to you.
    .-= Billy´s latest Blog Entry – Premium WordPress theme-Winners =-.

    0
  6. 511

    I saw this happen over at Inspired Magazine when their blog first came out. It was amazing to look at, unique creative design. It’s never been the same since they changed it. Sorry, but this time i have to say something. This design is clean and nice, but it removes the personality and uniqueness that was found here. It looks like Noup.com with a different header, and a huge and not very useful footer. I’m really sorry but i do not see a re-design a see an un-designed.

    0
  7. 613

    Wow well done dude. You did well since the last screenshot that you showed me. Very nice ;)
    .-= David Perel´s latest Blog Entry – obox: @NatPerel You better believe it ;) =-.

    0
    • 664

      Thanks David! You gave me some good tips and advice when I was designing the site and I wanted to thank you for that!

      BTW, looking forward to the new Obox as well. :D

      0
  8. 715

    This is a pretty good redesign! I love the super-fat footer! The only thing I would have done differently would have been to make the search bar a little more prominent, but that’s just me!
    .-= Codesquid´s latest Blog Entry – Web Design and Development in 2010 – Best Practices =-.

    0
    • 766

      Thanks! Actually, the reason behind the subtilty of the search bar was because not too many people use it on Design Informer anyway and I wanted to not make it draw too much attention.

      But I guess it is a bit too blended in. I’ll see what I can do to make it stand out just a bit more.

      0
  9. 817

    Looks awesome Jad, I love the little graphic on the 404 page! Kinda makes you hope people do end up with 404 errors! :D
    .-= Michael Martin´s latest Blog Entry – 40 Creative Navigation Menus =-.

    0
  10. 919

    I think it looks great. And its subtle enough I think that it’s ok to redesign after only 3 months. It seems like a natural transition using the same colors and “informer” theme. It would be a different story had you changed the “informent” style side of what you have already started to brand.

    I would suggest a new sig box though. It doesn’t seem to flow as well with this design.

    Great job as always though!

    0
  11. 1021

    I like this design, I’ve never seen the old one I think but I like this! Thanks for sharing your ideas and visions about the whole redesign, it inspires me to start finally working on my own portfolio site. Really useful post and thanks for a few good links.

    I do think that in your Visual Hierarchy the main and first focus is on the logo instead of the image. This is no problem at all because people need to know at which site they’re reading. Good to see other people use the same techniques as I do.

    0
    • 1072

      Really, for some reason, when I look at the visual hierarchy, the post image stands out to me immediately.

      Anyway, hope you get your portfolio site up soon! Thanks for your compliments on this write-up.

      0
  12. 1123

    Nice work! I love new light look! Cheers!

    0
  13. 1174

    Wow thats an awesome blog design. I really like the typography.
    .-= Julius Kuhn-Regnier´s latest Blog Entry – How to Make a Great First Impression Through Guest Posts =-.

    0
  14. 1225

    I really like this design, very clean, excellent quiet structure. I see you also invested in the Helveticons set, great choice, I just bought them myself.
    .-= Martin´s latest Blog Entry – My Photoshop Template for Grid Based Designs =-.

    0
  15. 1327

    I’m confused by one of your paragraphs, where you say “I also didn’t use a grid-system.” and then “I did use the 960 grid-system for the design.” Not sure what you mean about not using a grid.

    0
    • 1378

      Hey Miike!

      Don’t be confused. :)

      What I meant by that was with the design in Photoshop, I used the 960gs as my guide but when I coded it, I used my own framework.

      0
  16. 1429

    I love the design so many little things that work so well together.

    I still believe you run a huge risk with your current mascot/cartoon, I thought for a second it was completely gone and was thinking you made a good decision but the the hover on the logo showed it’s still around. Get rid of it before you get served with a C&D by MAD or whoever owns the the rights to SPY vs. SPY

    0
    • 1480

      Hey Miguel, I don’t think I’ll be getting sued as the mascot is definitely an original design and my cousin told me that he never even heard of Spy vs. Spy when he drew my mascot. :)

      Anyway, I’m glad you like the new design.

      0
  17. 1531

    Never mind what i said earlier, i must have somehow become attached to the previous design here and i apologize thoroughly. This new design is like a super structure from headers to bullets, the typography, spacing, meta, images and all the details are amazing.

    0
    • 1582

      I’d be really interested to hear how you changed your mind? It seems like such a turn around from your previous statement, I’d just love to know what parts of the site swayed you over.
      .-= Laneth Sffarlenn´s latest Blog Entry – What’s on the cards for Sffarlenn.net? =-.

      0
      • 1633

        Because a lot of work went into this and instead of showing support i left a negative comment on impulse without pointing out the good of it. I was so rude and incorrect, and am embarrassed at my comment.
        .-= 9swords´s latest Blog Entry – 9swords: @BuzzEdition Thanks! =-.

        0
      • 1684

        The fact that you came back to round out your criticism is commendable, and should be applauded – it’s one thing to criticise negatively, but to then return and add to your criticism by speaking of the elements you liked and providing such valuable feedback, that’s not something many people would do.

        Bravo to you sir! (I found your feedback interesting, so I do apologise if it came across as me calling you out – I just like to see such great contributions to blogs like this one, rather than just an arbitrary comment about one’s gripes and then never coming back to qualify your statement as so many peope do.)
        .-= Laneth Sffarlenn´s latest Blog Entry – What’s on the cards for Sffarlenn.net? =-.

        0
      • 1735

        Hey guys, thanks to the both of you.

        I didn’t really think it was a big deal anyway, I’m always open to people’s opinions and I know that my design can’t and won’t please everyone. Anyway, thanks for re-commenting and telling me more of what you think. I really appreciate your honesty and sincerity when leaving your comments.

        0
  18. 1786

    Got to say Jad that I preferred the old design. Although after reading what you posted I can definitely see your reasons for the re design and you have tackled those perfectly, Thanks for supplying the various pics of the process too, they were helpful. I can see myself falling in love with this design, perhaps I just don’t like change! either way congrats on the re design turned out great!

    0
    • 1837

      Hey Aaron, I’m actually the same as you are when it comes to change. I personally don’t like change as well, especially if it already ain’t broken, but to me, the design was too cluttered and I felt that it needed to be spruced up. Thanks for letting me know what you think of the new design. :)

      0
  19. 1888

    Great design. I am really in love with your ruler sidebar. I think that the footer is nice but its kind of overwhelming. I also really like your post layout. Looks very professional.
    .-= Kenneth Lemus´s latest Blog Entry – Introducing User Wallpaper Galleries =-.

    0
    • 1939

      Thanks for the comments Kenneth. I actually like the contrast that the footer brings to this site. Also, I’m definitely in love with the ruler myself.

      0
  20. 1990

    I like it a lot, really clean and nice, and I think the light tones work a lot better both for readability and to make the site look more modern.
    .-= Jon Raasch´s latest Blog Entry – These Icons Look Like Crap – Poopy Social Media Icons =-.

    0
  21. 2041

    Great job with the re-design! Good to see your mascot is still around :)

    0
  22. 2092

    Nice to read, especially with all considerations and thier realisations. We’ll discuss your points tomorrow in the office.
    .-= Robert´s latest Blog Entry – Webdesign und Olympische Spiele =-.

    0
  23. 2194

    Nice Redesign Jad. Keep up the good work. Love the site.
    .-= Kawsar Ali´s latest Blog Entry – WordPress and jQuery: Troubleshooting, Implementing Sidebar Tabs and More =-.

    0
  24. 2245

    i likey, good job dude

    0
  25. 2347

    really like the footer area the most, nice redesign.
    .-= Matthew Heidenreich´s latest Blog Entry – Clean and Minimalistic Portfolio Layout in Photoshop =-.

    0
  26. 2398

    Great job with the redesign, especially the elaborate footer. I am continually amazed at how well you’ve done with this blog in such a short amount of time, keep it up!

    0
    • 2449

      Thanks! There’s no secret to the blogs success. It’s all because of the awesome design community and the support that you people have given. ;)

      0
  27. 2500

    Love the typography and layout. Too bad you removed the spy character from the header. I thought it was fun.
    .-= Vunky´s latest Blog Entry – Why I got rid off Digg, Reddit and Faves =-.

    0
  28. 2602

    Love the way you’ve used lines everywhere: subtle but very purposeful. And the little rollovers/focus/clicks makes all the different and feels so tactile.
    .-= Ashim´s latest Blog Entry – I’m so cool, 9 people died ’cause of my stupidity. =-.

    0
  29. 2704

    Jad, congratulations on a successful re-design. I loved going through your entire process. The content gets center stage now which is really great. And I am really digging your footer. But I miss your bespectacled dude in the header. To me, he embodies Design Informer and instantly sets you apart :). And you work just too darned hard :):), I hope you rested when you were sick and are feeling better now :). Well done once again! Looking forward to all your new posts.

    [I really need to get my About and 404 Pages sorted as well as the navigation, lol]
    .-= Sneh Roy´s latest Blog Entry – Create Heavy Distressed Grunge Social Sticker Icon in Photoshop =-.

    0
    • 2755

      Hey Sneh, thanks for the compliments. I agree with you, I would have loved to keep him visible on the header, but Mr. Informer is just too cool and he will just attract too much unwanted attention. That’s why I decided to hide him inside the logo.

      Oh, and don’t worry, I get enough rest already. :D

      0
  30. 2806

    Congratulations on the brilliant redesign Jad. While I loved the old site, the new design has a real sense of purpose and much better readability.
    I can understand how it must have been a hard decision to redesign the site while you are doing so well. A mentor once told me that the time for change is when everything is going right.
    In my mind, you have definitely done the right thing.
    Good for you mate. Keep it up!
    .-= Duane Kinsey´s latest Blog Entry – Our Logo Design Process =-.

    0
    • 2857

      The time for change is when everything is going right.

      Hi Duane, that’s a great quote. Thanks for the compliments on the site. I really appreciate it.

      0
  31. 2908

    I do love your header and your logo.
    The sidebar ruler is also an original and genious idea.

    Once again good work!

    0
  32. 2959

    I like the new design! I know what it feels like to want to redesign after only being launched for a few months. Going through the same thing myself right now. Sometimes you are just so excited to get cracking at the code that you settle on something you are happy with, but not ecstatic about.
    .-= Mike´s latest Blog Entry – “Phases” I’ve gone through as a designer =-.

    0
    • 3010

      I know exactly what you mean!

      Anyway, I love your site and I personally think that it’s very nice! Let me know if you redesign and definitely shoot me the link once it’s done.

      0
  33. 3061

    Looks great Jad. A nice improvement from the previous theme. Everything certainly loads faster and the simpler layout gives your posts a greater impact.

    0
  34. 3163

    I’m loving this new design super sexy a really nice clean design, keep the good work up.

    0
  35. 3214

    Hey Jad, I was really surprised to see such an early redesign. My first impression was like “wow” it’s so moder and nice! Good work!

    0
    • 3265

      Thanks Ilie. Glad you like the new look. So when will you be launching your new blog? I want more of those awesome Illustrator tutorials.

      You should call it, Illustrator with Ilie

      0
  36. 3316

    Wow. the new design is simple and brilliant. i think my favorite part is the little side bar ruler. it’s so simple, yet so wonderful at the same time.

    0
  37. 3367

    Looks really great.. I love the sidebar Photoshop ruler – very cool graphic.

    I also like how easy it is to read the content… my eyes were relaxed – very good typography

    I have some sort of disconnection with the header though.. the menu the header and the transparent cityscape in the back…
    Something doesn’t sit right with me there.. maybe I don’t like the menu colour bar.. maybe take it out or pull it all the way down..

    But great job
    .-= Chad Mueller´s latest Blog Entry – Stunning Panoramic Photos =-.

    0
    • 3418

      Hi Chad, thanks for stopping by. It’s kind of funny, but people always seem to call me Chad because it sounds like Jad. :)

      Anyway, thanks for sharing your thoughts about the header. I like it how it is though, but I’ll definitely see what I can do to improve it.

      0
  38. 3469

    Nice design, simplicity is defiantly the way to.

    If you don’t already, you might start thinking of making a mobile version of this site.
    .-= Tom – Airopia´s latest Blog Entry – 14 Free Vector Musical Graphics =-.

    0
  39. 3520

    Great new design and love the detail you went into as far as how you came up with the design and why you made the choices you did.

    Very clean and elegant and easy to use = perfect.

    0
  40. 3571

    Love this design, huge improvement over the old one

    0
  41. 3622

    Love, love, LOVE it! Fantastic progression. To be honest, I wasn’t a big fan of the previous one. This design however, is incredible. Keep it up!

    0
  42. 3673

    Nice Layout.
    The Head looks good and the Search Result pages looks better now..

    0
  43. 3724

    Great layout. Clean, sober, and really focus on content. It seems you achieved your goal.

    But I think I found a small bug.
    Always when “The Most Popular Posts” shows, the bottom left block slips out of it’s row. I guess it’s a bug, since the size and align of the elements suggests a perfect 3 rows / 2 columns layout.

    I’m using Firefox 2 at Win XP, and got curious. At ie8, Safari, Chrome and Opera (all latest verions) it also happens.

    0
    • 3775

      Hi Camila, I appreciate you letting me know about that bug.

      I took a look and I did see it so I went ahead and fixed the CSS. Thank you so much! :D

      0
  44. 3826

    Jad,

    Love the re-design. Great attention to detail. Keep up the good work!

    Great submit button!

    0
  45. 3877

    really like the footer area the most

    0
  46. 3928

    Jad—Thanks for sharing the process. It’s interesting to compare and contrast it with MIX Online’s process. Love the simplicity and cleanliness of this design. Will be coming back often. Cheers!

    0
  47. 4030

    i really like your new neat and clean design, i have an suggestion for you, you should continue community news section.
    .-= Dzinepress´s latest Blog Entry – 30 Coolest Minimalist Print Ads =-.

    0
  48. 4132

    Great! one more suggestion, make comment box above comments, so one don’t have to undecide while scrolling down ;) :)

    0
    • 4183

      Great idea Khatia. I actually though of doing that before, but went ahead and decided to leave it as it is. I want people to at least read the comments before responding. Also, if they don’t want to read, they can just click on Share Your Thoughts and it will shoot them straight to the comment box. :)

      0
  49. 4234

    and make e-mail box optional … possible? :)

    0
  50. 4285

    The Popular post is awesome…every blog should have one of this.

    and I miss this character on your site http://designinformer.com/wp-content/themes/design-informer/images/gravatar.png , IMO again , it should be on your header , idk it looks cool and it adds character on your site..look at css-tricks , if you notice the asterisk design he have.

    the footer
    in the nav site, I notice the blue black contrast… I think you should change it.

    the overall design , I love the simplicty of your design, much more better than the old one

    0

↑ Back to top