Paper & pencil back to basics for wireframing

Hi. Here I will be covering why I chose to go back to basics for wireframing.



There are many wireframe tools out there to choose from and with technology at our fingertips it was easy to chose a couple of them and put my ideas down.

Well, I was wrong. This just relates to the way that I think, work, and develop my own work. Each person is different in how they approach problems and what tools to use but I will discuss what I do.

Tplaceholder (1)HINK


Think about your goal. Yes as simple as it sounds I first think of the idea and goal that I am trying to achieve. There is a main goal that is desired when a problem is present. This must be kept in mind at all times through the developing process.

It can be very easy to get distracted with fonts, colors, logos so keeping in mind what your goal is is key. Something that I use to keep it in mind is to write it on a sticky note (post-it).  I only use this while I am working on the project so I stay focused, then when I am done working on that project; I put it away.


placeholder (1) SKETCH

So I use scratch paper and quickly draw out some thumbnails of what I want the wireframe to look like. This is old school graphic design 101, but I still use this to put down the ideas. The hands are much faster at sketching things than getting the mouse and drag-n-drop icons to get what I want.



After I have gotten the thumbnails down I go through and pick out a couple that I like. From these I look at the common elements which are on track with the goal of the wireframe. This whole process is sometimes done in a day, couple of hours or throughout the week. It really depends on what I am working on. Once I have a better idea of what I am wanting to do I create what I call rough draft.

This can be done in paper, pencil or using a wireframe tool. Below I did both.  Having the idea drawn out allows me to focus on other aspects of the page as I am creating the wireframe. This way, I feel I waste less time clicking, deleting elements of the page.

The elements are changed once they are on the computer, but I feel they are more of the details than the main idea.

This is a sketch of a landing page.













Wireframe completed. Tool used for these was Pidoco

landing-page-101 landing-page-100


There are many ways of creating wireframes, but these are my few tips and steps to get started in the development process. Don’t be shy to use paper and pencil once in a while to sketch out your ideas.

Hasta Luego.