UI Design Process: How Do You Prototype?

Whether it is with an internal team or client, having the tools to effectively present an idea and show the process to delivery is integral in gaining stakeholder approval and ultimately, the best end product.

The path of designing an interface is no different that any other creative process. Designers require a toolbox to aid in the communication and visual aspects of the project, and prototyping is the main driver for helping this process along. Determining what method to adopt for a specific ui design project will depend on the content, team cognition, budget & time constraints as well as the preference of the design and development teams.


Sketching, albeit low-fi, is perhaps the most innovative route when developing an interface. Sitting down to pen and paper leaves the possibilities open to all possibilities and no constraints. It allows the designer to explore the problem and come up with a solution through experimentation. Without the ‘walls’ of template suggestions and framework of what has ‘worked’ before, a design has the opportunity to become something completely new, uncovering solutions that may have not seen the light of day.


Whiteboarding pathways is the ideal collaborative tool in UI design. The goal of collaboration is to deliver a better product than you would have on your own. A team that is able to work together to generate ideas, discuss user research and sketch out the appropriate design will lead to an interface that truly works for the business it will represent.


Technically speaking, Wireframing has long been an important step in any screen design process. The action of planning and laying out how the user will process information will allow a greater definition of information hierarchy and result in a clearly optimized solution right from the start. Admittedly, wireframing is a low tech process but are quick, cheap and easy to produce. Content, again, is the driver in this case. Wireframing acts as a blueprint for the site before it becomes the colorful, type and image driven beauty that it will transform into. As with architecture, it’s important to ensure the stability of a structure before breaking ground. Many times, through this process, weak content and information will become highly visible resulting in tweaks which are more easily accommodated at this stage. Wireframing, although not as aesthetically pleasing as its flashy counterpart, is hugely beneficial to the structure of the site as the designers and stakeholders can focus on the function,user pathways, information architecture, UX and usability aspects of a project. Acting as a middle ground, a designer can use an interactive wireframe method for greater engagement and coherence in the design process

Rapid Interactive

Because rapid prototypes are a good representation of an end product, they can be an amazing tool when presenting an idea to a client or team for development and feedback. By simulating a true interaction between the interface and user, the use of a prototype proves incredibly inspiring (if the design is good) and useful in pushing  a project along. The process of prototyping provides a realistic user environment, the ability to test is a huge asset. The cost of rapid and interactive prototyping is more at the outset than wire framing, however, early testing and optimization can save a great deal in ensuring the right path is taken.

Versions Collective

The VERSIONS™ collective is a firm-wide collaborative design project. Our team designed compiling thoughts, perspective and ideas on the current creative and digital landscape. We are visual storytellers & believers of the power of design in both print and digital.

More Posts - Website


Leave a Comment