The 7 Stages of This Website’s Redesign

Apr24

Finally, the rocketship to Mars that I’ve been building for months has taken off. By rocketship I mean this website redesign. It wasn’t easy but it was fun. I started working on this design since February this year and I ‘m really glad that it’s over. Well at least for now. If you want to find out how I came up with the design, read on.

evolution

At long last, I have finally updated my website with the new design. I’m calling this new design “Stage 7” because there were 7 stages and it was the 7th stage that I finally stopped and finalized the design. If you are a new visitor to this site, you probably won’t even notice it at all. But to give you a brief history, this site used to wear the Una WordPress theme, my first free WordPress theme and it has served me well.

So what took me so long to build and launch this new design? It’s not really because of the lack of time or inspiration. In fact I do have a lot of free time for this project. But everytime I finish the design, I take a good look at it today and decide that it’s cool but the next day when I take a look at it again, I have changed my mind about it . I’ve learned the hard way that as a web designer, the hardest client to please is yourself. To prove it to you, I’ve gone through many design revisions before I finally came up with this and to be honest, I’m still not fully pleased with what I came up with. But I decided to stop tweaking the design and finally convert it to code, because if I continue on revising the design, I will not be able to finish anything at all.

Below you will see the evolution of the design in 7 stages:

Stage 1

Stage 1

Stage 1: It started out as a light colored theme. I kinda like this layout. In fact, I’m converting this to a WP theme sometime soon.

Stage 2

Stage 2

Stage 2: This one looks similar to the first one, except images are added on the blog section of the page. Another great WordPress theme idea, I guess.

Stage 3

Stage 3

Stage 3: I woke up one day and I told myself, I wanted that kind of look. Looks good to me but I got tired of looking at it.

Stage 4

Stage 4

Stage 4: This one looks grungy, the kind of look that I’m going for but I hated the colors.

Stage 5

Stage 5

Stage 5: I love this design. But before I can convert it to code, I kinda changed my mind again. I’m gonna inherit this look on some of my future projects so it won’t be wasted.

Stage 6

Stage 6

Stage 6: I’m almost there. I thought I was aiming for grunge but at this stage, I knew what I wanted. I wanted something that looks neat and textured so I got rid of the grunge parts and came up with this.

Stage 7

Stage 7

Stage 7: This is the final design and I think I’m really happy about it. I love how it eveolved from Stage 1 to this. I didn’t see that coming. At least this was a great learning experience for me.

Because I don’t want to go through piles of stages on my future projects again, I created guidelines for myself. If you find these guidelines useful, you may use it at your own risk. :)

Always ask other people’s opinion about the stuff you are working on

I guess this one is a very important thing to remember. If you can’t please yourself, the best way to move on with your design is ask other people’s opinion. Remember that you are not only pleasing yourself but other people too who will be viewing your design.

Do not overdo it

Sometimes when you are working on something interesting, like a personal blog or website, you tend to get addicted to it that you don’t want to stop working on it. You want to put everything into it but most of the times, that’s not really cool. Like for example, you are working a website and you have finished laying it out. You see an empty space on one of the columns and you decide to fill that up with some design or something to fill up the space. Sometimes, spaces are good. It gives the eye some area to rest. Sometimes, you need to pause for a while and take a walk to clear your mind.

Stay Organized

This one is very important for me because most of the times I get really disorganized. I start the project with a list of to-dos and I end up losing and not following what I wrote.

Keep it Simple

Simplicity is beauty. So don’t make it too complicated.

Well that’s it. This post has to end somewhere. Everytime I’ll be working on a new project I’ll be going back to these guidelines. This design has been tested to work great on all modern browsers except IE6. For all those folks who are still using Internet Explorer 6, please update your browser or just use a better browser.

Tags: , , , ,

Comments

