The release of the new style called Fluent Icons was announced on Product Hunt today, and we’d like to unveil a bit more about that news in our fresh D4U Review post.

The new design style contains 965 color graphics covering a variety of topics.

The bright color graphics are pixel perfect and consistent to be effectively used in user interfaces, infographics, presentations, and social media visuals. The icons can be used in personal and commercial projects, free for a link attribution. Those who have Icons8 Pro license, get the extended range of options as they can get all the icons in SVG format in various sizes.

Сообщение Icons8 Released About 1000 Icons in New Style Inspired by Fluent Design появились сначала на Design4Users.

The tech world continues to evolve and provide people with problem-solving tools for different fields. UX designers are often under pressure and need to provide a high-quality outcomes within strict deadlines. That’s why it’s important to have a set of effective design tools that would advance the workflow. In this article, we have gathered a list of useful tools for UI and UX designers based on our experience and additional research. Let’s see what they are.

Illustration by Tubik

Wireframing and prototyping tools

Sketch

Sketch app is by far the most demanded tool among interface designers. The biggest advantage Sketch provides to its users is a simple and clear functionality. It can be used as a prototyping tool as well as the software to create icons and illustrations. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel.

Moreover, the tool provides effective guidelines, for example, you can see dimensions of the components and spacing between them only by holding the alt key. Due to the concise functionality, the program is light, so it works much faster not overloading the computer which saves time (and nerve!) for designers. Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions.

Adobe XD

New approaches in UI and UX design encouraged software developers to upgrade their products and even create new ones focused on specific tasks such as layout structuring. Adobe group wasn’t an exception so they launched their newest product Adobe XD (experience design) in 2016. It came as an alternative to Photoshop and Illustrator for UI and UX designers and managed to receive quite high ratings.

This program is specially meant for UX designers creating wireframes, interactive prototypes, and vector design. It is a good chance for Adobe fans to come back to the familiar tool with the significant upgrades focused on the user interface design. For those who are new to web design, XD interface may seem a bit difficult to figure out. Adobe XD is now available for both Mac and Windows 10 operational systems.

Figma

It is one of the most trending design tools today which brings innovative solutions and opportunities for UI designers. First of all, it is the professional design tool which is based on the web enabling design teams to collaborate in real-time working on one page. Also, designers can even export CSS right inside the program which enhances the communication with a development team. Figma allows for creating wireframes, prototypes, and vector icons for free just by signing-up but it works only for individuals while teams need to pay for it. In addition, the app is available for various operating systems.

Lunacy

Lunacy started as a Sketch files viewer for Windows users, but now it’s full-scale graphic editing software that enables Windows users to open, create and manipulate Sketch files. It is especially helpful for the teams whose members work on the computers with different operating systems. Therefore, for different stages of a process, it may be the way to make the flow more productive and friendly to all the participants – designers, developers, clients, and managers. What makes it even more attractive, it’s free for everyone.

Interactive prototyping

Marvel

Marvel is a free cloud-based tool for interactive prototyping which requires no coding skills. You can download wireframes from Sketch and Photoshop or even take a photo of a sketch made on a paper and then create realistic prototypes of a mobile app or website. Marvel offers to create unlimited projects for free with commenting on your first 3 projects. Also, you can get a paid premium plan with unlimited projects and comments along with removed Marvel branding and more additional features.

InVision

It is a free tool for creating interactive prototypes. InVision got the popularity since it enables to import files easily files from Sketch or Photoshop and build animated design. Interactive prototype in InVision looks like the real-life project because designers can link the pages simulating the usage of a real website or mobile app. Moreover, InVision helps to improve feedback process allowing to provide comments right on a prototype.

One more special feature is organizing UI components in different columns showing the status such as to-do, in progress, or approved. This way both a client and designer can control the workflow more efficiently.

Principle

