We covered common typography and some of the little things you need to pay attention to when using typography. Next, we will continue to explain the details. After all, the most basic element of all good works is the richness and perfection of details. If the details are well handled, it is difficult for works to come up with problems. Today this article from the text typesetting rules, line spacing and spacing, the use of the main and subtitle and other details to help you make a detailed e-commerce Banner in place.
Review of past e-commerce design:
A,The arrangement of words should follow the rules
Our basic rules for reading text are top to bottom, left to right. The layout of the copy should follow this rule as much as possible, with the exception of special typography, to minimize jagged or right-aligned alignment. In most cases, left-aligned or center-aligned alignment is the best choice.
Review images
△ Left aligned, center aligned, right aligned, uneven (left to right)
Review images
The left alignment principle is followed, whether it is the use of special effects, before and after layers of text or the slant of text.
When the text is arranged along the left side of a certain plate or material, the right alignment will be better than the left and center alignment, but it must be remembered that this is a special case ↓
Review images
The above 7 images are all the work of @Naniee
Now I’m going to use a small example to make this more explicit.
Review images
△ Jagged and confused vision
Review images
△ Right aligned, irregular blank on the left is uncomfortable to read
Review images
▽ Left alignment: The gap between the product and the text is a painful place
↓ Change the position of the text and the body to remove uneven gaps, so use left alignment flexibly
Review images
↓ Use center alignment to give the overall layout a sense of freedom
Review images
Here someone will ask, this figure is irregular. There are two, why the first uncomfortable second ok, here is visual points I mentioned earlier, from normal to read the order from left to right, zhang’s visual 1} {the entrance is not neat, is a hard beginning in visual disturbance, and the second is the visual {} at the exit end not neat, The exit part is the moderating part, which can reduce visual hard interference. Regardless of aesthetics and typographical issues, left-aligned reading is much better than right-aligned reading in terms of fluency and rationality.
Review images
Second,Identify the main and subheadings and descriptions
The core of text typesetting application is contrast, and who to contrast, how to contrast, why contrast is a lot of designers do not do well.
The main title is big, bold and eye-catching. The subheading and the main heading use the same font, slightly larger, slightly thicker, more orderly. Description — Often accompanied by physical collocations to delineate separation. Easy to read, fine, small (some copy without description or subtitle, can be used for reference)
In addition, in the selection of fonts, try not to use low recognition, the characteristics of the opposite font.
Here’s an example:
Review images
There are a few problems in the figure above, which is also a lot of text typesetting problems of friends often make some problems.
Review images
1, “hd flawless, beautiful if natural” text recognition is low, not easy to read. In many cases, the viewer will only stay in the picture for a few seconds. If you can’t recognize what you are writing in this limited time, you will lose interest in your work, and your work itself is a failure.
2. The main title is generally defined as the name of the product, the name of the activity, the important information to be expressed, etc. The screen should be the main title of silky flawless BB cream. Hd flawless, if the United States is born just the subtitle. Be sure to use good judgment when drawing.
Review images
3. In the shape decoration used for description, our manager mainly uses filling, and seldom uses decoration in the form of stroke. This kind of text is too thin, and if it is not controlled properly, the whole description will be very crowded and uncomfortable.
4, if the price, as far as possible eye-catching not too pocket. Instant purchase and other button form, try not to horizontal arrangement with price or text, will show the layout is very awkward, text level with button arrangement is a very difficult to control the typesetting form, try to let the button appear at the bottom of the copy.
To sum up, our copywriting could be improved a bit to be more consistent with explicit presentation:
Review images
In addition, try not to apply too many colors in the same small range. For the text color in the decorative shape below, it is best to apply a color close to the background color, otherwise it will feel very off and uncomfortable.
Review images
Try to keep the main and subheadings separate and do not give a sense of ambiguity or ambiguity:
Review images
On the main, subtitle typesetting form, before also have a clear example, can be used for reference.
Three,Application of main headings
In general, we are all based on the length of the theme a typography or so wide, and if the title is too long can lead to our visual points elongated, if words are arranged in the main title as a benchmark to will show the bloated, not according to the main heading to arrangement, between main title and other text will have obvious disconnect, so in general, When the main title of a file is more than 8 characters long, we can selectively segment it.
Review images
View pictures View pictures
Many friends are willing to use the largest or the thickest text in the beginning of text typesetting. In fact, sometimes this format will make the picture top-heavy and have a strong sense of pressure. In the exploration stage of text typesetting, it is more reasonable to start with subtitle or reduced main title.
Review images
Each word of the main title can be used as a layer style when the number of words in the main title is slightly smaller. The main title can be flexibly used through size change, thickness change, rotation, stacking, arrangement and other ways, and special effects can be attached if necessary.
Review images
Review images
Four,Line spacing and spacing
The control of line spacing and spacing is the most important part of text typesetting. If it is well controlled, the whole copy will be harmonious. If it is not well controlled, even if the skills mentioned above are perfect, the whole will feel very uncomfortable. The distance of the air we must carefully consider whether the bearing is reasonable, frankly said that you are below the copy can hold the top copy, and the meaning of this support is to show through the row spacing and spacing.
Review images
In the figure above, for example, let’s talk about line spacing. The overall line spacing of the text in the figure above is conservative, which is more reasonable and random, but the whole text part looks rigid and dull.
Review images
We can start copy distance space, reasonable bearing under row spacing on the narrow width, the width can help you to support the picture, but note that this time we want to the same range of text as a whole, as a block, but don’t let this come out too much, the whole in a picture plate too much copy will be scattered, visual focus, not easily also Usually two pieces will do. However, the whole text can do some small floating line spacing between processing.
Review images
Review images
The red box part is a whole, pay attention to the above mentioned, even as a whole, the line spacing can also rent some small floating changes, especially when the copy is more do not let your text look rigid. Then the whole text and clearly divided into two parts, the red part, click to get part, through the two parts of the line spacing to increase the load, but do not do too much, try to let them focus on the scope of a field of vision.
Spacing generally use the default distance is the problem that there will not be too big, enough for many occasions, but sometimes we need through the spacing stretch to achieve certain purpose, such as in the “fishing rod” of high-quality goods stage compared with the whole document text is relatively weak, the way we can use text spacing tensile let it better effect, However, we should pay attention to the artificial stretching of the text spacing and try not to make the distance more than half of the current font size, so that the text will be messy.
Review images
↓ Try not to exceed half the size of a single text
Review images
If you have to make more than one volume of space, add some decorative effects to compensate for the visual problems caused by too much space.
Review images
To extend to a problem, a lot of friends are very like do adornment effect or translation in English, this kind of situation we don’t use lowercase, managers use capital letters lowercase characters have high low, a line down is very irregular and uneven, it is easy to interfere with the vision, and caps the same height can reduce this kind of conflict on the vision.
Review images
From the perspective of interference, punctuation marks in the text are also visual and can be selectively removed. We can use Spaces or some decorative symbols to replace rigid punctuation marks:
Review images
Thank you for your company all the way, from the bottom of my heart, infinite gratitude!
Welcome to “Three Design bones” public account yo:
Review images
“E-commerce Design Series good articles”
Review images
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.5 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com