The detail analysis in the design

Source: Internet
Author: User
Tags new features

In the design of the work, many times will be heard to participate in the review of the designer or some leaders said that the design manuscript details are not enough. Designers are sometimes wronged: "I have been refined to the pixel level, ah, why also said that the details are not enough?" This article, combined with a concrete example, describes my understanding of design details.

First of all, what is the details of the design. In fact, this is a very broad concept, a design works if successful, the details must be in place, but the details are not only small things, such as pixel-level alignment, in place, and so on, but also include: here if not this form, a little bit of texture or texture will be better, and the overall coordination, Whether the relationship is consistent with the entire icon or the entire interface, and so on.

In the design of the details of the time, must be rashness, even if it is a small point, but also need to think more, how to make this point more in line with the overall design of the temperament, and then go to work to achieve. And do not say because the things need to do is very small, and no technical difficulties, go directly to the finish, and then again and again in the review to modify, so that the time spent is likely more, and can not achieve the desired effect. Then with a specific design case to specifically describe what is the details of the design, as well as in the design process to the details of the design to do well.

One requirement is that there is a pop-up box on the interface, as shown in Figure 1:

Fig. 1 Design Manuscript

In order to adapt to the new features of the product, we need to add a small hand to the pop-up box, you can drag the pop-up box, you need to design the side of the pop-up box to add a little modification, so that it looks can be dragged.

Demand is simple, and there are a lot of ready-made examples to refer to. If you are a slightly experienced designer, basically do not need to find any reference can be directly a few minutes to draw a hand. In order to illustrate the overall design requirements of the process, we found some reference maps, such as Figure 2.

Fig. 2 The Gripper reference

Compared to the existing more mature software, everyone's approach is to take the part that can be crawled into the concave and convex particles, it looks as if the friction is very large, so as to indicate that the area can be grabbed drag. So we can use this rule, because the part that we need to do is the side instead of the angle, so we can add the horizontal line. Okay, let's zoom to pixel level to complete this requirement, J.

Fig. 3 Design Effect Chart

The design is coming out soon, and we can enlarge and look at the details.

Figure 4 Design Effect Chart Enlarge 400% effect

It's obvious to me that this is a 3-pixel line with a pencil and then a projection, so we can zoom in on it.

Figure 5 The effect of magnifying 1600%

Now that's a lot of detail, right? With the high light added to the three pixel height graphics, and the shadow is over, is the detail already well done? Well, it looks like there's nothing wrong with the enlarged picture, but this time we look back at the whole interface and suddenly feel a little "missing detail" ... What's the situation?

We have already refined to pixel level, why are we still a little uneasy? Think carefully about this: the elements of this interface are rounded, including the projection, the corners are a little over, and our hand part is a little bit of pixel directly to draw out, so, temperament itself is a bit of a problem. But at three pixel heights, can we make a mellow feel? Actually, you can.

It would be better to think carefully about what to do first. Because this requirement belongs to the continuation design, we need to try to figure out the design idea of the existing interface. The interface belongs to the Quasi object style, the upper side is slightly tilted, so the top edge has a pixel high light, then is from the shadow, rounded angle is also very obvious. So what we need to do is to be a materialized, rounded hand. In order to make the hand area more obvious, we can even add a little background.

OK, look at the finished manuscript first.

Figure 6 Final design

Now it looks more plausible, and then let's take a look at the "detail" implementation.

Figure 7 400% magnifying effect chart

Figure 8 The implementation of each element signals

In fact, on the first draft, most of the things we have noticed, but further refinement, using the path to outline the rounded angle, using the Photoshop layer style of the bevel relief, the inner glow to simulate the texture of the bulge itself, rather than using a pixel point to blunt outline. The high light layer is refined, the middle is bright, the two sides are darker. The projection also uses two layers of projection and outer glow to simulate a more realistic projection effect. As for the new background, because it is affixed to the interface, so you need to conform to the texture of the interface itself, the top layer has a pixel of the high light, and then the area of the shadow and so on.

Here, the interface details optimization is almost. Summed up, the so-called details, a level refers to this design work, pixel-level things have no intention to do, another level, thinning to the pixel level, back to see, the refinement of the part with the entire work is the temperament of unity. On these two levels, the second level is actually more important, but it is often overlooked. Designers in doing a work, need to always pay attention to the details and the overall relationship, detail is for the overall service, so need to understand the overall basis to deepen the details of the part.

The above is my personal understanding of the design details, have any comments or suggestions welcome everyone to discuss J

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.