Learn about Moqups, a browser-based prototyping tool for UX that can be used for both low-fidelity and high-fidelity prototyping. In this tutorial, Diane Cronenwett demonstrates how to use Moqups for creating the UX for low-fidelity clickable prototypes.
- [Instructor] One of the tools that's great…for prototyping is a tool called Moqups.…Moqups is browser-based, so you don't have…to use a tool to create the design.…You can quickly create your prototype…directly in the tool.…The default style of mock up lends itself…to a low-fidelity visual appearance,…which helps reinforce that you're creating quick ideas.…Before we begin, here's an example…of a low-fidelity prototype that I created using Moqups,…and some of the minimal interactions that we can add…by using this tool.…
I can click on an item, and link this to another page,…and I can also click on a link on the top…part of the page, and it jumps down…to that section of the page.…Let's go back to Moqups and build out this prototype.…When you first open Moqups, you'll notice that the panel…on the left has stencils of common UI elements…to help you start off with creating a layout.…In addition to the common controls,…there are shapes, navigation items,…as well as iOS, material design, and bootstrap components.…
Let's walk through building a low-fidelity…
Explore the benefits, techniques, and tools of prototyping in this introductory course with designer Diane Cronenwett. Diane covers the basics of building effective prototypes with the right "fidelity," and getting more valuable feedback from your design testing. Learn how to build simple, satisfying prototypes on paper, and use digital prototyping tools like Moqups, InVision, and Axure to add interactivity and animation.
- What is a prototype?
- How prototyping helps user experience
- Defining prototype goals
- Sketching ideas
- Creating paper prototypes
- Building low-fidelity and high-fidelity prototypes
- Creating HTML prototypes
- Testing and evaluating prototypes
- Choosing the right prototyping tool