How do you do a wireframe?

There are a few types of web design wireframe tools, each has benefits depending on what you need the wireframe to do. The term “wireframe” applies in a few different situations.

There’s the tried-and-true (and one of my personal favorite) methods: index cards. Each index card is an HTML (or PHP, etc) page. You can use thumb tacks to position them in whatever form you prefer, and use string to show the connections between pages (wrap the string around the thumb tack), if you need these things visible. I like this method because I can jot down information that I have versus will need to get for each page I work on.

There are also flowcharts, which are great for creating a simple, relatively data-free model of the website. In my experience flowcharts are better when used for figuring out navigation or hierarchy of pages rather than actual page content.

Sometimes I like to do a wireframe in Photoshop. These wireframes tend to focus more on the design, or the layout of the elements in an average page, rather than figuring out the navigation or hierarchy or the actual page content. For this I simply use the tools Photoshop offers (layers when needed, rectangular box tool, simple text). When I am focusing on the layout of the elements, I do not add color or fonts, as this can distract from the focus on the layout.

There are also some web tools. This one was the first one that came up when I googled for “website wireframe tool”. I cannot vouch for it, but maybe it has something to offer you.