Learning to Wire Frame

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!

 

 

The_Idiot

About Lindsay

Self made millionaire.. Oops I mean web developer.. who started out learning how to build websites with tables and dreamweaver, I now almost entirely focus on CMS-based development, usually WordPress. I love coding and designing and regularly switch between my left and right brains.

2 thoughts on “Learning to Wire Frame

  1. I delіght in, lead to I dіscovered just what I ᴡas taking a
    look for. You Һave еnded my 4 day long hunt! God Bless ʏou man.
    Haave a ցrea day. Вуe

  2. I savour, cause I discovered exactly what I was having
    a look for. You’ve ended my 4 day lengthy hunt! God Bless you man. Have a great day.
    Bye

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">