Do you know when to create mockups and prototypes?

Mockups and prototypes are both design artifacts used in the software development process, but they serve different purposes and have different levels of fidelity. Many user requirements can be best encapsulated in visual mockups/prototypes.

A design mockup is typically created early in the design process to provide a rough visual overview of the user interface. They are static and do not include interactive elements or functionalities.

Mockups can become interactive and functional representation, also know as design prototype over time. They are more advanced and closer to the final product, allowing for user testing, feedback, and iteration.

There are 3 types of mockup or prototype, use depends on the specific goals and the stage of the project:

1. Low-fidelity Mockups (aka Wireframes)
2. High-fidelity Mockups
3. Interactive Prototypes

Often it's best to start with a low-fidelity mockup to get across a concept or rough storyboard. Then complete a high-fidelity mockup to communicate the look and feel, and if time permits create an interactive prototype.

Low-fidelity Mockups

Creating a low-fidelity design mockup can be achieved through various methods including wireframes, paper prototypes, and other similar techniques. It can be valuable to have the Product Owner on call when creating a low-fidelity mockup to get immediate feedback and direction.

Start by identifying the key features and functionality that the product should have. This will help you focus your efforts and ensure that your mockup accurately represents your intended product.

Then create a basic wireframe of your design. A wireframe is a visual representation of the layout and structure of your website or app. You can create digital wireframes using tools like Figma, Adobe XD, or Sketch. Alternatively, you can use paper and pencil to sketch out a rough wireframe by hand. Add details to your wireframe by adding boxes and labels for different features and elements (e.g. buttons, input fields, and images).

Once your low-fidelity design mockup has been approved, you can use it as a reference point for creating a high-fidelity mockup.

High-fidelity Mockups

A high-fidelity mockup is a more detailed version of a design that includes visual design elements such as typography, colors, and images. It is created using specialized design tools and takes more time to create than a low-fidelity mockup.

Use a design tool such as Figma to create high-fidelity mockups of a website or app's interface. This should include more consideration of UX and detailed UI elements such as buttons, forms, icons, and typography.

Interactive Prototypes

To make a mockup more realistic and accurate to the end product, add interactivity to it. This includes consideration of how different elements will respond to user input, such as on-hover effects or the styling of visited links.

What are the best tools?

• Figma (Recommended)
• Sketch (Mac Only and for UX designers)
• Moqups (HTML5 based App)
• Balsamiq
• UXPin (more sophisticated, helps you create responsive designs)

Tips