Product Design 101: Wireframing for Technology

Wireframing is a mock-up or layout of digital interfaces that will exist on a site, including content and functionality aligned to user needs. It is like a blueprint for design. It helps conceptualize the application before building the product. It’s a visual guide to the framework of your product.

Especially at a startup, wireframing gets the team on the same page, considering the contents, structure, hierarchy and functionality that will affect user behavior with the product. Everyone who is involved in the development of a product uses and benefits from wireframes, ranging from engineers and UX designers to executives, partners, graphic designers and information architects.

Blue Pen Beside Black Smartphone on White Paper

Principles of Wireframing

The following are commonly accepted principles of wireframing:

  • Understand who will use the product and what need the product is meeting
  • Set expectations, not only goals
  • Everything in the wireframe needs to have a meaning
  • Use a consistent approach, such as the same design language
  • Start small, evolve it rapidly and iterate it widely
  • There is a trade-off for every decision made in the wireframe

Presenting your content in the wireframe in a way that seems “familiar” to users should be a main concern of yours at this point. Before you ever build the actual product, the wireframe shows how users will be able to do what they want to do faster, better, easier, etc. The wireframe saves you time and money because you will be able to figure out things and think through things before you build the product and test it.

Two Person Drawing Shapes on Printer Paper

As you are doing the wireframing, you should also set expectations about the design process and what is involved. One of the best practices is to emphasize SMART goals. The term “SMART” is an acronym that stands for:

  • Specific
  • Measurable 
  • Achievable
  • Realistic
  • Timely

This SMART approach to product development will help you break down the heady challenge of building a product into doable pieces. You will be able to reduce the vagueness and veer away from unachievable goals. Your wireframe will be realistic, which means it will not promise to do everything for everyone. Less is more. Lastly, you are time-bound, so the process does not drag on forever.

Stay simple, stay simple, stay simple!  Remember that everything has a meaning, and it should be focused on solving the user’s problem and giving them a great experience.