The UI Tools We Love (and Love to Hate)

, ,

Do a quick search and you’ll find a whole score of tools that UI designers love. You know, posts that read, “Top 21+ UI Tools for UI Designers in 2018”.

Even if UI/UX design is a relatively shiny-new-kid-on-the-block, it’s at least been around long enough to have an entire smorgasbord of tools (and sacred as well as unholy trends) to make things better, faster, easier.

Anyone else thinking about that Daft Punk song?

Like programmers, tools for UI designers come down to personal preference, much of the time.

It’s like fanboys yelling at each other from across a comic con hall out here: we’re all believers in something and we’re trying to convert as many people as possible.

Just kidding (kinda).

We share with you seven (it was incredibly hard picking and the contest got really ugly…like Survivor-level ugly) tools we love and the one that made our “hit list”.

The Love List — Tools

1. Webflow CMS

UI Design

User Interface Design

Webflow CMS is such a sleek, inclusive, web-based tool, it had to start off the Love List.

You get two projects for free and the next tier up is a $16 monthly subscription fee. And what’s packed in that $16?

A code-free experience of designing, building and publishing websites (either for yourself or for clients) using its visual-only interface.

You can literally design things exactly how you see them in your head without worrying about finding the scripts and codes to match. Responsive designs and animations are built right in and the app integrates with Slack, Zapier, Google Drive and more.

2. POP

It’s a little less convention and maybe you expected us to rave about Balsamiq or InVision next. Honestly, those tools get enough attention (and rightly so!) as it is, so we thought we might pull your attention to this neat-o, mobile-based prototyping machine.

POP was recently bought over by Marvel but has kept its integrity and functionality intact. And what is that functionality?

With POP, you’re able to transfer your paper sketches into digital creations.

So the next time you’re having a heated moment of inspiration and find yourself sketching furiously in your Moleskine, know that you can quickly transfer these, add gesture controls and interactions to your prototypes.

Caveat: the fidelity is low but it’s perfect for pencil-versus-pixel designers who love the old-school feel of paper but tech’s still their bread-and-butter.

3. UXPin

UXPin is great for beginners as well as more seasoned UI designers.

They’re really focused on bringing education to the UI industry and frequently put out info products, white papers, run surveys, and provide valuable learning tools and content to get started.

Granted, it all drives back to coaxing you into using UXPin, but its beautiful functionality and features don’t really require hardcore convincing.

UXPin includes options for paper sketches, wireframes, mockups and prototypes, allowing the designer to transition easily between any of these and test out ideas fairly quickly.

It also syncs beautifully with Sketch and Photoshop, meaning that you can create a high-fidelity prototype from the wireframe.

4. Sketch

Work in Sketch

Sketch screenshot tool

When Sketch first came out, die-hard Adobe lovers found themselves falling in love and quickly renouncing their old CS-loyalty, much to their surprise.

While they can’t quite bring themselves to break up and let go entirely, Sketch is still their second first-love. And why does Sketch keep winning popular opinion and professional preference?

It offered designers one of the first, real, robust alternatives to Photoshop and Illustrator. It was a heavy-hitter and designers were amazed they could actually take it seriously.

Built-in grid systems, intuitive shortcuts, crystal-clear clarity, super-small file sizes (compared to Adobe’s massive documents), and a community with hundreds of plugins for app extensibility are just some of its delights.

5. Figma

UI tools

Figma is the prototyping tool that allows multiple UI designers to collaborate across platforms. In real-time. If you’ve used Sketch before, Figma looks a lot like Sketch and works like it too.

It allows you to create fast changes and mock-ups as well as make changes to a layout of a page on the fly. You can use the tool across desktop, mobile and tablet.

Flexibility is Figma’s selling point.

6. Userflow Pro

Let’s step away for a moment from apps. Sure, we want to share what we love…but we also want to share things you can discover and learn more from.

That’s why we love Userflow Pro. Everyone gets all hung up and goes gaga over high-fidelity wireframing, prototyping, creating mockups and all that jazz. Every app has their own set of benefits and, as long its UI’s basic functions are covered, everything else is just “gravy”.

We love Userflow Pro because it gets to the heart of what we’re trying to do with UI: answer questions, get feedback and improve user flows. Userflow Pro is essentially a library of screen recorded user flows from multiple apps.

Ever wondered about the on-boarding processes of apps you’ve never used or what the analytics look like on a new app you’ve heard about? Chances are, you can find the recorded flow in Userflow Pro’s searchable library.

It allows current UI designers do the background research they need to do their job more effectively and UI designers who are just getting started an in-depth look at best practices for a user flow.

The Hit List

7. Form

We don’t hate Form…but it’s definitely complex and not as intuitive as many of the other apps we’ve come to love.

The whole idea behind Form is to allow “designers to work on the production side of an app,” according to RelativeWise coder Max Weisel.

While there are definitely tutorials that can get you up to speed, we also think part of the whole point of an effective UI tool is that, above all others, a user flow should feel fun, seamless and intuitive.

Functions like simple repositioning in Form is definitely not that. You also can’t create graphics in the apps (are you asking, “wait, but why” yet?).

The thing with Form, however, is you’ll use it when you need it. It’s clean and unique but not applicable to all UI designers.

Based on our list, we might be preaching to the converted or we’ve just seriously incensed you. Either way, this list, like all tools and trends in tech, is thankfully bound to change.

It’s a testament to the speed of our industry (and maybe user attention spans?) that the next “big thing” is never more than two iterations away from the market.