With the proliferation of mobile apps and the rising expectations of mobile consumers, great user experience design is essential to the success of any app. The role of the User Experience Designer has been rapidly evolving. The discipline is becoming more mature as people continuously strive to understand and craft intuitive and engaging user experiences.
There is a general understanding that the “think it, build it, put it out there” process fails. Now we prototype and test. By the time user flows, wireframes, and UI mockups reach a developer’s hands, they have been thought through, they have been seen by stakeholders and end-users, and they have been tested.
As the role of the User Experience Designer has grown, the tools of the trade have evolved too. UX Design tools have adapted to be easier to use while still being powerful and versatile. Tools that were once heralded as the industry standard are being overtaken by new players that are rapidly growing and nurturing new design directions and standards.
This post explores how some of these newcomers stack up against their predecessors, and which design tool is recommended depending upon use case. We’ll look specifically at tools for wireframing, creating mockups, and prototyping.
The terminology used in design documentation often gets used interchangeably, so let’s clarify some of the differences.
Wireframes and Mockups
Think of wireframes as a low-fidelity, simplified outline of your product or app – the skeleton if you will. They loosely shape the final layout of the product, providing a reliable idea of where everything will eventually be.
Next comes the skin on the wireframe – the mockup. These are strictly visual. This is the deliverable where designers define and solidify all visual decisions and experiment with design variations. Occasionally (and optionally) designers will create pixel-perfect design drafts at this point. Both processes help set the stage for development by building out and testing content structure and strategy to ensure coding is on the right track.
Many of the new entrants to the design tool market failed to facilitate the needs of both the wireframing and mockup stages, and as a result they never really caught on to become essential tools in the production workflow. And some established tools like Omnigraffle, which is great for wireframing but less adequate at interface design, are at risk of losing their previously dominant market position by not quite evolving to meet current needs. In a new vs old, David versus Goliath style market match-up, two products have emerged as the go-to tools for early phase design:
Sketch 3 vs Adobe (Photoshop & Illustrator)
Sketch (David in our analogy), was made specifically for web and mobile UI/UX designers. Previously, designers used 3 tools for 3 different needs: Omnigraffle for wireframing, Photoshop for user interface design and Illustrator for vector, logos and print. All three can now be fulfilled more simply in Sketch. Using one application for these tasks means less back and forth and less worrying about translating your designs into a new format. Its full suite of features make Sketch a formidable challenger in the design race.
Then there is Adobe (our Goliath) with its long history and strong establishment in the creative industry. Photoshop and Illustrator have long been tools in every web/app designer’s toolbelt. It’s products have become the file format standard and go-to tool for graphic design, film and photography. The question now is if this creative industry staple can keep up with changing needs and new competition in the UI/UX design segment.
Although the Adobe Suite of products has a well-established foothold in the creative industry, it has yet to truly dominate user experience design with an application that accommodates current demands in the industry. In contrast, Sketch has become the preferred tool for most web/app designers. It’s simple yet powerful, and even though is has some bugs to figure out, it still gets the job done faster and smoother with its UI/UX design-oriented set of features and its devoted community that keeps taking this tool forward.
While Sketch is a great fit for the needs of UI/UX designers, it does not have everything. Photoshop and Illustrator are still best for graphic design in the context of print, advertising, or photography. And there will always be those who feel married to the Adobe way.
It’s with the prototype that designers breathe life into their creations. Prototypes test interface ideas and generate the feedback necessary to keep the design process headed in the right direction. Prototypes can (and usually should) be used during every stage of the design process, and can be in any form of fidelity. Different prototyping tools can be utilized to complete and accomplish specific prototyping goals.
Invision vs Axure RP vs Justinmind vs Principle
The newest and the most influential of the three is Invision. It enables designers to create flows that allow for simplified screen-to-screen transitions. Invision provides one of the simplest and most efficient routes to rapidly prototyping and testing products, be they web or mobile.
Known as the industry standard for design prototyping, Axure is recognized as a veteran tool. It has a comprehensive feature set and is customizable, enabling designers a higher degree of control in fine-tuning specific interactions as they go through the user flows.
As a flexible prototyping tool, Justinmind is available on both Mac and Windows, and works well for both simple click-through prototypes and more complex interactions. Compared to the other two prototyping tools, especially Axure RP, Justinmind is a better choice to build up comprehensive and interactive mobile device prototypes. Designers can focus more on designing without the need for coding or programming to create interactions. In addition, the clear and modern design of Justinmind helps designers build elegant and logical creations.
Principle for Mac
If you are looking to design a short animation or a slick interaction, Principle for Mac has been getting a lot of attention for its ability to provide more finite and robust control over transitions. Principle’s approach provides timeline-based control over individual elements between screens and the depth of control makes it well suited for creating and testing more complex animations that focus on functionality, like navigation.
Each of these prototyping tools has their own area in which they shine. If you need realistic prototypes, Justinmind is recommended. If you prefer the comprehensive prototypes, Axure is recommended. If you like fast prototypes, Invision is recommended. If you are working out complex animations, Principle is recommended. The type of prototype a designer ends up choosing will ultimately depend on the type of work that they are trying to accomplish, and whether that work is better represented through interactive screen flows (Invision) or whether it would also benefit from displaying more complex interface interactions (Axure, Principle and Justinmind).
What does the future hold?
This article covers only a handful of the new products that have entered the market with dreams of disrupting industry mainstays and earning the devotion of the design community. Each have built features that streamline workflows and provide tools that enable UI/UX designers to push into new territory. As these tools evolve, it will be interesting to see if consolidation occurs and a clear winner emerges to provide a comprehensive set of features that can take designers through their entire journey without having to jump between different toolsets and file formats. If one company does succeed in achieving this, will they be able to be feature-rich while maintaining the ease of use and speed of workflows that some of these tools provide today? With active feedback from their user communities, there’s probably no better industry to take on that challenge.