Wire Framing Your Minimal Viable Product

Wire-frames are useful in the preparation of mock-ups and are also helpful in the process of developing your Minimum Viable Product. Wireframes are the output of choice for interaction designers and product managers, because it allows them to easily and quickly draw a page schematic or screen blueprint that represents the skeletal framework of the application or any part of it. Wireframes enable developers to envision not only how the product works but also gives them the opportunity to explain any perceived user flows at the design stage.

Wires are useful tools that help you take your idea and express it in a way that designers and developers can interpret. In order to develop an idea into an invention, you need to have the right equipment to communicate with

Why are Wireframes Needed?

Wireframes can be combined together to create a basic mockup of the Minimum Viable Product or can be used for just a part. In the initial stages of development, wireframes are an excellent way to communicate the requirements of the product to your visual designers and software developers

As slides. wireframes define what is seen on the screen, both sequentially and in the correct layout and format. Since a visual layout format is a much more powerful tool and easier to understand than describing what is required only through words, wireframes are a way for developers to visually follow your specific order.

The “wires” of the schematic diagrams are used to trace out of each step of the user experience so that you can begin testing with real users even before the product exists. Essentially, wireframes are the best way to gather feedback because they provide a way for both developers and users to communicate their ideas.

User Testing with Wires

Using wireframes allows you to gather initial feedback and user requirements from your audience and is an ideal and cost effective way to start building your Minimum Viable Product. Envisioning your invention first as wireframes enables you to your target users much easier, especially when they see a sketch of the proposed application and can follow along by using it as a visual guided tour of your offering during which you can explain in more detail a walk-through of the experience. This inevitably provides you with use cases to study and user feedback to collect. Another good initial step forward in the process of building and envisioning your offering, for example, would be to create a short movie or animated presentation of your collection of wires as a way of showing it to your users.

Wireframing Tools

There are many tools in the market that can help you prepare your wires. Some are used online and can help you collaborate your wires easily with others.

Some of the more popular examples of wireframe tools are:

Balsamiq– is a relatively new product that helps interaction designers and product managers sketch out their ideas easily, so that they can then quickly collaborate and iterate over them. Balsamiq has both an online and offline version and is known to be a very quick and easy to use tool for rapid generation of wireframes

Examples of Mobile app wires made with Balsamiq

Examples of Mobile app wires made with Balsamiq

Visio – a more mature product by Microsoft which is a 2D-object drawing application and is part of the Microsoft Office suite. In my opinion, preparing wireframes with Visio is a more complicated than using Balsamiq but it essentially accomplished the same task. The benefit of using Visio is in your ability to prepare much more detailed and exact drawings of the product screens, but this is offset by increased amounts of time and labor in preparing the wires.

An example of a detailed screen wire presentation prepared in Visio.

An example of a detailed screen wire presentation prepared in Visio.

Some people can sometimes use tools like Microsoft PowerPoint, Adobe Photoshop and even Microsoft Word to draw their initial wires. While these applications can be helpful in drawing your basic wires, the amount of effort to create a wireframe is much higher and the ability to go into greater detail is lower, compared to using a dedicated tool like Balsamiq or Visio.

An example of an iPhone app as prepared in Visio

An example of an iPhone app as prepared in Visio

 

Putting The Details Into Wireframes

Wireframes can get very detailed. With them, it is possible to create very accurate representations of screen layouts that contain all the needed elements within. Wireframes can be used to represent different use cases and conditionals, which show different screen layouts and content. Is some cases wireframes are also used by content writers to directly edit the screen information, scripted messages, button labeling and navigational directions.

 

Communicating With Wire Frames

As a medium for communication, wireframes give you something tangible to talk about with your visual designer and developers, allowing for opinions to come together and for your team to problem solve with broader and more articulate explanations.

Visual Designers need wires in order to understand what level of freedom they have in making changes to the screen layout, because this information is already presented in the wireframes, he is better able to express his creativity when he knows what guidelines to follow on proportions of icon size, images, and buttons.

Wireframes are an important tool for communicating with your visual designer because it keeps everyone in your team on the same page. Wires allow your team to communicate confidently about each professional’s understanding of how the finished product should look and perform. It allows you to not only see the behavior of each element, but also allows you to imagine which steps are missing and what screens are next to be designed.

In an age where responsive design is an essential component to the design of all successful inventions, it is not enough just to prepare one layout of your screen. Nowadays one needs to take into consideration several different layouts and screen resolutions that accommodate the plethora of devices out there. This makes sure that everyone is on the same page when it comes to converting your design elements and in designing to support different screen resolutions.

However, giving wireframes to the developers as the requirement documents is not enough. Developers need to get together and talk about the wireframes, because for each of them the wires are a technical document that explains their role in developing the functionality and behavior of elements, and because the behavior of each element determines what exactly needs to be developed, it is crucial that regular meetings occur. Sometimes the specific requirements provided by the wires are communicated altogether on the same page, other times they are separated off in dedicated documents that structure and outline everything you need to communicate to your team.

Summary

Using wireframes tools to develop your Minimum Viable Product is a great way to iterate the development cycle faster, to focus on finding your target audience, to communicate with team members, and get feedback from users. Wires help your project to stay focused, to stay on track and on budget. Wireframes are so helpful that they should not only be used to initially draw the Minimum Viable Product, they should be used as a main tool to continuously show versions and make changes or additions to your minimal viable product. They are a great way to communicate with developers, users and visual designers.

  Contact JumpStartCTO if you need help with your venture

    About David Rashty

    David Rashty, an entrepreneur and one of the early web pioneers, has over twenty years’ experience as a CTO and a CEO. He has been involved in several start-ups and established companies and was the founder of two successful ventures.David is currently using his proven leadership and management skills to act as a Part Time CTO or "JumpStart" CTO for several early-stage ventures; this includes helping them design and develop their product and IT infrastructure.David holds a BS in computer science and an M.Sc in educational technology. He has been a adjunct university professor, given numerous workshops, written several books and articles on information technology and received numerous innovation awards.

    Post Navigation