- Common webpage Design mistakes
- Original author: Tilda
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: StellaBauhinia
- Proofread by: BillShiyaoZhang, Hopsken
List of common Web design mistakes
Simple layout and design tips to help you write great web pages
Common design mistakes to avoid on the home page
1. Page content is not divided into logical areas
Page information is easier to understand if it is grouped into logical areas. Please set the Padding to 120 to 180 pixels and separate the different text areas by the background color.
There are no margins between groups of related information, and the design requires color blocks to divide the page into logical areas. As a result, the information is hard to read at the moment, and the area grouping of the text is not clear.
The margins are large enough and the different areas are separated by the background color, which makes it easy to see which areas contain what information.
2. Unequal spacing of page elements
Set equal white space for logical areas of the page. Otherwise, your page will look cluttered and users won’t divide their attention evenly across all areas.
The space between the different positions is uneven and creates the impression that the company information is connected to the title, even though the structure of each area is the same.
Equal margins above and below the title and content make it clear that the information in each logical area is equally important.
3. Margins are too small, which means users can’t split content into logical areas
To avoid mixing logical partitions, separate them and insert a large blank space (at least 120 pixels).
Narrow margins are used so that the areas that make up the site are glued together. This makes the page crowded and confusing — visitors to the site think it’s a piece of plain text, not a different area of meaning.
The margins are large enough so that the two areas are easily distinguished.
4. Avoid low contrast between text and base image
There should be enough contrast between the text and the background. To make the text stand out, place a contrast filter over the base image. Black is popular, but you can also mix and match with bright colors.
Another option is to start with a high contrast image and place it on top of the darker part of the photo.
The photo is too bright to read
Text is easier to read after using a filter on a photo.
5. Too many styles on your page
Too many typography and design styles on a single page can look unprofessional and difficult to read. To avoid this and desaturate the page, limit yourself to one font and two text styles, such as plain and bold.
With so many typographical styles, it’s not clear what the visual focus is.
Only one font, one color and two styles were used for visual saturation. The layout of this page looks neat.
6. Color blocks are too narrow
Don’t use color blocks to highlight narrow page elements. It’s just ugly. Headlines, for example, have become conspicuous by their text size, style, and spacing. Do you want to highlight a point on the page? Use the background color on the entire area, including the associated title and text.
Headings placed on a colorful background break up the continuity of the page and make them look like separate, independent elements.
The title and associated text use the same background. This suggests that they belong to the same logical region.
7. Too much text in narrow columns
When there is a lot of text in a narrow column, reading can be difficult because the page visitor has to jump from line to line. Plus, it’s just ugly! Better reduce the number of columns and shorten the text, otherwise no one will read it.
Long, concentrated columns are hard to read
The text in the column is small, so it’s easy to read
8. Too much centered text
When text is short, it’s good to center the page, otherwise it’s hard for users to navigate efficiently. Also, increase the font size from 24 pixels.
If you need to contain a lot of text, use areas with collapsible text (in Tilda, they are TX12, TX16N, or the button BF703).
Long, concentrated text is difficult to read
The short text under the heading (all centered) looks good on the page
9. Text covers an important part of the picture
Avoid using text to overwrite meaningful parts or small details of an image. Doing so will blur the image and make the text hard to read. Try different text positions, such as center, left aligned, or vertical.
The title obscured the woman’s face. There is a lot of detail (in the picture below the text) that makes the text difficult to read.
The pictures and text are easy to read and well composed.
10. Misuse of visual hierarchy
To make the hierarchy of information visible on the page, the title font on the cover should be larger than the rest of the title, or at least the same size. For example, this is especially true if the headline is long.
The headline on the cover is disproportionately smaller than the headline below, which is confusing. Why is that? It makes the second headline stand out.
The headlines on the cover are larger than those in the area below, so the whole page looks consistent.
The same principle applies to visual hierarchies within logical areas. Headings should be the largest design element on the page, followed by smaller, less prominent sub-headings. Next, the content heading should be significantly smaller than the main heading, but with the same thickness. The smallest font should be used for content description.
This will help the page visitor distinguish between the most important and the next most important information.
The main heading is smaller than the content heading and looks like subordinate content, even though it is more important in the overall content.
The main title is the most prominent element on the page, and while the content title is in a smaller font, it is still clearly visible.
11. Split a logical area into two
An image or picture gallery that follows the text and takes up the full screen, much like a separate area. If you add margins around the image gallery, the text and image look like a logical area as a whole, due to the consistent background.
The full-screen image gallery looks detached from the title above, like a separate area.
The picture gallery matches the background of the title above it, which makes the composition look tight.
12. Headlines are too big and too long
Large fonts are perfect for short sentences. If the title is long, use small font. This will make it easier to read and give other design elements plenty of room on the page.
The title is too big and takes up the entire cover, while other design elements are squeezed into the remaining space and the title is difficult to read.
The page is organically integrated, all design elements are harmonized, and the text is easy to read.
13. Misuse of button border styles
The border is required when the button is transparent. Adding a border to a button with a color doesn’t make sense; it’s another pointless design feature that makes the page crowded and hard to read.
14. Too many colors
Using too many colors on a page can be confusing and confusing as to which parts are more important. A color or two is enough to give a visual standout to what really matters.
There are too many bright colors on the page and it’s confusing.
One color serves as a base, and gives color variety on top of it so that it doesn’t interfere with the content of the page.
Crowded menus
People visit websites to find solutions to their problems. Please help them! Use menus to help people navigate the site and find what they need easily and quickly. Don’t overload them with information. Five to seven menu items should be enough.
This menu contains so much information that it becomes difficult to navigate the page.
A simple menu makes it easy to find what you need.
The typographic design of the article is wrong
1. Long paragraphs of dense text
A wall of text makes reading difficult and difficult to understand. For a comfortable browsing experience, break it up into paragraphs, or introduce paragraphs such as key sentence patterns and pictures as reading areas.
A wall of text, hard to read.
Page elements such as quotes or images make reading text easier.
2. The headings are equidistant from the following paragraphs
The title should not be spaced equally apart in the middle of the chapter because it belongs to the paragraph below. Headings should be 2-3 times farther up than they are down. Also, headings should be about the same distance from the paragraphs below, or slightly more. In this way, the title visually leads to subsequent text.
The heading is equidistant from the next paragraph and it is not clear which paragraph it belongs to.
Because of the appropriate margin, it is clear that the heading belongs in the paragraph below.
3. There is no logical order in typesetting
In layout, font size comparison is used to divide text at different visual levels and establish strict structure. The main heading should be the most prominent on the page, while the sub-headings should be smaller but still clearly visible.
Headings and subheadings are roughly the same size, with no obvious hierarchy between them.
Page layout logic shows that the title is more important than the subtitle.
4. The upper and lower space of the area is not equal
If different areas are equally important on the page, they should have the same look and feel of the interface and be equally distant from each other.
If the space between the cover and the author’s photo is too narrow, it looks like the author is more connected to the cover than to the text behind it.
Because the margins on the top and bottom of the image are equal, each area is of equal importance.
5. The caption is too close to the picture
On the one hand, images and captions form a whole, but these are two separate elements, meaning that text should not interfere with the image.
The captions were attached to the pictures, one of which was awkward to look at alone.
There is a lot of space between the image and the caption, but the caption is clearly attached to the image.
6. Too little space between subheadings and text
The subheading and the text that follows it belong together, but if the space between paragraphs is larger than the space between the subheading and paragraph, the text will look incoherent.
The space between headings and paragraphs is smaller than the space between paragraphs.
The space after headings is slightly larger than the space between paragraphs.
7. Visually salient elements are placed too close to the text
Page elements used for emphasis, such as key or quote sentences, are independent. Set the margin between them and the text at 75-120 pixels to make them really stand out.
The space between text and prominent elements is too small.
Because of the large space, the quotes really stand out.
8. The visual contrast between elements is too low
If you want to emphasize a sentence, make it bold and make the key sentence 10 to 15 pixels larger than the body size. Make the key sentences stand out from the rest of the text.
Key sentences are intermixed with the rest of the text. It looks messy. Try to avoid it.
Now everyone can see it at a glance, because the font is large and there is plenty of space around it.
9. Use a background color for long narrow text areas
If you want to emphasize a small part of the page, such as the author, just put enough white space around it and the user will be impressed by the space. Do not put this section on the background color, it will look inappropriate.
Do not use background colors for subheadings. Using a larger font and spacing is enough to make it stand out on the page.
10. White space in two full-screen images
When you use a list of full-screen images, avoid leaving Spaces between them. Image borders are visible and no additional elements need to be added. Don’t add anything else.
Blank Spaces between full-screen images don’t make any sense and don’t look good.
In this example, the image stream is harmonious.
Using too many design languages
Design languages such as bold work well when used sparingly. Use too much and you can get in the way of page reading.
Many words are in bold, so a section of text seems to be broken.
Some marked words can draw the reader’s attention without interfering with the rest of the text.
12. Too many typography styles
Design should not interfere with readability. The less typographical style there is, the more important elements will be visible to the eye. Use main headings, subheadings, and key sentence styles.
There are too many typographical elements in this text. They are distracting the reader.
Very little typography, very clear emphasis points, very clear text hierarchy.
13. Use a center style for long text
The center style is often used for headings and quotes to distinguish them from the rest of the text. A long medium text is difficult to read.
A centered text looks messy and is hard to read.
Left-aligned text is comfortable for visual browsing.
14. The headline is too close to the picture
The title is a single design element. It should not be too close to the picture below. For a successful header image combination area, set elements no less than 60 pixels apart and add sub-headings — this will expand the page content and put the right focus where you need it.
The title is too close to the image and the page is suffocating.
In this case, the title is separated from the image with the subtitle, which leads the whole area, not just the image
15. Use italics where it’s not necessary
Italics are used to emphasize a word or phrase in text. It’s not as immediately noticeable as bold, but it does provide emphasis when needed.
Do not use italics throughout your text (body, headings, etc.). If sans-Serif fonts are used in text, do not use italics.
This sentence stands out because of the font size and spacing, so italics are not needed here.
Italics are used in the right places and the text is given the right amount of emphasis.
16. Areas are incongruous relative to the center of the page and other elements
If you take a break to resize your page (changing font size, alignment, or indentation) and review it, you can easily spot this mistake.
In this example, the title is moved to the left and the text is moved to the right.
All text elements are in harmony with each other.
By Ira Smirnova, Masha Belaya, Julia Zass Page layout design: Julia Zass
Do you find this article useful? If so, please share it with your friends. Thank you very much!
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.