Know How To Plan Your Website Redesign & Get Inspired

Posted in Tips, Web Design • Posted on 28 Comments

Title-play-your-redesign-processWith this article I will start very serious article and experience series, showing you step by step how we will do our redesign process. I sat down one day and wrote all little steps I will need to do in order to create, plan new design, code it to successful and finished result and now I am hoping to go through those steps myself and make them reality. I wrote down several pages just about those steps and now I will research them further, learn a lot myself and finally will try teach you from my own experiences my best way how to do redesign.

Throughout whole article I will also feature successful redesign of popular blogs showing BEFORE/AFTER screens, enjoy!

Elitebydesign.com-snapshot-redesign-before

Elitebydesign.com-snapshot-redesign-after

We’re sick and tired just from theory, so this time I will give you some serious sneak peek insight in our own website redesign process. I just hope it will not take too long for us to complete and describe it all, but actually will help to bring this whole website many steps further. We hope to get you involved as well, because we will make different polls, discussions, questions to help us decide what you want and what works the best for this site.

Let’s start just by dropping down important points we need to go through before planning redesign and actually knowing what we need to change in order to be succesful!

Smashingmagazine.com-snapshot-before

Smashingmagazine.com-snapshot-afterjpg

Goals or redesign process? Think at first why and do you need redesign at all?

Maybe you just need to change some little sections in your designs and it will work for you? Maybe small color, design changes would solve and freshen your design? Usually the best way is to change small points for design regularly, because need of redesign usually come when you haven’t done anything at all with site design for a long time and one day realize that it looks very outdated and you need to change it seriously. In that case you will need to put there big time and efforts, where small regular changes would help your design daily and also wouldn’t be so painless as complete redesign.

Read this article from ListApart to understand my point – Good Designers Redesign, Great Designers Realign.

Mashable.com-snapshot-before

Mashable.com-snapshot-after

Site has grown and content has been changed

Surely you don’t write about exactly the same topics you wrote 1–2 years ago and maybe you need to expand those topics? With growing amounts of content from time to time, you need to change and find better ways to arrange it, make all your important content easy to find and scan.

You need changes – How To Plan Them?

Now I tried to pin point all most important aspects you should think through before planning to design new site design and code it. Do those steps with me and I assure you, when you will need to do actual design and coding you will know exactly what you need to change and how to do it!

Css-tricks.com-snapshot-before

Css-tricks.com-snapshot-after

1. Analytics is your best friend. Use it!

I use Google Analytics and I know exactly when I changed from my previous design to current one, so I can see and inspect what has been changed, what’s working, what is not. Analyze top landing pages and top exit pages, try to understand why one is working, when other is not.

Try to think how to increase your site page views, maybe with previous design you had more page views per visit? Monitor your history to find answers to those questions.

Try to look from eyes of your visitors – if you would be visitor from Google, social media site –  where you would look, what would make you stay on that page longer and what would make you immediately go away? Ask your friends to check those top landing and exit pages, do some polls to understand where is a problem.  Spend some serious time in your analytics, it will give you amazing results!

Abduzeedo.com-snapshot-before

Abduzeedo.com-snapshot-after

2. Clear set of future goals and understanding

Sit down and write exactly what you need to change, what is working, what is not. When you think of something you need to implement in new design – try to answer question yourself – Why?

Why you need to add that feature, how you and your readers will leverage from it? Maybe you need something different or you don’t need that new feature at all?

Do you need new branding or you want to just freshen up it a little bit to make it more up to date? Think what you need to do to make your new design more user-friendly, make it intuitive and familiar for visitors even if they visit your site for the first time. People get used to designs and sometimes big changes makes them confused or even turn away – don’t let your site to achieve that negative effect, always put your visitors in the first place!

Noupe.com-snapshot-before

Noupe.com-snapshot-after

3. Modern design, appropriate to your niche

This is very important point as well. Each niche has its own trending and appropriate designs – tech, social news type websites usually are very light weighted and fast loading ( check Mashable, TechCrunch for example). For design type websites this trending is completely opposite, designers are ready to sacrifice site loading speed in order to make it more beautiful, richer with nice icons, small gradients, eye-candies and maybe even huge, design-rich backgrounds. Check for example – Tutorial9, WebDesignLedger.

Design needs to be relevant to niche and you should use new technologies, following trending. Maybe even try to understand where design and technologies are going to put even step further as your competitors.

Webdesignledger.com-snapshot-before

Webdesignledger.com-snapshot-after

4. Evaluate, analyze your current design

