By Danella Aguayo

DEFINITION

SKETCH

noun 1. A simply or hastily executed drawing or painting, especially a preliminary one, giving the essential features without the details. 2. A rough design, plan, or draft, as of a book.

(www.dictionary.reference.com)

The

A sketch for a website is called a:

Wireframe Sketch

“A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like.” (May 29, 2011 by Paul Andrew ) In other words, the draft of a website’s layout.

BUT… WHAT ABOUT AS OF A WEBSITE?

A Wireframe Sketch helps us materialize our brain’s floating ideas, because:• It gives us more sense of proportion.• It will help us find a place for all the features we

need/want to put out there for our customers.• It will show us if we are giving too much

space/room to one feature, or too little to another.• We will be able to see the whole draft screen and

notice if elements are missing or are being left out.

WHY SHOULD WE START WITH A WIREFRAME SKETCH?

A wireframe sketch is effective when we have already taken some previous steps. At this point we need to have:• The website name.• The logo and branding.• The website domain name and web hosting provider.• The competition research.• The site’s needs and categorized content pages.• The specific deadlines and goals.

WHEN SHOULD WE START OUR WIREFRAME SKETCH?

First steps:

1. Search around and look at other websites. Analyze them and find good and bad things. Look for elements that you would like to add to your site, but at the same time, pay attention to those elements that cause distraction and those that don’t help the purpose of the site. Take notes.

2. Make a list of all the elements you will need to place on your site’s page.

HOW DO WE START A WIREFRAME SKETCH?

Here we go:

1. Grab a blank paper, big enough to hold our wireframe sketch. I love to work on Graph paper. With vertical and horizontal lines on it, it is easier to draw and plan around.

2. On your paper, draw a big rectangle trying to keep the same screen proportion.

3. Start placing the elements you listed before and find the best size and location for each one. This is a good starting point…..

… but we can do much better than that.

… and it's even better if we enter into more detail: not only about the layout, but the content, fonts, color, etc.

The more specific we are, the easier it is to create the final piece.

If it is not easy for us to use a pencil, we can use many digital resources to make our website’s wireframe sketch.

CONCLUSION

A wireframe sketch…..….. will capture your creative spark and fluidly sketch out your design.….. will help you to work with your client without committing anything to code, thus saving yourself time and a number of actual design revisions.…. will give you a relatively quick sample that you can show the client and then work off of – think of it as an outline to an essay.

REFERENCES

• http://speckyboy.com (By Paul Andrew)

•Building a Wireframe, (BYUI class material)