There is no silver bullet for the most effective webpage design.
But there certainly are things you can avoid, and things you can do to give yourself the best chance and to have a great foundation.
Here are a few things to avoid, along with what you should do instead.
The first part is about common landing page design mistakes. The second is about mistakes in article design (blog posts etc.)
The full article has detailed graphics and descriptions for each point. Here I’ll list all of the points and provide illustrations for some of them. To get more, the link to the full article is at the bottom.
Common landing page design mistakes to avoid
1. Content is not broken down into logical blocks
It is easier for users to digest information if it’s grouped into logical blocks. Set padding to 120 px-180 px and separate blocks of text by using colour backgrounds.
2. Uneven spaces between items on a webpage
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.
3. Padding that is too small means that users cannot break down content into logical blocks
4. Avoid low contrast for text copy on an image
5. Too many styles on one page
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 options for saturation, for example, normal and bold.
6. The colour block is too narrow
Avoid emphasising narrow page elements with colour. For example, headings are already well marked thanks to their size, type saturation and paddings. Would you like to highlight a particular point on a page? Use a colour background for the entire block, including a related heading and text copy.
7. Too much text copy inside narrow columns
8. Too much centered text
9. Text copy is superimposed over an essential part of an image
10. Misusing visual hierarchy
11. One logical set is split into two
A full-screen image or gallery, following a text, resembles a separate, independent block. If you add padding around the gallery, both text copy and images will look as a logical whole thanks to a shared background.
12. The title is too large and long
13. Wrong use of border styling for buttons
Borders are necessary only when a button is transparent. Adding a border for a colour button does not make sense, it’s just another meaningless design feature that overloads a page and makes it difficult to read it.
14. Using too many colours
Using too many colours on a page is confusing, and it’s unclear which bits are more important. One or two colours are enough to give visual prominence to what’s really important.
15. Overloaded menu
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 with excessive information. It’s enough to have 5-7 menu items.
Mistakes in article design
1. Long, solid copy
2. Headline is positioned at the same distance between previous and next paragraphs
3. There is no logical order
4. Different padding above and below blocks
5. Caption is positioned too close to an image
6. There is too little space between subhead and text copy
7. Stand-out elements are placed too close to the main text
8. Low-contrast elements
9. Colour background for a narrow text block
10. There is an empty space between two full-screen images
11. Too many design accents being used
12. Too many typography styles
13. Centering text in a long article
14. Headline appears too close to the image
15. Using italics when they are not needed
16. Blocks appear out of place relative to the centre of the page and each other
Conclusion
With these simple rules, and some good copywriting, and (of course) a good product, you’re off to a great start.
The rest is testing, marketing, and product-market fit. Easy, isn’t it? 😃
Common webpage design mistakes
PS. I especially don’t like large blocks of centered text. It’s so hard to read. And it doesn’t even look good! 🤷♂️
