Sitemaps and wireframes have been common tools in interactive development for many years. These visual assets help to develop a shared understanding for stakeholders on both client and agency teams. This understanding includes not only the overall project scope but also a high level of detail and can give an idea of how interactions work between views, especially in complex websites or applications.

While the benefits of these tools is obvious and they will certainly be with us for a while, the “flatness” of these devices can be frustrating. The web is a fluid medium with different types of user interactions and a wide variety of content options, from videos to images. With the addition of responsive layout strategies, giving your clients an interactive taste-test is increasingly necessary. Agency teams want and need their clients to be more engaged, just like their users will (hopefully) be.

Prototypes can create a greater connection between your clients and the web as a medium–ultimately helping create a greater connection between clients and their audience. Prototypes are also very helpful for educating clients and developing responsive techniques. Using prototypes can also greatly facilitate conversations around content, both in the structure of content on the page but also the scope of the project’s overall content needs. Showing sample FPO images and videos within the view can also help you to make important decisions about user interactions and motives from within each view.

Prototype All the Things

Producing prototypes is easier than ever with the continued development of front-end frameworks like Foundation and Bootstrap. These resources, as well as many other frameworks, combine most if not all of the necessary UI elements for building a robust and usable prototype. Also included are some Javascript helpers for interactivity such as tabbed or accordion content as well as modals.

Adding this stage into your current workflow doesn’t mean you need to scrap what you’re already doing. My suggestion is to give some time to a front-end developer to work on prototypes while wireframes are being developed. Combining these stages means that your clients can visit URLs as well as static documents and cross-reference between the two.

A sometimes overlooked but incredible benefit of prototypes is the opportunity for early user-testing. Prototypes can be used for interactive user testing to ensure that concepts around navigation flows and calls to action are actually working as intended. Indispensable knowledge from these tests can be acquired in just a few days, if not hours. These results can support decision making during the prototype phase that can have important impacts on later high-fidelity designs. You’ll also be able to back-up your decisions with convincing, hard data instead of asking your clients to simply trust your expertise alone.

Final Implementation

Once the process continues to final development or integration with content management systems, the options are two-fold, and both have benefits. Developers can simply take these prototypes and build on them as a baseline. This allows the markup to be reused or changed slightly to match slight inconsistencies with static designs. The only drawback of this approach is that some frameworks such as Foundation come with some CSS bulk, which you may not want combined in the final deployment. Some of these frameworks allow the easy removal of components that aren’t needed to bring down the weight a little.

The other option is to keep the prototypes as a living reference while development continues from scratch. This allows your UX team to continue user testing, if necessary, as well as make quick adjustments for the client. Continued testing with these prototypes can also help you make better-informed UX decisions in case unexpected revelations occur after you are already deep into development.

Conclusion

As with any enhancement to the design and development process, there will be some adjustment at first, but the benefits to the overall outcomes of your projects are more than worth it. Your clients will be much more engaged with your process, making them better partners throughout the project timeline. Give prototyping a chance and your team will be more connected, not only with your clients and their audience, but with itself, especially between designers, developers, and UX specialists.