10 new and practical web design and development tools

For designers and developers, good tools are just as important as good ideas. We often say "工欲善其事, its prerequisite", so at the beginning of the project, it is necessary to find out what tasks need to be completed, and which mature tools can be targeted to deal with these problems. With the refinement of web development requirements today, more and more project derivatives are being created, and these new tools are usually fairly targeted, and they will be well fed to other projects as they mature.

Several of the selection of design and development tools may have been created in this context. These 10 tools look normal at first glance, but may shine in a particular project.

UI Interactions

This tool, called UI Interactions, is actually a library of UI flowcharts that help you sort out the gallery of interactive artwork, which can help you make UI design decisions well.

These organized UI interactions can continue to inspire you, and if one of these designs is in your heart, you can click and choose to get the source code, and the convergence will recommend a similar implementation.

Caniuse Embed

Can I use is a well-known front-end technology development class information support website, different browsers of various technical support details will be updated on the website, available for enquiries. The script provided by Ire Aderinokun makes it easy for you to get the latest updates for caniuse.com.

Microsoft Flow

IFTTT is the abbreviation for "If this then", in fact, allowing your network behavior to trigger a chain reaction that allows you to use different functions and services more conveniently. Microsoft's Microsoft flow is an official IFTTT service that you can use to connect different apps and services to improve your entire workflow, for example, you can create a process where your github updates a new problem, A notification is automatically sent to the slack. Or, when you receive an e-mail from a particular person, send a notification message to your phone.

The IFTTT service appears the year also not short, each service has the characteristic, the support also each department form the same, this time the Microsoft Family support should be not bad, you may use to try.

Resource Cards

If you are new to the web design field soon, then you need to understand the process of doing this work, what tools, materials can be used, so that you have a multiplier. and resource Cards is helping you get this thing done: all the material, tools, and tutorials are clearly grouped into different categories, whether you're designing prototypes, writing code, or using Photoshop to do the design, and finding tutorials and resources.

Inspire by Canvasflip

Want to experience new apps and don't want to install, register, log in and test them all? Try Inspire. The tool produced by Canvasflip is a prototype tool and has built-in UX test modules. Inspire is a dribbble in the field of prototyping, it can showcase the user experience process, mainly for the mobile end of the application of prototype design, and is run directly in the browser. No need to install a large number of applications, directly run, testing on it.

Alloy

Alloy is a new web browser, it organizes tabs according to the tasks you perform, so it's easier to Alloy than a bunch of tabs: Different tabs are integrated into the task attributes and dependencies, and are more clearly used when you use them. When you perform a particular task, the transitions between different pages are more organized and clearer, and there is no confusion.

Modified Boxy SVG

If you don't have AI and sketch installed on your computer at the moment, or you don't want to open them at all, you can use the Vector graphics editing tool to boxy SVG to edit the graphics. Boxy SVG is a cross-platform vector graphics editing tool, as long as you have a browser can run, do not need to install, you can also use the network to import Google Fonts fonts, a variety of graphics changes, path editing is also extremely easy, is a fairly handy alternative tool.

React Uikit Components

The components of this react Uikit are based on the Uikit CSS framework and other stand-alone modules, so you can use these UI controls without having to perform complex installations and configurations, or even mix with other layout spaces.

Chart.js

Chart.js is a pretty practical JS library, it can help you create beautiful JS chart, can even mix different bar chart and pie chart together, using different style of the coordinates of the system to present, custom proportions, if the data allows you can also make the corresponding animation effect.

Bootstrap 4 Cheat Sheet

Bootstrap 4 Cheat Sheet can make you a second change Bootstrap 4 expert. There is even a special Reddit plate discussing the new features of the Cheat sheet and Bootstrap 4.