Let’s begin with the basics: user experience (UX) design is how a person feels about using a product, whether that be a website, mobile application, or anything human-computer related. User interface (UI) design, by comparison, is all about the look and feel of the design itself; in other words, the colors or icons a person sees on the page.
While this seems straightforward, there are many free and paid tools for UX and UI, so which programs are the best? If you get an assignment from your boss and need to do a wireframe or mockup quickly, which program do you use if there isn’t one specified? Photoshop and Illustrator just don’t do the trick now for creating fast designs, but thankfully there are a few easy, intuitive programs that can help you get the job done.
Sketch
This has been one of the most popular programs for UX/UI designers to use since it launched in 2010. Sketch is used to create differently sized artboards for various browser sizes, apps, or even banners, allowing you to format your design to fit the multiple standard dimensions on the fly. One of my favorite aspects of Sketch is linking it to InVision, where one can create a prototype of their artboards. Sketch isn’t trying to compete with larger, more established programs like Photoshop, but instead is focused on trying to make UX and UI easier with features like converting drop shadows in CSS since it saves time for developers to know exactly what code to use.
Cost: $99 for Mac users. Well worth the price!
InVision Studio
InVision first came out with an easy to use prototyping tool that syncs with Craft directly on Sketch. This year, they came out with their own design program—Studio—which is still in early access. I asked product manager Karla Smagorinsky from InVision, who works directly with Freehand, to tell us what Studio can really do: “Studio is a new type of screen design tool that gives designers the power to quickly create high-fidelity prototypes with rich motion and microinteractions that leave nothing open to interpretation. This means designers and digital product teams can have higher quality feedback sessions with both internal stakeholders and external users, allowing companies to move faster and release higher quality products.” Studio differentiates itself from Sketch by rapid prototyping, and adaptable layouts; overall, InVision has an ecosystem of great tools like Freehand, Inspect, Design Manager System (DSM) and many more! This is a great tool if you need to link up two items (like wireframes and prototyping) in the fastest way possible for a low cost.
Cost: Free for both Studio (only on Mac) and prototyping tools (web-based)
Adobe XD
Adobe had to put themselves back on the market in 2015 after Sketch came out. Adobe XDis still in beta, seeing what works and what doesn’t work for its users. Some of the best features are on a repeat grid, so a user can select objects and then repeat those objects along an x- or y-axis. Adobe has also created reusable symbols, so it’s easier to place objects in multiple artboards. The best part of having a product like Adobe XDis that it’s integrated into one platform so it is easier to get feedback and iterate based on your designs.
Cost: $9.99/month for the standalone product (works on Macs and Windows) or $49.99/month as part of the Creative Cloud Suite
Those are the three best design tools out on the market right now. While there are other options available, these three remain the most competitive in the market and are regarded as the standard for our designers. The tools you’ll need will ultimately depend on what you need to do and how fast you need to do it, but any of these would be great options to consider!
Be sure to look out for our post on the best prototyping tools being featured soon on the InRhythm blog.
