Seven design artifacts that UI designers must work on

Today's recommended 7 artifacts, there is a classic version of the new edition, but basically through the UI design of the entire workflow, from typesetting, color, Chettu to the callout, preview, have a corresponding conscience artifact recommended, very suitable for just getting started UI designers, of course, there are two of Google just out of the artifact, also worthy of veteran to see.

"Seven kinds of weapons" is one of famous works of famous Wuxia swordsman, which is divided into: Longevity sword, Peacock Ling, Jasper Knife, amorous ring, parting hook, Overlord gun, fist, seven kinds of weapons are not general rivers and lakes weapons, pieces of exquisite exquisite.

In the UI design, there are seven kinds of weapons, if you can have these seven kinds of weapons, you will be able to design as "open up" generally more than twice!

　Phoenix Sword-typesetting artifact Material design Grids

(Google Ladder)

Raster design is to follow certain rules to divide the width of the page into fixed width, then list the various combinations of possible, so as to facilitate the presentation of the page can be quickly layout, interface design grid system grid system in English as "grid systems", began from the plane grid system developed from , after the web design has been carried forward, the more famous grid system such as 960GS, now with the rise of mobile end, mobile end design also has a lot of such raster systems.

Material Design is Google's launch of a new language designed to provide a more consistent, broader "look and feel" for mobile phones, tablets, desktops and "other platforms".

In the material design also has a complete grid system, we redesign can use this grid system, to help us more efficient and standardized interface design.

All components of this grid system are aligned with a datum grid with an interval of 8DP, and the typesetting/text is aligned with the base grid with an interval of 4DP.

Interface design grid

Layout design grid

Icon design grid

　Color artifact Material Design color swatches

(Google Ladder)

Color matching is a headache for many designers, especially some new designers in how to color and color matching is often handled is not very good! Then the following plugin will help you solve this problem!

Also comes from the Material design,material design color scheme is gorgeous incomparable, with the flat designs the style to be mutually beneficial. If you are still worried about the color of their designs, then the following set of material design of the color version of the plug-in, will completely let the color change the incomparable simple, mom no longer worry about my color!

This set of Plug-ins can be easily installed into your Adobe Photoshop and Adobe Illustrator Palette, which is easy to use.

　　Jasper Knife-Chettu artifact Cutterman

Cutterman is a plugin running in Photoshop that automatically outputs the layers you need. An alternative to the traditional manual "Export web format" and the tedious process of using slicing tools for Chettu. Can let you only need to click a button, automatically output you need a variety of pictures, fast to no friends!

Output supports the single and double graphs of the iOS platform, and supports iphone6/6p size proportions.

Output support for the Android platform of various resolution size pictures, what xxhpdi,xhdpi,hdpi ah, all automated output, for you to save more time with small partners to play well.

What PNG, JPG, gif all alone, but also can scale, compression size. From then on, farewell to the so-called "storage for the Web format" function ~ ~

Too many layers? wood relationship! Support to select multiple layers to merge output, also can output the Oh, it is easy to explode!

　Parting hook-marking artifact Markman

Mark Eel is an efficient design of the marking, measuring tools, greatly save the designer in the design of the manuscript to add and modify the time, so that the design more love. Mark Eel is also very simple to use, double-click to add measurement, click to change the vertical direction and so on, the basic is a key to complete. The mark Eel, which can be used across platforms, reduces the number of problems that arise from the use of different platforms.

Length Mark

coordinates and rectangular markers

Color value Markers

Text Markers

Overlord Gun-preview artifact PS play

The designer often encounters this kind of situation in the daily work: the computer effect and the mobile device difference, needs to frequently save the export file, through the data line or other network disk tool synchronization to the handset pad equipment to carry on the preview, repeatedly very troublesome.

So now to try Tencent Isux to bring me the PS Play it!

Ps play is a Wi-Fi network, real-time on the terminal Equipment preview on the computer Photoshop design manuscript, can be synchronized debugging and screenshots saved to the mobile terminal, and can be email, micro-mail and other tools to share real-time cross-terminal applications.

　　Amorous ring-fillet artifact Cornereditor

This is a very simple Photoshop plugin, but it helps us solve the problem of the rounded corners of the Photoshop shape. Corner Editor, from Photoshop Scripts, we call it the Fillet editor, as long as you enter the fillet radius value you want, you can freely control, edit, and adjust the rounded corners of any shape at any time.

Fist-font Artifact Roboto font

(Google Ladder)

Boxing, the original most direct weapon, but contains tens of millions of changes.

Font design is so, it is simple and direct, violent but very elegant, fun, the diversity!

Finally recommended to you all of this artifact also comes from the material design, it is Roboto font. Roboto is a sans serif font family designed for the Android operating system. Google describes the font as "modern", "cordial" and "humane".

Roboto has 6 kinds of characters: Thin, Light, Regular, Medium, Bold and black.

From extremely fine to extremely coarse, the Roboto typeface has the rigorous geometrical characteristic, has the very strong modern sense, the slender sense is remarkable, but also because of the curve and the radian, therefore is very human. This font can be used not only as an app master font, but also as a design-modified font, and the effect is stunning! The aesthetics of mellow clarity leads to a clean, geometric design philosophy.

In the Chinese system the corresponding font is Noto, also contains 6 kinds of word weight.