Create or Redesign Your Website in 5 Easy Steps

As the number of business transactions being performed online continues to grow, companies are finding that optimizing and keeping their websites running smoothly is becoming more of a priority — and more of a challenge.  Below you will find out how, in five easy steps, you can streamline the process for creating or redesigning your website to reduce costs and improve efficiency.  The most important thing you should notice is coding comes last.  Read on to see why.

1. Create Wireframes

The first step in the process is to create wireframes for the new website layout.  Wireframes contain the basic layout information for your pages.  All you have to do is block out a place on each page for the header, navigation, call-to-action buttons, and whatever other elements it would have and label them accordingly.

2. Create Mockups

After you’ve identified where everything will go on the page with a wireframe, the next step is to “fill in the blanks” by giving the sections some form.  This is where you pick the colors for the background of the page, the typography you will use for different parts of the site and their colors, and any images, buttons, or other visuals that will be on the page.

For this step you can use placeholder copy from a lipsum generator for any long blocks of text that will be on the page.  However if you have any critical copy, like page headers, navigation bar items, or calls to action it wouldn’t be a bad idea to have those elements in place for the mockup stage.

Once you’re done, the visual elements of your site’s design should all be finalized and the only static thing missing should be any long-form text that you haven’t written yet.  Which brings us to the next step…

3. Produce Content

After the page has been mocked up, the next step is to replace any long paragraphs of placeholder text with the actual copy you will use on the page.  This allows you to make sure you don’t need to make any adjustments to the design in the event your final copy is dramatically longer or shorter than the placeholder you used and it throws off the formatting.

Once you’ve finished populating the content on the page, you should be looking at a static image for each page of exactly how you want your website to turn out when you complete the development process.

4. Prototype the Functionality

Once you have all of your pages completely built as images, you need to then create a demo site that performs any critical functionality you want.  This is especially important for web-based companies, like software-as-a-service businesses, where the website is the product the customer is buying.

Creating a prototype of the functionality allows you to make sure that how you envision your website working is how it will perform in actuality once it’s coded.  It ensures that no unforeseen design or content issues will come up when you get to the implementation stage.  Creating a prototype can be as simple as putting your website mockups into PowerPoint or a similar program, creating links for the navigation and other parts of the page between the slides in the deck, and then clicking through the “site” to make sure everything navigates smoothly.  However you do it though, it should not involve any coding.

If you absolutely must have someone write code to prototype the functionality, it should be done as quickly as possible and only for the parts of the site that can’t be demoed another way.  Like the opening paragraph said, in order for this process to be the most streamlined coding needs to be the last step in the process.

5. Write Code

Finally, after you have a working prototype of your site, it’s time to write the code.  And by now you’re probably wondering why this is the last step.  The answer is simple: code is the most expensive thing to write and the hardest thing to change.

First of all, an hour spent by someone other than a software engineer developing part of the site is an hour of time you saved paying for the web developer, who is almost certainly the most expensive resource on your team.  Not only that, but any revisions or changes in direction that happen during the first four stages of the process will most likely take twice as long to fix once you get to the coding stage.  Just think about how many small decisions are made after looking at something for the first time and you’ll realize how often updates and revisions happen.  This means any revisions you make before you get to the coding stage not only get performed by a less expensive resource, they take half the amount of time they would if you were performing them in code.

No business wants to pay their most expensive team member to perform a job that will take them twice as long as someone less expensive, so for that reason do everything you can to write the code for the site last.  You’ll dramatically reduce the number or revisions you need, the time it takes the developer to build your site, and ultimately the cost for the project.

Does your company have any horror stories from designing its site?  Let us know what your key lessons learned were and if this process would have helped in the comments!