Check 23 most frequent mistakes of web page design.
parallax background

23 most frequent mistakes of web page design.

18 Answers How to correctly use the cards in web design.
August 24, 2017
5 ways to make a better first impression about the webdesign interface
September 19, 2017

Simple design tricks to help you to create a beautiful web page design.

1. Free choice of distances between elements

On a screenshot below pay attention to three elements on web page design: coverage, information on the author and subtitle. These are three independent blocks and it remains a puzzle why on a screenshot at the left a designer has reduced a distance between the top photo and the block about the author. They are equivalent therefore the distance from the top photo has to be equal to the distance to the subtitle.


Similar mistake — three elements: the footnote, the block with information on the author and the place of the publication and foot of the page. Reducing the distance between the middle block and lower, the designer unites them in whole though it is obvious that they are autonomous and the distance from the middle block to the footnote has to be same, as to foot of the page.

2. Displacement of the blocks

You will easily find this unfortunate slip if you after all manipulations with the text (change of font size, alignments, margins), just make a pause and look at from outside what we got.


3. Too small distance between an illustration and the caption

The caption to a photo is a trap for the designer. On the one hand, the illustration and the caption form uniform structure, but nevertheless it is two separate elements, and the text shouldn’t interfere on the territory of the picture.


4. The subtitle stuck to the photo

The subtitle shouldn’t be located too close to an illustration. If the caption to the photo is at least a semi-independent element, then a subtitle exactly belongs to all section, and not only to the picture.


5. Insufficient distance between a subtitle and the text

Yes, the subtitle and the subsequent text form the uniform block, but if the paragraph indention inside the text is longer, than distance between all text and a subtitle, the construction becomes disharmonious.


6.Too close distances from the main text to accented

The accented text in the main text is an independent object. It should be separated by the margins, and they shouldn’t be less, than line spacings inside the block.


7. Weak contrast of elements

The principle of contrast — one of the most important in design. The contrast highlights the main thing, helps to understand the relationships between elements. On the example at the left three elements are all approximately identical, each exists in themselves, because of this they collapse and look carelessly. On the right we have changed font size and it became clear — the small text deciphers heading, it is in tow with it. Heading and a form have approximately equal weight, they create a frame within which everything happens. The composition is formed.


If you have decided to place emphasis on any phrase — don’t be shy, tell more loudly, let the important thought be really stood out from the surrounding text. The small contrast between elements looks timid and uncertainly — neither one thing nor another.



8. Space between two full-screen images

The arrangement of several full-screen images in a row can be excellent reception. But in this case do not leave a space between them.


9. Color background for the narrow block

To emphasize the block with information on the author, it is enough to create space around. Filling by other color in this case is superfluous— the block does not so differ from other elements to additionally highlight it with color.

Subtitle should not also be highlighted, there is quite enough of fact that it is larger than the main text and is separated by margins.

10. Many styles

If in the source text after heading and a subtitle cutting follows at once, it is followed by the direct speech and other ways of emphasis of the text, then it is an occasion to talk to the editor — it will look disgustingly on the page.

11. Too big font size for heading

The most large font is good for one word or very short phrase. If heading is long, just change style with a smaller font, it will improve legibility of the text on web page design.

12. The overloaded menu

The person visits the website to find the solution of his (her) problem. Help him (her) with it. Use the menu in order that it was easier for visitor to orient and quicker to understand how you can help him (her). Don’t overload either the menu, or your visitor with superfluous information.

13. Inappropriate use of italics

The italics is used to select the word or a phrase in the text. It is not so much striking as bold typing, but allows to place emphasis in a certain place. You shouldn’t type all text or headings in italics.

In the texts typed by sans-serif fonts, it is better not to use italics absolutely. To be frank, there is no approved rule in this respect, but our persistent recommendation: don’t do that.

14. Inappropriate use of an outline in buttons

The outline is necessary to make the transparent button. It isn’t necessary to add an outline to a colored button.

15. Inappropriate use of separators

Don’t use at the same time many means of highlighting. Properly selected distances — already strong accent.

16. Use of the central justification for the long text

Justification on center considerably reduces legibility.


17. The small margins that prevent to divide semantic blocks of the website

18. Small space for the button and the large text in it

19. Use of the numerous colors

A variety of color accents creates confusion on the page.

20. Text overlay on a significant part of the image

Do not place text on the important parts of the photo and fine details. Leave space for heading on which it will be convenient to be read.


21. The long text in narrow columns with the central justification

Short length of a line and alignment of the text on center do the long text not readable. Reduction of quantity of columns, reduction of the text or justification on the left edge will be the best solution.

22. A large number of highlightings in the text

Accents work when they are few. A set of highlightings complicate reading.

23. One semantic is visually divided into two

If images belong to the concrete text, it has to be clear from their arrangement. The full-screen gallery looks the independent block.

If to add the fields to it, then, due to the general background, it will look the uniform semantic block with the text.

If you like the information, tell your friends about it. Thanks!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)