Best UX/UI Design programs and applications 2020
Traditional programs for graphic design such as Photoshop and Gimp have since multiple years back seized to be the most optimized applications for UX and UI design. Those applications were not designed towards the digital interface as we know it today, even though they’ve gotten many useful updates.
Most UX/UI designers today use programs created specifically for digital design towards websites and apps and the most popular ones are:
The programs above are all created for designing websites and apps. That means that they’re much better for creating vector shapes, layering, and prototyping. Many of them also have built in functionalities such as designer-developer handoffs and symbol systems. And some of them are dedicated towards micro-animations and interaction design.
Designer-developer handoffs is the process of which a designer presents the mockup and design to developer for them to implement. The developer needs to understand the design to be able to implement it correctly. Not only the correct colors but also the functionality such as prototyping between screens and animations. Features that assist such handoffs are for example ready made front-end code from the mockups e.g. color-picking tools from the mockup, CSS for buttons and shadows and React code for components. Another feature can be apps or browser interfaces where multiple people can comment and inspect different elements of a design. This is useful for feedback between designers, clarifying questions from developers or critique from stakeholders.
Symbol system / Component system is a functionality where you can create symbols or components from a graphical element such as a button. The shape of the bottom (border-radius and paddings), the color, the hover state and more are all saves as one component/system. From this you can build entire libraries of graphical components that represent the products brand and design system. Whenever a company builds as Design System it becomes necessary to build components to work more efficiently and to make sure that everyone on the team, whether designer or developer, always uses the same design guidelines.
Prototyping and animation are important for refined user experience and interaction design. They are needed to provide feedback, communicate information, deliver emotional design and make the product feel more alive. At the least, a website or app today needs prototyping (e.g. when you click on this button, you are redirected to this new state or screen) but motion design within UI design is increasing in popularity as companies have seen that micro-animations during interactions can have huge effects.
Which to start with?
It doesn’t matter much which program you learn first. Most of them work on the same principles and once you know how to work with artboards, vectors, symbols, grouping elements and etc you’ll easily transfer your knowledge to different application. I started with Sketch when I began learning, but today, I would’ve chosen Figma since it’s an entirely free and cloud-based application. Figma has all the functionalities you need to start learning creating mockups and prototypes. However, all the other programs are great as well.
For beginners, I would recommend either Sketch, Figma or Adobe XD. Applications such as Framer and Axure have a steeper learning curve and you may not need to be such an expert at micro-interactions when starting out. When learning design, it’s better to focus on first understanding all the basic principles of design (color theory, layouts, symmetry, usability principles, basic typography, basic prototyping and information architecture) as well as learning how to use a tool with which you can express your ideas. When advancing one’s skills it’s a good idea to start exploring animations, micro-interactions, front-end coding to understand the possibilities and restrictions of what you’re designing, design systems, component library building and more.