wenhaoji

[wenhaoji]

Build Momentum for Design

“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!

See you soon.

[wenhaoji]

Thinking between dribbble design and project business

I'm Wenhao. Sometimes I think designers and comedians seem to be the same kind of people. They are a group of "unsmiling" people who are creating joy, and a group of "uneasy" people who are creating convenience.

Throw questions-think about them

I am new, so often reflect on a problem in my work. “Why is it that it is difficult to move a good design in Dribbble to the current project? “ I believe that senior designers have crossed this threshold. Because of Business Design Need to Understand "Business Requirements”.

Dribbble can inspire our creative inspiration, but a set of beautiful pages can not meet the specific business; In addition, when designing without business needs, Aesthetic Needs will directly occupy the high ground, and viewers will not go deep into your business The first thing that strikes them is the shock and advanced sense of your page design. So I also understand why some designers retain their works with inspirational usually, and then upload them to the homepage of his personal website after fine polishing, instead of directly using the landing project products. Maybe my idea is too one-sided, but it also depends on different products. Some products have very high design requirements for the page，this will give full play to the designer's aesthetic and artistic skills. For example, products related to luxury jewelry / fashion / beauty / video / technology / female / art …In the face of some traditional industries or heavy industry products, it is necessary to pay attention to the specific style of the industry. There will be specific frameworks and rules. For example, the pages of the automotive and chemical industries must take into account its heavy sense. It is a challenge, but I still believe that senior designers do not pick products. Their ability is to prescribe the right medicine for different patients and to integrate their style with the product. The product I came into contact with is an internet video editing tool that requires me to not only be familiar with the business but also pay attention to the beauty. Start from the functional requirements of the business, thinking about product elements, components, pages, interactive animations, and subsequent updates and derivatives must be based on the "how to achieve product requirements with more beautifully", based on a complete benign ecosystem. By no means will the idea be realized only, but the idea will be transformed into an ecological design that can be scientifically managed and adapted to changing needs.

The essence of Dribbble - seeing trends

So how to achieve both elegance design in Dribbble while taking into account business? At present, my level is limited to answer, but we can first analyze the advanced elements of the Dribbble and try to choose some small elements that are suitable for the business and apply them to the project. Regardless of popular trends, the following points are the eternal theme of visual design, which are summarized in four points: 1. "Change", the page must have a sense of change, which must be reflected in the contrast between the elements, mainly a comparison of size, size between fonts, major and minor between modules. 2. "Specification", the layout of each element must be standardized, so that the layout of any element location is justified, and there must be logic between the elements, here will involve the use of grids, whether it is PS, AI, Sketch, through the grid divides into groups, making the whole page look regular and accompanied by changes.3. "Be good at using advanced colors", from the background of the banner to the background of the bottom, the bright color gradient of the advanced color system is an important reflection of the high-level of the page. 4. “Picture selection”, whether it ’s a demo or outputting a high-fidelity page, not high-definition pixel pictures are absolutely suitable. On the contrary, I choose beautiful smaller pictures collected from the Internet. The reason is the small image stored in Sketch will have less memory, which also conforms to the lightweight characteristics of Sketch software. In addition, the third-party software that I use for collaboration is “Abstract”. At this time, if a page has too much memory, both sketch storage and Abstract collaboration are both Inconvenient.

In addition, Dribbble also reflects the current popularity from other aspects, for example, the page needs to maintain breathability and thinness; With advanced gradient color background or illustration background or dynamic video background; Pay attention to the shadow of each element; Emphasizing from layout of small fonts to show the quality of page; Handling of rounded radiua in the page. For the works of major well-known design websites, I personally recommend purposeful browsing, so that our energy will be more focused, more targeted, the ability to grasp details will be enhanced, and the number of decisions made by the brain will be reduced deliberately to ensure each high accuracy of each decision.

Understanding the business-improving landing capabilities

I believe that newcomers who have just entered the design do not like to touch about business needs. So do I. The last thing I want to hear is "understand the business." There is always an illusion that the design attached to the business then loses its style and fairy of itself. But we were wrong. The design without landing will be nowhere to be placed. The design itself needs a platform (stage) for dancing, design and business to complement each other. Not all designs that fit the business are mediocre modular designs, but the high-level design can better serve the product. The design gives the product culture. I believe that every product needs cultural output. The high or mediocre of product culture is reflected through design. Designers must have a kind of pride, that is, my products are advanced. Be brave in confronting something in your heart. Maybe you will find that the previous point of view is a misunderstanding of it, and it is the driving force to help you to a higher level. The same is true of life, sometimes we try to avoid but is what we exactly need. Changing attitudes and improving abilities need time. Familiar with the business journey, delving into business needs, this is a arduous process, but imagine that when designing a product （no matter web or mobile interface）that fits the user's psychology because you are proficient with the business, when the project comes online, because your hard work, you will be very happy and proudly add it to your personal website, because you will probably tell any interviewer in the future that you choose this design because of what business needs are considered. It will also help you to think more comprehensively and design activities more easily when designing any project in the future.