This is a simple app which aims at creating animated UI design. The significant feature of Principle is that it can work even offline so your work progress doesn’t depend on the quality of the Internet connection. Interactive prototypes can be easily converted into a GIF or video and be shared in a portfolio on Dribbble or elsewhere. The interface of this tool is quite similar to Sketch app, so it would be easy to use for many designers. Also, an interesting feature is that you can preview designs on iOS devices. And here comes a pitfall. Principle software is only available for the iOS system, so Windows fans need to look for alternatives.

UXPin

The UXPin team is known as experts in user experience design field who constantly share their knowledge in various books and articles. Their product, UXPin editor, is a web-based tool for prototyping which can be used for creating wireframes along with high-quality mockups and turning them into interactive prototypes. Also, designers can download their wireframes from Sketch or Photoshop for prototyping in UXPin. In addition, the software can automatically generate style guides and specs for developers.

Color choice tools

ColorHexa

This is a free web-based tool helping to generate effective color schemes. You just need to enter a color value into the search field and you get detailed information: tints, shade, and tones as well as the alternatives and suggested color schemes. One of the biggest privileges of this tool is that it shows how a color will be perceived by people affected by a color vision deficiency. This way designers can make sure that their design will look good for users with colorblindness too. In addition, ColorHexa provides alternatives for color in different formats.

Paletton

Paletton is a free web tool assisting to pick color harmony for user interfaces. It is the software which UI designers have been using for color choice for a long time. Paletton has a simple functionality: people need to choose a color on a color wheel or enter its value and the tool generates beautiful schemes. Also, users can choose a type of color scheme and see similar schemes in different tones.

Flat UI Color

The flat design direction keeps being popular so a tool for choosing flat colors is a must-have. Flat UI Color is a website providing sufficient flat color schemes. All colors contain the HEX codes which can be copied right into the main software like Photoshop or into a style guide. The app has a narrow focus but it’s extremely useful for those who often work with flat design.

Material Design Color Tool

Color Tool is a free web-based app which is a part of Google’s material design resource which many of you may be familiar with. The app is focused on mobile design providing material color schemes. Users can try schemes on mobile templates which are also available in Color Tool. In addition, you can find the data on the accessibility of the chosen color schemes and adapt it if needed.

Pictaculous

To find color inspiration many designers go searching for beautiful photos. Pictaculous helps to analyze colors presented on images and output similar color schemes. You just need to upload a photo from a computer and you get exact colors with the HEX codes right at your disposal. In addition, the suggested color schemes can be saved as Adobe Swatch file.

Typography tools

Google fonts

Typography is one of the basic parts influencing user experience of digital products. That’s why it’s important to have handy tools helping to create effective typography.

Google fonts is a popular free web application featuring over 600 font families. Each of them can be previewed in different size and within a custom text. Also, you can see the loading time of each font so that you could make sure it wouldn’t take too long. Google fonts provide the data on embedding specific fonts into a product. You can just copy the code generated specifically for the chosen font in the right section of HTML document.

Typekit

Typekit is a time-tested tool with a library of fonts. Here you can find the variety of fonts from the classic one to the brand new choices. To use Typekit you just need to subscribe and get the access to all fonts. The tool has a clear interface with all the essential data about fonts including weight and style. Even more, it allows for seeing each font in different sizes and some colored backgrounds.

Fontjoy

One of the biggest dilemmas in typography creation is font pairing. There are thousands of fonts and it can become an endless process of choosing a perfect match. Fontjoy is a handy tool for font pairing integrated with Google fonts library. You can just choose fonts setting the right characteristics like size and weight.

This free tool pulls a full library of fonts straight from Google Webfonts and curates them together on one page. Then you choose which font(s) you’d like to test including the size, weight, and line height on the page and wait for the match. In addition, you can regulate how contrasting or similar you want a pair to be just by using a slider on the top of the app.

Typetester

