A detailed discussion on detail analysis in web design

A detailed discussion on detail analysis in web design
In design work, I often hear designers participating in the review or some leaders say that the design draft does not have enough details. Designers sometimes feel aggrieved: "I have already refined it to the pixel level, why do you say that the details are not enough? What are details?" This article uses a specific example to describe my understanding of design details.
Let's first talk about what the design details are. In fact, this is a very broad concept. If a design work is successful, the details must be in place, but details do not only refer to small things, such as pixel-level alignment, etc., but also include: if this form is not used here, would it be better to add a little texture or texture, whether it is coordinated with the overall design, whether the light and shadow relationship is consistent with the entire icon or the entire interface, etc.
When you are working on the details of the design, you must be humble and not impatient. Even if it is a very small point, you need to think more about how to make this point more in line with the temperament of the entire design work. After you are sure, you can start to implement it. Don’t just draw it in a few strokes because the work you need to do is small and not technically difficult, and then revise it during repeated reviews. This will probably take more time and will not achieve the desired effect. Next, I will use a specific design case to explain in detail what design details are and how to do a good job in design details during the design process.
There is a requirement that there is a pop-up box on the interface, as shown in Figure 1:
Detailed analysis in design 123WORDPRESS.COM
Figure 1 Design draft In order to adapt to the new features of the product, we need to add a small grabber to this pop-up box so that we can drag the pop-up box. The designer needs to add some modifications to the pop-up box to make it look like it can be dragged.
The requirements are actually very simple, and there are many ready-made examples to refer to. If you are a designer with some experience, you basically don’t need to look for any references and can draw a handle in just a few minutes. In order to illustrate the entire design requirements process, some reference diagrams are found here, as shown in Figure 2.
Figure 2 Grab Hand Reference Compared with existing more mature software, what everyone does is to add concave and convex particles to the grabbable part, which looks like it has great friction, to indicate that this area can be grabbed and dragged. So we can just follow this rule. Since the draggable part we need to do is the edge rather than the corner, we can do it by adding horizontal lines. OK, let's refine it to the pixel level to meet this requirement.
Figure 3 Design rendering The design draft came out very quickly, and we can also zoom in to see the details.
Figure 4 The effect of the design rendering can be clearly seen when it is enlarged 400%. This is a 3-pixel line drawn with a pencil, and then a projection is added. Let's zoom in and take a look.
Figure 5 The effect of zooming in 1600% is quite detailed now, right? Highlights, shadows and transitions are added to the three-pixel-high graphics. Isn't this detail well done? Well, from the zoomed-in picture, it seems that there is no problem. However, when we look back at the entire interface, we suddenly feel that it is a little "lacking in details". What's going on?
We have clearly already refined it to the pixel level, so why do we still feel uneasy? If you think about it carefully, it's probably like this: the elements of this interface are all rounded, including the projection, and the corners are slightly transitioned, but our grip part is directly drawn with pixels, so there are some problems with the temperament itself. But can we make it feel rounded at a height of three pixels? Actually, you can.
Think carefully about what would be better. Because this requirement belongs to continued design, it is necessary to first understand the design ideas of the existing interface. The interface is in skeuomorphic style, with the upper side slightly raised, so there is a one-pixel highlight on the upper edge, followed by self-shadow, and the rounded corners are also very obvious. So what we need to do is to create a realistic, rounded grip. To make the grip area a little more visible, we can even add a little base color.
Okay, let’s take a look at the finished draft first.
Figure 6 The final design now looks more reliable, and then we will look at the "details" implementation.
Figure 7 400% magnification effect diagram
Figure 8 Schematic diagram of the implementation of each element. In fact, in the first draft, we paid attention to most of the things, but we further refined them, using paths to outline rounded angles, and using bevel emboss and inner glow in Photoshop layer styles to simulate the texture of the protrusions themselves, instead of using pixels to outline them rigidly. The highlight layer has been refined, bright in the middle and darker on both sides. The projection also uses two layers of projection and external glow to simulate a more realistic projection effect. As for the newly added background color, because it is attached to the interface, it needs to conform to the texture of the interface itself. There is a pixel highlight on the top layer, and then there is a shadow in the area, and so on.
At this point, the interface detail optimization is almost complete. To sum up, the so-called details, on one level, refer to whether the pixel-level details in this design work have been done with care. On another level, after being refined to the pixel level, we look back to see whether the refined parts are consistent with the temperament of the entire work. Of these two levels, the second one is actually more important, but it is often overlooked. When a designer is working on a piece of work, he or she needs to always pay attention to the relationship between details and the whole. Details serve the whole, so it is necessary to deepen the details based on an understanding of the whole.
The above is my personal understanding of the design details. If you have any comments or suggestions, please feel free to discuss them.

<<:  How to use vw+rem for mobile layout

>>:  Use Typescript configuration steps in Vue

Recommend

Disadvantages and reasonable use of MySQL database index

Table of contents Proper use of indexes 1. Disadv...

Vue close browser logout implementation example

Table of contents 1. beforeunload event 2. Unload...

Vue realizes cascading selection of provinces, cities and districts

Recently, I need to implement a cascading selecti...

Detailed explanation of Getter usage in vuex

Preface Vuex allows us to define "getters&qu...

Implementation principle and configuration of MySql master-slave replication

Database read-write separation is an essential an...

Detailed explanation of Vue plugin

Summarize This article ends here. I hope it can b...

Summary of 50+ Utility Functions in JavaScript

JavaScript can do a lot of great things. This art...

How to install docker on centos

Here we only introduce the relatively simple inst...

10 minutes to thoroughly understand WeChat applet single page application routing

Single page application characteristics "Ass...

Detailed process of FastAPI deployment on Docker

Docker Learning https://www.cnblogs.com/poloyy/p/...

Super simple implementation of Docker to build a personal blog system

Install Docker Update the yum package to the late...

Use vue to implement handwritten signature function

Personal implementation screenshots: Install: npm...

Count the list tags in HTML

1. <dl> defines a list, <dt> defines ...

How to use mysql to complete the data generation in excel

Excel is the most commonly used tool for data ana...

Introduction and use of Javascript generator

What is a generator? A generator is some code tha...