I wanted to speak a little bit about prototyping website comps. This is a part of the process that I work in almost daily, and with the demands of that stage, sharp tools are really necessary to ensure that your client gets the best understanding of the direction the final product is headed.

Over the course of the last 15 months, I’ve been using a wonderful tool called ‘Invision.’ Invision performs in a number of capacities to work best within multiple structures to provide excellent, versatile prototypes—not just for websites, but for mobile apps as well.

invisionapp

At the surface level, it’s essentially a tool that allows for image mapping of flat jpegs to allow for interaction, so as to experience flat comps as if they’re live in the web space. This works especially well for designers who prefer working in photoshop prior to site development. Now, the functionality for certain items isn’t available yet(such as multi-state hovers. You want a state change on hover for a button and also want it clickable? get in line.) and prototypes will never be as perfect as the final programmed product, but it goes a long way to expressing the desired experience and getting that much sought after approval from the client. Invision does allow for hover states, touch events, gesture swipe, smooth-scrolling anchors, and several different types of transitional animation (much more likely to be seen used with app comps).

Something else that I’m an enormous fan of is how Invision handles mobile prototypes. Aligning with my own philosophy in terms of always trying to present the most honest interpretation of a product, Invision serves up (at least on glorious iOS devices) an automatic prompt to download the prototype to your homescreen as you would any other app, and experience the site or app locally at your convenience. No sacrifice to function whatsoever.

For my daily workflow, I use this service for making wireframes interactive as well as high fidelity comps. I want to get the client familiar with clicking through these components, so at each stage their comfort level increases as they become intimate with the navigational structure and content priority. I want my clients informed at each stage of the process so we can avoid the dreaded ‘curveballs’ that can come from confusion and misinformation.

liveshareAnother feature that’s folded into my daily workflow is Invision’s ‘Liveshare.’ As the business becomes more and more capable technologically, the potential for working remotely with teammates becomes more and more of a reality. One of the things I lost in my current situation with that was madman whiteboard sessions which, while leaving something looking like a mixture of a Basquiat work and a serial killer’s notebook, has always yielded solid solutions for userflow, functionality, and navigation. Liveshare allows for collaboration in an online space serving, at times, to be that whiteboard. This feature affords a remote team the ability to draw on top of uploaded comps, live chat in a chat room feature, and to work on blank slate environments to concept out options before addressing comp updates.

I want to get the client familiar with clicking through these components, so at each stage their comfort level increases as they become intimate with the navigational structure and content priority.

The support group for Invision is wonderfully responsive to concerns and always open to suggestions and recommendations for bettering their service. The better their service becomes, the more of us out there will use it—improving their already impressive client list of awesome folks like: Adobe, Airbnb, Evernote, Atlassian, Yahoo, Xero, Razorfish, Shopify, Getty Images,  Eventbrite, Ebay, and Box.

I encourage you to poke around on their marvelously sexy site. It’s an excellent example of great site design and a well-thought-out user experience. They offer free sign up and I believe the first two projects through them are free with near full functionality. I’ve only touched on some of the tools that I use via them day-to-day, but it runs much deeper. You can store your working files through them, you can use it crazy for interactive rapid prototyping for experimenting with user flow, you can even tweet against others for a chance to win a free t-shirt.

invision

Get out there and make something awesome. Maybe try out Invision as a way to share that with your clients to give them a better alternative to attached jpegs and pdfs or really just any flat experience, devoid of interaction points.