Wanna share your thoughts? Leave a message
32
  1. efren
    April 24th, 2009
    at 11:19 am

    WoW!

    This rocks bro! Parang lahat ok eh. pwede mo ba irelease lahat as free?

    hehe..

    • dino
      April 24th, 2009
      at 11:34 am

      Sure bro, why not! Pero one at a time lang siguro. Sponsoran mo ako… hehehe

  2. Hi Dino,

    Nice site redesign.
    lahat naman ng ideas mo eh okay na okay sa akin! pero ito yung pinakamaganda.

    • Ikaw ba talaga ang nag-redesign nito?

      3 letters lang . W-O-W!

    • dino
      April 24th, 2009
      at 12:33 pm

      Thanks bro. My almost 2 year old baby created this design, and I did the all the rest of the dirty work.

  3. Nice site.. napa daan lang nakita ko kasi sa cssmania. heheh submit ka ren sa http://www.sefwebgallery.com

    • Thanks. You have a good looking website too. I have submitted my site already. I hope it gets included in the SEFGallery showcase.

  4. Great design. Any chances you can release the old theme for free?

    • Thanks Arun. The previous theme I’ve used on this site was Una WP Theme and it has been actually free for a long time. Please check out this post.

  5. Thanks Dino,

    But I can’t seem to find ANY demo for the site. All are pointing to your site only :( . Mailed you!

  6. Daus
    May 3rd, 2009
    at 3:20 pm

    Thank you for sharing the process. Nice redesign ;)

  7. HaHa, I totally agree with “I’ve learned the hard way that as a web designer, the hardest client to please is yourself.” – I did the same thing, I finally code the design even if I wasn’t totally satisfied with it… I think you could never be entirely happy with the work you do for yourself as a designer… no matter if it’s web, print, interior, etc

  8. Nice designs.

  9. Very nice. I like all of the design phases and I very much agree with your guidelines especially on keeping it simple.

    I also have been through countless of design revisions in my blog and today is my most recent.

    Thank you for sharing your thoughts.

  10. Idolness! Astig! Galing!

  11. Dulce
    July 8th, 2009
    at 6:11 pm

    I agree with you. The most difficult client to please is yourself. I’ve got the same dilemma right now with my website too.

    I have planned to redesign our site way back last year pa. Hope I can finish it very soon na. *crosses fingers*

    By the way, I love your redesign. It has the same coffee color theme like my other website too (http://wpclassic.com/).

  12. Brendon
    August 26th, 2009
    at 10:53 pm

    galing pare. A very useful guideline indeed! :-)

  13. it’s interesting to see the story of your redesign in pictures. I like the end result (although the comps are pretty neat, too): A somewhat unusual color scheme, the typography is well thought-out and appealing, everything is in place.

    What’s funny is that I’m going through a major redesign of my own site, and it looks a tiny bit similar although I have not seen your site before. Not too similar, though ;)

  14. Thank you for sharing such an insightful article with all of us. I’ve bookmarked your blog will come back for a re-read again. Keep up the excellent work. We have a Dan Kennedy Copywriting seminar that we offer to our customers you can check it out here Copywriting Tips Click here

  15. so thanks for teaching me!!

  16. superb blog post, you deserve a free iPad: http://bit.ly/freeipad6

  17. Thank you for sharing. very useful guideline indeed!

  18. Densy
    May 29th, 2011
    at 3:17 pm

    Hi, Your web feed rss have problem for The world brower? I can’t feed it.

  19. you’re really a excellent webmaster. The site loading speed is incredible. It seems that you’re doing any unique trick. Furthermore, The contents are masterpiece. you’ve carried out a wonderful job on this topic!

  20. Hello would you mind letting me know which hosting company you’re working with? I’ve loaded your blog in 3 completely different internet browsers and I must say this blog loads a lot quicker then most. Can you suggest a good hosting provider at a honest price? Kudos, I appreciate it!

Find me on the Web

Other places you can find me

Daily Digest

Resource Sites for Inspiration

Extra Stuff

Represent!

Search this Website

Looking for something specific?