social network

Organization of work: the most useful applications and services for the designer UI / UX

The technical world continues to evolve, providing people with tools to solve problems in various areas. I and the authors of the original article gathered a list of useful services for designers UI and UX based on their experience and additional research.

Tools for prototyping

Sketch

The Sketch application is by far the most popular tool among interface designers. The biggest advantage of Sketch is simple and intuitive functionality. It can be used both as a prototyping tool and as software for creating icons and illustrations. The program is vector-based and allows you to work with layers and shapes that can be easily manipulated using the toolbar.

In addition, Sketch provides additional data about the layout, for example, you can see the dimensions of components and the distance between them, just hold down the [alt] key. Sketch uses hardware acceleration, so it works quickly and does not overload the computer, thus saving time (and nerves!) For designers. However, there is one feature: Sketch works exclusively on the Mac.

Adobe XD

New approaches to UI and UX design have prompted software developers to update their products and even create new, task-oriented tasks, such as structuring the layout. Adobe was no exception, so they launched their newest product, Adobe XD(eXperience Design) in 2016. He came to replace Photoshop and Illustrator for designers UI and UX and managed to get quite high marks.

This program is specifically designed for UX designers who create frameworks, interactive prototypes and vector designs. This is a good chance for Adobe fans to return to a familiar tool with significant updates focused on the design of the user interface. For those who are still new to web design, the XD interface is unlikely to be difficult. This program is now available for Mac and Windows 10 operating systems.

Figma

This is one of the most trendy tools for interface design today, which introduces innovative solutions and features for UI designers. First of all, it’s a professional tool that is based on a web service, allowing project teams to collaborate in real time, working on one page. In addition, designers can even export CSS directly inside the program, which improves communication with the development team. Figma allows you to create skeletons, prototypes and vector icons for free, simply by registering, but this only works for individuals, but teams must pay. The big plus is that the service is available for various operating systems.

Lunacy

Lunacy is not a tool for creating skeletons, but it is very helpful in this process. It is especially useful for teams whose members work on computers with different operating systems, allowing you to open, edit and save sketch files. Therefore, for different stages of the interface development process, this tool can be a way to make the work more productive and friendly for all participants – designers, developers, customers and managers. Lunacy is positioning itself as Sketch for Windows.

Notes

Notes is an absolutely free application that comes as a preinstalled program on Apple smartphones. With the release of each new version of iOS, the application is becoming more functional. Now you can customize headings and bulleted lists in Notes, create task lists with items, format text with highlighting, invite people to work together, add photos, draw sketches, protect individual notes with a password, structure all notes by topic, view all attachments at once, restore deleted notes within 30 days, fix important and frequently used notes at the top of the list, and much more.

Of course, this is not an application for creating interfaces, but personally it helps me to create a quick sketch or prototype in a hurry so as not to forget the interesting image that came to mind. In my opinion, there is nothing simpler and more convenient than the preinstalled application. This is an example where a basic program can be better than many other (even paid) third-party counterparts.

Interactive prototyping

Marvel

Marvel is a free cloud tool for interactive prototyping, which does not require code writing skills. You can download skeletons from Sketch and Photoshop or even take a picture of a sketch made on paper, and then create realistic prototypes of mobile applications right on the site and share them with any users by sending them a link to the compiled interactive prototype. In the free version, only 3 projects are available for download, but this is enough to quickly create an interactive application prototype and get a response. In addition, you can get a paid premium plan with an unlimited number of projects and comments along with the removal of Marvel branding and other additional features.

InVision

This is a free tool for creating interactive prototypes. InVision has gained popularity because it allows you to easily import files from Sketch or Photoshop and create an animated design. An interactive prototype in InVision looks like a real project, because designers can link pages to each other, simulating the use of a real website or mobile application. In addition, InVision helps to improve the feedback process, allowing you to write comments directly on the prototype.

Another feature is the organization of user interface components in different columns, showing the development status: “make”, “in progress” or “approved.” Thus, the client and the designer can more effectively manage the workflow.