Visit your own site now and write down what is working now, which goals it is fulfilling and which one is not. Run heat map for your site to see where your visitors are clicking the most.

This point differs from analytics tool part  because now you just focus on design emphasis, placements, understanding which parts are outdated from design or technology point of view. Also we need to consider which parts of design we need to transfer in new one as well.

Psdtuts.com-snapshot-before

Psdtuts.com-snapshot-after

5. Visit and compare competitor websites

It is a very good thought to visit competitor websites from the same niche to learn from their design, understand what features you would like to implement and maybe even use more effectively. Take a pen again and write what you like, dislike in design and why it works!

Understand what you should integrate and which mistakes you should avoid.

Now I will share a small tip I found to be very valuable for me. Lately I’ve been reading a lot of interviews and usually those are very valuable too, since succesful people share their experiences honestly – you can learn from their mistakes and advises in order to do kick-start yourself right away!

Jankoatwarpspeed.com-snapshot-before

Jankoatwarpspeed.com-snapshot-after

6. Think how you will convey information in new design layout

Understand what you need to put above the fold, plan your article, layout structure in order to make it better. Which colors you should use, why? Why you should choose light layout instead of dark one? Ask yourself always that question – why? (I am repeating sometimes, but only because I want to emphasize the most important points you certainly shouldn’t need to avoid).

Do you need two column or three column layout? Start to sketch your layout structure, each section need to have certain purpose, you should clearly understand and be able to explain for yourself.

Myinkblog.com-snapshot-before

Myinkblog.com-snapshot-after

7. Search Engine Optimization (SEO)

Don’t loose your SEO while transferring to new design.  Try to avoid your main sitemap changing or if you ned to change permalink structure use necessary tools so Google would be able to understand how your link structure has been changed and you wouldn’t get broken links.

Implement certain related tools from old design to your new design as well.. For example I am using thumbnails throughout my whole site. If I wouldn’t think of this in new design, I may face some serious problems where I should implement those parts manually or even I should go all previous articles to change that part. Such tweaks may be necessary to change anyway, but it’s imporant that you are being aware of such things before redesigning. Plan everything!

Read more about SEO and maybe with new design you could add some more easy SEO features you are not using right now like user-friendly image naming, sitemaps, tagging.

Ndesign-studio.com-snapshot-redesign-before

Ndesign-studio.com-snapshot-redesign-after

8. Think about functional, user-friendly website at first

Before actually starting to draw design, you need to think about functions this design will need to fulfill. Think about user experience, creating site very intuitive. For example you have two navigation, where one will be used daily, but other..maybe is secondary and not so important. You need to think how to distinguish subcategories, add emphasis to correct categories.

You need more subscribers? Put big,bright RSS button in above the fold section, use white space and layout to support such important emphasis!

What I wanted to say is that you need to have clear understanding of features, functions at first and just after that you can plan how to give those functions beautiful skin and look.

Freelanceswitch.com-snapshot-redesign-before

Freelanceswitch.com-snapshot-redesign-after-1

9. Increase User Interaction

This is small optimization point I will try to implement in new design. Everybody wants to get more regular visitors, but we need to work on it in order to get some well-earned regular traffic in exchange! What do I mean?

Add polls, create events, call people to action so they actually feel as part of community! Add community news, count comments and give credits to most active readers! I visit a lot of design blogs daily just because I use them for promotion submitting user news, but in meantime I am of course reading there the most interesting articles I occasionally see while submitting.

Why I am mentioning user interaction in redesign process?

Because you need to plan it in design as well! You need to give some spotlight to regular visitors offering little games (like counting comments, giving special badges to registered users) and plan space in footer for example to give some earned link there.

PSDTuts had comment counting system half a year ago, where I was commenting each post like crazy because I got then “top” space in most active reader section. Good thing was, this counter was resetting each month, so I would need to return there each month to earn that space in footer.

Uxbooth.com-snapshot-redesign-before

Uxbooth.com-snapshot-redesign-after

10. Put in use new technologies

I will repeat myself again, but with a little bit different focus now. Avoid using Flash, or supporting old browsers if your visitors aren’t using it anymore. Make use of new CSS3, HTML5, Javascript features!  If your readers are using old browsers, educate them and explain why they should transfer. I don’t think you need to waste a lot of time making your design to look good in IE6 browser anymore!

Don’t forget to update static pages on your site!

Usabilitypost.com-snapshot-redesign-before

Usabilitypost.com-snapshot-redesign-after

Right, now you should have a lot of notes and comments gathered. Order everything now so you have clear step by step understanding how redesign will go and what you need. Now I will show some successful redesigns for you so you can get some inspiration and understanding why previous design was working..but new one is working better.

