UI Design Process: How Do You Prototype?

September 15, 2015In Interface4 Minutes

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

The path of designing an interface is no different than 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 with no constraints. It allows the designer to explore the problem and devise a solution through experimentation. Without the ‘walls’ of template suggestions and framework of what has ‘worked’ before, a design can become something completely new, uncovering solutions that may not have seen the light of day.


Whiteboarding pathways are the ideal collaborative tool in UI design. The goal of the collaboration is to deliver a better product than you would have on your own. A team that can work together to generate ideas, discusses 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 an optimized solution right from the start. Admittedly, wireframing is a low-tech process but is 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 it will transform into. As with architecture, it’s important to ensure the stability of a structure before breaking ground. Through this process, weak content and information will often become highly visible, resulting in tweaks that are more easily accommodated at this stage. Wireframing, although not as aesthetically pleasing as its flashy counterpart, is hugely beneficial to the site’s structure as the designers and stakeholders can focus on the function, user pathways, information architecture, UX and usability aspects of a project. 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. A prototype proves incredibly inspiring (if the design is good) and useful in pushing a project along by simulating a true interaction between the interface and the user. The prototyping process provides a realistic user environment, and the ability to test is a huge asset. Rapid and interactive prototyping costs more at the outset than wireframing. However, early testing and optimization can save a great deal in ensuring the right path is taken.

Crafting Captivating and User-Friendly Interface Elements

With users spending countless hours on various devices, it is imperative that designers create seamless, user-friendly experiences that facilitate effortless interaction between users and technology. Let's explore the essential elements of…

UI Design elements shown on computer screen.

Understanding UI Affordances: Creating Intuitive and User-Friendly Interfaces

User Interface (UI) affordances are design elements that provide visual or interactive cues to indicate how users can interact with a particular feature or function within a user interface. By providing affordances, designers help users navigate…

A desktop is shown on the ChatGPT website, highlighting its capabilities.

The Dawn of Invisible UI: A New Frontier in User Experience Design with ChatGPT

As the digital world evolves, designers continually search for innovative ways to improve user experience. One emerging trend is the "invisible UI," a concept that aims to make the interaction between humans and technology as seamless as possible.…