Principle

This is a fairly simple application that is aimed at creating an animated design of the user interface. The distinctive feature of Principle is that it can work even in standalone mode, so your progress does not depend on the quality of the Internet connection. Interactive prototypes can be easily converted into GIF or video and be redistributed into a portfolio on Dribbble or elsewhere. The interface of this tool is very similar to Sketch, so it will be easy to learn for many designers. In addition, an interesting feature is that you can view projects on iOS devices. Although this is the whole snag – Principle is only available for macOS, so fans of Windows need to look for alternatives.

UXPin

UXPin team developers are known as experts in the field of user experience design, who constantly share their knowledge in various books and articles. Their product, UXPin, is a Web prototyping tool that can be used to create high-quality interface frameworks and then turn them into interactive prototypes. Also, designers can port their work from Sketch or Photoshop for prototyping to UXPin. Well, the cherry on the cake is that this program automatically generates specifications for developers.

The process of creating a prototype in InVision

Selection of color palettes

ColorHexa

This is a free web-based tool that helps you create effective color palettes. You just need to enter the color value in the search field and you will get detailed information on it: complimentary colors, shades and tones, as well as alternative and recommended color schemes.

One of the biggest advantages of this tool is that it shows how the color will be perceived by people with a lack of color vision. Thus, designers can make sure that their design will look good for users with color-blindness. In addition, ColorHexaprovides alternatives to colors in various formats.

Paletton

This is another free web-based tool that helps you choose a harmonious color combination for user interfaces. This software that UI designers can use to select colors for a long time. Paletton has a simple functionality: people need to choose a color on the color wheel or enter its value, and the tool generates beautiful schemes. Also, users can choose the type of color palette and see similar in different tones.

Flat UI Color

Flat-direction in the design is still popular, so the tool for choosing flat-colors is a must for every professional. Flat UI Color is a website that provides a large number of color schemes for this style. All colors contain hexadecimal codes, which can be copied directly to your project – for example, in Photoshop or in the style guide. The service has a fairly narrow specialization, but those who often work with flat design get a must-have tool for their work.

Color Tool

Again in the compilation of a free web application, which is also part of the Google Material Design resource, which many of my readers are probably familiar with. The application is oriented to mobile design, providing for the experts material color schemes. Users can try out schemes on mobile templates, which are also available in the Color Tool . In addition, you can find information about the availability of the selected color schemes and adapt them if necessary.

Pictaculous

To find the color inspiration, many designers are looking for beautiful photos. Pictaculous helps to analyze the colors presented in the images, and output similar color schemes. You just need to download a photo from the computer, and you immediately get the exact colors with hex codes. In addition, the proposed color schemes can be saved as an Adobe Swatch file.

Work with typography

Google fonts

Typography is one of the key features that affect the user experience when using digital products. That’s why it’s important to have convenient tools that help create effective typography.

Google fonts is a popular free web service with over 600 font families. Each of them can be viewed in different sizes and in the passage of the text you need. In addition, you can see the loading time of each font. Google fonts provide data for the introduction of specific fonts into the product directly. You can simply copy the code generated specifically for the selected font on the right side of the HTML document.

Typekit

Typekit is a time-tested tool with an extensive font library. Here you can find various fonts from classic to new variants of the accidents. To use Typekit, you need to buy a subscription, after which you will have access to all the fonts. The tool has a thoughtful interface with all the necessary data on fonts, including weight and style. Moreover, it allows you to see each font in different sizes and some background colors.

Fontjoy

One of the biggest dilemmas in working with typography is the combination of fonts. There are thousands of fonts, and the process of choosing the perfect match between them can become endless. Fontjoy is a handy tool for comparing fonts.

Fontjoy uses a full font library directly from Google fonts and composes them together on one page. Then you select which fonts you want to test, including the size, weight, and height of the line on the page, and look for the best match. In addition, using the slider at the top of the service you can adjust how much contrast or similar the pair should be.

