15 new and useful web design tools

Source: Internet
Author: User
Tags hosting frontify postcss

In the information explosion today, designers to search through the network design materials and tools is a simple thing, the corresponding, to find a truly reliable and excellent quality of the material, but also increasingly difficult. Looking for a material that meets the needs in a massive web site, the time spent searching and filtering is getting longer. This situation makes today's design tools/materials recommended category of articles and collections seem more meaningful and valuable.

As the boundaries between web designers and developers become blurred, the overlapping of tools and materials used in both is common. Many of the 15 new tools/materials recommended today deserve a lot of revenue from web design practitioners. This covers a variety of categories such as design class applications, frameworks, analysis tools, raster systems, and so on, just put together, enough to form a web designer's daily tool collection. Let's look at what these new tools can do for you.

1. frontify

Frontify allows you to create a beautiful and complete style guide in 5 minutes! This online tool is fun and simple, making it fast and easy to maintain your brand style and style. With Frontify's excellent user experience design, you can get started quickly, and even if you have a professional need, Frontify's documentation can lead you to achieve something more detailed and professional.

2. Flarum

Flarum is a simple and easy-to-use Open source forum system. If you need a relatively simple forum site, you can consider Flarum, which is simple and quick to use, allowing you to focus more on topic discussions. Flarum's Forum page scrolling loads smoothly without waiting for the page to load.

3. Lightning Design Systems

This tool, called the Lightning Design system, focuses on building an experienced enterprise-class app. With the support of this system, you can quickly customize the entire interface and maintain a high level of consistency across the interface without requiring the engineer to expend more effort on it, all you need to do is download the platform-free CSS framework and start working on it. You can refer to the detailed description of this system to make a quality app that conforms to the Salesforce ecology, easily call the Salesforce core visual components and interactive mode, and come up with the best solution.

4. Rucksack

Rucksack is an interesting CSS tool that makes the CSS development process more interesting. Rucksack is built based on POSTCSS, modular design, without redundancy, running fast. It's easy to incorporate rucksack into your development process, and rucksack has plug-ins for most of the tools. Because it is built based on POSTCSS, it is compatible with other CSS processing tools and can even work directly with stylus.

5. GridLayout

GridLayout is a lightweight raster system for making Web applications that scroll horizontally or vertically, and to be compatible with older browsers. If you need to create complex layouts and need to be compatible with older browsers, it's nice to choose GridLayout. This set of tools covers a 1KB size CSS file and probably 0.5KB of JS files, if you only need to support more modern browsers, it is best not to use Flexbox. This tool is distributed based on an MIT protocol.

6. Bonsai

Bonsai is a tool for freelance designers to create, sign, and store work contracts, and to assist in payment and hosting. At present, the signed Protocol module has been perfected and released, while the payment and hosting part is still in beta phase. Now bonsai for professional designers of the work contract signed support has done very well, especially the provisions of the payment method, intellectual property protection and other links.

7. Apostrophe

Apostrophe is a design-driven, node.js-and MongoDB-based content management system. This CMS provides you with a flexible tool that you can use to design content to the site, whether it is simple wind or complex structure can easily hold live. The developers of this system believe that content editing should be simple and easy to use, that is, driven by the idea that Apostrophe's editorial experience is designed to be very easy to access, and that site editors can easily control the content.

8. Grid.guide

Big Bite's employees find it annoying to compute the width of the grid, especially under nested structures. It was in this demand that they invented the Grid.guide tool. This tool will help you calculate the possible permutations and combinations based on the maximum width and number of columns, and generate the corresponding PNG file so that you can drag it directly to the appropriate tool. More importantly, Grid.guide is completely free!

9. Quantity Queries

Quantity Queries is a tool to help you do a number of inquiries.


Shopify Timber is a front-end framework for building Shopify themes quickly and easily. In fact, in a broad sense this is a widely used theme making tools, not all limited to the use of Shopify. Both experienced designers and front-end and novice can be flexible to use, including templates, tags, modules and CSS framework, based on your requirements to call the good.

One. Now UI Kit

Invision provides this now UI kit is a perfect cross-platform uikit for web design, tablet and mobile interface, and, of course, it's free. It includes 52 complete design templates, 35 customizable icons, and more than 180 UI components that can be used in a variety of interfaces.


We are not the first time to recommend unsplash.it, it is used in the Web page of the picture placeholder, where the picture is from the site unspalsh.com, this site provides a number of high-quality pictures, which also makes unsplash.it effect is very good.


Gitup is a graphical client that is ready for git. With the help of Gitup, you can easily submit, create new branches, merge and so on. Gitup gives git a whole new way of interacting, making code management faster, safer, and painless.

Color Hunt

Colorhunt contains a series of beautiful cool color combinations, the site updates the color scheme every day, and arranges the most beautiful color scheme according to the number of views.


Tinycon is a library of management favicon that allows you to easily manage Favicon and pop-up boxes.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.