Do you know when to create mockups and prototypes?

Last updated by Gordon Beeming [SSW] 6 months ago.See history

Note: Some people might use the term storyboarding when they are actually talking about mockups or prototypes. For information on storyboarding, check The Storyboarding Rule

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.

handdrawnui
Figure: Good Example - A hand-drawn mockup. Nice and quick for early concept design

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).

figma wireframe app screenshot
Figure: Good example – Example of wireframes (created in Figma)

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.

Warning: Don't go down the track of giving a customer a few concepts (on some projects we gave 2 or 3 completely different concepts by different designers). This leads to too much mixing and matching when they see them.

high fedelity ui
Figure: Good example – High fidelity mockup for SSW Rewards App - recommended as quick to update when changes are requested

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.

Incorporate branding: It's important to incorporate the brand's visual identity into the design of a product! This should include the brand's given color scheme, typography, and logo at a minimum.

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

Here are some more hot tips on using mockups for specification analysis:

  • It is best to have a designer, developer, and customer work together
  • Mock-ups should follow interface rules
  • Get the mockups physically initialed, especially if you are performing a fixed-price contract. Yes, paperless is great - but not in this case
  • If you can't get mockups initialed, then page by page approval over email is the 2nd best option
  • Write the related business rules at the bottom of each screen - to be turned into unit tests
We open source. Powered by GitHub