UI/UX Design Tools

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
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.

PROSCONS
  • Price: One time payment of $99
  • Rendering is close to web/app builds (optimized for mobile/web dev)
  • File size: Keeps file size low (it’s vector-based which improves the speed of the program)
  • Built-in grids to facilitate designs
  • Fast and lightweight application
  • Multiple dartboards
  • Advanced measurement
  • Non-destructive tweaking
  • “On the fly” when working with end-users or stakeholders
  • Easy to edit
  • The community is quite new and many resources are not as available
  • Lack of shortcuts
  • Has no internal library
  • Poor color management
  • Sketch “symbols” are all the same size and modification of one affects all versions
  • Occasionally buggy
  • One zoom level
  • Available only for Mac (for now at least)

Adobe
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.

PROSCONS
  • Adobe has an incredibly vast community of designers, artists and freelancers
  • Lots of shortcuts
  • Internal library
  • Great color management system
  • Smart objects
  • Many support channels
  • Multiple zoom levels
  • Illustrator: exceptional for working with vector-based illustrations
  • Photoshop: exceptional for working with bitmap-based graphics
  • Supports more than 30 different file types
  • Available on both Mac and Windows platforms
  • Adobe products are usually more expensive, with a subscription-based service per application
  • Adobe files are usually larger in size, which makes it harder to transfer files and can lower performance speed
  • Less optimized for web/app rendering (optimized for photographers)
  • Creation of own grids
  • Single artboard
  • Standard measurement
  • Destructive tweaking
  • Requires designers to be experts in multiple applications versus just one
  • Slower workflow

Conclusion
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.

Prototyping

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

Invision
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.

PROSCONS
  • Easy to learn
  • Fast
  • Intuitive
  • Supports mobile touch gestures
  • Collaboration tool: Communication through internal comments
  • Real time to-do lists
  • Desktop/Web/Mobile
  • Version history/syncing: With InvisionSync or Dropbox. Prototypes will automatically update every time one saves the source files
  • Arrangement of screens
  • Screen layers structure (visual, links, comments, and history)
  • Free to start
  • Only good for working with existing mockups. No features available for creating or modifying elements in the tool
  • Interactivity limited to hotspots or timeouts for moving between screens

Axure RP
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.

PROSCONS
  • HTML-based prototyping (i.e. no coding skills required to start)
  • Responsive web design
  • Animations and transitions
  • Gestures
  • Libraries of UI elements
  • Great training and support documentation
  • Fine-grain element interactivity controls
  • Complex interactions
  • Flexible
  • Built-in library of customizable widgets
  • Needs training and support documentation (relatively steep learning curve)
  • No device-specific templates or mockup features
  • More expensive

Justinmind
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.

PROSCONS
  • Device-specific templates and features
  • Quick and intuitive Drag & Drop mechanics
  • Fine-grain controls for adding interactivity to individual elements
  • Support for gesture-based interaction
  • Multi-platform prototyping: Provides a framework to help facilitate the process of wireframing and/or prototyping for each platform
  • HTML export: Fully functional and interactive webpage exports to best illustrate any web flow
  • Moderate learning curve: Can take some time to get oriented as a first-time user
  • Small storage: All subscriptions for Justinmind are only given 300MB of storage space, which is much less than the amount provided by the competition
  • Customer support: Justinmind has an extreme lack of customer service which brings the product value down in terms of support and usability
  • Technical support: While its website has sections like an FAQ, it would be better to have more appropriate means to contact customer support as quickly as possible, like live chat or telephone contacts

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.

PROSCONS
  • Ability to animate interactions
  • Timeline feature provides a visual overview of every property that is animated
  • Intuitive UI because of native Mac OSX elements
  • Quick to learn if you are accustomed to artboards and layers
  • Easy to use
  • Visual way of prototyping
  • Can output to video and animated gif for presentations
  • Great resources available from the Principle community
  • Great response time and support from the Principle team
  • Built-in interactions and events
  • Workflow is fast
  • No Sketch or Photoshop import
  • No 3D transformations
  • iOS only
  • Principle Mirror app required to open Principle documents on devices
  • No animation value export which makes it difficult to share specs with developers
  • Not great for testing prototypes with users

Conclusion

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.

Dynamic Leap

Written by Dynamic Leap

Dynamic Leap is a Vancouver based software development company building high quality native mobile applications for iOS and Android, responsive HTML 5 mobile web apps, and hybrid native/HTML 5 apps.

Tags: , ,