Wireframes make it easier to plan the layout of your website. The process of wireframing should be carried out when most or all the text and images are available. You need to see where that information is going. Wireframes are usually just black and white sketches showing the layout of the website. When you look at a WordPress theme or design your own website, you should, in your mind’s eye, convert the layout and images to wireframe objects.
Designers generally create static wireframes, starting from a sketch and progressing to Photoshop. A nice article describing the wireframing process can be found at tuts+. To help in this process, grids for sketching are available, can be printed and are found to be very useful.
An alternative to static wireframing is the generation of a wireframe in HTML and CSS so that interactions such as mouse-over on links, drop-down menus and buttons can be explored.
Dynamic wireframes have the advantage that active elements such as drop-down menus or hover effects on buttons or links can be demonstrated, galleries and images can be placed in position and text can be added. This provides a better user experience for how the website will perform and goes a long way to actually pre-writing the skeleton of the code to produce the website.
A basic dynamic wireframe could look like this:
This could contain a header image.
This would be an introduction.
This might be a section containing articles with images.
Content 1
Content 2
Content 3
This might be a call to action.
Wireframes done properly can allow an evaluation of the design, the layout and the interactions on the page without the distraction of colours, fonts and content.