Jun 03 2010

Getting Ready for a Website Redesign: Advice, Resources and More

Advertisement

By Robert Bowen

There is a season for all things, and this holds true in the world of web design too. Naturally with the technologies and languages evolving at the rate that they tend to, not to mention the evolution of our own personal skillsets, we find new design doors opening up before us all the time. Given that this is the way of things the time will undoubtedly come, delivered by one of the aforementioned evolutionary paths or be it even some other reason altogether, that we will decide it is time to redesign our website.


It is usually never a comment on how we felt about the previous design that we had, it is simply indicative of our desire to keep things fresh and up to date. Now as you climb aboard the redesign bandwagon, there are many helpful resources, articles, and even a few checklists that are already waiting to assist you scattered throughout the internet. We have decided that not only are we going to round-up all of those handy helpers into one post for easy access, but we are also going to go over a few things that you want to keep in the foreground of your mind, so they do not slip through the cracks of forgetfulness.

The forgetfulness can be an aggravating roadblock that can easily throw barriers in your way on your path to the redesign. There are so many areas that we have to make sure we cover during this reimagining of the site, that without maintaining a comprehensive redesign checklist you may inadvertently skip one or two of them. Leaving areas of the site unaltered, and given the depth of the redesign, possibly ineffective. Again, this is not necessarily a comment on one’s prowess as a design professional, it simply demonstrates how many cracks there are for these minor elements to fall through.

Consider some of our past articles

So below we have some of the things you will want to take into consideration when you take on this process, also areas to keep in mind. Furthermore, we have a collection of useful posts and resources that you will also want to keep close by when you are beginning to redesign your site. We hope that it helps.

Think of Your Readers

The first and overall most important consideration to keep in mind when redesigning is your readers. Now user interface and experience are always supposed to be a major focus in any design, but here we are more talking about your established readers, not just every user. The main difference is that when you are talking about every user you are talking about the sites intuitive navigability and interfacing. When you are talking about your established readers you are talking about the experience they have come to expect from your site and the way they expect it to be delivered.

And for the consideration of your readers, you want to be sure that your redesign is not so drastic that it completely breaks from the delivery and interactiveness that they are used to. This could inadvertently alter that comfort zone they have established with your site over time, and could in fact cause them to surf on to more what they feel are more welcoming waters. So always keep your loyal audience in mind when redesigning, and perhaps show your consideration by consulting them through a post on the site before the redesign, or even via social media, to find out what changes they would like to see.

As far as the interactiveness of the site goes, pay attention to the areas that draw in your readers, and those areas where they are the most active. Then as you begin redesigning you know that these are areas either need to remain consistently engaging or be beneficially upgraded, but they should not be considered expendable or regarded as unimportant. Any changes made in those areas should be made with care and thoughtful consideration of the readers who help give your site purpose.

Use a CSS Framework

Just in case you were not using one to begin with, you may want to consider a way to make your redesign go a little smoother and perhaps a even a little quicker by creating and using a helpful CSS Framework. As far as solid foundations go for building on top of, frameworks are an extremely useful tools for developers in order to ensure that they get off to a firm start, already aimed and headed off in the right direction. Frameworks are the basic beginnings to styling your design, and in your redesign process, why not go ahead and give yourself a leg up right out of the starting gate.

Now everyone who uses a framework, more than likely, either has one of their own that they have developed or tweaked, or they are using a basic framework that has been built and offered to the community. Either way, you have already skipped ahead in getting your styling in order, and now thanks to the framework, your basics are already in place. Now naturally depending on the direction you are going to be taking your redesign, your framework needs may vary from what you have constructed in the past, or what has already been made and given to the community. This does not mean that a framework would not be useful, only that you will have to piece a new one together.

Given that, this may or may not be a route that you have available to take in your redesign project, but if you do, there are numerous benefits to using a CSS framework including the time and headache that it can save you. And once again, the redesign process can have enough headaches and also be frustratingly time consuming, so any time we can save ourselves any small bit of that, we need to take it. It keeps us from hitting that breaking point of sorts wherein the redesign loses its fun and appeal, and simply becomes work.

Checklist Theme Changes

Another thing to keep in mind if you are doing a redesign for a client who was previously using a pre-constructed theme, is that you are going to want to take specific note of the areas that were handled by the old theme. Perhaps a further step that you should take to ensure nothing gets overlooked is to create your own checklist of elements and options that the new design will include that the previous theme did not. This can keep these areas in focus so that their alteration will be guaranteed, not taken for granted.

For example, if your client’s previous theme included threaded comments and the new design does not, you need to be aware of this. Otherwise, you are going to have to do some special altering to your code to ensure that when the new design launches the past posts with threaded comments suddenly do not have a jumbled, unfollowable mess in the comment section. Since this was already styled and handled by the theme they were using previously, we may not even think about how the new design covers these areas, or more importantly, if it even does cover them.

