Once upon a time, the roles of designer, developer and product manager were all very separate islands of the process in the journey of creating a digital product.

In ancient times, projects were managed in a waterfall method with designs being worked on in Photoshop, with flat JPGs (desktop only) being saved out and then manually uploaded to a server for sign off by the respective client, before being handed over to the development team for the build. This would then get built without the client being able to see any interactivity or transition effects beforehand, a very 1 dimensional, static experience for a product which can be made or broken by subtle interaction and a delicate user journey. 

This process was fraught with problems; externally, clients would struggle to visualise interactions/animations or would get confused over the user journey resulting in the delay of sign off. These subtle elements were communicated in any way we could, whether it be verbal or diagrammatic.

Internally this would also create communication problems between the design and development team due to the static nature of the designs, subtle design elements would risk being missed or miss-communicated during handoff and therefore interpreted differently during the build.

As the years rolled on and the technologies, tools and thinking evolved, so did the process, agencies started to embrace ‘agile’ and ‘scrum’ methodologies as opposed to ‘waterfall’ when building digital products, Which opened up the thinking behind how the whole team should collaborate throughout the process. 

Design thinking and design sprints (a methodology now widely adopted which helped to produce some of the leading Google products) became the core tools to ensure a product’s success.

The whole team is now involved in the development of a product, from empathising with users needs, through interviews and personal work, right through to idea generation, rapid prototyping, digital mockups, critiquing and user feedback. The strict time designation for each task in the process creates a focused and efficient atmosphere, resulting in a much more successful product through the use of multiple minds working on each task, with true collaboration being the heart of its success and the main reason why the process has been so widely adopted.

With the rise of Design methodologies and thinking, there was a need for design teams to be able to quickly mock up ideas in order to get test concepts quickly and get efficient feedback, whether it be concepts for an interface, an idea for an element of micro-interaction or a quick prototype of a user journey, there was a need for digital tools which could make this quick and easy.

This need was indeed answered by a number of great prototyping tools which have been widely adopted by the digital product agencies and brands the world over, today we will be looking at a few of these, reviewing what they do and comparing their services.

There are now numerous tools when it comes to the digital prototyping world, however, if I had to pick 5, they would have to be the following:

Invision, Web flow, UXPin, Origami and Proto.io.

So let’s explore what each of these tools have to offer…

 

Invision

Invision has blossomed into a beautiful prototyping tool over the years, even giving the big dogs ‘Adobe’ a run for their money. Digital designs can be synced from popular design programs such as Sketch and Photoshop through their ‘Craft’ Plug-in, keeping a digital project up-to-date with ease and efficiency.

Their tool ‘Sync’ allows smooth developer handoffs, allowing a developer to see the CSS info behind your designs right there in the browser. They have also just hinted at a new service ‘Invision studio’ a powerful design tool which allows for ‘In-browser’ rapid prototyping using shared design systems and animations to create dynamic responsive designs.

One of the main benefits is that it is an in-browser tool, unique for its collaborative workflow whether it be between designer and developer or project manager and client, Invision can handle it for any size of team, keeping all communication in one place and transparent and at any stage of a design project, whether it be mood boarding or high fidelity, interactive mockups.

Positives:

• Simple and intuitive interface
• The mood boarding tool allows for the collation of stylistic elements; colours, fonts and imagery to help communicate the brand to the design team.
• The Sync tool allows for the syncing of Photoshop and Sketch files straight to Invision using the Craft plug-in, this is a huge time saver as it allows the Development team to view all the information a designer would see in Sketch in an easy ‘point and click’ manor, so colours and sizes of elements are quickly and easily interpreted with precision, no more mis-interpreted designs!
• Designs can be made interactive through ‘click and drag’ hotspots helping to simulate the user journey with efficiency
• Responsive screens can be uploaded too; drop in a mobile number and you can view the interactive design on your device!
• Real-time design collaboration allows you to create project tours, launch meetings and present design work
• Freehand tool allows for some creativity in-browser collaboration, each team member can type, draw or add imagery to a collaborative canvas, perfect for rapid prototyping and visualising ideas for discussion
• Drag and drop project management area allows for the management of screen status (In progress, approved, etc) and comments on the designs
• The commenting tool allows unlimited on-design feedback
• It integrates with a range of project management tools, such as Slack, Basecamp and Trello to keep everyone seamlessly in the loop
• The legacy mode allows you to view previous designs in case you need to refer to a previous iteration
• The Invision blog is a great source of knowledge and content from some industry leaders, so hit subscribe!
• As previously mentioned, Invision has released a teaser for ‘Invision Studio’ This will be available for Beta release in January 2018 and is a huge evolution of the Invision product, featuring “responsive layouts, rapid prototyping, advanced animation, shared design systems, and seamless collaboration” within the browser itself which will be a huge process changer for designers, an exciting development for Invision and product designers alike!

