This tutorial is to share with friends five practical tips for making exquisite and attractive e-commerce banners. It is really good and worth learning. Let’s take a look.
1. Division
Division refers to using graphics or pictures to divide the entire layout into 2 or more parts (such as top and bottom or left and right) in a limited layout space and arranging characters or titles on the left or right, etc., to express ideas and plans in a visual form, which will make your design more creative and give different visual feelings.
Role in design
Dividing a rigid single layout into multiple layouts has a certain visual guidance. At the same time, the size of each layout can also clarify the priority of the current design, which is more contrasting and makes the picture emotional and dynamic.
Straight line segmentation：
The division form usually seen is composed of straight lines, which makes the design serious and rational, but sometimes it also looks rigid and stiff.
Inclined segmentation:
Tilt division makes the layout faster and more dynamic. It is often used in sports, promotion, and game design. Different tilt directions also give people the sense of sliding down or up.
Triangular segmentation:
The triangle is a stable shape and also has a certain visual guidance. It usually gives people a sense of fashion, sharpness, violence, and stimulation.
Circular segmentation:
Unlike the sharp triangle, the circle has a smooth and full shape, which makes people feel cute and smart and makes the picture more friendly. Circles are usually more common in themes such as mother and baby and joy.
Application of division in design
From the copy and picture information, we know that this is a promotional design for custom wiring harnesses. The shape of the circle is more friendly and easier to accept.
Irregular shape division is more creative than simple geometric shape division, and it creates a full atmosphere. Thus, we often see excellent designs for books, boxes, etc.
Through the restoration of the picture layout division, it is not difficult to find that the picture without division loses the visual experience of contrast, rhythm, and atmosphere.
2. Layout
Layout refers to arranging the copy, characters, and products that you need to place in a certain area. In addition, adjust the position and size of the visual information elements on the layout to make the layout achieve a beautiful visual effect.
Role in design
There are thousands of designs, and the only changes are its color, quality, texture, details, angle, etc. In the layout process, we must follow the principles of highlighting the key points and harmonizing.
Summarize:
Divide the content into several areas and gather related content in one area. Then, according to your layout, find the direction and space that conform to it, such as the posture of the characters and the angle of the product.
Leave blank:
Don’t arrange the Banner too densely; leave a certain amount of space. Reduce the sense of oppression. After all, the Banner picture itself is not large.
What layout methods do you usually see or use:
Left-Right Layout:
Left-right structure layout, text on the left or right. It often appears in Banner layouts, and its main features are that it is visually clear, easy to distinguish, refreshing and straightforward.
Left-Center-Right Layout:
The left-center-right layout is much richer than the left-right layout, and the sense of hierarchy is also from 2 to 3. However, whether the left and right are text or characters and products, it is important to ensure that the information can be read normally and not affect the communication of the information.
Top-Down Layout:
The top-bottom layout is usually rare because it is more difficult to control.
Center Layout:
The center layout seems to be more popular this year, probably because it is easier to produce effects and is also easier to be loved by many designers.
Unlike other layouts, it starts from the center and expands outward. It may be confused with the left-center-right layout. The left-center-right is the three areas with their corresponding content, while the center layout is all centered around the center.
Application of layout in design
Take the design about custom wiring harnesses again:
The updated case makes it easier to create a sense of space, and there is a clear relationship between the character, text, and background division.
Its big titles are all added with models, a technique similar to using pictures as letters in some logos, which is better than using text alone.
3. Copywriting
Many designers are used to trying to find a suitable layout while adding content, which can easily lead to a problem requiring us to spend a lot of time debugging various layout methods. Everyone should have a deep understanding of this. We often spend a lot of time on the placement, size adjustment and color matching of elements.
Role in design
Our visual reading habit is from top to bottom and from left to right, except for the tilt, perspective and other layout methods required by special layouts. I often decide on the layout method based on the division and layout I have considered before.
Usually seen or used title layout methods:
Left alignment
Very intuitive, very traditional
Right alignment
Rarely, on the one hand, people are used to the left-to-right layout; on the other hand, too neat a layout will weaken the sense of promotion.
Center alignment
More common, easy-to-produce results
Free type
Staggered, easy to create a sense of promotion
Application of Copywriting in design
The case uses a left alignment layout, which makes the visual neat and consistent.
4. Color matching
If you really want to learn color matching well, I suggest you buy a book about color. It will be more detailed. Some things cannot be understood in a few cases or a few words. What is more important is your usual work attempts.
On the 12-color wheel, a hue and the hue on the left or right of its complementary color form a contrasting color relationship. For example, in the case of yellow, blue and red, such color matching has a weaker sense of repulsion than complementary color matching and appears more harmonious.
Application of color marching in design
Here, I will just briefly talk about my usual color-matching methods and case analysis.
Split the layout and set the blue and related materials on the left
Add contrasting red and related materials; remember to have different levels of color brightness and purity
Add copy and characters, which are also contrasting color materials
Add a headlight to increase brightness and related embellishments; the left is blue, and the right is red
5. Detailed performance
Everyone has heard the famous saying, “Details determine success or failure.” The eyes and feelings of the demander are always very sharp.
Role in design
So what are the details?
Word field
When matching the title and background, we could try using contrasting, complementary, and similar colors to the main color. In addition, when processing text in page design, any element, even small elements, needs to be shadowed to make it more vivid and vital.
Layer
If the design lacks layering, it will appear monotonous or weak. There are many layers, such as one large and one small model, distant and close views, and color layers.
Texture
Sometimes, we describe an excellent design as having great texture. Have you ever thought about where these textures are expressed? Is texture just a mixed color?
Whether it is the wood grain on the text, the pixel grid superposition or the pattern superposition on the background, they are all a way to express texture details. If these textures and patterns are removed, then it is just a pure color.
Light and Shadow
Where there is light, there is shadow. Proficient use of light and shadow will improve the effect of our page. Note that the color of light and shadow must be selected according to the color of the page. Otherwise, it will be very fancy.
Blank Space
When designing, don’t fill the page with everything; otherwise, there will be no breathing space. You can use the size contrast of elements to enrich the space, but the more, the better.
Summary
There is no absolute formula and process for design in the world. Everyone should try more at work. I am also constantly trying and thinking about how to make breakthroughs, whether in layout, typesetting, details, etc. Thank you!