So if you are going to be redesigning for a client who has been using a pre-constructed theme as their base from which you now have to build, then as you redesign you may want to go ahead and begin making a checklist of the differences between the theme and your design so you know where to look for possible needed fixes and minor tweaks to keep things consistent. While in the beginning this may seem like a time waster, it should more be viewed as a potential headache avoidance system, that makes for a smoother user experience in the transition, and not one riddled with bugs to be sorted. Remember consistency of experience matters to your established audience and that should not suffer because of the redesign.

Avoid Unnecessary Bells and Whistles

Since we are tossing old sayings about, another one that we should keep in mind as we redesign is the one that goes, just because we can doesn’t mean that we should. And what we mean by that is with consistency mattering the way it does, you want to try and air on the side of simpler rather than opting for something a bit more unnecessarily complicated. Sure we want to add some razzle and a touch of dazzle to our design as we rework the site, but we do not want to take things so far from away from the original that we lose the feel, and what’s worse, the appeal of the site.

One of the reasons we tend to redesign is because our skills have grown and we want to flex that creative muscle to show off some of what we can do now that we were unable to make happen in the past. However, if this new addition comes at the cost of the user’s experience in any way, then you have to ask yourself just what purpose does it serve? The bells and whistles are great when we can work them subtly into the site without them becoming obtrusive or a hindrance to your readers, but if their inclusion works against you and your readers, then those little extras need not make the final cut.

Yes, it is always nice to be on the forefront of the evolving web, but it has to be done with style and grace, and perhaps a dash of humility. If you begin loading your redesign down with a bunch of cumbersome frills just to show how far you have come in honing your skillsets, then you are risking unnecessarily interfering with the purpose of your site and straying farther from that purpose. You are making the site and the design more about ego and less about function and form, wherein the message you are hoping to transfer with your design becomes jumbled and possibly even lost.

Revisit the Mission

Once upon a time when your site first began, it had a mission. The site had a decided purpose and a direction that it was crafted to follow. As you begin the redesign process, you may want to also revisit the intended mission of the site and see if you still intend to pursue that same direction. If you find that you have altered your course along the way, which is quite common given how much we grow and change over time, then you may find that you need to adjust your design accordingly to better reflect this change in course.

What better time to make this new direction known and solidify it by saying it boldly with your site’s new look? Use this opportunity to align your site’s voice more with your own, and lock in this revised mission as you move forward and break new ground. Naturally you can undergo this evaluation process and make this sort of mission change whenever you want, but when you redesign your site, people are already going to be taking time to check around the whole site looking for any and all changes that you made so they are more likely to notice this new direction and see where you are planning to take things.

You also want to be sure that if you do change your mission, that it does not so drastically turn from what it was originally that it is no longer a recognizable version of itself. If that is the case, then you do not need a redesign for the site, as much as you just need a new site dedicated to that purpose. The redesign should be a new facade for the design and the direction, but they should remain in the same area as their predecessors. If it does not feel like the same site when it is all said and done, then it will not keep the same readers that it once did.

Don’t Break the Brand

Having a brand for your site and business works for you in so many ways that you want to be sure that you do not disrupt or break the brand in any way with your new design. It is rarely a good idea to alter your brand, which iconically becomes linked to you and your site in the minds of the masses (which really is the point of the whole brand in the first place) so changing it on a whim just to suit your redesign could be more costly than expected. Remember, consistency is important, and when dealing with a brand, doubly so.

Redesigns are one thing, re-branding is something else entirely, and you need to be keenly aware of which you are attempting to do. Branding goes ever so much deeper than you design does for your site and your business, so be sure that you are not inadvertently altering more than you intended to with the reworking of your site’s appearance. Redesigning can be done on a whim, generally with little to no harm being done, but a brand is so much more involved that it takes a lot of thought and effort to effectively re-brand.

So if your redesign is intended as a re-branding or just an initial branding, then you will want to take extra care and time to craft a version fitting of everything that you want the brand to embody. It now has to say much more than it did before, and this should never be undertaken lightly. But if this was never the intent of your redesign, then build around the brand and work it fluidly into the new site, not the other way around.

Don’t Forget the Small Stuff

For years the saying has echoed throughout, don’t sweat the small stuff. And though in the scope of the big picture it is good advice, it may have accidentally created a set of unintentional blinders with regards to the small stuff. Wherein, no matter the situation we find ourselves in, we keep focused on the main goal, and let the little stuff around us be blocked from our sensors. However, when you begin redesigning these blinders need to come off so that our radars pick up on all the minor elements that need to be included, not simply forgotten about until we have uploaded the supposed finished new look and our users have to call our attention to something we missed.

Favicon

When speaking of the small things, it really doesn’t get much smaller than the favicon, so be sure that you do not let its size allow it to be missed as your ever watchful redesign eye searches the site. Depending on how drastic a change your look undergoes in your redesign, it may be necessary to tweak your site’s favicon as well. Having all of these bases covered further helps to cement a professional reputation for your site and you as a designer, so make sure that things like the favicon, the minutiae of your site, stay current and to date with your redesign.

Custom Default Gravatar

