Like many other design niches, UI designers are blessed with an array of tools that can help to make their work easier.
We spoke to Golf, who is a Senior Graphic Designer and Ira, who is a Graphic Designer Intern, and asked them to share their experience while using these tools.
Here’s what they had to say of some of the top tools that UI designers are using in 2017 :
Adobe XD
The Adobe brand has come to be associated synonymously with design tools over the past few decades, especially when it comes to their offerings of Photoshop and Illustrator.
Adobe XD (also known as Adobe Experience Design CC) offers design and prototype tools, that UI designers can use to build high-fidelity prototypes.
Users rave that the learning curve for this tool is minimal, but one of the often talked about cons is that it’s not productive when used for building widgets.
Nevertheless, this is a slick tool that UI designers can use to effortlessly share prototype with developers, and letting them build according to your specifications.
Official site: http://www.adobe.com/sea/products/experience-design.html
“It’s a really clean application with minimal interface just like Sketch. The tools are simple which are easy to use. I got used to it in a short time as it’s similar to other Adobe programs.
I really love the Repeat Grid feature. It allows you to create content grid such as article list and products list.How you set parameters for the transition between the screen is easy and it allows you to share it online by sending the link to your client.The things I don’t like about XD is you can’t add interactive elements on top of your designs.
For example – you can’t show and hide the menu by click/tap on hamburger icon without creating the new screen or you can’t do the light box.”
Golf, Experienced UX Designer at WCB Agency
“Adobe XD has the cleanest interface possible and it is probably the easiest design tool to learn as a beginner. They also provide a tutorial in the beginning for the users to get accustomed with the tool, which I found very useful.
The UI layout is pretty similar to Sketch. Though Adobe XD doesn’t have the Symbols feature, they have the Repeat Grid feature which I think is very impressive. Prototyping in Adobe XD is also very simple.
The winning point of this tool is to be able to design and prototype on the same platform. It makes the whole UI design process very quick and easy. What I didn’t like was it doesn’t offer a layer control section like most of the other design tools do.”
Era, UX/UI Intern at Web Courses Bangkok
Want to get an external review on Adobe XD? Navigate here.
Marvel
With this prototyping tool, UI designers can create screens directly in Marvel, or simply add images from Photoshop.
It’s also extremely easy to add in transitions and gestures so that the prototype feels just like a website or app. For designers who are working on highly confidential projects, there is also a neat feature for you to password-protect your project.
UI designers who have tried Marvel mostly have praised this prototyping tool for its simple interface that is user-friendly. Try it for yourself today and see how less is more!
Official site: https://marvelapp.com/
“Marvel is a web application and it is easy to learn. I really like the interface design of this app. You can upload images of multiple file types from Google Drive, Dropbox, or Sketch.
And also you can change the design in real time by adding link to the plugin. They prepared a design space if you want to build it online too. Once you add the images, you can edit them using simple tools.
The prototyping and transitions are easily included overlaying interactive element on top of your design as well.While working as a team, you can share and comment things online in real time like a chat system.
This makes it easier to share and add comments so your colleagues can work through.”
Golf, Experienced UX Designer at WCB Agency
“Marvel doesn’t need any downloads and there is no installation involved as it is a web based tool. I liked the simple layout Marvel offers.
From the interface design to the layouts and the tools, Marvel kept everything very simple. It made me feel very comfortable to use it.
I loved the presets that they have and was amazed at how they made the designer’s life so easy. Designing anything in Marvel took really less time even for a beginner like me.“
Era, UX/UI Intern at Web Courses Bangkok
Want to read an external review on Marvel? Here’s a great place to get started.
Sketch
Sketch is a Mac OS X-exclusive tool that offers a great set of UI design-orientated features. If you are a seasoned UI designer, chances are that you have heard of Sketch before.
Often compared to Photoshop when it comes to photo editing and manipulation capabilities, Sketch is preferred because it is much easier to utilize than its big-name counterpart.
There’s also the Sketch Mirror, a feature which allows you to preview your artwork on your devices. All in all, this is a prototyping tool that allows you to create design that allows for high visual and interactive fidelity.
Official site: https://www.sketchapp.com/
“Sketch is the most popular app for UI design for now. The clean interface and the user-friendly tools make it very comfortable to use it.
You can create vector in complex icons also.
This one is quite similar to Adobe Illustrator, but they have kept only the necessary features such as shadow and stroke and accessibility sidebar as a control panel.
Unfortunately, they don’t offer prototyping and animation features. However, you can install the plug-in or sync with other app instead.“
Golf, Experienced UX Designer at WCB Agency
“Being the top-ranked design tool of the recent times, Sketch really does live up to the reputation it has achieved. I found it very simple yet powerful. It is like a mixture of photoshop and illustrator but it is much easier to use due to the simple interface it has.
Era, UX/UI Intern at Web Courses Bangkok
Proto.io
One of the most outstanding things about Proto.io is its variety of functions that designers can use in creating prototypes, but in the same breath, some UI designers think that it can be a little taxing to find the setting needed since everything works by clicking buttons and selecting values from the lists available.
Nevertheless, there are many standard UI elements (customizable) present in Proto.io so for those who want to create easy mock-ups, you won’t go wrong with this tool. However, if you are looking for live preview, you won’t be able to find this in Proto.io.
Official site: https://proto.io/
”This application makes it easy to make a quick mock-up because there are standard UI elements which are available in the library. I love how I can design multi screens within a single project.
I wish it could have a feature to live preview and it did not slow down after adding too many interactive elements to it, then it would be nice.“
Golf, Experienced UX Designer at WCB Agency
”Proto.io also doesn’t require any downloads which makes it easy to get started with. I found Proto.io very organized. All the necessary tools needed for prototyping is there in the same place.
I did not have to spend time looking for anything as everything was very easy to find. It has a lot of functions but everything works as drag and drop making it very easy to use. What I disliked about this tool is the fact that they don’t have any live preview.“
Era, UX/UI Intern at Web Courses Bangkok
Want to read an external review on Proto.io? Listen to what TechCrunch has to say.
InVision
When it comes to web and mobile prototyping, it’s hard to ignore the popularity of InVision. Used to create design for many big brands across the world, you can get access to powerful design prototyping tools such as adding transitions and gestures.
UI designers also love InVision for being a slick tool that allows sharing and collaboration on design drafts among design team members.
There are a lot of integrations you can enjoy for InVision such as Basecamp, GitHub, Google Drive, Dropbox, and more, so you know that the project management workflow is as easy as you imagined it to be.
Official site: https://www.invisionapp.com/
”InVision editor is just like Marvel as it is a web-based tool as well. The navigation bar is familiar to other websites that make you feel convenient with the interface.
InVision provides a few preloaded demo projects, it makes it easier to understand the system.. It’s a better way to get used to the app rather than leaving you to start with a blank space.
For the preview screen, it shows an actual web browsing or phone screen experience. After you have done the editing you can add the comment spot and it acts like a task that you can come back and edit to the right point.“
Golf, Experienced UX Designer at WCB Agency
”InVision took a long amount of time to load, initialize, and process a project from Sketch.
It took quite a while for me to get started with it – which I found disturbing.IThe good side of the application is its simple and clean layout with only a few tools located at the bottom of the screen. It consists of 5 modes – preview, build, comment, inspect, and history mode, giving a little description about what each mode is for when you hover on them.
It really helps a lot to get on with the tool if you are a new user.“
Era, UX/UI Intern at Web Courses Bangkok
Want to read an external review on Invision? Here’s a user’s interesting point of view.
Zeplin
Zeplin is the answer when we think about enhancing the collaboration between designers and developers.
This platform helps UI designers maintain up-to-date style guides, generate asset sizes automatically, tell team members about design changes in real time, and communicate with developers with exceptional ease.
So when you are thinking of going beyond the design workflow, Zeplin will be exactly what you need to bring your design to fruition.
Official site: https://zeplin.io/
You may not to be able to do prototyping on this tool. But this is a powerful tool that helps designers communicate with the developer easily by using it.
It takes time to design and arrange things. This tool is easy to use, you don’t need to spend a lot of time learning it. It is fast and more detailed than other methods.“
Golf, Experienced UX Designer at WCB Agency
”I personally did not like using Zeplin as I thought it is not a very useful tool.
It only covers collaboration between teams, keeping the functions very limited, whereas so many other tools allows collaboration along with designing and prototyping at the same time.
However, if you are only focusing on the communication aspect, Zeplin is a great tool to use for easier and faster interactions between designers.
The interface and dashboard has minimal and simple design but I was lost as a beginner and did not know how to start or what to do.“
Era, UX/UI Intern at Web Courses Bangkok
Want to read an external review on Zeplin? Here you go!
Justinmind
Want to achieve high-fidelity wireframes or interactive app and website prototypes, while enjoying a flexible set of customization options?
Then you need to be introduced to Justinmind, a prototyping tool that is highly popular with seasoned UI designers because of its ability of building mobile app prototypes that involve heavy gesture-based interaction.
If you want your prototyping tool to generate HTML code for the prototypes you create, Justinmind can handle this task too. However, it is often not recommended for beginning UI designers because there is a moderate learning curve to expect here.
Official site: https://www.justinmind.com/
”Justinmind is a free app you can download from the web. Just in mind is available for both MacOS and Windows.The app allows us to choose what platform we are designing for. After selecting the device/platform it also offers example templates or you can start fresh if you know where to start.
For the interface – it’s very similar to the Adobe tools, so if you are familiar with Adobe program this will be easier to use. The downside is you have to get used to the program if you have not used it before or have not ever used Adobe. Also, the free version is very limited.“
Golf, Experienced UX Designer at WCB Agency
”Justinmind has got to be the one of the greatest prototyping tools I’ve used. I loved everything about it. It gives you a step-by-step start where you choose the platform or device and basic settings for your prototype.
The main interface is extremely user-friendly which got a widget section where all kinds of components and layouts are available, an outline section to organize the layers, and a screens section where users get to add new screens and view all the screens.
It makes it very easy to link the screens and add hotspots. The best part is the widgets section – consisting of a vast library which covers literally everything you will need to create a sophisticated prototype.
It might not be as simple to use if you are not familiar with any design tools but they do provide a quick tutorial to help beginners.“
Era, UX/UI Intern at Web Courses Bangkok
Axure
Arguably the most comprehensive prototyping tool mentioned in this list, Axure designers allows UI designers to create clickable wireframes and interactive prototypes.
Adding interactions and ready-made components from the Widget libraries are easy on Axure, and if you are using the Axure RP Pro, then you will have no problems building complex prototypes.
However, those who are working on mobile prototyping will not find Axure a good tool, since it is not mobile user-friendly. On the other hand, if you are working on web and desktop applications, Azure is probably the best rapid prototyping tool you can lay your hands on.
Official site: https://www.axure.com/
”Axure allows free 30 days trial and it’s available for both MacOS and Windows. If you have not used the program before you might be lost since their is no tutorial or guide upon opening.
You can be quite lost on thinking where to start. It does have an option to share the design online but you will need to create an Axure account.
Axure has a pen tool that allows you to draw vectors shape to your design but then it converts the shape to png where nowadays modern browser supports svg, Axure has missed out on that.
With many great prototype tools out there i think i will give Axure a miss.“
Golf, Experienced UX Designer at WCB Agency
”I found Axure very complicated to use as a beginner.
It has got so many features and terms which are completely unknown to me. It is a powerful tool where you can create nice interactive wireframes but you need some previous experience to be able to do that.
I felt that the learning curve is very high for Axure comparing to the other tools I have tried. Upon opening up a new file or project, they provide a default folder containing few pages which I thought was unnecessary.
Overall, I did not like the interface and prefer to have something less complicated.”
Era, UX/UI Intern at Web Courses Bangkok
Want to read an external review on Azure? Check this post by Smashing Magazine.
Figma
If you want to turn your ideas into products faster, Figma is the perfect collaborative interface design tool to get started with. What sets Figma apart from the other design tools is – it offers real-time collaboration with others just as Google Docs, which makes it very easy for designers to collaborate with other designers and the team.
Also, unlike other similar tools like Adobe XD or Sketch, Figma runs completely on the browser and there is no installation involved at all. It allows all your design work to be produced, shared, and communicated in one place.
Official site: https://www.figma.com/
”Figma is an online tool so this does not require you to download the app, you can design right from the browser.
Upon signing up, Figma has a tutorial guide through the system which is handy. You can just drop your sketch design file to Figma and it converts it to a Figma file for you, this is handy if you use Sketch.To use Figma templates you do need WebGL on your browser which is a pain to install additional add ons. Figma offers real time collaboration just like google docs.
Currently we have to wait and see how widely Figma is adapted in the community, it does have a lot of element which is like sketch. If you do not want to pay for Sketch I think you can give Figma a try.“
Golf, Experienced UX Designer at WCB Agency
”I found Axure very complicated to use as a beginner.
”I thought getting started with Figma was very easy. It felt like I was using a web-based version of sketch. The interface is clean where only the necessary tools are present.
As Figma runs completely on browser, it has got some drawbacks. Some of the functions took really long time to get implemented. The tool even froze completely at a point.
It can be concluded that it is not an effective tool when it comes to dealing with large files as it slow things down. It does however is a very special tool offering real-time collaboration – helping designers to work and communicate better.“
Era, UX/UI Intern at Web Courses Bangkok
[text-blocks id=”59315″]
Want to read an external review on Figma? Check this out!
As you can see, there are many UI tools out there waiting to be discovered. Whether you are looking to switch to a better prototyping platform, or want to manage your design project workflow better, you can be assured that these tools will make your life as an UI Designer easier, enhancing your productivity. So, open your eyes, free up your mind, and go experimenting!
