Many of you may be asking yourself why would I want to waste my time making a crappy version of an actual final design. Well friend here’s the truth, it will save you time and in turn energy (did I mention money?). The “wireframes” can be sketches that show the basic shapes and layout of the webpages. This can be as simple as a pen and paper drawing or as interactive as an online tool like hotgloo.com (e.g. long rectangular bar for navigation area) This phase allows clients to work through interface issues before programming; minimizing the amount of programming by thinking through the user interface ahead of time.
Questions a Wireframe should Answer
- What we got here? | Has all the items you want on a page (header, navigation, image gallery).
- Where we gonna put all this? | Layout of your page and it’s various elements, what goes where and how much space does it take up. What elements do your header and footer have?
- Now what does This do? | A detailed account of each element on the page (drop down menu, accordion navigation box or rendering an RSS feed from a source).
- Wireframes and the 1140 Grid Overview | PDF
- 2010 Newhouse Military complete project package | ZIP
- Wireframe Example | PDF
- Ultimate Guide to Website Wireframing | Link
- 50 Free UI and Webdesign Wireframing Kits | Link
- The Benefits of Wireframing a Design | Link
- Hotgloo.com | Link
- Web Safe area (a bit dated) | Link
- Building a data-backed Persona (user profile) | Link
- Video Dimensions Guide | Link
- What can go in the Header? Examples | Link
- What can do in the footer? Examples | Link
- I Heart Wireframes | Link