Sometimes we can’t decide which font of the two chosen suits better. Typetester is a quick solution for testing and comparing fonts. It provides previews of multiple fonts on one page with their parameters including leading and tracking. Fonts can be chosen from different sources such as Google fonts or Apple Mac defaults and tested by adjustment of their size, alignment, as well as with customized text and backgrounds.

Calligraphr

Custom fonts is an effective way to add originality to a product. Calligraphr can create fonts based on handwriting. You need to download a template with your writing and the tool will generate it into vector fonts. After they are generated you can edit the details to polish your custom font.

Icons and graphics tools

Icons8 app

Icons8 is an app for Windows and Apple containing about 90,000 icons for digital products. Even more, every day new icons are added to the library. The app guides you through the library helping to find the right pack of icons by categories. Here you can find icons for iOS, Android and Windows platforms available in various formats. The selected pack can be copied right into Sketch, Figma, and others. Moreover, all icons can be recolored and resized in your editor. Icons8 allows downloading PNG icons on 100×100 for free. If you want to get access to all the icons in different formats, you can get a paid license.

Free Icon Maker

If you don’t like any of the icons found on the Web you can make them by yourself. Icons can be created in one of the visual editors such as Sketch, Illustrator, and Figma, or you can apply some free web-based tools. Free Icon Maker allows for creating and editing icons online. When you register there, you are free to use all the features such as downloading icons from the SVG files to modify them in this tool.

IconJar

Designers often download hundreds of icon packs and then it becomes hard to find the right one. IconJar is an effective organizer providing folders for specific icons. For example, if you need to find a “home” icon, you can search for it by the name and the tool will show you the icons from all sets. IconJar is available only for MacOS but soon there may be a Windows version. The program is paid but it has a free trial.

Ouch

UX designers that aren’t skilled in drawing can face the problem of the boring content for app screens and web pages. Ouch helps creators to overcome the lack of quality graphics. At the moment, the resource presents illustrations in 14 styles for 23 typical UX screens such as “fatal error”, “message set”, “downloading”, “subscribe” and many others. You can use them free for a link to the resource or buy the license to get the access to editable files and use the graphics without credits.

Collaboration tools

Trello

Our personal preference for projects monitoring as well as in-studio information flow is Trello. This tool is simple, effective, clear, and intuitive. This tool for communication provides clear systems of boards and cards which have a gear deal of features. It makes possible to split any task into sprints and enables us to carry out the project providing constant updates and presenting images. It is easy to set deadlines (due-dates), delegate specific tasks to specific people, create checklists and mark out the most important and urgent tasks. It also has one more really precious feature. Trello has not only thoroughly thought-out website but also efficient and smart applications for iOS and Android. This gives an additional opportunity for fast feedback so it saves time, efforts and makes management of the projects very comfortable for the customers. Trello is a great option for creating the spot where designers, project managers, and customers could together make a fast and effective workflow.

Zeplin

A successful design project is built upon effective communication of the creative team and clients. Zeplin is a platform for enhancing the collaboration between designers and developers. The major feature is a detailed style guide generator which makes sure design elements are implemented appropriately. Designers can upload wireframes from Sketch adding them to project folders in Zeplin. This way developers get all the data about designs including sizes, colors, and CSS suggestions for UI components.

Presentator

Presentator is a free web-based collaboration tool enabling to share designs with team members, developers, and clients. You can download a file and decide on permissions 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’s absolutely free for everyone.

A useful tool works effectively only for those who know what they are doing. So, don’t forget to constantly learn and improve your professional skills. Stay tuned!

Originally written for Tubik Blog
Title illustration by Ouch

Сообщение UX Design: Big List of Handy Tools for Design Process появились сначала на Design4Users.

You will definitely hear from every product designer that the moment when you launch your app is up to users is not the finale. It’s just the beginning of a new stage, new wave, the new way to consider and analyze. Today we are presenting you the tool called Inapptics which unites designers, developers, product managers, and marketing specialists providing them with deep analysis of user interactions with the app.

Problem to solve

