Wireframe Prototypes

Wireframe Prototypes

Prototypes are important for UI/UX development and to elicit user feedback and develop user-centric designs. A Wireframe prototype is a digital mockup of your design, developed prior to creating the final design, in order to gather user feedback. Prototyping provides the opportunity for design flexibility and iteration, in order to respond to user needs.

A useful tool for developing digital prototypes is the Balsamiq software, which is a web tool that lets a designer create a mockup by simply dragging and dropping common interface elements into a layout. Additionally, it lets you provide as much detail as is necessary for your users to visualize your design prototype.

Digital prototypes and mockups have been implemented in a variety of disciplines including environmental education, emergency response, and others.

For example, the geospatial prototype design below outlines an environmental education app, which provides an excerpt of information that will be available in the final design. Notice the prototype shows each of the included and extended pages that the user will potentially be exposed to when interacting with the design.

First, the design begins with the user interview (which you developed and designed in module 2), and then includes the user registration page (figure a), the user login page (figure b), the list of environmental topics (figure c), and the extended environmental page (figure d). Notice that the design incorporates UI/UX features into the prototype to make it aesthetically appealing for the user.

Figure 1: An environmental education design prototype that shows an effective prototype design for gathering user feedback. Screen capture acquired by Brandi Gaertner.

Source: Andrade-Arenas et al 2024 Figure 3 “Mobile APP (a) environmental topics and (b) definition of environment."

References: