#ui component

React UI Component Library/Framework – Best list of 2021

“Build momentum” here is to promote self-confidence and rigorous attitude towards design. Well, this is not a one-time trend. It is necessary to integrate design into life, turn beauty into a habit, pay attention to details, polish the work repeatedly, and strive for excellence. Isn’t that fostering a design attitude? I think that the attitude established now is the unique design style in the future. “Advanced, science, detail”, this is my attitude towards my design. Today, let’s talk briefly about how to use Sketch components scientifically in UI design to easily manage your pages.

Component

We know that the “specific content” of each page is different, such as the content/ color/ size of text, icon, pictures. However, in most cases, the “frame composition” of a part of the page is similar or even the same. For example, every mobile phone page has a tab bar. Then, each time you use it, you can take the tab bar directly from your project component library, and then replace the specific content (text/icon) with the content needed for your project (of course, for iOS, designers can also use the Apple UI component library), so that you needn’t draw the tab bar on each page by yourself. When you double-click the “Tab bar” component, the page will be transferred to the component page, and you will see how this component is composed of small parts.

Benefits of components

The charm of a component is that it can make efficient batch changes to the page, and can change the specific content of each component on a specific page while ensuring that the structure of the component does not change. The number of pages we want to design is as low as 10 or 20 and as many as 40 or 50. This number is by no means to tell the designer that you have a lot of tasks and need to work overtime. On the contrary, the number of pages will not affect your design level and working hours, the smart designer will not waste a lot of time on “page making”. So how to make changes to multiple pages efficiently? My answer is to make “basic components” and use “application components” flexibly.

Classification of components

The components in the UI design are divided into “basic components” and “application components”. Sketch provides the function of adding a component library. You can download the “Apple UI”, in there you can see all are application components which directly applied on the page. when you click to the bottom of the component layer by layer, you see the basic component, so the application component consists of the basic component. The basic components are text, icon, picture. In most cases, all application components consist of them or one or two of them.

Making basic components - text (1x)

Text components

Choose the font Size, Style, Position, and Color of several commonly used words.

Size for web design: We choose 12px as the Footnote text of the page, 14px as the Description, 16px as the Body Text of the page, 18px as the Subtitle C, 22px as the Subtitle B, 28px as the Subtitle A, 36px as the Title, 46px as the Big Title.

Size for mobile design: We choose 10px as the Footnote text of the page, 12px as the Description, 14/16px as the Body Text of the page, 18px as the Subtitle B, 20px as the Subtitle A, 24px as the Title, 36px as the Big Title.

Style: Thin / Regular / Bold

The position of the text in the component: Top-left, Top-middle, Top-right; Center-left, Center-middle, Center-right; Bottom-left, Bottom-middle, Bottom-right.

Colors: Black, white and footnote colors are necessary. In addition, different colors can be added according to the needs of the project.

Naming is very important. For the text style of “white Top-middle 18” text style, we can name it “web page common_text_18px_Top-middle_white ”, the name of the component is the directory where you want to find the component later.

Making basic components - icon

I suggest that after the icon is drawn, you store two versions, the design version, and the development version.

Development version: The development version of the icon requires no background and no masking function. This is convenient for uploading to “iconfont” (Chinese software) for development at the same time because “iconfont” will not intelligently identify the component files containing the mask when uploading. The development icon does not need to be converted into components.

Design version: We know the page of the icon will be displayed in different colors, black/white/red / …, how to quickly replace the color of the icon when we need it? We need to draw a rectangle of the same size as the panel on the icon to make a "color mask” (Specific operation: select the icon shape and the rectangle above it, click the mask tool bottom，and replace the rectangle with a color). Don’t forget to convert to components, so that you can replace the icon color through the component’s color system.

Note: The icon needs to have a “transparent background”. The role of the transparent background is essential. It can ensure that each icon component is the same on the page. Even though the size of each icon shape is different, but its pixel size will be the same when each icon component is applied to the page.

Component naming: Be careful about the naming of the icon component, so that when you look up, the directory will be very clear. There are linear icons named “icon_outline _ **”, and facial icons can be named “icon_solide _ **”. The English name is convenient for development to understanding, and it is also a professional expression of the UI designer. There is a lot of knowledge in this module. In terms of icon drawing, icon animation, what kind of icons can be imported into AE, etc. I will add them later in the process.

Making Application Components - Pictures with Rounded Corners and Filters

In the waterfall flow style of the page, all the pictures have rounded corners or color masks. In fact, we don’t need to worry about it. We just need to complete one such picture. Then apply this “picture component” on the page.

Analyze: We start to analyze what its basic components are. The rounded corners of the picture can be understood as a rectangle with rounded corners. The color gradient of the picture can be understood as a colored mask attached to the picture.

Making basic components: we can choose several commonly used parameters and make them to basic components, such as a rectangle with rounded corners of 5 degrees 10 degrees 13 degrees 20 degrees, such as a color mask with black transparency from 60% to 20%, and black transparency as 20% color mask. With these basic components, let’s make a picture component(Application Components), at first, draw a rectangle, select "Picture” in the rectangle’s property options bar, fill a small picture, and then draw a rectangle of the same size with picture and right-click “Replace with” to find “the rectangle with rounded corner” which you done , and the color mask is the same, so we have completed a Picture Application Components. Of course for waterfall flow, you can make 3 styles, size of 1: 1/16: 9/9: 16. When making a waterfall flow, you can apply these picture styles freely. The rest of the work only needs to replace the pictures. We can use the time to find some good pictures and find some beautiful waterfall flow styles, and really spend our energy on Design.

Application components - Endless

The basic components are limited. Currently, there are “text, icons, masks, and masks”, but the application component is very active. It can be directly applied to the page or it can be part of other application components. In the above, we made an image component, and when the page needs a list layout, this image component will become an element of the list component. So when do we need components? The answer is that you need to use components when there are duplicate modules on the page. Application components are more like typesetting of basic components, and pages are like typesetting of application components.

Impact of components on Principle

The flexible use of components is in trouble here. I find after imported into Principle, the component will not be recognized or the text will be misplaced. This problem also makes me very distressed. Now I use AE to make icon animation and page interactive animation, there is a plug-in called AEUX, which is imported into the AE with the layers of the Sketch panel, I think it is convenient. If there is a good solution for Principle import, hope to leave a message to me, let’s learn together.

Sweetheart Summary

Objects must be reversed. Anything that is extreme will lead to imbalance. The same is true for components. After the concept of components is formed, it will implicitly suppress the creative space. Mr. Yang Yan said a word, the reason for your pain is that you read too little but think too much. I think as a designer, most of the sources of design distress at work are “Not enough output, but thinking too many details at the beginning of the design”, which inhibited inspiration and output speed. The leader often tells me that in the initial stage of design, we must pursue “violent aesthetics”, which means to draw my design ideas at the fastest speed during the first draft of the design, to visualize inspiration and ideas. Make it first, then look It is impossible or not, what you think in your mind cannot be judged as good or bad by anyone. Only after visualization can I know that there are deficiencies and prosperity.

The essence of components is: Make components for required modules after the design style and key pages are determined, thereby facilitating the design and management of other pages.

Thanks for your attention!

Welcome to wenhaoji.art to know more about me!

This is Reactive Search – a UI components library for Elasticsearch (v2). These components are more configurable, lighter and performant.

The whole source code can be browsed on GitHub. It’s licensed under Apache version 2.0.

There are over 30 different components such as a range slider, a rating filter, a data search UI, etc. Showing the results in a variety of different ways. These components are styled and offer customizable Elasticsearch queries.

Not only that, you can create your own components: for instance, if you are following a design kit, or if you have an existing UI, you can bring those components into Reactive Search.

Designer templates for sketch are also offered so that you can create accurate mock-ups for Reactive Search UIs.

Moreover, Up to 10x time savings when using Reactive Search.

The resulting code is much smaller resulting in faster iteration cycles and fewer edge cases to solve. You can build a live app in less than 5 minutes.

More information at: https://opensource.appbase.io/reactivesearch