Sweetheart Summary

Last week I was in trouble at work, the exhaustion of design inspiration, and the clutter of the drawing page made me distressed about my design ability. I even doubted whether there was talent, but I believe talent will only make people work easier, but there will not be a big gap in the qualitative manifestation. As long as there is a plan, step by step, daily problems will be solved in time. When you are in trouble, it is also a sign of your stride forward. In any case, as a designer, you must always keep your beautiful, beautiful appearance, a beautiful heart, in order to output beautiful products, live with confidence and pride, because you are a beautiful design person.

Thanks for your attention!

Welcome to wenhaoji.art to know more about me!

See you soon.

[wenhaoji]

UI Design requires scientific concept of sustainable development

Hello everyone！  I'm Wenhao who a UI designer work in Beijing, this is my first post to meet you. I hope to cheer up my learning path here and meet guys who also love in design. 

Get Ready

As a UI designer,  I use Sketch to create my pages of a project (the current version only supports Mac), About the animation effect demonstration software, I use AE (AfterEffect) and Principle. It is an amazing tool for cooperation with other designers who work with you in the same one project---Abstract (Paid software, you can download the desktop application of mac), real-time, convenient and clear logic are its advantages.

About design websites that I often browse, the most commonly used Dribbble, Behance, UI CN, UI Movemen , Site Inspire,OnePageMania, Pinterest. I always collect some excellent and trendy navigations for searching for the latest trend and different design thoughts.

Inspirational or resource websites (Images/Videos/Fonts/Color/Texture) are essential,such as Baubauhaus,Booooooom,ArtStation,Lapa, Shutterstock, AllTheFreeStock(you also can check its CSS), Mixkit(images&videos), Colors&Fonts, Pond5(Free video editor & Templates).

About mobile illustration drawing software, I recommend Affinity, or you just use Procreate on iPad(It should be noted that it draws pixels, not vector graphics). There are some mobile and HTML illustration websites, such as Isoflat  ,404 Illustrations (HTML), unDraw(Mobile), IRA Design .

About C4D modeling material website, you can go Tfmstyle have a look.

About the mockup or kit of the Sketch, sketchappsources , Ui Store Design.

The above are my recommendations for design tools and websites, I hope to help. You can also click my personal website wenhaoji to browse the related websites I recommend.

Thanks Giant’s Shoulder

I really want to thank the rapid development of the Internet. The professional design software has gradually made the designers feel that the work is convenient and efficient. How to collaborate with other designers at the same time without missing resources and omissions, and how to communicate with developers in real time, these can be solved through the great Internet, just need to find application tools suitable for the team. It can help designers save the time of “find materials”, “modify pages” and “organize resources” in the past, so that designers can spend more and more time on combine business needs, design inspiration, page planning, interaction effects, color matching, etc. So choosing the right production tools can increase our productivity.

Set Up A Scientific UI Design Concept

I always think that the designers of interfaces and interactions are subordinate to computer art workers. This requires us to have a scientific and efficient working concept at the beginning. It is not freedom as artistic work, but I still believe that each art has its own norms and framework, I called "the more self-disciplined the freer". The scientific and efficient working philosophy is reflected in the fact that you need to manage each element of the page scientifically. Assembling components(Symbol) is the charm of UI design. After componentizing each element inside the page (Note that components are also divided into basic components and applications components), your page can achieve efficient changes, and at the same time, the update and replacement of products can achieve scientific sustainable development.

For designers who have just stepped into UI design, we must first form scientific working ideas, logical thinking of component use, and make preparations and arrangements based on evidence. Note that the logical thinking used by components is not only reflected in the page design of the Sketch. It is also in the motion design, but each software is named differently. In the Sketch can be called a panel and in the AE can be called synthesis,but they all have the same thinking-components constitute thinking.

Sweetheart Summary

Understanding some English is always helpful for UI designers. Whether it is easier to find the target when browsing the web, or when naming design components, it can make development colleagues easier to understand. Therefore, pay attention to accumulating some English expressions of UI interface elements, I believe that will become more and more confident in one's work!

Thanks for you attention!

Welcome to wenhaoji to know more about me!

See you soon.