Here at HZ we are always trying to refine how we make the best digital products. As the web has changed to its current responsive, animated, and touchable format, we have had to adapt our process. There have been tons of words written on why prototyping is crucial to the interactive process. Its benefits range from efficiently creating the best user flows to showing clients high-fidelity animations before they sign off on a product. In this post I will focus on the best tools for designing a fully responsive and interactive prototype for client presentations.
Client presentations often present a dual problem. Most people are visual and cannot imagine how a page will flow or animate. We want to show off our beautiful interactions, but also need to limit ourselves from creating a full-fidelity site before the client signs off. Making a prototype for the client allows them to get a real sense of how a site will work.
There are a ton of possible tools out there, from basic sketching templates to creating a skeleton of a site through a CSS library such as Bootstrap. This review will focus on the tools that are currently the most established in the industry and some new ones. A challenge we run into with many prototyping tools is that they are often made only for mobile devices or are not high-fidelity enough for our clients. To avoid these issues, we wrote up a wish list, which includes:
- Responsive and/or multi-device
- Rapid screensharing between devices
- Displays complex animations
- Easy to share with our clients
- Easy to learn and can be used by both the novice and advanced coder
Our favorite prototyping tools
All of these tools fit within a fidelity spectrum:
Difficulty Level: 1 (on a scale of 1-5)
The quick and easy form of prototyping, sketching allows us to rapidly demonstrate a concept or interaction. You can draw your screen size or use one of the many templates that exist out there. Sketches are collaborative and allow us to not worry about pixel-perfect renderings. The obvious downside is that sketches are not easily shareable in their analog format and generally are harder to explain to a client who may not be as in tune.
Adobe Photoshop CC Comps
Difficulty Level: 2
Cost: Adobe CC is $599/year per user
The tried-and-true way of rendering out comps, Photoshop still has a stronghold on the design industry. Yes, there are competitors such as Sketch that are starting to take a bite out of Photoshop’s market, but if you want beautifully rendered comps with lots of photographic detail, this is your tool. The issue is, Photoshop comps are static and can be time consuming to edit if you are making any large-scale changes. Showing each interaction requires you to export out a different comp for every little click. Finally, they are not responsive, creating some headaches during the development process down the line.
Difficulty Level: 2
Cost: $100/month, unlimited projects
One of HZ’s current favorites, InVision allows you to make clickable prototypes that can be viewed on your desktop or screenshared with your mobile device or tablet. Setting up a prototype is easy and clients can view the designs with little issue. Invision speeds up our workflow by allowing us to comment on each screen. Prototypes can be updated quickly by re-uploading the comp. The biggest drawback to InVision is that each interaction and hover state still has to be created in Photoshop. Invision doesn’t allow for animations and is not responsive, although it does work with different screen sizes. However, despite its flaws, InVision is great for simple prototypes and for sharing with clients. We will continue using it, especially because it allows the non-coders on our team to easily create clickable prototypes.
Difficulty Level: 3
Cost: $159 per user
The newest player on the market, Macaw is a responsive layout application. Macaw allows you to create dynamic layouts that change depending on your set breakpoints. It produces clean code, allowing you to view your comps in the browser. The application does have a slight learning curve because its tools are based in code. You also have to understand the box model of CSS coding to properly size your containers. Macaw lacks the ability to animate within the program or create the ever-popular parallax effect natively. If this is a problem, you can edit its code in a text-editor within the program to achieve any effects you need. However, between Macaw and Adobe Edge Reflow, Macaw is the easiest to learn. If you are looking to prototype your responsive webpage without web animations, Macaw is one of the best solutions out there.
Adobe Edge Reflow CC
Cost: Part of the Adobe CC suite
Adobe’s responsive layout application has many of the same features as Macaw. It allows you to set breakpoints and have your design change depending on size. However, it is not as intuitive to use, and the code it produces in browsers feels wonkier than Macaw’s. Edge Reflow allows you to do hover states and create a clickable prototype, but it lacks the ability to add animations or create a parallax effect natively. Despite its flaws, the killer feature is the Photoshop integration. You can create your static comp in Photoshop and then have the assets be available in Edge Reflow’s library. This creates a smooth workflow that allows those who may not be as familiar with Edge Reflow to jump into the process quickly. While I prefer Macaw, Adobe’s easy integration has made Edge Reflow our responsive tool of choice here at HZ.
Adobe Muse CC
Difficulty Level: 2
Cost: Part of Adobe’s Creative Cloud
Where Edge Reflow lacks all of the wiz-bang functionality, Muse makes up for it. I wish the two could be merged into one. Muse allows you to easily design animations, parallax, and scrolling effects. It is simple to use and outputs code that can be shared with clients. The downside to Muse is it does not output responsive comps. Muse does allow you to make mobile and tablet versions, but the break points are not set within the composition. It seems odd that Adobe would not combine Reflow and Muse, creating one great tool. Overall, Muse is great for showing off a general layout flow, but not if you are not trying to figure out the responsive mechanics of a site.
Difficulty Level: 5
Cost: $79.99 for a single license
CSS Libraries (Foundation, Bootstrap)
Difficulty Level: 4
This is where we start to blur the line between a live site and prototype. CSS libraries allow us to pull any functionality we need for the web, because it is the web. Animations, parallax, responsive: It can do it all. The downside is that as designers we might get bogged down in the details of making our code perfect, instead of creating a quick mock-up of what we need. If you are a non-coder, you have to learn the basics of HTML and CSS. Also, these libraries limit us to their style and can be hard to show in a presentation if we want to be more specific in our design. That being said, if you have the time and know-how, mocking up a rough site can be the most effective way to test interactions and user flows.
None of these tools is a silver bullet to the client presentation prototype question. Instead, designers need to understand which is the best tool to use for their needs. Client doesn’t understand how a button will animate? Framer.js might be the best tool. Want to show off your parallax effect idea? Muse is a great solution. As designers, we must tiptoe the line between a full-fidelity site and the limits of a client’s imagination. Effectively communicating with great presentations can help strike that balance and ultimately lead us to the best work possible.