3 Simple UI Design Tips

I'm going to bring you 3 very simple and practical UI design techniques that are related to processing pixels, simply manipulating pixels to make your UI design stand out, but now many modern design trends are often using these technologies, and it does have a good effect. It provides a more stereoscopic and palpable sense of design.

　1, Pixel Shadow

The UI design technique for pixel shading is very simple to add a hard edge projection of a pixel to the image. In simple terms, you select the projection in the Photoshop layer blending option and set the size to 0 to set the distance (Distance) to 1px. Because there are only 1 pixel shadows, the design does not give people the feeling of overuse.

2, Shadow heightening light

This is a very modest but effective UI design technique.

When the title section is dark, it still does not give us a sense of prominence after adding a soft shadow, and the UI design technique for heightening shadows is used. The method is simple, and the pixel segmentation method is used. Between the title and the content, add a pixel white line and reduce the transparency appropriately.

　　3, two pixel segmentation

The two-pixel segmentation technique is widely used in UI design and Web page layout, which is a kind of subtle visual effect. May not be noticed, but it works really well if applied properly.

Enlarge the screen in Photoshop so we can get to work at pixel level. Create a new layer, select the Pencil tool, select the white foreground color, and hold down the SHIFT key so you can draw a 1-pixel line between the menu and the logo. In the same way, draw a black line above the white lines. Usually I will use Photoshop to adjust their transparency to their own needs, so that they blend with the colors around them.