Basically, it (Photoshop) would have been a perfect all-in-one UI/UX tool, but lack of modern features we need now for faster product designs and development have knocked it off the pedestal.
User interface mockups provide valuable information for design flow. However, unlike wireframes, they need to provide visual details such as typography, color, image treatments, sizing, easy-to-use mobile and desktop interactions with consistent components that follow styles guides or branding guidelines (mostly applies to large and developed companies), which can be challenging to do on different platforms.
Let's be honest for a second, it's a very-very nice thing that now we have a wide variety of software tools specially tailor-made to make design UI/UX mockups easier created in the past 3 or 4 years. Considering integrations with the cloud environment and live client interaction. Here are the most recent software tools for this purpose that I have personally utilized for various projects.
Figma
Figma is a new player and insanely fast-rising rock star in the UI design community. The main advantage that it offers is that almost everything you need is consolidated in one software package. It has multiple awesome built-in tool kits that enable you to build prototypes and designs that are ready for developer's use, fast.
Another notable advantage of this tool is that it is highly collaborative AKA cloud-based with live interactions: backed up every second you are working and making changes - no more ALT+S's. Several people can simultaneously work on one project, allowing you to see other co-workers' progress and input on a real-time basis. Your clients are able to view changes live while they are happening (yes, that means you might be doing changes while you are giving presentation live on feedback - good/bad/worst idea ever?). I see this as advantage on projects where I was making wireframe presentations to explain user flow.
However, Figma is far from perfect. It can be significantly slow when dealing with large files. It also has no built-in animation tool. It's offline use needs much improvement because if you experience an internet connection interruption, you must keep the window open to prevent your progress from disappearing. If you are worried about your progress been saved, this might be the time to reconsider this tool.
Figma is offered for free if you are an individual user. If you want to access their collaboration feature, you can choose between their professional and organization plans, which cost $12 per editor/month and $45 per editor/ month, respectively.
Adobe XD
Many would say that Adobe CC has been at the top of the design software industry for several years now with their cloud-based platform. Adobe, in general, has been a dominant player for most designers, content creators and film industry for decades for a good reason. Every new tool and feature they have been introducing while making better has benefited designers in many ways.
Adobe XD enables you to draw, reuse, and remix vectors to create interactive prototypes, screen layouts, wireframes, and production-ready output. Aside from that, since it is part of the Adobe software family, integration for After Effects and Photoshop is just a few clicks away, which is a significant advantage.
There is no doubt that the Adobe XD software is powerful, but it also comes with major downsides. If you want to see your prototypes live for smartphone designs, you can only do so on Mac OS devices. There is also no option for you to be able to make customized shapes.
Unfortunately, Adobe XD does not offer a free trial plan, but its pricing starts at $9.99 per user/month. This is somewhat more affordable compared to other software packages.
InVision
It actually pioneered the whole idea of online presentation to a client with a link and ability to leave reviews before Adobe and Figma joined the club and made that even better.
InVision is one of the top choices among softwares for designing UI/UX mockups. This is because it has constant updates of new helpful features that enable designers to create prototypes more efficiently. They also have a very useful and straightforward management page where you can organize design stages into a status workflow.
However, it is not without criticism. Many users complain that its Craft plugin, which is used to push screens from the screen design, is often buggy, impeding workflow. It also has a limited transition tool, which makes it not great for animation prototyping.
I have used InVision primarily because it was very nice and quick top make presentations that allow client to quickly review and leave feedback online. The limited amount of design tools and in general, lack of efficiency when switching between revisions and designs, and lack of collaboration within a team (connecting people and having different versions of the project became real pain in the ass) quickly led our team to switch to Figma within 5 months, and we have not regretted that decision since.
The pricing for the Invision starts at $15.00 per user/month. However, it does have a free version and a free trial for their paid subscriptions.
Sketch
Sketch has several similarities with Photoshop. Both allow you to edit and manipulate photos. However, Sketch takes it another step further by making it easy for vector shapes to adapt easily to changing layouts, sizes, and styles. This can save you time from tedious hand tweaking the shapes one by one.
Without a doubt, Sketch is a front-runner for designing UI/UX mockups, especially with photos. However, it is strictly available for Mac OS, and it does not have in-browser or app alternatives.
For a one time payment of $99.00, individuals can get its Mac app and one year Mac app updates. The following year, you can renew your subscription for $79.00. If you divide the cost per month, it can be considered the most affordable paid software. They also offer a 30-day free trial.
Axure
Axure is a powerful tool that enables you to do prototyping without coding. It features dynamic content, conditional flow statements, math functions, data sorting, adaptive views, and animation. With this software, you can also share your prototype with your client and teammates with just a few clicks of a button.
The downside of this software is that its learning curve is quite steep, so if you are a beginner in the industry, using this will definitely confuse you a lot. Aside from that, its code generation is just enough for prototyping but not for functionality.
Axure software offers three paid plans. The pro subscriptions are worth $29.00 per user/month; the team subscription costs $49 per user/month while the enterprise subscription, which includes on-premise solutions, costs $99/month. All of their plans are billed yearly, making it one of the most expensive software in this list.
Zeplin
Zeplin makes the turn over of design to the technical team more manageable. It has an easy to share feature and allows effortless collaboration. Its integration is also ideal if your team is currently using Slack or Sketch.
Although it allows sharing of design to other people easily, there seems to be no way to download the file, which means that the transfer is solely done online. It also needs improvement in slicing and exporting SVG assets.
The paid subscription for Zeplin costs $17.00 per user/month. However, you can experience it first on before fully committing by using their free trial.
Final Thoughts
Hopefully I won't be the only one to still be a huge of Photoshop for mockups and design. It is still the most complete application, in my mind, that offers the most diverse and polished collection for tools and features. You can get down to the granular control over any raster elements on the canvas and provide the highest quality if you need to work with high definition screens. The biggest knocks are huge file sizes, no cloud control and no online sharing feature that will let you quickly share and get feedback to your client or your team. Basically, it would have been a perfect all-in-one tool, lack of modern features we need now for faster product designs have knocked it off the pedestal.
Indeed, there are plenty of useful tools that fit different needs in designing UI/UX mockups. They are offered at different price points as well, but most of them have free versions that will allow you to do basic things without any cost, which can be considered a good deal.
References
https://www.apptentive.com/blog/2019/10/22/best-ui-design-tools-for-prototypes-and-mockups/