Editor's Introduction: Design requires a certain amount of technology, but if there is a lack of aesthetics, the work may be ignored because of the lack of design sense. So how can we enhance the design sense of the work? In this article, the author describes ten design techniques, so let's take a look!
Hi, I'm Caiyun.
Everyone enters the design industry as a novice, no one is born with a good aesthetic, and it must also be trained like everything else. It can be very helpful to look at designs on Dribbble every day, but many times you may just be admiring the design and not understanding why.
No ideas, just materials, not knowing what to design, all of which can be a resistance to your progress and give you frustration. In today's article I will teach you 10 very simple design techniques that do not require any special skills and can greatly enhance the design of your work as long as they are used.
Of course, these are not formula theorems, but techniques that work well in most cases.
First, make good use of black and white
No idea? Don't have a good illustration? Then only the universal black and white need to be used, and a "abstract design" with the correct composition can be quickly obtained. Making good use of black and white in your work will help you understand balance, white space, and how to use text and geometry.
Let's take a quick look at an example where the use of black and white is simple and effective in presenting a work that looks very advanced.
Second, keep the picture balanced
I like to test my designs with "things" of my own invention, which I call the "balanced solution" of my own. It's a black-and-white approach to blocking content, and I'll replace content with simple geometry.
My method is to let the black block cover the element, and then calculate the black area on the left and right, which is roughly equal, which is considered a balance. If you apply this principle to the interface, you will get the following result:
Replace the main content with a black rectangle, with gray as the secondary content. Obviously you have to look with your eyes, but we can also calculate directly. The sum of the areas of the black rectangle in the left area is (236×138) + (934×132) + (674×44) + (313×69) = 207109px, and the large rectangle area on the right is (446×446) = 198916px. The difference between them is small, with an error of only 3.9558%
I don't have to calculate it now before designing, and after years of practice, this awareness becomes a natural thing because your eyes will feel unbalanced.
(Caiyun Note: Regarding visual balance, what is actually said here is that the visual area should be roughly the same, and the human eye will perceive the balance.) Just happened to be caiyun in the previous article "Why does your design always feel uncomfortable?" It is likely that the visual balance is not done well" there is a sharing of more comprehensive picture balance knowledge, must read it. ）
Third, add background to the work
In the previous example, I used a gray background to show the design work, but you can actually try different elements, which helps to increase the sense of space and background effect of the picture.
But beware, in a real website, there may not be so much extra space around the page, so this is just a work presentation technique.
In the above exhibition, the coffee beans give people the feeling of depth and quality.
Fourth, use the standard font size
No need to waste time testing dimensions all day long. I suggest that the paragraph text size is about 14-18pt, the subtitle is 24-36pt, and the heading can be a larger font size (I personally am used to using 96-144pt). Figma's default size is ideal for typography.
The size above looks too small, which is normal, because the picture you see on your phone is normal to see it in full screen on your computer.
Note: Some fonts are much larger or smaller than others. You should use a standard font like Roboto, which is the perfect body font if the font size is similar to 14-18pt Roboto.
Paragraph 18, Navigation 24, Heading 96
Caiyun Note: I suggest that small partners who have just entered the industry, such as not knowing the web page specifications, mobile terminal specifications, a relatively fast and effective way to learn the specifications is to screenshot the application of the big factory, web pages and APP can be. Then, directly to the screenshot is good, remember when people do the interface, how big the font is, what color, spacing, font size and so on.
Keeping these parameters in mind, at least it's not easy to make mistakes. After that, in their own projects to customize the specifications, on how to develop the design specifications I have also written articles before, want to understand this piece of knowledge must go to see the "original design specifications to be so understood, already know it is good!" 》
Fifth, increase the z-axis
If you have some transparent images, you can use them to design some 3D layers. If you don't, you can use the web version of AI Auto Keying Artifact!
Today's online de-backing tools will mostly integrate AI artificial intelligence technology, in the form of machine learning to build a model that can accurately identify the foreground and background, the advantage of using machine automation to remove the background is fast, accurate and without additional editing, even if there is no professional drawing software can be carried out in the browser, remove.bg is the earliest online de-backing service, and the most powerful choice, and later there is FocoClip.
As a Z-index in CSS, you can place transparent images behind or in front of other projects, giving the illusion of three dimensions. This is very effective for enhancing the sense of design.
Let's look at a simple design I use this technique for.
The bird's beak moves out of bounds from the green background to the yellow background, enhancing the overall visual impact.
Sixth, use high-grade light colors
Bright colors are great, but if not used well, they often lead to radical design and poor graphics. Also, light color designs (frigid designs) are very popular these days, so let's start experimenting with a new area of the color picker.
Within this red box range, you can quickly select some of the better colors
There is nothing wrong with both colors, which is an aesthetic issue, but if you want to express some more advanced design feeling, you can try light colors.
7. Create a sense of breathing
In my opinion, a large blank space is better than too little white space. The cluttered full-slot design is terrible, and the sense of breathing can be obtained in a number of ways:
Keep large areas of the background visible
Make good use of spacing to avoid text wall effects
Use images that don't attract much attention
Streamline the text and preserve the catchy phrases
Larger white spaces (referring to black areas in the image above) appear more advanced.
8. Add noise
Usually when we think about design, we think of a clean, fluid, clear concept. But images that are too clean can feel unreal and lack texture.
Noise is a great friend in design, especially when you want to give your website an elegant or artistic look. In addition, applying a subtle noise to give the picture a cinematic look is ideal for use in videos and dynamic websites.
You can use Photoshop to create a noise-Gaussian-distributed texture in size 2-4K on a white background and drop it at the top of the page.
Some noise has been added throughout the page, which gives the overall picture a stronger texture. (The effect of noise here is more subtle, the small picture may not be clear, and the noise effect can be seen by looking at the large picture)
Nine, use beautiful fonts
There are a lot of different word families and styles, but in general, I've divided them into three broad categories:
Serif font
Sans-serif font
Body font
Commonly used serif fonts such as Abril Fatface, Playfair Display, Volux, Chalga, etc.
Sans-Serif fonts include Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....
10. Use geometry
This may be the hardest trick to use, but if used correctly, it's sure to shine.
Using geometry helps to reinforce the order in concepts and layouts, without even requiring a drawing. Finding the right geometry is difficult and I still can't get a good grasp of it to this day.
A good trick is to use the letters, numbers, and headings in your copy as geometric shapes: make them huge and clever, or use some special letters as shapes (A works well). (This technique is very practical, and the cloud is often on some pages with less visual content, using a large geometric figure such as a capital letter as the bottom background, using a very light color, it looks visually richer.) ）
#专栏作家 #
Caiyunsky, Senior Visual Designer of Tencent; Public Account: Caiyun Translation Design
This article was originally published in Everyone is a Product Manager. Reproduction without permission is prohibited
The title image is from Unsplash, based on the CC0 protocol