In my last blog post, I outlined my “6 Phases of Web Design and Development”. I would like to extend ‘the Plan’ step by going more into wire framing. If you missed the post, wire framing is a process to create a site’s architecture, functionality, and content before creating a final, submittable mock-up.

There are many different ways people wire frame but all in all, it is a basic and easy way to plan a website’s layout and page structure. There’s no need to focus on actual content or a color scheme. The primary goal of wire framing is to get a general idea of the layout of the elements needed on each webpage of the site that satisfies all of the client goals. Here are a few examples:

• Pen (or pencil) and Paper:

Fast and easy.

• Cut and Paste:

Literally, laying out all the components pieces, all cut up and pasting them into place. It is a very hands on method, easy to change and move content around.

• Software (such as Illustrator)

More in-depth, I first wire-frame using pencil and paper then move the layout onto Illustrator to get a more visual idea of everything.

Wire framing can be very simple as well. Again the goal of wire framing is to layout the elements needed a webpage. Here’s a very basic example:

Side note: If you need content to better visualize the layout, you can use placeholder text like lorem ipsum. Here’s a link to a generator: http://www.lipsum.com/feed/html

Let me know your techniques when it comes to wire framing!