Responsive Prototyping for Non-UXers

For those of us who work in interactive, effectively communicating the ideas that are trapped in your head can be difficult. Combine that with the complexity of mobile devices, and you have yourself a challenging task. Many project teams rely on their UX team to handle this, but surfacing your own ideas in a format other team members readily understand can also be the an effective way to communicate.

In previous articles, we have discussed ways an interactive prototype can effectively demonstrate an idea and how to use a prototype in a responsive workflow.

In this article, we’ll provide techniques and resources to help you to create your own responsive prototypes using applications and tools that are easy-to-use.


Why do we create prototypes?

Make it real and make it quick. That’s the idea. Get your ideas into a format that demonstrates and proves a concept, quickly. Prototypes are not the end state, they are a work in progress, and evolution that helps to prove that your idea will work. Or, that it won’t. There are some common misconceptions about building a prototype. The biggest one being that it will take too much time.

“I have wireframes, I have sketches. We need to get it built fast, let’s just design and build it!”

In an ideal world, yes that would be fantastic. Unfortunately it is very difficult to interact with a static sketch or wireframe in the same way that the end user will once the site or application is built. It is also challenging to fully understand what the interface will look like on various screen types and sizes (smartphones vs. desktops). While wireframes and sketches are the perfect base to start the concepting process, they can’t communicate all of the intricacies and usability pitfalls that will help the other members of your team understand your idea and how it will work.

“I don’t need a responsive prototype, the developers will figure it out.”

False. You should always think in a responsive mindset when working on a website project. There is no excuse not to anymore. Not doing so will cost more after launch and will take more time to figure out once the website or application is already built. New devices and new viewports will continue to appear in the market for consumers, understanding how your content and UI elements will adapt to these changes is paramount to a successful project. Building a responsive prototype once you find a tool you are comfortable with is not difficult and in the long run will save you a lot of time and money. It is also a great way to collaborate with other members of your team to find an approach that meets both user and business objectives.

We find that prototyping helps solve problems when:

  • It’s cost-prohibitive to implement UX work into the production environment without understanding if it will work for the end user.
  • You want to explore ways to solve a user interface challenge without a UX resource.
  • You want to reveal potential pitfalls with a suggested user interface approach.
  • You need to prove that your ideas will work given the technical requirements and impact on the back-end.
  • You want to take the design through usability testing.
  • You want to iteratively test and refine concepts before committing the idea to an unforgiving production cycle.

How robust does my prototype need to be?

You don’t need to build something complex to make it useful. In reality, prototyping simple interactions can have enormous impact on a project. At Crux Collaborative, we work on solving large-scale UX problems with complex processes that can have big UX implications if implemented incorrectly. Our team collaborates with our clients to iterate through a process and evolve a prototype to meet the objectives of the users. We believe in applying that same collaborative spirit to simple interactions as well. How a mobile menu should behave, or how a tooltip should work on a given viewport may seem easy, but can create usability challenges if they are only explored with a static design (sketch or wireframe).

Simple interactions can be a great place to start when it comes to responsive prototyping. There are no rules to how much of a website you should try to prototype. An effective prototype is one that proves the concept works, or reveals a challenge before development begins. The number of pages is not a deciding success factor, sometimes we learn more from a one-page prototype than we do if we built 30+ pages.


Responsive Prototyping Tools You Can Use

The important thing to know is there is no “ultimate” tool. The best tool is the one you’re most comfortable with. From paper and scissors to dedicated application suites, you have many options to create your prototype. It’s important to note that you don’t need to invest in expensive applications to create effective prototypes.

Here are some tools that can get you started:

Web-Based Tools

You can create, maintain and share your responsive prototypes in the cloud using these sites:

  • Solidify – Easily turn sketches or wireframes into clickable prototypes.
  • Invision – A powerful web-based collaborative prototyping suite.
  • UX Pin – Allows manipulation of common UX elements, layouts, and basic interactivity.
  • Proto – A simple drag and drop interface and drawing tools to create shareable responsive prototypes.

Mobile and Desktop Applications

Dedicated prototyping applications are typically more feature-rich than the web-based tools. With that added functionality comes added complexity and increased learning curve. In addition, you will need to find a place to host your prototype.

  • Prototyping on Paper – A fantastically simple-to-use app that allows you to take pictures of your sketches on paper and make them interactive. One of the quickest ways you can create a prototype.
  • Axure – The most popular professional prototyping tool to date. Expensive, powerful, the desktop standard.
  • PowerPoint – No, please don’t. It’s easy to use but lacks any notion of responsive support. Same goes for Word. This will only cause developer sadness.

Analog Tools

Sometimes it’s easier to just sketch out your idea with pen and paper. Through this technique, creating paper prototypes is possibly the most low-tech yet useful way to communicate ideas. To make this easier, printable device templates will give you a framework to start from. Here are a few we like:

  • Interface Sketch – a comprehensive library of printable viewports covering the gamut of current devices. If you have very specific device requirements, or you need to prototype your way out of a specific viewport problem, this is where to start.
  • UI Stencils – a collection of UI elements in stencil form, great for making your sketches more realistic.

Have questions about prototyping?

We have been making interactive prototypes for over a decade here at Crux Collaborative. Don’t hesitate to reach out with questions. We would love to learn more about your ideas and your project.

Related Insights