Let’s talk about Software Prototyping!

The Power of Prototyping


Written by: Kristin Goedert; Prototype screens: Kristin Goedert

What is prototyping?

Software prototyping is the activity of building an incomplete version of software for the purposes of testing or demonstration. When you build a prototype, you just build the minimum necessary features to show or test what you want to, and then use the information that you gain from doing that to build your software out further.

For example, if I were building an app and trying to decide if I should use a very fancy font or a more basic font on my home screen, I can build a prototype of the screen with each font and ask my friends which they think is best.


screen shots.jpg

This can save a lot of time- imagine if I didn’t prototype it and I built the whole app with my very fancy font, and it turned out that no one wanted to use it because it was too hard to read?

Prototyping is also a great tool to use at a hackathon, where the goal isn’t to build a completely finished application, but rather to build a demo of an application for you to present. Prototyping software allows you to quickly and easily build your demo.

How does prototyping software work? Is it hard to use?
Building a prototype of an app isn’t hard. It adds a few extra steps to the building of your app, but the added time is worth it because it can make your final app much better. Here are the basic steps:

  1. Once you know what you want your software to do, plan out your app by drawing each screen that you will need on paper.
  2. Build your screens- one for each screen in your plan. You can build them using graphics software, or you can just take pictures of the screens that you drew in your plan (easy!). If you take pictures of the screens that you drew, you will need to move them to your computer.
  3. Import your screens into prototyping software. We like Marvel prototyping software- it is free and easy to use, and you can import your screens from your computer by dragging and dropping.
  4. Add hotspots, also known as clickable links. Do you have a button on your screen that makes your prototype move to the next screen when it is clicked? That is where your hotspot should be. Go through all of your screens and add the hotspots you need on each one.
  5. Add transitions. Transitions affect how the screens in a prototype change, and you can add one transition for each screen in your prototype. Do you want your old screen to slide to the left and uncover the new one? Maybe you prefer for your new screen to pop up from the bottom and cover the old one. There are lots to choose from!
  6. Share your prototype with your friends and get them to test it for you!

Where can you get prototyping software?
We used Marvel software, which can be downloaded at www.marvelapp.com.marvel_logoTo see Marvel software in action, watch this:       video_link

For more on the importance of prototyping, read more in this article, “Why Designers Should Never Go to a Meeting Without a Prototype” in Slate.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s