Projects People Resources Semesters About
🖊️

Prototyping

Before writing even a single line of code (even tests!) in any user-facing application, there is a very important task that must be completed: designing the UI/UX, a.k.a. what the heck it’s actually going to look like and how it’s going to be used. UI, or user interface, is what your application will look like--the font you use, the color of your buttons, how the page is arranged, what the menu looks like, and every other aesthetic aspect of your page is part of the user interface. Similarly, UX, or user experience, is how users interact with your app--what happens when they click certain buttons and links and, more broadly, the typical steps they would take to get the most use out of your app.

Mockups

Knowing what you want your app or project to look like before you start coding will save you a lot of time.

💡

UI and UX are defined in mockups. They typically come in two main flavors: low-fidelity and high-fidelity

Low-fidelity

These are mockups that give a rough presentation of the app’s design and where people might interact with it. They lack significant detail of the minute details of the design, such as color schemes, and (if computer-based) are generally not clickable. 

Examples of low-fidelity mockups include:

  • A basic sketch of the app on the back of a napkin
  • A simple, bland static wireframe made with a computer software (which we will cover later)
  • A slightly more detailed sketch on printer paper

Although relatively low in quality, low-fidelity mockups are a vital part of the design process and come with numerous advantages including:

  • They are quick to make
  • New designs can be interacted quickly (as a result of the previous advantage)
  • Users will be more open and honesty with design feedback when they see you haven’t spent a ton of time on the low-fi mockup
  • On the other hand, some disadvantages include:
  •  Since the design is very simple, feedback isn’t as substantive as possible
  • They usually must be facilitator driven, meaning you guide the user through the flow of the ap.
  • Ideally, they should be able to navigate themselves at some point to gain a realistic experience of the app flow

They are a great starting point to get rolling with a design for your app. However, once you venture out of the early-concept phase, you will want to start moving towards making a high-fidelity mockup

High-Fidelity

high fidelity mockups are very close to the actual design, with all the same colors, shapes, and sizes of the actual final product. Using mockup software, these are often made to feel like the final app, allowing users to scroll and click buttons to see the corresponding action/screen and change take place.

High-fidelity mockups come with many advantages over low-fi ones, including

  • There are more representative of the real look and feel of the app (which allows for more useful feedback)
  • They don’t require a facilitator, since the user flow is mostly accounted for, so you can watch a user navigate the app on their own to see if they struggle at all
    • This allows you to catch usability issues not discernable in the low-fi mockups

However, the disadvantages include most of the advantages of the low-fidelity mockups, including:

  • High-fi mockups are relatively difficult and time-consuming to make
  • They are also more time-consuming to update if this needs to happen
  • Users may not be as willing to give feedback because they see a practically finished product, not one that is a work-in-progress.

So what's the best solution? Start by rapidly making low fidelity mockups and presenting them to users, gaining plenty of early stage valuable feedback. Once you feel confident that the basic structure of your app is attractive and meets users' expectations, start creating your high fidelity mockup to start gaining feedback on your more granular aspects of the app, such as colors, typography, and user experience flow.

So How Do I Make a Mockup?

As mentioned, mockups can be as simple as a rough sketch on paper, and this is where you should start. Once you feel comfortable with the basic look and feel of your app on paper and have shown it to some potential users, dive into one of these tools below to start creating your higher-fidelity mockup.

UI & UX Development Tools

Literal Paper (like from a notebook)

Best suited forLow-fidelity mockups

Learning Curve: Preschool

As mentioned, this is where your mockup journey should begin. A rough sketch of your design on paper is the perfect way to start brainstorming ideas and is easy to show others and gain immediate feedback on.

POP (Prototyping on Paper)

Best suited for: Low to mid-fidelity mockups

Learning curve: Beginner

This phone app is useful for easily making your paper prototypes come alive. It allows you to take photos of your paper mockups and link them together in the app. To do so, you can assign hotspots on areas of your mockup that should be clickable, like buttons, and tell the app to take the user to a different page upon interaction. It is rather limited in its capabilities, as it only enhances user experience, not design, but is very easy to use and can be a super quick way to make your paper prototype UX feel more tangible

Figma

Free Educational License: https://www.figma.com/education/

Best Suited For: Medium to high fidelity mockups

Learning Curve: Intermediate

Figma is an extremely popular tool used for vector graphics and mockup creation. It's simple but powerful set of tools allows new users to get started quickly but also fine-tune every aspect of their creation. A cool thing about Figma is that is works in the browser, so there's no need to install extra software. It also allows multiple users to work on the same design at once much like Google Docs, so you can collaborate with your team in real-time.

Moqups

Free Educational License: https://moqups.com/faq.html (scroll near bottom for instructions)

Best Suited for: Low to high fidelity mockups

Learning Curve: Beginner

This web-based tool can be used to easily create attractive mockups from a large set of pre-defined but customizable components. Unlike Figma, it is specially designed to be used for creating mockups, so the entire is designed around creating pages, placing components, and linking them all together. However, in exchange for speed and ease of use it may not be as configurable as vector-editing tools like Figma; for more generic designs, this shouldn’t be an issue.

Others

There are of course many other tools out there that you can use to create your mockup. Ultimately, there is no perfect tool; they all have rather similar capabilities to accomplish the same goal; creating a visual representation of your app. Find the one that’s right for you from this list, or feel free to venture forth and trying something new!

More Fantastic Resources

Want to learn more about UI/UX design? Check out some of these great (and free) resources

Learn more about UI/UX design basics: https://www.linkedin.com/learning/ux-foundations-prototyping-2

Learn more about general UI/UX principles https://livebook.manning.com/book/usability-matters/about-this-book/0