For further reading I also found several very exciting stories where designers reveal behind the scenes process of their site redesign and more! Very interesting reading and valuable for planning your own redesign:

Designbump.com-snapshot-redesign-before

Designbump.com-snapshot-redesign-after

Keep updated, because I will continue with other redesign process article series, where I will expand and research further important aspects I touched lightly today:

  • How To Monitor Your Website With Analytic Tools
  • Being Aware Of Simple SEO And Put It In Use Daily
  • Sneak Peak Insight In Trendy Blog Design: 2010
  • How To Increase User Interaction, Succesful Examples
  • Wireframing – Owning And Understanding Your Sitemap
  • Planning Your New Design – Typography, Layout, Color Scheme
  • Handy Toolbox For Successful Redesign ( Will be expanded in categories)
  • Will be continued..

Designshack.co.uk-snapshot-redesign-process-before

Designshack.co.uk-snapshot-redesign-after

Sounds cool? I am excited as well to see how these series and planning my own site redesign will work out!

193 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

28 Comments Best Comments First
  • Brian Lovin

    Tuesday, March 23rd, 2010 03:40

    1

    Wonderful post, and thanks for showing Elite by Design’s redesign. As always, a website is a never-ending evolution. I’m still constantly tweaking Elite by Design to make it better and I’m always thinking about ways to make the site more user-friendly and accessible. Can’t wait to watch 1st web Designer evolve, best of luck!

    0
  • Diseño Web

    Tuesday, March 23rd, 2010 22:00

    9

    I just change my site, didn´t see this article before… it would have been very useful.

    0
  • ashley

    Wednesday, March 24th, 2010 08:23

    11

    i love this article…clean and to the point…where the eye goes to on the page/focal point…finding balance:) great job

    my only problem is that i don’t understand how to move poetry to my webpress.co from my desktop:(

    0
    • Dainis Graveris

      Thursday, April 1st, 2010 18:28

      18

      appreciate your words! :)

      what do you mean? you have problems setting up your wordpress blog? :)

      0
  • Squiders

    Thursday, March 25th, 2010 01:04

    13

    Good tips, i see my site as an evolution, although it well overdue!

    0
  • Dani

    Tuesday, March 23rd, 2010 18:47

    8

    One important issue is search engine links. In order not losing them remember to create redirects frot ehold pages.
    Dani

    0
  • Rodrigo

    Tuesday, March 23rd, 2010 17:02

    7

    Thanks man!

    As usual you´re right.I waked up this week thinking in redesign my site.I opened my mind and have already new ideas to adapt my design to the changes I want to make , because of your post.

    As soon as I finish the layout you´ll the first to know!! :-)
    []s,
    Rodrigo.

    0
    • Dainis Graveris

      Tuesday, March 23rd, 2010 23:32

      10

      do it Rodrigo!! I am curious already! do you redesign blog or portfolio site?

      0
      • Rodrigo

        Wednesday, March 24th, 2010 14:45

        12

        Well , my idea is to “realign” my portfolio site and include my blog in this layout . My blog I create earlier so I imported from a free account of wordpress recently and this is one of the reasons about the realign.

        []s,
        Rodrigo.

        0
        • Dainis Graveris

          Thursday, April 1st, 2010 18:38

          20

          yes, you just need to create one style for both of websites and integrate together :) right, I understand your case :)

          Would be glad to hear your problems, experiences, successes :)

          0
  • Free Textures

    Monday, March 22nd, 2010 22:08

    2

    Awesome article – extremely useful tips there.

    0
  • Shikeb Ali

    Tuesday, March 23rd, 2010 00:03

    3

    Hi Dainis ,
    Very Nicely composed article, but you have missed some important major redesigns. Naming the most famous and important one here… Like Yahoo.com did a great job, inspired me most with their UI. Then I’d like to mention Ebay.com they wonderfully transformed the old yellowish website into a very attractive design. And last but not the facebook.com changed their whole UI + UX. we all know about the major change on their user home page and profile page.

    0
  • Matthew Heidenreich

    Tuesday, March 23rd, 2010 06:28

    4

    this is a great article. I am actually working on a redesign on my own site, so this is very useful and informative, thanks!

    0
  • adone

    Tuesday, March 23rd, 2010 14:03

    6

    VEry good article. Thanks 1WD!!!!

    0
  • Logobird Designs

    Tuesday, March 23rd, 2010 07:55

    5

    Its always interesting to see before/after shots. Thanks for the tips!

    0
  • Luis

    Thursday, March 25th, 2010 06:16

    14

    Great article Dainis, I’ll be waiting for the next fo this series.

    0
  • James

    Thursday, March 25th, 2010 12:04

    15

    There are some really great examples here of websites that have been skillfully redesigned. I think my favorite redesign would be Janko’s as was really impresses with the changes made and the new identity is really nice too. Thanks for sharing a Great article.

    0
    • Dainis Graveris

      Thursday, April 1st, 2010 18:30

      19

      yes, Janko really changed his blog and way of viewing all information. It’s light – even too light, I am not sure if it will not affect readability and pageviews :)

      0
  • Adeel

    Friday, November 25th, 2011 09:57

    24

    Designing is really very creative work which means its not that simple which everyone can do. There are some people who has magic in their hands because they are God gifted or having lots of experience.

    0
  • Matthew

    Friday, December 2nd, 2011 13:39

    25

    I am very inspired to learn the tips about our websites thanks for giving the motivation i am really enjoyed.

    0
  • nilson solano

    Tuesday, December 13th, 2011 07:20

    26

    I always thought that wordpress can achieve very good pages, the theme is very good and has helped me clear my mind about this cms, as well as easy to work.

    Good article, but is a little old man is very valid.

    a greeting

    0
  • Muhammad Saad

    Wednesday, March 28th, 2012 05:00

    28

    Well written. I was lacking with major points & this article made me clear… Thanks

    0
  • Tonny

    Tuesday, February 28th, 2012 17:15

    27

    Im not a huge fan of some of the sites above simple because they are a little to plan and ordinary for my liking, but some great examples and overall a wonderful post. Thank you!

    0
  • Jim

    Sunday, June 27th, 2010 01:36

    23

    Nice collection of information. It never ceases to amaze us how many clients decide to move into a “website redesign” and have not given an ounce of thought to what they really want – or need to accomplish. When we can get our clients to slow down and devote time to the planning process the results have always been very well received. PLANNING is critical!!!

    0
  • bwin bonus

    Thursday, May 27th, 2010 06:01

    22

    Great Article. This was extremely helpful for me. I always find my self re-designing my web site with no clear goals or even a reason for the re-design other then I am bored with the current look.

    0
  • Project Center

    Saturday, March 27th, 2010 23:14

    16

    Ran across this post from Kikolani’s Friday Mashup this week. Really glad I found your site as it seems (from this post at least) that you have some awesome stuff going on here.

    Not only do you give some nice step by steps for thinking out the process of re-design but you give usable tips as well. :-)

    @ProjectCenter
    Phoenix Printing and Design Company

    0
    • Dainis Graveris

      Thursday, April 1st, 2010 18:27

      17

      Thank you, yes, at first i did big research myself and then shared and put it all in nice way for others to use too :)

      Come back soon, I will continue :)

      0
  • Muhammad Saad

    Wednesday, March 28th, 2012 05:00

    28

    Well written. I was lacking with major points & this article made me clear… Thanks

    0
  • Tonny

    Tuesday, February 28th, 2012 17:15

    27

    Im not a huge fan of some of the sites above simple because they are a little to plan and ordinary for my liking, but some great examples and overall a wonderful post. Thank you!

    0
  • nilson solano

    Tuesday, December 13th, 2011 07:20

    26

    I always thought that wordpress can achieve very good pages, the theme is very good and has helped me clear my mind about this cms, as well as easy to work.

    Good article, but is a little old man is very valid.

    a greeting

    0
  • Matthew

    Friday, December 2nd, 2011 13:39

    25

    I am very inspired to learn the tips about our websites thanks for giving the motivation i am really enjoyed.

    0
  • Adeel

    Friday, November 25th, 2011 09:57

    24

    Designing is really very creative work which means its not that simple which everyone can do. There are some people who has magic in their hands because they are God gifted or having lots of experience.

    0
  • Jim

    Sunday, June 27th, 2010 01:36

    23

    Nice collection of information. It never ceases to amaze us how many clients decide to move into a “website redesign” and have not given an ounce of thought to what they really want – or need to accomplish. When we can get our clients to slow down and devote time to the planning process the results have always been very well received. PLANNING is critical!!!

    0
  • bwin bonus

    Thursday, May 27th, 2010 06:01

    22

    Great Article. This was extremely helpful for me. I always find my self re-designing my web site with no clear goals or even a reason for the re-design other then I am bored with the current look.

    0
  • Project Center

    Saturday, March 27th, 2010 23:14

    16

    Ran across this post from Kikolani’s Friday Mashup this week. Really glad I found your site as it seems (from this post at least) that you have some awesome stuff going on here.

    Not only do you give some nice step by steps for thinking out the process of re-design but you give usable tips as well. :-)

    @ProjectCenter
    Phoenix Printing and Design Company

    0
    • Dainis Graveris

      Thursday, April 1st, 2010 18:27

      17

      Thank you, yes, at first i did big research myself and then shared and put it all in nice way for others to use too :)

      Come back soon, I will continue :)

      0
  • James

    Thursday, March 25th, 2010 12:04

    15

    There are some really great examples here of websites that have been skillfully redesigned. I think my favorite redesign would be Janko’s as was really impresses with the changes made and the new identity is really nice too. Thanks for sharing a Great article.

    0
    • Dainis Graveris

      Thursday, April 1st, 2010 18:30

      19

      yes, Janko really changed his blog and way of viewing all information. It’s light – even too light, I am not sure if it will not affect readability and pageviews :)

      0
  • Luis

    Thursday, March 25th, 2010 06:16

    14

    Great article Dainis, I’ll be waiting for the next fo this series.

    0
  • Squiders

    Thursday, March 25th, 2010 01:04

    13

    Good tips, i see my site as an evolution, although it well overdue!

    0
  • ashley

    Wednesday, March 24th, 2010 08:23

    11

    i love this article…clean and to the point…where the eye goes to on the page/focal point…finding balance:) great job

    my only problem is that i don’t understand how to move poetry to my webpress.co from my desktop:(

    0
    • Dainis Graveris

      Thursday, April 1st, 2010 18:28

      18

      appreciate your words! :)

      what do you mean? you have problems setting up your wordpress blog? :)

      0
  • Diseño Web

    Tuesday, March 23rd, 2010 22:00

    9

    I just change my site, didn´t see this article before… it would have been very useful.

    0
  • Dani

    Tuesday, March 23rd, 2010 18:47

    8

    One important issue is search engine links. In order not losing them remember to create redirects frot ehold pages.
    Dani

    0
  • Rodrigo

    Tuesday, March 23rd, 2010 17:02

    7

    Thanks man!

    As usual you´re right.I waked up this week thinking in redesign my site.I opened my mind and have already new ideas to adapt my design to the changes I want to make , because of your post.

    As soon as I finish the layout you´ll the first to know!! :-)
    []s,
    Rodrigo.

    0
    • Dainis Graveris

      Tuesday, March 23rd, 2010 23:32

      10

      do it Rodrigo!! I am curious already! do you redesign blog or portfolio site?

      0
      • Rodrigo

        Wednesday, March 24th, 2010 14:45

        12

        Well , my idea is to “realign” my portfolio site and include my blog in this layout . My blog I create earlier so I imported from a free account of wordpress recently and this is one of the reasons about the realign.

        []s,
        Rodrigo.

        0
        • Dainis Graveris

          Thursday, April 1st, 2010 18:38

          20

          yes, you just need to create one style for both of websites and integrate together :) right, I understand your case :)

          Would be glad to hear your problems, experiences, successes :)

          0
  • adone

    Tuesday, March 23rd, 2010 14:03

    6

    VEry good article. Thanks 1WD!!!!

    0
  • Logobird Designs

    Tuesday, March 23rd, 2010 07:55

    5

    Its always interesting to see before/after shots. Thanks for the tips!

    0
  • Matthew Heidenreich

    Tuesday, March 23rd, 2010 06:28

    4

    this is a great article. I am actually working on a redesign on my own site, so this is very useful and informative, thanks!

    0
  • Shikeb Ali

    Tuesday, March 23rd, 2010 00:03

    3

    Hi Dainis ,
    Very Nicely composed article, but you have missed some important major redesigns. Naming the most famous and important one here… Like Yahoo.com did a great job, inspired me most with their UI. Then I’d like to mention Ebay.com they wonderfully transformed the old yellowish website into a very attractive design. And last but not the facebook.com changed their whole UI + UX. we all know about the major change on their user home page and profile page.

    0
  • Free Textures

    Monday, March 22nd, 2010 22:08

    2

    Awesome article – extremely useful tips there.

    0
  • Brian Lovin

    Tuesday, March 23rd, 2010 03:40

    1

    Wonderful post, and thanks for showing Elite by Design’s redesign. As always, a website is a never-ending evolution. I’m still constantly tweaking Elite by Design to make it better and I’m always thinking about ways to make the site more user-friendly and accessible. Can’t wait to watch 1st web Designer evolve, best of luck!

    0

Comments are closed.

54.161.133.166 - unknown - unknown - US