Wireframing and prototyping

Wireframing:

A wireframe is also known as blue print, it’s a visual representation of elements on a website or application. They are static and do not include any interactions or animations. They are simple, minimal but they are not clickable.

What exactly is a wireframing?

• It’s a two-dimensional drawing of the pages in the application or website.
• It is used to define and plan the information hierarchy on a page or screen.
• It’s simply a representation of items, in an organised manner of a page.
• They also help to ensure consistency throughout the user interface, as you determine how certain types of information should be displayed on every screen.

Types of wireframing:

• Low fidelity:

They include content which is most basic and static (not interactive) in nature, which are often acting as a shell of an interface with its screens and basic information architecture.

• High fidelity:

They include much more detail than low fidelity; they capture the look and feel of the product in the advanced stages of the design process.

How to create wireframe?

Once you are done with your initial research, you start getting ideas, you need to make a sketch of your roughest ideas, then you redefine your ideas and they start taking a shape, then you are ready to move on with proper wireframes. Some types of wireframes are,

• Hand drawn wireframes (basic),
• Digital wireframing can be created using software like balsamic, it allows you to track the progress of your digital wireframes and are easy to share.

To test your wireframes, you will turn them into prototypes, using special software, which essentially turns your wireframes in to cook able mock up.

Prototyping:

Prototyping is simply a working model that does not necessarily have all the features or functionality of the final desired system, it is a sample version of a final system that is used to showcase the look and feel. It is essential to resolve any design issues regarding the final product and it also projects the area that need improvements.

Qualities of prototypes:

• Representation:

It represents the actual form on the prototype that is paper and mobile, or html and desktop.

• Precision:

It depends on the fidelity of the prototype, which simply means the level of detail, polish and realism.

• Interactivity:

It allows to understand the functionality of the user interface.

• Evolution:

It is simply the lifecycle of prototype, some of them are built quickly, tested, thrown away, and some are replaced by improved version, while some others may be built and improved upon, ultimately evolving into the final product.

Digital prototyping:

Digital prototyping is a process of exploring the ideas by building interactive experience, explaining abstract ideas can be tough by creating an interactive design, so that other people can experience themselves your ideas become real. Digital prototyping is widely used form of prototyping, which are used to project the interface elements. They can be built using apps and software tools such as axure rp, prototyping is very important before the systems go live.

Wireframing and prototyping