Negatives:

• Currently, there isn’t any animation functionality or in browser design tool in Invision but we have been told that it is in development with ‘Invision Studio’ so hang in there until 2018 as this will really help to add depth and realism to your prototypes
• There isn’t yet the ability to design in browser, collaboratively with other designers just yet, in the same way that ‘Figma’ does for example but stay tuned as Invision are constantly pushing their product and I wouldn’t be surprised if this pops up over the next year on the back of ‘Invision Studio’

Used by:

• Airbnb
• Shopify
• Twitter
• Netflix
• Dropbox
• Huge

 

Webflow

Webflow is unique in that it allows a designer to design, build and export a functioning website without needing any ‘code’ as this is all built behind the scenes when designing using the GUI. This tool helps to bridge the gap between design and development, whether it is used for experimenting with UX/UI or exporting fully functioning sites, it helps the designer understand the world of development a little more, allowing designers to spot coding issues early and experiment with interface and interaction in real time. A nice touch is that the GUI of the tool itself is easy to intuitive.

Positives:

• The completely inclusive prototyping is impressive, even if it is just from a time-saving perspective
• A content management system that meets visual design, a designer can create the content structure that they need, content can then be added manually or via the API and then it can be designed visually
• Webflow boasts scalable hosting too using a content distribution network (CDN) powered by Amazon CloudFront and Fastly.
• Even though it is a WYSIWYG tool and the designer technically doesn’t need to touch the code, Webflow allows for Clean, semantic code export for your development team
• Fully dynamic responsive websites that can be designed and tested in real time, well suited to an agile workflow
• Craft precise animations and interactions using the GUI, adding dynamism to your designs
• Allows clients to see actual functionality without having to wait until build
• Once familiar with the process, a designer can save a lot of time when creating a digital project, making it an efficient choice especially if they are a freelancer and do not have a development team readily at hand
• All this takes place within the browser, so no need for a hefty program download
• A great tutorial and ‘University’ section are on hand to help you get started.

Negatives:

• Takes a bit of a time investment to find your way around the GUI
• More intuitive to the designer with a degree of HTML and CSS knowledge
• Lacks the all-important communication/feedback functionality that some of the other tools have
• Purely suited for designing without code
• The code export is cool but it suffers for bespoke e-commerce sites where complex functionality would need to be custom built.

Used by:

• Nasa
• IDEO
• Adobe
• CBS
• VW
• MasterCard 

 

UXPin

UXPin is a full stack UX design tool which saves countless hours of product development time by creating an all in one simple platform for collaboration. Suited to an Agile workflow it aims to pull in multiple UX processes and tools into one place, whether that be designs systems, prototypes or project documentation.

One of the unique selling points of UXPin is the ability to create high-fidelity interactive and animated prototypes, ready for presentation. The ability to mock up micro-interactions, adds another dimension to design work, helping to communicate interactions and concepts quickly and efficiently to clients. This minimises the risk of miscommunication and saves a huge amount of time in the long run.

Positives: 

• Rapidly design, share and test prototypes
• Gather feedback from your team and clients through the commenting tool directly on designs, with a copy sent through to your email or Slack
• Easily create and review iterations
• Modular design systems allow you to scale projects with consistency
• The autospec generation for developers is unique in that an automatic style guide is built as you design elements, which makes it easy to create and manage Agile documentation for all teams
• UXPin has an excellent free library of pdf books and tutorials on all areas of design which is regularly updated, a great source for any designer
• The fact that it is a cloud-based tool, means that it is lightweight and can be accessed anywhere as long as you have a net connection
• It saves a huge amount of time through its collaborative functionality, making feedback and design changes efficient
• It allows for visual and interactive design on one platform
• Allows for the design of a fluid interface for any device
• You can prototype with built-in/custom interactions and animations, bringing a dimension of realism to design work
• UXPin is flexible in that it allows you to customise any element by styling the CSS manually if preferred
• Design interface using one of the many UI libraries which are available, saving you time on projects.
• You can collaborate on designs with up to 3 other designers in real-time
• Sync your Sketch and Photoshop files to UXPin, it will preserve the file structure of your design work and automatically update on UXPin when the source file is changed.

Negatives:

