For every web designer, there will always be times during the design process when design decisions need to be made. Maybe your company doesn't have a full-time designer, and the requirements call for a completely new UI; or maybe you're working on a personal project of your own that you want to be stronger than Bootstrap's default. At this time, many people will flinch: "I'm not an artist, I can't make better effects!" But it turns out that if you want to design better effects, it is more important to use skills reasonably, and it can be effective. of.
In today's article, we summarize 7 simple b2b data and intuitive tips to improve the visual effect of web pages and enhance the sense of sophistication. Very practical and practical, I hope you like it.
1. Use color and weight to create hierarchy, not just size contrast
When it comes to styling UI text, the most common mistake is to rely too heavily on font size differences to create contrast.
"Is this text important? Then make it bigger." "Is this text less important? Then make it smaller."
Simply using font size contrast is not enough to create a contrast, try to combine color and word weight to create a better contrast effect.
"Is this text important? Let's make it bolder." "Is this text less important? Let's make it lighter."
You can even go with two or three colors if you can:
Use dark colors for main content (like headlines, but don't use solid black)
Secondary content is greyed out (such as the date the article was published)
Light grey for assistive content (such as copyright notices in footers)
Similarly, in UI design, usually two different font weights are enough to create an excellent sense of hierarchy:
Most text is at normal weight (400 to 500, depending on the font)
Use a heavier weight (600 to 700, depending on the font) for text that needs emphasis
You should try not to make the text weight less than 400, because the font size of this part is already small, and less than 400 will make it less readable. If you still need to reduce the font weight, you may wish to make the font lighter, or replace it with another font that is more recognizable and has a relatively small font weight.