Wireframe Your Website to Build the Best Design

As a professional web designer I often receive phone calls from clients that describe in great detail what he or she wants on the website. In the beginning of my web design career I simply created a few image designs for them to choose from. Once they had selected a design I would build out the site only to have them change the layout or the structure several times before they were happy with it. This would constantly expand the time allocated for the website.


Creating a wireframe reduces the time of the client trying to implement his ideas for the design. A wireframe is a sketched version of your website before the colors, font and actual building is performed. This helps you and the client to focus on the basic appearance of the website and how all the different components will work together ie logo, navigation, images, etc. You’ll end up with a clear layout so you won’t have to go back later to correct things.

Process for creating a wireframe for your website

  • Make a screenshot of a website that has a similar structure to the one you wish to create.
  • Open the screenshot in your favorite graphics software (e.g. Fireworks, Photoshop, Illustrator).
  • Create another layer the same size as your screenshot and place it on top.
  • Reduce the opacity of this layer so you can see the screenshot through it (transparent).
  • Use the line tool or rectangle tool (Fireworks) to create labeled boxes on top of the screenshot.
  • Remove the original screenshot. You should now just see the wireframe image.
  • Save the wireframe image to your desktop.

Wireframing your website before actually building it will ensure you create the best design.

For Professional Web Design and SEO services visit:
Web Design, SEO, Hosting