Typetester

Sometimes we can not decide which font of the two selected fits better. Typetester is a fast service for testing and comparing fonts. It provides preview of several fonts on one page with their parameters, including leading and tracking. Fonts can be selected from various sources, such as Google fonts, and tested by adjusting their size, alignment, as well as with customized text and background.

Calligraphr

Custom fonts are an effective way to add originality to a product. Calligraphr can create a font based on handwriting. You need to download a template with your letter, and the tool will generate it into a vector font. After the letters are generated, you can edit the details to refine your own font.

The official site of the Pentagram studio, which is known for its incredible approach to typography

Working with icons and signs

Icons8

Icons8 is an application for Windows and Apple, containing more than 65,000 professional icons for digital products. Moreover, every day new icons are added to the library. The application will guide you through the library, helping to find the right icon pack for categories.

Here you can find icons for iOS, Android and Windows platforms, which are available in various formats. The selected package can be copied directly to Sketch, Figma and other special programs. In addition, all icons can be repainted and changed in your editor. Icons8 allows you to download some PNG icons for free. If you want to access all the icons in different formats, you can pay for the license.

Free Icon Maker

If you do not like any package of icons in third-party services, you can make them yourself. Icons can be created in one of the visual editors, such as Sketch, Illustrator and Figma, or you can apply some free web tools. Free Icon Maker allows you to create and edit icons online. When you register there, you can use all the functions, for example, download icons from SVG files to change them in this service.

IconJar

Designers often download hundreds of icon packs, and then swear that it’s hard to find something worthwhile in all this chaos. IconJar is an efficient organizer that provides folders for specific icons. For example, if you need to find the “house” icon, you can search for it by name, and the tool will show you the icons from all the sets. IconJar is only available for MacOS, but you may soon see a client for Windows. The program is paid, but it has a free trial version.

The Noun Project

This site with a huge number of copyright icons and signs, which are distributed conditionally for free. The site The Noun Project implemented a convenient search for a tagged icon base like IconJar. It is enough to enter a word that reflects your sign and you will get the result from all the collections. Also you can search for the necessary icons in a specific collection. For $ 40 a year, $ 10 a month or $ 2 for one object you will get all the service features and royalty-free license, by which you can use the downloaded icon without attribution. In addition, for free, you can upload your favorite icons in vector format to use them with attribution.

Organization of the work process

Trello

Surely you already heard about Trello . This tool is simple, efficient and intuitive. Trello uses simple systems of boards and cards, which you can adjust for yourself. This allows you to divide any task into sprints and work on the project, providing continuous process updates and demonstrations with images.

It is easy to set deadlines, delegate specific tasks to specific people, create checklists and highlight the most important and urgent tasks. Trello also has another very valuable quality: it does not only have a carefully thought-out site, but also cool applications for iOS and Android. This provides additional opportunities for quick feedback, which saves time, effort and makes project management very user-friendly. Trello is an excellent service where designers, project managers and clients can work together effectively.

Zeplin

A successful design project is built on the effective communication of the creative team with customers. Zeplin is a platform that extends the cooperation between designers and developers. The main feature of Zeplin is the work with the elements of the interface. Designers can load skeletons from Sketch, adding them to project folders in Zeplin. Thus, developers get all the design data, including dimensions, colors and CSS for the user interface components.

Presentator

Presentator is a free web-based collaboration tool that allows you to exchange projects with team members, developers and clients. You can download the file and make a decision about access to it. For example, some may have full access with the ability to leave comments, while others may have read-only access. The biggest advantage of this tool is that it is absolutely free for everyone.

Exporting components from Sketch to Zeplin

A useful tool works effectively only for those who know what they are doing. Do not forget to constantly learn something new and improve your professional skills, and the above services will allow you to simplify your daily work.

PS You can subscribe to  Telegram (@designside), so as not to miss new articles about the design,

Back to top button
Close
Close