The problem which was considered by Inapptics team roots in the fact that there is a great abundance on the market of mobile applications, still 90% of apps downloaded are used only once and are eventually deleted. App creators, investing their time, effort, and money into digital products, struggle to understand why that happens as there is a lack of visibility on what users exactly do in their apps. Understanding where users touched, how they navigated, and when exactly the app crashed is a crucial necessity, but it’s not possible to track with current mobile analytics tools that provide statistical numbers and charts.

With current analytics solutions (e.g. Google Analytics, Mixpanel, and others) app creators usually get a bunch of numbers and charts, but the research showed the issues which app makers need to get answered are the following:
– Is their app being used as intended/designed?
– Are there any usability issues?
– What exactly was the user doing that caused the crash they cannot reproduce?

Features

In order to start using the aforementioned tools, a developer needs to spend days and program every single event that needs to be tracked. Sometimes it can take up to two weeks until it’s fully up and running. This is the perspective which Inapptics team got for building a new useful tool solving the mentioned problem.

To start using it, you simply add the SDK to your app and add 1 line of code. Then the tool automatically captures all the actions performed by the app users, like where they tap and how they navigate. The collected data is then analyzed and visualized as a flow of screens, visual funnels, and touch heatmaps. As a bonus, the tool also detects crashes and replays the exact steps that lead to the crash.

The page of screen flows

The heatmaps enabling to see the areas of high interaction

The app enables to replay the crash sessions and see what step the session flow got broken

Statistics page presents the collected data in infographics

Benefits

Traditional analytics tools are pure metric based analytics, where app developer programs each individual event and then the tool tells you how many times each event was triggered. With traditional analytics tools like Google Analytics or Mixpanel, you have to know what you need to track, which is not easy. Inapptics does not require the programming of any event, it captures all events automatically and most of the time provides insights the app owner has not even been thinking about.

There are also session recording tools that record the video of the user session in the app. But there is a big problem with those tools. You can’t aggregate data from videos. So if you have thousands of users, most likely you are not going to watch thousands of video recordings. And there is no way to filter those videos to know which session recordings need your attention and which don’t. Inapptics solves this issue, as it does not just records but also gathers data points of every user interaction in the app and then aggregates that data. So if 100 people did the same thing in the app, it is shown as one flow performed by 100 people. Of course, you can dive into individual sessions if you wish, as this information is provided too.

Pricing

Inapptics is free for apps with less than 1000 monthly active users (MAU). If your app has more than 1000 MAU then you can upgrade to one of the paid plans that start at $99/month. Full pricing information is available here.

Contributed by Inapptics team

Сообщение D4U Review: Inapptics. New Level of App Analytics. появились сначала на Design4Users.

Today D4U Review issue introduces a new service by the Icons8 team called omg-img. Its main goal is to make embedding vector icons in HTML super simple, and it uses a huge collection of icons which is continuously growing and at the moment presents about 50K items available. Users do not even need to insert a Javascript code. This was done with support from a production-scale CDN service provided by KeyCDN.

Users can select icons from more than 10 different styles, specify the size of the icon (up to 512px), and even recolor it. Each style has the size it’s designed for, in other words, pixel-perfect size:
iOS: 50×50
Windows 8: 26×26
Windows 10: 32×32
Android 4: 24×24
Android 5: 24×24
Color: 48×48
Office: 16×16, 30×30, 40×40, 80×80

The team keeps developing and testing the service: a couple of useful features are already being prepared for the next release:
– ability to specify the size as 2x, 3x, etc. instead of in pixels in order to keep correct proportions from the pixel-perfect size for each platform
– adding icon effects like background and a horizontal flip (direction).

Full product description and all the links can be found here. At the moment, all the mentioned functionality is available for icons in png format. The same performance is coming soon for svg and will be open for all the users who have an Icons8 license.

By Icons8, the team behind the great collection of icons for different purposes

Сообщение Design Tool: omg-img. When Adding Icon Is a Piece of Cake появились сначала на Design4Users.