Design Prototyping Tools
Why is the design phase of my project so important?
My favorite part of any full website-build project is the design phase. By the time your project has reached this phase, you’ve already spent months planning, and you’re more than ready to see all of your hard work pay off with a full-color, tangible deliverable. Most people are “visual” and will get far more excited about a beautiful design than well-planned content. It’s not that one is more important than the other – it’s just that we’re human and we love pretty things.
This phase is monumentally important to the process, but as I said, it’s also a lot of fun. I think it’s important to give this phase the gravitas it deserves. There’s no point in making a beautiful website design, only to present it poorly. If you have invested the time to make something worthy of display, forget displaying it – flaunt it! *snaps*
Why shouldn’t I print my design on paper?
It’s simple – if you’ve designed a website it doesn’t make sense to give your client an image printed on a piece of paper. This is not how their end user will eventually consume the product. Nobody (except maybe your grandmother) will ever see this site printed on a piece of paper. So why do we insist on unveiling it to our clients that way?
A website should be presented in a web browser, at actual size. Printing a page (especially a long, single-scroll page) on a piece of paper is impractical. A few months ago, a client used an outside designer, and approved the design on paper. When we developed their site from the approved design files, and unveiled it to the client, the client was shocked and unhappy. The actual sizes of all of the elements on the page were much larger than they had seen on the printed page, and didn’t match their overall vision for the project – a fact they didn’t realize until they saw the page, at 1:1 size in their browser.
We have learned from this experience, and now require that our clients view the pixel-exact design in a browser before moving forward with development.
How can I make the design feedback phase of my project shorter?
The client’s understandable passion during this phase can lead to revision upon revision upon revision, as multiple stakeholders ask for changes. This can lead to an unnecessarily long design process, and frustration on both sides.
The best way to shorten the design revision process is to share a design with your client in-person and hash out design differences over one long session, rather than dragging it out over several weeks. If all the stakeholders can meet, together, in one room and talk through all design feedback at once, you and your designer can sort out any conflicting opinions on the spot.
Are there applications to help me?
There are several apps that help you achieve these 2 goals:
- Sharing a website design (or phone app or tablet view) with a client in a true-to-size browser
- Facilitating design feedback and collaboration for several stakeholders at once.
I have researched 5 of these apps design collaboration apps:
- Website: http://www.invisionapp.com/
- Ease-of-use: 8/10 (loses points for isolated “comment mode’ and zoom options)
- Free trial? Yes – 1 project free forever
- Summary: InvisionApp is amazing and solves all of the issues with the traditional design-feedback process. The application is simple to use, and beautiful to look at. The InvisionApp branding is unobtrusive, and clients seem to respond well to the interface
Unlike some of the other application I looked at, InvisionApp offers mobile prototyping. This is an incredible bonus. The client will actually feel like he/she is on their mobile device, and really understand how your screens relate to one another.
The app itself is super easy to use. Everything is intuitive and well-laid out. “Build mode” allows you to add hot-spots to link your pages together. This allows a client to “navigate” to multiple screens, as they would on the final website. I find that this helps my client’s understand how multiple screens relate to each other, in a way they would not be able to on paper. I really appreciated that “build mode” allowed for hot spots that are triggered by hovers as well as clicks.
InvisionApp really shines at collaboration. As with all other apps I looked at, you may send a simple link to your client, so he/she can browse the design on their own time. Unique to InvisionApp, if you’d prefer a meeting to review the design (my recommendation) there is a robust “Live Share” option. This has all of the bells and whistles you’d expect – and some you wouldn’t. Each user in the live share gets a different colored virtual pen for sketching directly on top of the design. A built-in conference call-in number and chat window encourages further collaboration. Even cooler, users have an additional “whiteboard” option that allows you (or your client) to sketch out exactly what they’re envisioning on a blank canvas – a sketch can be invaluable, as simple text notes can be easily misinterpreted.
This is one of the pricier options, at $20/month.
The “comment mode,” while extremely helpful, is a bit annoying because it shuts down all other functionality on a page. Once a client enters “comment mode” they lose the ability to draw on top of the view or move to the “whiteboard,” which feels restrictive.
Finally, I have had issues with the zoom on this application, which is troubling since I use this primarily to give client’s a true-to-life vision of their site. You can set the options on your views to “fill the screen” when in build mode, but that preference disappears in share mode, and forcing me to rely on my browser’s native zoom options.
I love this application and think it’s well worth the price. The impact it gives your clients, alone, is worth it. This is by far the most collaborative option of any of the applications I reviewed.
- Website: http://marvelapp.com
- Ease-of-use: 7/10 (loses points for collaboration options)
- Free trial? Yes – unlimited projects free. Pro version $5/month
- Summary: This is a beautiful and very affordable option. This application is designed with mobile in mind, but lacks a few features that would be nice for website (desktop) prototyping, such as hotspots triggered by mouse hover
The value of this application is incredible. This option is free, for unlimited projects, or $5/month for the pro option which allows for password-protected share links, among other benefits.
I love that the Marvel application links directly to Dropbox. This is nice because I already use a Dropbox account to store design files, so it makes organization and uploads easy. This feature also facilitates instant delivery of the final, approved files, without ever leaving the app.
Marvel app has a fixed header option that is amazing! This feature allows you to lock the screen at a certain position, which is great for sites with a “sticky” navigation or header. Unfortunately, this only seems to work for mobile sites and not websites.
MarvelApp has more share options than any other application I reviewed:
- QR Code
I especially like the “embed” option – this could be a great way to advertise and educate your customers on how you present designs, or to share your design via basecamp or another project management tool.
Finally, I have to take a second to gush about the free iPhone app which is honestly, incredibly. It allows you to turn your paper sketches into prototypes in minutes. I can’t do it justice with my explanation – watch the tutorial on their site.
One feature I sorely miss is the ability to trigger actions based on hovers. Marvel App will only allow users to map hotspots that trigger on a click. This is unfortunate, because hover states usually feature prominently in our designs, and I think make a considerable impact. Without this feature, I don’t feel that clients would get the full experience. Additionally, MarvelApp is missing the “add hotspot to template” feature. This feature makes the prototyping process much faster, because it allows you to map a hotspot across several pages simultaneously.
The most noticeable drawback with this application, as compared to InvisionApp, is that Marvel App is designed strictly for prototyping, and sharing the finished product with the client. This solution does not have any functionality to make comments, sketch out ideas, meet with stakeholders on a conference call, or leave comments.
Overall, I really love this application, even with the lack of live collaboration tools. If you’re simply looking for a beautiful way to display your work to your clients in its true environment (rather than on paper) this is certainly the most affordable option, especially if your agency concentrates on mobile application development.
- Website: http://viewflux.com
- Ease-of-use: 7/10 (loses points for lack of live collaboration and mobile development features)
- Free trial? Yes – the entire site is free during its beata period
- Summary: Loving all these applications in beta! All ViewFlux plans are free right now. This software is robust, beautiful, and perfect for prototyping website design. It will fall short for mobile design shops.
The interface of ViewFlux is super simple. It took me about 10 seconds to figure this one out. If you’re having trouble, on-screen, goal-based tours will guide you through the application. I think these on-screen tours are great for clients. As soon as a client clicks on a “preview” link, they will see the on-screen tour, with helpful tips on every available tool. These tours are useful and simple, and don’t feel intrusive or annoying at all. This is a plus for me over the other software applications I’ve tried – it’s crucial that my clients understand the tool I choose, otherwise the entire exercise is pointless.
The zoom options here are very clear, with simple, universal symbols:
- 1:1 (actual size)
- >< (fit screen)
- 50% zoom
These zoom options are available in preview mode and build mode. Likewise, the “comment” mode here is available on the same view as all other features and tools, which makes it easy to switch between leaving a comment, creating a new hotspot, etc. Unlike MarvelApp, this interface does have hovers, which is crucial for me. The revisions tab, project organization, and naming options position ViewFlux as a great tool for sending the finished project directly to your client.
One of my biggest issues with this software is that it doesn’t seem to have live collaboration options, as InvisionApp does. The built-in conference call abilities of InvisionApp and “sketch-on-top-of-the-image” tools are invaluable. You can share your linked ViewFlux pages via password-protected link. There are live chat and comment modules – but if you truly want to share your design with your client, in real-time, you would need to set up a conference call outside of the application.
The only other major problem here is that it is not as intuitive to use ViewFlux for mobile projects as it is on MarvelApp or InvisionApp. I did not see any controls that indicated mobile functionality (tap, pinch, zoom, etc). These features were readily apparent on all other application. I uploaded mobile design files and still did not see any options for mobile hotspot mapping.
This application is another great contender. I actually think this one would probably be easiest to set up and maintain, especially if your agency focuses on website design/development over mobile design. The file organization in ViewFlux is great, and the streamlined share option will make it easy for any employee or client to use without training.
- Website: http://notism.io
- Ease-of-use: 8/10 (loses points for no on-hover hotspots)
- Free trial? Yes – this is free while it’s in beta
- Summary: Notism definitely gives the impression of being the most robust option of any of the applications I reviewed. This is great because I can see a design team growing into this option, but it may be overwhelming for clients and first-time users.
Notism links to asana. Did I mention that notism links to asana? Because it does, it links to asana. This feature, for me, so far outweighs all other criteria that I immediately fell in love. Asana is a task management tool that my agency uses to control traffic. If you’re not familiar, it’s a tool that’s similar to basecamp (incidentally, notism also links with basecamp). This is important to me because it allows a project manager to create actionable tasks during the meeting and collaboration with clients. This feature would accelerate any project – after all, feedback means nothing unless the meeting ends with clear tasks to drive towards the end goal.
Notism is just incredibly robust. It looks like every other option bundled into one single application. I especially appreciate the options for filtering files:
- in progress
- under review
Overall, this application focuses more heavily on the “review” process and team collaboration over client collaboration. This application is a hybrid of a design collaboration tool (like InvisionApp, MarvelApp, etc) and a design facilitation tool, such as CageApp. Notism intends its users to create groups of project collaborators, with different role definitions (project manager, designer, designer director, etc). These users have different permissions within a project. Manager-level collaborators would create and assign tasks, which may be viewed in a running activity-feed for each user. The application even has a separate “to do” list for all users, built-in to the application. This application combines task management and prototyping in a single place, which may be a good thing or bad thing, depending on the business practices of your agency.
There is definitely an opportunity for information overload with this tool. The controls for this application live in navigation bars that surround all four borders of the screen. They’re easy to open and close, but when they’re all open, it’s overwhelming. I could see team members getting confused as to what they’re looking at or where to go within the application.
Again, this application lacks the ability to trigger actions on hover! This drives me crazy and I think it’s really necessary to give the client the full website experience.
The client preview screen is actually too simplified. Whereas the protoyping screens have menus all over, there are exactly 0 menus in the client prototype view. There is really no visual feedback as to what a user is supposed to do once they’re looking at a prototype, so you would be required to talk your client through it.
I would actually choose this option, for my agency, simply because the link to asana is so crucial to our business practices. However, if not for the asana link, this would not be my choice due to lack of hover-triggers, lack of live-collaboration tools, and the overly simplified preview screen for clients.
- Website: http://redpen.io
- Ease-of-use: 5/10 (loses major points for not being able to link designs to each other)
- Free trial? Yes – 15 days
- Summary: Redpen is a really simple (and beautiful) interface for sharing your designs. It lacks collaboration tools, as it only has hotspot comments and nothing else. Most troubling, Red Pen does not allow you to link multiple pages together in order to give users the full website expereince
The RedPen application has the most beautifully designed interface of any option I’ve researched. This application is just pretty to look at. The “Photoshop App for Mac” is a fabulous add-on. This application allows you to easily upload and share your templates directly from Photoshop, which is a great time saver. Designers will love this feature.
RedPen has super-streamlined share options (simply generates a link which you can email) and allows for a “secret mode” in which only users who are invited may see the project. The lack of alternative share options is actually refreshing after the overwhelming number of choices in other applications.
There are several drawbacks to RedPen, the most glaring of which is the inability for a user to link multiple files in a project together, in order to give a user a true browsing experience. This, to me, is a deal breaker. Instead of giving clients an interactive website experience, the “preview share” link brings the client to the overall project page. From here, the client must select a screen to review, make comments, and use “next” or “previous” links to see the next design page in the project. There is no hotspot linking at all. If you were using this application simply to share static graphic designs, I think it would be wonderful and streamlined, but this solution is not ideal for sharing interactive websites.
The pricing on this option is much higher than any of the others = $20/month only gets you 5 projects. This would be a problem for my agency, which might have several projects in the “design” phase at the same time.
RedPen would not be my choice, specifically because it does not allow you to link screens together.
Other applications I didn’t review in-depth: