Skip to content

Web Design Mistakes

Things to avoid when designing a website.

Avoid these mistakes when designing a website

Intro

Designing a webpage looks deceptively simple, but the reality is that a lot of research, psychology and strategy goes into an effective website. Despite this, there are more an more people each year who decide to become web designers, often without realising the basic web design mistakes and traps they’re falling into along the way.

There are a lot of common content writing and web design mistakes that new designers make (and some seasoned designers too). The good news is that they’re easily avoided, especially if you’ve stumbled across this handy cheat sheet of what to look out for.

As a Sheffield website designer, I’ve spent many years creating SEO websites and undertaking web marketing for clients around the country. And during that time, I’ve come across the same handful of mistakes again and again. I’ve created a list of the worst culprits so that you know what pitfalls to avoid as a budding website designer or as a paying customer.

Or, if you’d rather use let me and my team do the heavy lifting for you, get in contact.

Author

About the author: Andrew Newby

I’m Andrew Newby, the creative lead at Edge Studio. My journey in the world of web design began within the agency scene of Sheffield. There, I sharpened my skills in the complexities of web design, mastering the balance between aesthetics and functionality.

Over the years of running my own web design business in Sheffield, I’ve come across a multitude of design pitfalls and triumphs. Through this blog, I want to offer some insights into the do’s and don’ts of web design, helping you better understand how to sort the good from the bad and perhaps find opportunities to improve your own websites.

Web Design Mistakes

Don’t Make These Common Web Design Mistakes

Small Colour Blocks

Using a block of colour is a great way to emphasise something on your webpage or set two sections apart visually. However, a common web design mistake is to use colour blocks on items that are too small, such as headings or quotes.

Relying on colour to emphasise text in this way isn’t good web design practice, as it doesn’t look good or professional. Instead, try using bold to add emphasis to the heading and then colour-blocking the entire content block. By doing this, you marry all the elements together as one.

Colour selections for a web design project

Placing Text Over A Detailed Image

Effective web design is all about knowing when to stay simple and knowing when to flex your design muscles. One area that this often goes wrong is when designers layer text over the top of a detailed part of an image, such as a face or a landscape scene. When done well, text and images can be layered together with great effect, but if the positioning isn’t quite right, it not only obscures the image but also makes the text unreadable.

If you want to put content over an image, find a plain section of the shot, such as the sky or a path, and place the text there. That way, it can be easily read and doesn’t ruin the image.

Matching background colour to text

Incorrect Headlines Sizes & Spacing

Make sure that the headings and subheadings are correctly sized to make clear which is the most important subject on the webpage. If a subhead is bigger than the header, the user’s eye will be drawn there first, confusing the meaning of the webpage.

If using a long-worded header, do not make the font too large when designing your webpage. This makes it harder to read. But also, as above, do not make it smaller than the subheads. It is ok to make them the same sizes, as the user’s eye will be drawn to them equally.

And whatever you do, don’t use H1/H2/H3 tags purely as a way to resize your fonts – they have an important role to play in SEO and should be used with consideration to inform search engines what your page is about. Not sure what I’m talking about? Read our article, What Is SEO.

Content Mistakes

Watch Our For These Content Mistakes

Large Blocks Of Content

One of the most common content writing mistakes is creating large blocks of content which send your readers running. It’s much easier for people to read information on a webpage if it’s broken down into smaller blocks of information than a big wall of text. Research has found that when faced with more than a handful of lines, people have a habit of skipping ahead. Can you blame them? Life is short, and we want what we’re looking for, fast.

Bite-sized copy is key. At the most basic level, you can split out long segments of text into shorter paragraphs. If you want to bring design into it, another good option is to separate different sections of text into different coloured backgrounds. This gives the eye a break between sections and makes the content immediately more digestible and less overwhelming. You can also separate content on a webpage by using images, key phrases or pulling out quotes.

Uneven Spacing

From a design perspective, it’s important to make sure the spacing around each text block is the same, otherwise the webpage begins to look messy and uneven. Uneven spacing can also throw your layout out of alignment, especially if your site hasn’t been properly optimised for mobile.

If you rely on the inbuilt mobile optimisation tools built into WordPress and the like, it’s worth knowing that the difference of a few px in spacing can have a huge impact. Some content blocks on the webpage may be auto-prioritised as being more important than others, changing the way viewers interact with your site.

Correct spacing for web design

Narrow Columns

It can be tempting to squeeze lots of text into columns, but keep in mind that a website isn’t a newspaper. While columns can sometimes be a good way to display information, they should be used with caution.

Lots of text in narrow columns on your webpage makes the content hard to read and can make your site look too text-heavy. Instead, keep text in columns to a minimum and make sure that any columns you do use are generously sized for the page.

Centred Text

Much like narrow columns, centred text is another common content mistake. While centred text works well on small items, such as headings, that’s usually where its contributions to good website design end.

The eye automatically reads a page from left to right, so, in larger blocks, centred text is much harder to navigate for the user. Instead, make the content in your body text left aligned, which makes it much easier to digest.

Different Fonts & Designs

The hallmark of a new website designer is that many get a little too excited when it comes to font and design styles. Keeping it clean and concise can be a challenge when you want to show off everything you’ve learned in design school, but using too many fonts makes your website look unprofessional.

The best practice is to choose one or two font styles and stick to them – one for the body and one for the headings. For an even cleaner effect, just use variations of a single font to emphasise items, such as bold or italic.

Matching fonts for web design

Summary

Avoid Web Design Mistakes with Edge Studio

A well-designed website is about more than just aesthetics, it’s about understanding and implementing effective design principles. From misusing colour blocks and text placement to incorrect headline sizes and spacing, simple errors can detract from the user’s experience and your website’s impact.

Remember, a well-designed website is not just a showcase of creativity but a tool for communication and engagement. By focusing on clear, accessible content layout, you ensure that your website not only looks professional but also functions efficiently and meets your audience’s needs.

Whether you’re a budding designer or a business owner wanting to improve your online presence, steering clear of these common web design mistakes will set you on the right path to a user-friendly website.

Want to discuss upgrading your website? Speak to our team today.

More Articles

Read some of our popular articles

Make An Enquiry

Get in touch

Want to discuss your next project? Get in contact to arrange a call or meeting.

All enquiries

View More Articles

All Articles

Want to find out more about our processes and the way we work? Read more web design articles.

Design Articles