<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=172061883552505&amp;ev=PageView&amp;noscript=1">

5 Easy Steps to Demystify the Website Redesign Process

 

When you embrace inbound, one of the first things you may notice is that you may need to redesign part or even all of your website to better align it with your new marketing strategy. This will undoubtedly bring lots of questions with it. What’s a wireframe, do we need PSDs, oh and the HTML5 thing, will our site have that? The design process can be confusing to those who are unfamiliar with it. But really, it’s much easier than it seems. The design process is as streamlined and efficient as possible. Every step has a specific purpose and propels the process to the next stage with a logical flow to it all.

Planning

This is where it all starts and is one of the most important stages for a successful website launch. Generally, this phase begins with a kick-off meeting. This is likely the first time you will meet you designer(s). The purpose of this meeting is to lay the groundwork for the rest of the project.

Planning for a website redesign

Typical kick-off meeting topics include:

  • An overview of your business.
  • Your value proposition/what separates you from your competitors.
  • A content audit - a complete inventory of your current site’s content.
  • A new content outline based on the audit: what content do you want on the new site, where do you want it, and most importantly, what is the core message you want to get across?
  • Project timeline.
  • Deliverables.
  • Assigning responsibilities for both your designer(s) AND yourself.

That last two points are important ones. All too often do we hear of projects failing due to a miscommunication about deliverables and responsibilities from the designer and the client.

Wireframes

At this point, your designer(s) will sit down and review all of the information taken from the planning phase and work out how to best present your content. A designer does this with what are referred to as wireframes. The sole purpose of a wireframe is to show layout and page flow/hierarchy. These are generally very low fidelity in that they show only what’s essential to describe the layout and content organization.

There are two main reasons for this. The first is that these are done in rapid iterations (changes can be made quickly and often), and the simplicity aids in doing that efficiently. The second reason is that wireframes do not show design. By eliminating as many design elements as possible, it becomes easier to see the layout for what it is rather than be distracted by word choice or color (we’ll get to those in a minute).

Full-Color Proofs

This is the part we’re all familiar with and is often mistakenly thought of as the entire design process. In the proofing phase your designer(s) will use the wireframe as a sort of blueprint or schematic to create a high-fidelity rendition of the website. The proofs your designer(s) provide will show the intended aesthetic for the website along with all the details that make it up. Depending on whether or not the content is ready at this stage, they may even contain real content (but don’t be surprised if your proofs only contain placeholder content).

Designing full color proofs

Now is when you’re free to get hung up on colors and word choice. Go wild (within reason); having the design firmly locked in by the end of this stage makes the next stage significantly easier for you designer(s) and, therefore, faster. It is important to remember that even though these proofs are high fidelity, due to the nature of responsive web design they cannot and will not be ‘pixel perfect’. That said, you can rest assured that if you are working with experienced designers they will be able to match the proofs with a high level of accuracy.

Development

Here is where it all becomes real. Using HTML (and yes it will be HTML5), CSS and JavaScript, your designer(s) will translate those flat static proofs into a functioning, dynamic website. Based on a number of factors including platform, the complexity of the designs, and level of interactivity, this step could one of the longest.

Your designer may or may not send you links to view functioning pieces of your website throughout this process, but do not expect it. If they do, do not modify anything. Even if it’s just a few words here and there, at this point unless your designer(s) gave you a go-ahead don’t edit anything as this can cause some major headaches and slowdowns. Responsible designers will maintain constant contact throughout this phase, so you’ll always be up to date on what’s going on. After everything is built out, content migration can begin in preparation for taking the new design live.

Production

Taking your new site live for the world to see. Basically, your designer(s) have to get your site on the internet if it isn't already and set your web address to point at the new site instead of your old one. If you're moving to the HubSpot COS, your designer(s) can get everything in place as they develop meaning taking your new site live is little more than flipping a switch.

If you're already on the HubSpot COS, the process is a little trickier and can take your designer(s) the better part of a day as it requires going page by page to get the new design live. In any circumstance, there will be a 48-hour period where your website may display the old site intermittently, act odd or even be inaccessible as your new domain settings resolve and visitors' caches get updated. That sounds pretty scary, I know, but it really isn't bad, most of the time your new settings will be properly propagating in as little as 2-3 hours. You may think going live on a Friday is a good idea so that the 48-hour window takes place over the weekend. We strongly recommend against that as the last thing anyone wants is to have to stress about your site going down over the weekend if something goes wrong.

That's a Wrap

These five steps sum up the whole process pretty well. Hopefully, this demystifies the arcane art that is web design and has gotten you confident enough to push forward. If you have any questions, be sure to leave them down in the comments.

ITS LIVE! WOOT! WOOT!

 

 

Published on April 14, 2015

×
3d-Cover.png

Form Tilte Here