Developers must know 5 design tips

Excellent coding and excellent design are mutually reinforcing. Unfortunately, people who are weak in visual design often feel they lack talent, in other words, people either feel they have a superior aesthetic gift, or they are idiots. I can not agree with this statement.

You just have to think a little bit and you will find that if you stop writing at the age of 5, you may be a mess in writing, and the same is true for art design. Most people stop creating art when they start to master drawing.

Luckily, it's never too late to learn. And as a matter of fact, you will be more likely to learn objective knowledge from a subjective point of view in an increasingly mature manner.

If you're in a small team with several jobs, there's not much aesthetic basis. Or if you think your project has more visual space to play with, this article is written for you. We'll talk about the traditional 5 elements and principles that eliminate ugly art design (or at least some degree of cover-up)

　　1. To a point to stay white

Most developers don't care about adding white space like margins, padding, row heights, or any other CSS attribute that adds white space. It is easy to identify the interface that the developer is designing: The text is tightly adjacent to the edge, without any white space, and the screen elements are split through a straight line, not blank.

As you can see, in the box above, the text tightly squeezed to the edge of the box, there is no space between each line. By contrast, the second one is much easier to read and can be seen to be carefully planned.

In the realm of art, this area between elements is called negative space, although in other areas of design it is often called "Blank Space". Negative space enables viewers to quickly identify different parts of the design. It also makes the text easier to read.

Here are a few tips:

Make sure the text has enough "breathing" space. There should be a suitable padding on the four sides of the area. The text should not touch the edge of the element.

Note "box in box". When the elements of a page use borders rather than margins, you get the nesting of rectangles. Next time you add a border to an element, try adding margins to replace it.

Extra advice: Add a little extra white space to the bottom edge of the element. This usually creates some visual uplift, making these elements look lighter on the page. When artists make a lining, they usually use this to make the edges look bigger than the other edges. Just using the method of leaving White is a good way to make you 100% better than any other developer trying to do visual design.

　　2. Set the light and shade to increase the contrast

In music, there is a concept called intensity (Dynamics, a dance movement or modality that changes with the strength of music). By playing the softer part of the play, this makes the treble part sound more high-pitched, which adds to the emotion and vice versa. The rationale in the design is the same. When all things are the focus, there is no point.

These characters are symbols of different musical intensity, from soft to high-pitched: weak, medium weak, medium strong, strong. In design, you can adjust the visual weight by the color of the light and shade. The gradient below the picture is called the value scale.

Light and shade fit, a term used to describe color and shade. When the Ming and the dark tune together, they formed a contrast. For example, the indication text in a form may not be as important as the label of the form, so you should use a smaller font size or gray to display the relevant text, rather than the eye-catching black. If the table uses black bold to display the Email tab bar, you may need to add some additional instructions at the bottom to convince the user that they will not use the provided address to do something illegal. This suggestive text is less important than the other, so it's slightly lighter than the others.

When you edit your profile in treehouse, you can add a personalized domain name to yourself. The darker text shows your unique name, and the lighter text is the other part of the URL.

The sense of visual weight is not the only thing you should be aware of. You also have to make sure that the right mix of light and shade, so that the elements on the screen can easily be distinguished. This is a very common design idea, because the human eye is actually more sensitive to color than color.

Some suggestions:

As with writing code, you should test your design first. Before releasing your new design version, try using grayscale to view your Web page first. So you can immediately see where the color is the deepest and the most shallow. If everything seems to be the same, add more light and shade to increase the contrast. Pure color is not enough to distinguish the different design elements, light and shade coordination is more important.

Screen your Web page and then use a picture editing tool like Photoshop to adjust the curves, levels, and look at the different effects. Sometimes you'll find that using CSS for subtle tweaks makes the design look more pleasing to the eye. In almost every form of design, beginners will be tempted to turn up the contrast of light and shade. Dimming the light and shade is a sign of maturity, and it also helps to highlight important parts of the design.

　　3. Increase diversity with textures

