This article is a summary of the first two articles about “comparative design” and “font combination design”. It is suggested that students read this article after reading the first two articles, and they will have a better grasp of the sense of hierarchy in design.
20 Ways to Make Eye-catching Design using the Principle of Contrast
10 Principles of Typography Design to Help You Use Typography Well
Example Teaching series:
- 12 Universal Design Methods for Transparent Backgrounds
- Eight Key Points of Color Matching when Designing web pages
- 10 Super Practical Design Tips for Using Blur Well
What does Visual Hierarchy mean?
Because it has a fatal impact on design projects, we need to thoroughly study and discuss. When you do this, we can make it easy for users to see the points you want to draw attention to and make the instructions easy to understand.
Review images
Without hierarchy, text, words, or articles all look the same, and it is very difficult for the user to obtain information that is useful to him.
Then next, I will introduce to you how to use the hierarchical effect of the text, so that users can easily obtain the information they need to make a website full of charm.
Details start with the following.
Review images
Text is a part of the design material, and conscious thinking about specific structural combinations is necessary. First of all, we need to think carefully about what words mean.
The size of the
This is the technique that accentuates design elements the most. People’s eyes will naturally be attracted by those big things, text if the use of large font size, users will naturally read those content.
Review images
Shrink the font so that it is different from other fonts, careful adjustment is necessary. When you make a font bigger or smaller, it doesn’t change exactly as we expect, and you need to be careful all the time. (e.g., when you’re using decorative fonts)
The lack of uniformity in font sizes can feel very amateurish and make text difficult to read, making resizing impossible. The following sample uses the font Open Sans, which is a very elegant font for headings. Open Sans is a Sans serif font commissioned by Google and designed by Steve Matteson. According to Google, it was designed with “the importance of honesty, open presentation, and a neutral but approachable look” and is “optimized for readability on print, the Internet, and mobile devices.”
Review images
When resizing a font, you need to verify that it is the right size. Start with body text, not headings, and determine their main font first. Trigger out the characteristics of the font, so that users see the effect of charm.
A few points to note when adjusting font sizes
Text should be at least 14pt. (19 px)
Title size, preferably under 35pt. (about 250% of the text)
Keep the size of your subheadings under 25pt. (about 175% of the text)
Navigation menu size, preferably under 23pt (about 165% of the text)
The character size of the navigation menu, preferably under 20pt (about 140% of the text)
Review images
The weight of the
The weight of the text refers to the thickness of the text and how much white space should be left. Obviously and size don’t matter, especially if you use a unique font to make something important stand out.
Once you’ve decided on the size and weight of your text, let’s figure out what font to use. Use bold and fine together to create a sense of layering. In order to convey the importance of text, there is a well-known design method that can render text even on a small screen.
Review images
italics
Italics are also a very effective means of emphasis and are sometimes more noticeable than bold. Because the visual difference is relatively small, it is very effective for special fonts.
Lower case or upper case?
All text in uppercase, one would argue, can have a shocking effect, and the same goes for web design. By using uppercase in a project, you can increase the sense of hierarchy and prevent small text from blending into the background.
Review images
The color
The weight of text also depends on color, so let’s create a color scheme that is easy to use. Therefore, we need to learn some basic principles of art, such as the difference between cool and warm colors, popular colors and natural colors, etc. It is very important to learn some basic principles of color matching.
When applying color matching to text, you also need to pay attention to its layering. Use bright colors to show that they are more important than other elements, and you need to know something about color and contrast.
Review images
contrast
As literal as it is, contrast can be used in a variety of ways, from color to weight to size. The most common technique is to compare the text with the headline.
White space
Leave space between paragraphs and text to improve reading. However, you need to be careful when using it because you need to adjust the character width.
Review images
First of all, the first thing we need to consider is the line spacing, different sizes and colors, we need to choose the appropriate style.
When using white space, because it also affects the order of the hierarchy, if you use a similar style of font, white space can slightly reduce the relevance between them, creating a refreshing effect. However, if you want to draw attention to the parts of the text compared to other text, you need to carefully adjust the balance between them.
Review images
The direction of
Orientation refers to the representation of words in layout. Although it may seem obvious, it is an important process in terms of level performance. In most cases, letters and numbers are arranged horizontally on the screen so that they are clean and easy to read.
Review images
If the text is placed vertically, not only is it an important design element, but all eyes are focused on it. While this technique can turn your design around, as a designer you need to fully understand your design intent before you use it.
Texture, texture
Review images
Texturing is a technique that takes a lot of time to master. The difficulty is not in the texture of the font itself, but in the style of all the text on the page. Use appropriate textures, vary design elements, and break the rules of design. Define the intent or concept so that your design doesn’t overcompensate.
The hierarchy
Review images
No matter how complex a project is, use text to split it into three layers to completely separate the important parts of the site. The layers used here are divided into the Primary layer, Secondary layer and Tertiary layer.
The text on the Primary level is the most prominent element on the page. It is often used in large sizes and bright colors to show its charm unlike other characters. However, because text has too much influence on the hierarchy, its use can be limited, such as only in headings.
Review images
The text on the Secondary layer (English: Secondary) does not have the same influence as the main layer, but it can make users’ attention turn to the content of the text. Use color, size, white space, etc., to distinguish between main and secondary points. Use this in subheadings, leads, and excerpts.
Tertiary characters are non-specific elements that are used in the main content. The fonts used here don’t need to be dramatic, choose simple fonts that don’t have any flashy effects. Don’t distract the user’s attention from the main content.
The last
Review images
In web design, especially when a lot of content needs to be presented, all elements are very important to the user’s visual experience. This is the end of using fonts to make your web pages more layered. I hope you can use them to make your web pages better. Thank you ~ feel the fun of design together.
Welcome to follow my wechat ~
Review images
“Designers who are skilled and don’t put pressure on themselves get paid well!”
Original address: PhotoshopVIP
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