Professional Documents
Culture Documents
Common Webpage Design Mistakes
Common Webpage Design Mistakes
Common webpage
design mistakes
Simple layout and design tips to help you create a stunning webpage
ere are thousands of people all over the world who create websites on Tilda. is article is
based on recent research by my colleagues and I. We analysed common mistakes that people
make when they create websites using our platform. Here is a list of dos and don'ts applicable
Nikita Obukhov
Tilda Publishing Founder
to any web design tool or service you use.
ere is little padding between sets of related information, plus this design needs colour Paddings are large enough, and the blocks are separated by colour, which makes one thing
blocks to divide content into logical sets. As a result, this information is hard to digest and it immediately clear – these blocks contain di erent types of content
is unclear which text should go with each block
Spaces of various widths look uneven and create an impression that company information is Same-size spaces around headings and the body copy help perceive the logical blocks as
linked to the header although every block is equally important carrying equally important information
Use narrow padding, and the blocks that make up the site stick to each other. is overloads Padding is large enough so the di erence between these two blocks is immediately visible
the page and is quite confusing — a site visitor is led to believe that this is one solid text and
not parts with di erent meaning
Another option is using a contrasting image from the start and placing the copy on top of a
dark section of a photograph.
Tilda Publishing Blog Create a website
is image is too light, which makes reading the text copy too di cult
Because of too many typography styles beings used, it's unclear where the emphasis lies One font, one colour and two types of saturation. e typography on the page looks neat and
clear
Headings placed on a colour background break up the page's continuity and look like Both the heading and a related text share the same background. It shows they belong to the
separate, independent elements same logical set
Long, contered columns are hard to read ere is little text in these columns, so reading it is easy
Tilda Publishing Blog Create a website
If you need to include a lot of text, use the blocks featuring collapsable text copy (in Tilda,
it's blocks TX12, TX16N or the button BF703).
Long, centered texts are not easy to read A short text under a headline (both centered) look good on a page
is headline gets in the way of the woman's face. With so many tiny details, it's hard to read e image and text copy are easy to read and form good composition
the text
e heading on the header is disproportionally smaller than the following heading, which is e heading on the header is bigger than the one in the following block, so the whole page
confusing. Why? It makes the second heading appear more prominent looks consistent
Tilda Publishing Blog Create a website
e same principle applies to visual hierarchy within a logical block. e headline should be
the largest design element on the page, followed by a smaller, less prominent subhead. Next,
features titles that follow should be noticeably smaller than the heading, and of the same
weight. e smallest fonts should be used for features descriptions.
is will help site visitors distinguish between the most important and less important
information.
e headline is smaller than features titles and seems secondary, although it's more important e headline is the most prominent element on the page and although features titles are
in this context written in a smaller type, they are still clearly visible
A full-screen gallery looks disjointed from the headline above and looks like a standalone e gallery shares the same backdrop as the heading right above it, which makes the whole
block composition look solid
A headline that is too big takes up an entire cover, while design elements jostle for space and is page is composed well, all the design elements are in balance with each other, and the
the headline is hard to read copy is easy to read
Tilda Publishing Blog Create a website
ere are too many bright colours on the page; this is confusing One colour accent creates variety and doesn't distract from the contents of the page
is menu carries too much information, making site navigation more di cult
Tilda Publishing Blog Create a website
A wall of text is hard to look at Elements such as pull quotes or images make reading texts easier
e heading is positioned at an equal distance between paragraphs above and below it, and anks to the use of padding under the heading, it's obvious that the heading belongs with
it's unclear which paragraph it belongs with the text that follows
Tilda Publishing Blog Create a website
A heading and subhead are approximately the same size, and there is no clear hierarchy Logically, the heading is more important than a subhead
between them
If the space between the header and an author's image is too narrow, it looks as if the author anks to identical size padding above and below the image, blocks appear equal
has more to do with the header rather than the text that follows
e caption sticks to the image and we have trouble properly engaging with either of them ere is a lot of white space between the image and its caption, yet it's clear that the caption
goes with the image
6.
Tilda Publishing Blog There is too little space between subhead Create a website
Space between a heading and a paragraph is smaller than between paragraphs themselves Space a er the heading is slightly bigger than space between paragraphs
ere is too little space between the main text and stand-out elements A pull quote truly stands out thanks to big padding
8. Low-contrast elements
If you'd like to emphasise a certain phrase, be bold, make a key phrase bigger than the main
text by 10-15 px. Let the key phrase really stand out from the rest of the text.
A key phrase blends in with the rest of the copy. It looks messy, so try to avoid this Now everyone can see it thanks to a large font and su cient padding around the text
set su cient padding around this, which will create an impression of space. Don't place this
section on a colour background; this will look out of place.
Don't use colour for the subhead. Using a bigger font and padding should be su cient to
make it pop on the page
10.
Tilda Publishing Blog There is an empty space between two full- Create a website
screen images
When you are using several full-screen images in a sequence, avoid leaving a space between
them. e border will still be visible, and there is no need to add an additional element. It
just doesn't add anything.
An empty space between full-screen images make no sense and doesn't look good ere is a harmonious ow between images in this example
Many words are marked in bold, so the text copy appears broken
A few marked words draw attention to themselves, and don't interfere with the rest of the text
is text has too many typographic devices. ey are distracting to the reader Very few typography styles, emphasis is clear, and text hierarchy is observed
e headline sits too close to the image, there is no breathing room on this page Here the headline is separated from the image by a subhead, and it relates to the entire
section, not just the image
Don't write everything in italics (body copy, headlines). And if sans-serif fonts are used in
text copy, avoid italics altogether.
Tilda Publishing Blog Create a website
e phrase stands out already thanks to the font size and padding, so the italics are not really needed here
Italics are in the right place, adding the right amount of emphasis
16.
Tilda Publishing Blog Blocks appear out of place relative to the Create a website
In this example, the headline is shi ed to the le , and text copy to the right All text elements are in harmony with each other
Did you nd this article useful? If so, please share it with your friends. anks so much!