Wireframes: How to Build an Online Product

Jason Nazar, co-founder and CEO of Docstoc (docstoc.com), explains the next important step in building an online product--wireframes. Wireframes are the blue print for your new product, which Jason goes into detail.

  1. Ensure your wireframes are clean, simple and easy to understand
  2. Design layouts on whatever platform works best for you

You’ve probably heard about wireframes and what are those when you’re building your online part of the website?

A wire frame is a non-graphical visual representation of a webpage. So, what really does that mean? Think of a blueprint, an architectural blueprint for a home. There is no real pictures of what anything inside the house is going to look like but it gives you the framework for how the house is going to be built, how the rooms are connected, how all the pieces fit together. And that’s what a wireframe is. It’s the building blocks of a webpage. And it shows you how the page is structured before you put any color or graphics or visual representations on those page.

So, what are the key things that you want to keep in mind? Overall, for websites, but most importantly in wireframes keep them simple and clean. What’s the best way to do this? Take a look at other websites that are similar to the product that you’re building and see how they structure their pages - how they’ve done their header, what’s their footer look like, how they structured the information on where you get the main parts of the content, how does the user interact.

And one of the best books about this topic which is a little dated but still really relevant is called Don’t Make Me Think. And it’s kind of considered the bible of user interface and user interaction which are two important variables in wireframing.

And finally, how do we actually make wireframes? You can literally draw a wireframe on a sheet of paper and I have certainly done that for a lot of times for the products that we built. But most commonly, people at a base level will use sometimes even Microsoft PowerPoint or Visual Studio which is another Microsoft product or products like Balsamiq and iPlotz which let you build more complex integrated wireframes that connect everything altogether and let you go through the webpages as if it was a live website.

So, that’s a little bit about what wireframes are, what to keep in mind and how to put them together and they’re one of the key building blocks to building your online product.