Three main principles of website design

　　 1. Website of design company using sans serif font

Every web designer has said before that you need to use sans serif fonts online. This is not the case anymore. Break the rules! The new specification combines readable fonts well. These include serif, sans serif, novelty and script style. The key to choosing the right font (or palette) is to choose a font that is easy to read. There are also studies supporting this view.

The old online usability guide was simple: stick with sans serif fonts. Because the computer screen is too poor to render serifs correctly, trying to input serifs according to the font size will result in blurry letter shapes. Unfortunately, the new guidelines are not as clear as the old ones. Whether serif fonts are really better than sans serif fonts is inconclusive. And the reading speed difference between serif and sans serif is obviously small. Therefore, there is no strong usability guide to support the use of one, so you can make a choice based on other considerations, such as the emotion conveyed by the brand or specific printing style.

Therefore, continue and break the old sans serif rule. When considering which font to choose and whether it is readable, the following points should be noted.

Select medium weight or regular weight to ensure consistent driving width. Ultra light or thin may be difficult to read.

Stick to the average height of x. Making it thin and high may cause readability problems.

Find consistent and appropriate letter spacing without overusing ligatures or fonts.

The short paragraphs of the text use beautiful fonts, only with clear intentions.

Select a serif or sans serif font for a larger copy. Choose a letter with clear format to make it clear at a glance.

　　 2. Keep away from eye-catching background

For a while, the only acceptable colors for website backgrounds were white and neutral. It should be broken now. Bold and bright background colors can make background elements great. Color can give users a deep first impression, set the tone for the design, and is an interesting way to break the stereotype of the old design mode.

The second part of this fragile rule is to limit the number of colors in the palette. It's a good idea to have a unique brand palette, but you can bring more fun to each design project. The palette behind the material design is combined with more bold color choices to create an elegant and tacky style. More colors are acceptable. More and more websites and big brands are using color to help create interesting and fascinating experiences. And users seem to like it very much.

When you really need a simple palette to achieve standard consistency, please add some extra (brighter) colors for specific items. You don't have to redesign all brand materials to have a bright purple or green background, but there are many ways to incorporate more fashionable colors into your project.

Consider color photo coverage.

Choose a bright title color.

Change a neutral background and get something more memorable.

For buttons or call words, use bright colors. They don't have to be all red or blue.)

Use the hover state of occlusion color to encourage interaction.

　　 3. Establish symmetrical balance

In the early design career, too many senior designers advocated the power of fully symmetrical design to create harmony and balance. Looking back, many of these concepts are boring and too safe. Asymmetrical design can help you create more visual interest and balance without having to separate the two. Although there is symmetry, it may be more interesting to establish a balance between weight, space, and mutually cancelling elements.

In order to make full use of asymmetry in the design project, please consider the following factors to create a sense of harmony and visual fluency:

And element space balance each other. When matched with blank areas, the elements will feel more balanced.

Focus on movement and design as expected. Consider how people read and start "moving" heavier elements and text from left to right.

Use color to create focus.

Put everything on the grid to create a sense of organization and process.

Pay attention to symmetry. Asymmetrical design should not feel "skewed". Users should be able to browse content easily. Create containers for asymmetric elements using static elements, such as navigation.