Searching for software solutions it is easier said than done. Sometimes the software does everything you could ever want it to do, but it is missing one critical feature which is a deal breaker. Maybe the software doesn’t export data in the right format, maybe you can’t collaborate with colleagues in the way you need to, or it might do what you need, but you’d never know unless you bought the full product and tested it.
After you’ve exhausted the software products that were contenders, you start compromising. “OK, well none of them does exactly everything I need, so I’ll just settle with the one I can manage, despite it’s shortcomings.” You get through the bugs, the tech support and the user forums and make it work.
That has been my experience in trying to find an efficient and effective website prototyping tool. If you know me, I’m pretty particular, so it takes a large amount of mental energy to go through this process.
So why have I been looking for the ultimate website prototyping tool? Because professional service firms get hired for their brains. Being able to communicate and transmit your expertise in a way that is easily understood is vitally important. When it comes to creating a digital marketing platform for your client, you need to be able to be clear about strategic decisions in regards to information architecture and functionality.
Because clients are people, too. Yes, that person you are chatting with on the conference line or exchanging endless emails with is a real human being. You can’t expect them to read your mind or suddenly be experts in the latest CSS terminology. In order to convey your strategic thinking and expertise in digital marketing platforms, you need to be able to explain yourself in the three basic ways humans learn. In a very general sense, humans learn by:
- Listening
- Seeing
- Experiencing
I wanted a prototyping tool that would cover all three learning bases. I needed to be able to create a prototype that would facilitate discussion (listening), show the intended information architecture (seeing), and allow the client to play with the functionality (experiencing). And I needed to efficiently create and iterate the prototype in response to client feedback.
I tried out many of the different options for website prototyping — including Adobe Photoshop, Sketch and UXPin — and here’s what I learned in search of the perfect prototyping tool.
Adobe Photoshop is the de facto choice for many digital agencies around the world. People are familiar with it and it is a really powerful and useful tool. But you can’t experience a PSD file like you would a real website or app. You can explain the intention of each Photoshop layer and how it would translate to web, but you are asking your client to use their imagination and guess how the website would function. To me, that’s like explaining a menu item at a restaurant and expecting the customer to know exactly how that food tastes.
Adobe has tools such as Adobe Muse and Adobe Edge Reflow that help solve the issue of translating a PSD into a real web experience. For me, however, jumping from one software platform to another, importing and exporting files, adjusting for responsiveness, etc., isn’t very efficient.
One solution to Photoshop’s experiential problem is an app called invision. It’s a great step forward to marrying imagery with interaction and works well for high-quality prototypes. But it still isn’t the all-in-one prototyping tool I’ve been looking for.
Sketch is another tool I’ve worked with; many Adobe Fireworks users have adopted it. I was really impressed with how quickly you can create layouts, edit vector images and export your design. It will even generate CSS for specific design elements (like a button) if needed. But again, you can’t “experience” the prototype.
At this point I decided to try out an online prototype builders. There are a lot of options to choose from with varying sizes of feature sets. Generally the workflow consists of selecting a shape or a stencil, dragging it to the canvas, adding text and then linking different elements to create a functioning UI.
One of the products I tried was a relatively new solution: UXPin. Generally it worked really well for what I was trying to accomplish, and it has a lot of impressive features. But I’d eventually have to battle a bug with the software. Sometimes links would stop working or layouts would load really, really slowly (not good during a client presentation). Also, you still weren’t getting the full website experience with true mobile responsiveness. Don’t get me wrong, I really liked UXPin, and it has a lot of potential — it just needs more time to mature.
Some of the more technical prototyping software solutions have recently added mobile responsiveness and dynamic content — such as Axure, Justinmind, Protoshare, and Antetype. They have relatively steep learning curves if you want to utilize all their features, but they are definitely worth a look. There is also a new breed of prototyping software which generates real code that can be used on a production site (mostly). Macaw, for example, is a really exciting tool, and about as close to building an actual site as you can get.
This begs the question though: “Why not build an actual website as the prototype?” A real website would allow your clients to discuss, see and experience the prototype as it is intended. It would be mobile responsive (assuming you programmed it that way), links would work correctly, dynamic content could be added, and you would be able to control the URL as well as the hosting platform to avoid any loading headaches.
Designing on the web, for the web, seems to be the responsible thing to do. It helps you manage expectations, leads to more informed questions and allows for better collaboration with the design team.
Newfangled develops sites using WordPress (or our own proprietary CMS), so it made sense to begin exploring a way to rapidly and efficiently develop prototypes using WordPress.
Luckily, WordPress has seen a surge of drag-and-drop themes and plugins that allow for rapid development. Themes include Headway, Pagelines, Divi and Ultimatum, and notable plugins include Visual Composer, Themify, VelocityPage and Beaver Builder. The workflow is similar to the online prototyping tools I mentioned before: You choose how many columns you want in a row, select an element to insert into a column (perhaps a widget or slider), and adjust spacing and colors to your liking.
Of course, if you want true customization and a highly dynamic website platform, you’ll still need custom coding by a developer. But they work well for relatively straightforward, brochure-style sites.
As of the date of this blog post, we’ve been experimenting with several of these WordPress solutions, and I am really excited. They make it possible to rapidly and efficiently develop prototypes for the web, on the web.
I believe we owe it to our clients to be able to communicate our strategic vision in a way that they can easily understand. The prototyping phase is the experiential foundation for this vision and is the catalyst for moving forward in a way that gets everyone on the same page — which ultimately leads to a happy clients.