• The user interface and interaction of the GUI is a little clunky and not as intuitive on UXPin, compared to ‘Invision’  
• Adding animation to elements is a little fiddly with the interface being difficult to use at times.
• The commenting tool can be a little buggy compared to Invision
• It is slightly more complex to design an interactive prototype due to the Interface not being that intuitive.

Used by:

• HBO
• Paypal
• Sapient
• Adidas
• Microsoft
• Sony

 

Origami

Origami is the Prototyping tool developed by the Interaction team behind Facebook and has been released free to the masses, it has been used to design some of the world’s leading social media platforms (Facebook and Instagram). This tool is lightweight, free and specialises in the design of UX, specifically interaction and animation.

Positives: 

• It’s totally free!
• Quick and easy prototyping, saves a lot of time
• Integrates with Sketch and keeps layer structure intact
• Library of pre-loaded interaction patterns can be drawn upon to bring designs to life
• Allows for simulation of device gesturing (tap, swipe etc)
• A gallery of prototypes provides a good idea of what is possible and a source of inspiration
• A strong community on Facebook exists for online feedback
• There is a tutorial section which will provide detailed walkthroughs of example interactions
• Suitable for the on budget freelancer

Negatives:

• It is not a cloud-based tool so you will need to download it
• This will only run on a mac, sorry Windows people!
• Origami is quite lightweight in terms of its capability, it’s good for the basics and suited to designers who are starting out in the industry
• There is an initial time investment to learn the ropes of this program however you do get a great result at the end of it
• It lacks commenting functionality, which makes it difficult when collating feedback
• It lacks versioning for historic designs, which makes it harder to roll back to older designs/experiments

Used by:

• Facebook
• Instagram
• … too many to count!

 

Proto.io

Porto.io allows you to create high-fidelity prototypes which both visually and functionally replicate that of a working digital product at any device size.

Efficiently design your prototype within the Proto.io app using the UI component library or import your Sketch or Photoshop designs. You can then add interaction to your designs and start to design the user journey through mouse or touch events, transitions or animation functionality. Preview your designs, through any device or screen using the Proto.io app. Then share your prototype with an audience and collate feedback through comments, video or through a range of integrated, popular user testing programs, a really cool USP.

Positives: 

• Impressive functionality for an app that is a non-code based UI tool
• The ability to prototype across all devices with ease
• You can create fully animated, high-fidelity prototypes
• Gestures and interaction functionality helps you to create impressive and robust prototypes, helping to successfully communicate ideas to product managers, other designers, developers and the client
• Easy drag and drop iOS and Android UI elements allow you to quickly design beautiful interfaces
• You can create the user journey through simple ‘point and click’ screen transitions
• Proto.io allows you to upload your Sketch and PS files, maintaining the layer structure, it also integrates with Dropbox sync, allowing you to keep your designs up-to-date
• Prototypes can be viewed in a browser or sent to mobiles using the Proto.io app for feedback
• Commenting mode allows collaborators to feedback on the designs themselves, making amendments quick and efficient
• The most impressive thing about Proto.io is the fact that prototypes can be integrated with user testing software, allowing teams to collate feedback via live recordings, questionnaires and tasks
• A healthy ‘Learn’ section allows you to keep on top of new features, guides and tutorials

Negatives:

• No live preview available
• Animations slow down, the more that you add to your prototype
• As all prototypes are saved within the cloud-based tool, you lose access once you stop paying the subscription (this rings true for the majority of the cloud-based products)
• No ability for multiple designers to work on the same project in real time

Used by:

• Disney
• BBC
• ESPN
• IDEO
• Amazon
• Evernote

 

Conclusion:

I hope that this has opened up the world of prototyping and focused your mind on which tools to choose. At Advantec, we use a mix of Invision and UXPin as these tools best suit our current needs and client base. When making this decision, it is important to choose one that is suited to both you and your clients, so sign up to the free product trials and see what feels right to you!

I guarantee that whatever you end up going for will focus your design process, improve collaboration both internally and externally and will help you to communicate concepts, user journeys and interactions more clearly. Making you more efficient and in the long run, saving you and your agency both time and money.

These tools will only improve with time and even over the last few years they have flipped the world of prototyping on its head. I can certainly see a time in the future where the design process becomes a hybrid of development with these tools playing a major role in bridging those specialisms, perhaps even AI will play a role in helping to rapidly prototype digital products through deep learning and pattern recognition, allowing the designer and developer to focus on the intricacies of the digital product process.

 

Joe Parker – Senior Digital Designer