If you have a blog attached to your site and in your comment section you use a custom default gravatar for those commenters who do not have their own, then you will also want to tackle that minor element and not let yourself forget it until post-launch. This one is often overlooked because of the fact that it has to be written into your functions, or in this case, re-written. Redesigning can be tedious and tiresome at times, but you cannot let yourself get lazy in your work and not see to as many details as you can before you hang your banner of accomplishment and go live with the new look, so see to your functions and get those gravatars changed over too.

Broken Link Check

Another task that you can tackle when doing a redesign is to scan through your site and make sure that all of your outgoing links are still up and active, not linking to a site that has long since fallen from the landscape. This helps your redesign stay fresh and remain current as well. This may also lead to a little necessary alteration of some of the content on your site to work around these possible link losses, but that can also afford you an opportunity to find new links and content to fill any of these gaps left.

Tools of the Redesign

Below we have gathered up several redesign tools that can help ease the headaches that can commonly be associated with this overhaul process.

Further Resources

Let us keep this redesign enthusiasm going with a handful more of extremely helpful resources all geared towards taking on this type of comprehensive re-imagining of a website.

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Baloot, 03 June 2010

    This is what I’m looking for to tell my clients and when I want to propose them to redesign their old-design website. TQ. :)

  • Multyshades, 03 June 2010

    you sharing helping ideas and resources for learn about website design and also about revamp. thanks for sharing

  • Photoshop Tutorials, 03 June 2010

    Some of the nice ideas are being shared here will look forward to gain more from here

  • Vectorbunker, 03 June 2010

    Thank you for sharing, will keep this for any propose idea to our client.

  • Mike, 03 June 2010

    Great article on the redesign process.

    Each year we do a redesign of our site to create a new experience for our audience but also to better serve our content. We value the feedback our users provide and take it in consideration during our design process. This year we taken a step back from using Flash and used jQuery to create our user interface to create a more accessible and search engine friendly site.

    Our latest site is: http://2010.soulofathens.com

    You can see the evolution through the past years by visiting 2009. 2008. 2007. as well.

  • Olivier, 04 June 2010

    Just Right in Time for our re-design !

    Thanks…

  • Kent Tan, 04 June 2010

    Great article about website design. I find too many sites having too many elements – simply cluttering up the page. The “Avoid Unnecessary Bells and Whistles” section is really to the point.

  • James Macfie, 05 June 2010

    Excellent article – lends itself well to outlining a kind of “checklist” for redesign. And just as I’m redesigning my website – good timing!

  • Jacqueline Caddle, 05 June 2010

    Perfect timing on this! I just snagged a freelance redesign project, and as someone who’s just starting out as a UX designer, I’m gathering all the resources and help I can find. Thanks!

  • Sven, 06 June 2010

    Very helpful article.
    A little to late for the finished redesign of my own website, but perfect in time for the redesign of a client site. ;)
    Thanks for sharing.

  • Darryl hill, 06 June 2010

    I redesigned my site and went from page rank 4 – 2.
    I’m still trying to fix it.

  • Eri Mehmeti, 06 June 2010

    Great Article. The difficult part is when it comes to design our own websites, I don’t know about you but I lose my creativity every time I plan to design my own site. :)) Thanks for the resources.

  • Having just redesigned our own website I only wished we had seen this post earlier. I covers many different aspects that you ordinarily do not plan for. Great article.

  • KarenKubiak, 06 June 2010

    Great suggestions! May I suggest the addition of one more?
    Take advantage of the redesign opportunity to refine the content. If your site has an FAQ section, consider addressing those frequently asked questions in the content. Also find out where the gaps are in the current site: what do people email or call about most for clarification?

  • tvseizure, 09 June 2010

    Great content and post you have here , would definitely recommend it to my peers

  • Bryant Abato, 11 June 2010

    Affiliate Cash Ultimatum promises to overdeliver for a measly $47 at its launch on 22nd June.

  • a3u5z1i, 12 June 2010

    Nice post. Thanks for sharing..
    I will use this and try to implement it

  • utari, 08 July 2010

    great post, amazing

  • trance music, 13 July 2010

    I seem to be having a problem , subscribing to your RSS feed. It comes up with error 451. Let me know if its a known error or if its just me . Ive tried opera and IE. Im using Eset Firewall and im not sure how to turn it off . Im not that good with PCs. Ill bookmark your site and see if you have responded. all the best

  • h2spot.net, 18 July 2010

    very nice tutorial, thanks for sharing…

  • Vertinix, 01 September 2010

    Impressive article about redesigning the website. Specially the Tools of the Redesign section is awesome.

    Thanks for sharing.

  • Marlene Desmond, 15 October 2010

    Have you ever heard of a usability study. You can make a very pretty website, but if it doesn’t work for your users you’ve wasted your time. You need to spend more time on finding out what works for your website visitors and how they use your site, then you do on designing a nice looking site. Its all about the user. Don’t just post a notice that you are redesigning the site, bring in your users and find out how THEY want you to design the site.

  • Hattie Kewish, 31 October 2010

    major league journal you’ve possess

  • Steps To Get Your Ex Back, 18 January 2011

    I value your strategy right here. Without doubt it includes a nice written content. Thank you for imparting much more of your own ideas. Quality job!

search form
 
image description image description