The vast majority of things in the real world are not completely flat and smooth. Textures can bring a variety to your interface. Even if you don't try to replicate real surfaces with skueomorphism, it's a good idea to add some textures in different places. The source of inspiration for textures is all around, paper, metal, stone, all right. Even large chunks of text can be thought of as being textured. Usually a little random noise can distinguish your design from those of other mediocre and tedious designs.

The texture can make the mundane object have its own characteristics and vitality.

Some suggestions about textures:

Textures can add visual richness, both symbolically and literally, while also making the page more open and deep.

If you use a gradient, or a lot of subtle color transitions, you should really use some light textures at the top, because it reduces the color stripe effect (banding) and makes the color transition more natural. This can be easily achieved by multiple backgounds in CSS3.

Using a multi-tier background in CSS3 also means that you can use the smallest file size to achieve texture. You can fill the entire page with a small square filled with noise. Then, you can also use this small box to many other places.

4. Use shape to express

In web design, the most easily overlooked art element is the shape. There seems to be a lot of two-dimensional shapes in the world, but in the world of HTML and CSS it is more rectangular. In fact, the box model is the most important concept that needs to be mastered in CSS. When you're writing code, trying to connect to a database, or adjusting the appropriate location of the background, it's easy to throw the basics behind you. In a page, a non rectangle allows important elements to attract sufficient attention.

This arrow-shaped return key in iOS not only attracts attention, but also expresses the actual function of the button.

Just because most of our tools are based on rectangles, that doesn't mean we can't break the routine and make other shapes. In fact, CSS allows you to make relatively complex shapes by making a little effort.

Why should you use shapes:

Many objects are designed on a rectangular basis: televisions, tables, rooms, and so on. Even if you don't consciously notice them, curved and irregular objects are more likely to attract attention. Try a unique shape instead of using colors, shading, or simply making the elements appear larger on the page.

A well-designed icon or logo can be seen as a simple shape, such as the logo of Apple's Sony company. When designing icons and logos, the first step starts with a pure black shape. Then you can play it free, add any color, any shape.

Extra advice: If you're trying to increase the interaction in your webapp, but the visitor doesn't click on your button, try using a different shape for A/b test, for example, try using an arrow instead of a rectangular button. It may seem a bit awkward at first, but it might attract enough attention. Similarly, never let a tool limit your imagination. Design first, then look for the possible things.

　5. Find a balance

It is important to look back at the overall effect before you spend hours arranging the pixel for the detail design of the page. Visual balance is a very difficult thing to convey in direct language, but it is a talent that can be developed quickly.

In the starry Night, Van Gogh used a rising horizontal line on the right side of the screen to balance the dark shapes on the left. The bright and unique shape of the crescent moon controls the upper-right corner and echoes the dark white space in the lower left corner.

Balance is a way of thinking about design composition and layout. It refers to the different distribution of visual weights in different areas throughout the design. It is important to apply this correctly: Unbalanced pages can create a sense of nervousness. In rare cases, you can use balance to intentionally create tension, such as a website designed for horror movies, but in most Web applications, this should be avoided.

It's usually a little bit of a glance to see if one side of the page is heavier than the other. Perhaps compared to the other side of the design, there are too many elements on one side, too much contrast, too much color, and so on. Even with the vertical scrolling of the page, it is important to consider the upper and lower balance in the page, but that is not as important as the horizontal balance.

A few suggestions to make the page feel balanced:

Draw a vertical line that extends all the way to the middle of the page. Do you now feel that this side looks a little more than the other side of the page? Design does not need to be symmetrical, but at least about the same proportion.

Browse the page from top to bottom. This will prevent your eyes from reading the text and explaining the role of the UI widget. Instead, you should focus on where most of the elements in the page are stacked. If you are not sure, you can also combine with the 1th.

　　Summarize:

These basic elements and principles make it easier for you to understand design. They certainly can't give you some kind of mystical artistic superpower, but it can help you create some elegant pages. If you have some similar suggestions, I would be happy to see them in the comments.