Common Web Design Mistakes

It is easier for users to digest information if it is grouped into logical blocks. Set the padding to 120-80 pixels and separate blocks of text by using color backgrounds.

Same-size spaces should be set around logical blocks. Otherwise, your page will look messy, and users may not give equal consideration to each section.

To avoid logical parts from blending in, keep them separate and insert a large space (at least 120 pixels) between them.

There should be sufficient contrast between text and background. To make copy prominent, place a contrasting filter over the image. Black is a popular color but you could also use bright colors and mix and match them.

Another option is to use a contrasting image from the start and placing the copy on top of a dark section of a photograph.

Too many typographic and design styles on one page make it look unprofessional and hard to read. To avoid this, limit yourself to a single font and two weight options. For example, normal and bold.

Avoid emphasizing narrow page elements with color. It just doesn’t look good. For example, headings are already well-marked, thanks to their size, font weight, and paddings. Would you like to highlight a particular point on a page? Use a color background for the entire block, including a related heading and text copy.

It is difficult to read when there is a lot of text copy in narrow columns because website visitors have to skip from one line to the next. Also, it just doesn’t look good! It’s best to cut on the number of columns and shorten the text copy. Otherwise, nobody will read it.

Centering text on the page works well when there is little text, otherwise, it’s hard for users to navigate it efficiently. At the same time, increase the font size starting from 24 pixels.

If you need to include a lot of text, use the blocks featuring collapsible text copy (on Tilda, use blocks TX12, TX16N, or the button BF703).

Avoid covering meaningful parts or small details of an image with text. This way, you will both obscure the image and make the text illegible. Try different positions for the text lines, such as centered, left-aligned, or even vertical placement.

For information hierarchy to be clearly visible on a page, the title on the cover should be bigger than the rest of the headings or at least the same size. This is especially true if the heading is long, for example.

The same principle applies to visual hierarchy within a logical block. The heading should be the largest design element on the page, followed by a smaller, less prominent subheading. Next, feature titles that follow should be noticeably smaller than the heading and of the same weight. The smallest fonts should be used for feature descriptions.

This will help website visitors distinguish between the more important and less important information.

A full-screen image or gallery following a piece of text resembles a separate, independent block. If you add padding around the gallery, both text copy and images will look like a logical whole, thanks to a shared background.

A very large font is perfect for a short sentence. If the heading is long, use a smaller size font. This will make it easier to read and leave plenty of space for all other design elements on the page.

Borders are necessary when a button is transparent. Adding a border for a color button does not make sense. It’s just another meaningless design feature that overloads a page and makes it difficult to read it.

Using too many colors on a page is confusing. Also, it’s unclear which bits are more important. One or two colors are enough to give visual weight to what’s really important.

People visit websites to find solutions to their problems, help them! Use the menu to help people navigate the website and find what they need quickly and easily. Don’t overload them with excessive information. It’s enough to have 5 to 7 menu items.

A wall of text makes reading difficult to understand. For easy navigation, split it into paragraphs or introduce breaks such as impact phrases, quotes, or an images.

A heading should not "hang" between chapters at a similar distance because it belongs to the paragraph that follows. The spacing above a heading should be 2−3 times bigger than the space under it. Simultaneously, the distance under a heading should be roughly the same as the space between paragraphs or slightly larger. This way, the heading will visually refer to the subsequent text.

In typography, contrasting is used to visually divide different levels of text and establish a strict hierarchy. Main headings should be the most prominent on the page; subheads should be considerably smaller but still clearly visible.

If blocks carry the same weight, they should have the same look and feel and be positioned at an equal distance from each other.

On the one hand, the illustration and its caption form a single whole, but these are two separate elements, and captions should not interfere with the image.

The subheading and the text that follows it belong together, but if the space between paragraphs in an article is greater than the space between the subheading and the next paragraph, the article looks disjointed.

Elements used as expressions of emphasis such as key phrases or quotes are independent objects. To make them really stand out, set them 75-120 pixels from the main copy.

If you’d like to emphasize a certain phrase, be bold, make a key phrase bigger than the main text by 10−15 pixels. Let the key phrase really stand out from the rest of the text.

If you want to highlight a small section of the page, such as information about the author, you just need to set sufficient padding around it to create the impression of space. Don’t place place this section on a colored background; it will look out of place.

When you are using several full-screen images in a sequence, avoid leaving a space between them. The border will still be visible, and there is no need to add an additional element. It just doesn’t add anything, it’s meaningless.

Design accents (such as boldface here) work well when there are few of them. Put in too many, and this will get in the way of reading the page.

Design should not interfere with readability. The fewer typography styles there are, the better important elements are visible. It’s enough to emphasize headings and subheadings and use contrast for key phrases.

Centering is usually applied to headings and quotes to distinguish them from the rest of the text. A center-aligned long piece of text is difficult to read.

A heading is an individual design element. It should not be placed too close to an image that follows. For a winning combination, set padding at no less than 60 pixels, and add a subheading: it will unfold the page’s contents and place the right emphasis where it needs to be.

Italics are used to emphasize a word or short phrase in the text. It is not as immediately noticeable as the bold type, but it allows for emphasis where needed.

Don’t use italics for your body copy and headings. And if sans-serif fonts are used in the text copy, avoid italics altogether.

You can spot this annoying mistake yourself if you take a small break after editing your page (changing font size, alignments, or spacing) and take a fresh look at the result.