Effective and Efficient Web Design: A Planning Guide

When starting a new website project I often come into a situation where no planning has been undertaken. Instead, the client hands me a logo (maybe) and then asks me to start building their website. They believe that design should be the first priority, assuming content can be added in later, and if search engine optimization (SEO) is necessary, they incorporate it as a last step.

If planned properly, web design should not be an evolutionary process. By clearing laying out priorities and critical functionalities early in the process, you can avoid the cost of having to undo and/ or redo major design elements later on.

When you strategically map everything out at the beginning of the building stage, then it becomes easier to be more efficient when in the development and content creation stages.

I would suggest that when starting any new website project that you follow these steps:

  1. Planning and Brainstorming
  2. Set a Timeline
  3. SEO Research
  4. Create a Sitemap
  5. Content Development
  6. Wireframes
  7. Graphic Design
  8. Web Site Development
  9. Testing and QA
  10. Maintenance

1. Planning and Brainstorming

Figure out exactly what you need this website to do. These are a few questions you may want to address in this stage.

  • Will it be a brochure website advertising who you are?
  • Does it need an e-Commerce component to sell products and services ?
  • Are there any security requirement necessary ? If so, what kind ?
  • Will you require user interaction with a WordPress blog or a message board?
  • Who is your target audience and how will they use the website?
  • What kind of content management system(s) is needed (Custom code, WordPress, Magento, SMF, PhpBB, Joomla, Drupal, etc.)? Maybe multiple systems are needed or none at all.
  • Is social media integration required ?
  • What would a successful website look like to you ? What are the key performance indicators (sales, visits, shares, ranking, etc.)  you would use to determine its success ?

↑ Top

2. Set a Timeline

A defined timeline helps everyone on the team know what they have to do and when they have to do it. It is an effective way of ensuring priorities stay on track and that the website gets launched on time.
↑ Top

3. SEO Research

How has your competition positioned itself online ? What are your potential users actually searching for ? This information is valuable when developing your content and the sitemap so your SEO research and keywords can be integrated from the ground up. You thereby avoid having to change anything at the end of the process and in so doing, keep cost down.
↑ Top

4. Create a Sitemap

Decide on what you want to say and where you want to say it. Preplanning allows you to lead your web site users down a path toward the content they are searching for. Make content easy to access in a way that is intuitive and rational.
↑ Top

5. Content  Development

Get the writers involved at this stage.  Begin planning content specific resources such as images, videos, white papers, offers, and social media integration. Decide on what “Calls to Action” are needed and have them developed so they can be efficiently incorporated into a responsive website narrative.
↑ Top

6. Wireframes

Now that you know what you are going to say and who you are saying it to, create some basic sketches of what the website will look like and where the different layers of content will be incorporated. Design isn’t added at this stage. This is just a layout, one that makes it much easier for the designers to start incorporating the visual elements of your website.
↑ Top

7. Graphic Design

This is the fun part ! You now hand the content, sitemap and wire frames over to the graphic designers and they come up with a beautiful web design which pulls all these critical elements together into a cohesive, visually engaging, user friendly theme.
↑ Top

8. Web Site Development

Here the designer hands over his files to a developer who starts to code the design into the basic platform(s), whether that platform is custom coded, WordPress, Magento, Simple Machine Forums, Joomla or one the many 1000s of other platforms available. Content and resources are also integrated at this stage.
↑ Top

9. Testing and QA

Now you ensure the web site functions and flows well. How do you do that ? Simple, you try your best to break it. It is also very important to get different types of users to try the site out. Someone who is not a web designer or website owner will use a website in a different manner than those who developed it. This will help to uncover any bugs or user experiences that are not efficient.
↑ Top

10. Maintenance

The website is now live and functional. Now it becomes critical to keep it up to date and integrate more SEO by monitoring how people find and use the web site.
↑ Top

Of course, based on the complexity and size of your website, these steps can be expanded to contain multiple sub-steps. This is a good start for those of you interested in the web design process and I would be happy to hear any feedback or comments.