10 Common Design Mistakes to Avoid
by Michael Allen
I turn coffee into code.
Using too many fonts and font sizes
Using too many fonts can be one of the most common mistakes when designing websites and other visual media. It’s important to remember that too many fonts can be overwhelming and make it difficult for viewers to focus on the content.
When creating a website, designers should limit themselves to two or three fonts maximum. Generally, one should be a headline font, one a body font, and one an accent font. Headline fonts should be used for titles and subtitles, body fonts for the main body text, and accent fonts for any additional text, such as captions or labels.
Using too many fonts can also make a website look cluttered and disorganised. This is especially true of websites that use a variety of font sizes, weights, and styles. To keep a site looking organised and professional, it’s important to stick to a limited type palette and use the same fonts throughout.
Examples of using too many fonts include:
- Using different fonts for each page or section of a website
- Using a variety of font sizes, weights, and styles
- Using more than three fonts on a single page
On the other hand, using the right number and type of fonts can make a website look more cohesive, professional, and visually appealing. It’s important to choose fonts that work together to create a unified look. Stick to two or three fonts, and use them consistently throughout the website.
Overcrowding the layout with too many elements
Overcrowding the layout with too many elements is a common design mistake that can make a page look cluttered, confusing, and overwhelming to users. It's important to remember that less is often more when it comes to design, and that adding too many elements to a page can actually have the opposite of the desired effect.
When overcrowding a page, it's easy for a user to become overwhelmed when trying to find the information they need. Navigation, calls to action, logos, text, images, and other elements can all be competing for attention on a crowded page, making it more difficult for a user to take in the content. This can cause confusion and frustration, resulting in a poor user experience.
To avoid overcrowding the layout, it's important to create a balance between the different elements. Too many elements can make a page look busy and disorganised, so it's important to prioritise the necessary elements and decide which can be removed. It's also a good idea to include negative space to create a sense of balance and allow the various elements to stand out on their own.
For example, if you have a blog page with multiple posts, try to limit the number of posts you show at once. Too many posts competing for attention can make the page look crowded and overwhelming. Instead, limit the number of posts and include a “view more” button that allows users to view additional posts as needed.
By avoiding overcrowding the layout, you can create a more visually appealing page that's easier to navigate and more enjoyable for users.
Neglecting mobile optimisation
Neglecting mobile optimisation is one of the most common design mistakes that can be easily avoided. In today’s digital world, more people are using mobile devices to access websites than ever before. With this in mind, it is important to ensure that your website is optimised for mobile use.
If your website is not optimised for mobile, visitors may experience long page loading times, difficulty navigating, or overall confusion when trying to access your website on their mobile device. As a result, this could lead to a poor user experience, which could result in visitors leaving your website quickly or not returning again.
When optimising a website for mobile, there are several key elements to consider. First, consider the size and placement of images. Images that are too large may take too long to load, or they may not even fit on a mobile device’s screen. It is also important to consider the size of text, as it should be easy to read on a mobile device. Additionally, make sure that the navigation bar is easy to use and understand. Consider using larger buttons that are easy to click and understand.
Another important element to consider when optimising a website for mobile is the use of responsive design. Responsive design allows a website to adjust itself to fit the size of the device it is being viewed on, ensuring that the website looks great no matter what device it is being viewed on.
Neglecting mobile optimisation can be a costly mistake, as it can lead to a poor user experience and a decrease in website visitors. By ensuring that your website is optimised for mobile use, you can ensure that visitors have a great user experience, which can ultimately lead to increased website traffic.
Using low-quality images and graphics
Using low-quality images and graphics can be a costly mistake for a design project. Low-quality images and graphics can make the design look unprofessional, or worse, make customers doubt the credibility of the product or service. Even if the rest of the design is great, having low-resolution images or graphics can make the design look sloppy and can be a major distraction.
When selecting images and graphics, it is important to pay attention to the resolution. High-resolution images and graphics will ensure that the design looks crisp and professional, while low-resolution images and graphics will look blurry and pixelated when viewed on a larger screen. Additionally, even if the resolution is good, be sure to check the image quality. Low-quality images can be grainy, pixelated, or blurry, and can make the design look amateurish.
It’s also important to be aware of copyright laws when selecting images and graphics. Unlicensed images and graphics can lead to legal trouble and hefty fines. To avoid any copyright issues, always be sure to use free-to-use images or graphics, or purchase a license for images or graphics from a reputable source.
To sum up, using low-quality images and graphics can be a major setback for a design project. Always make sure to select high-resolution images and graphics, check the quality of the images and graphics, and be aware of copyright laws. Doing so will ensure that the design looks professional and will help to maintain the credibility of the product or service.
Not providing clear calls to action
Having a clear call to action (CTA) is essential for any website or application. It is the most important element of the user experience as it helps your users understand what they should do next. Without a clear CTA, users can become confused and may leave your site or application without taking any action.
A CTA should always be clearly visible and easy to understand. It should be placed in a prominent location on your page so it can be seen and understood without having to search for it. Your CTA should always be concise, direct, and include a strong action verb. For example, "Sign Up Now!" or "Shop Now!"
Your CTA should also be visually appealing and stand out from the other elements on the page. This can be done by using a different color or size than the rest of the text, or by adding a graphical element such as an arrow or button.
In addition to having a clear CTA, it is also important to consider the user’s context when creating one. For example, if you are creating a landing page for a particular product, the CTA should be tailored to the product. Instead of simply saying “Sign Up Now” it should be more specific and say “Sign Up for Product X Now!”
Finally, it is important to test your CTA to make sure it is effective. Use A/B testing to compare the effectiveness of different CTAs and determine which one is most successful.
By taking the time to create a clear, effective CTA, you can ensure that your users are able to easily understand what they should do next and increase your conversion rates.
Ignoring website loading speed
When it comes to website design, loading speed should never be overlooked. It’s a key factor in how user-friendly and successful your website will be. Poor website loading speed can mean lost visitors, frustrated customers, and a drop in search engine rankings.
So what can you do to ensure your website loads quickly?
- Optimize Images: Large, high-resolution images can be one of the biggest culprits when it comes to slow loading websites. To ensure your website loads quickly, be sure to optimize your images. Compress them to reduce their file sizes, use the appropriate file format, and scale them to the right size.
- Use a Content Delivery Network (CDN): A CDN is a network of servers located around the world that deliver web content to users based on their location. Using a CDN can reduce the amount of time it takes for your website to load, as it serves the content from a server that’s closest to the user’s location.
- Enable Caching: Caching is a way of storing frequently accessed data in a temporary storage area, so it can be quickly accessed without having to retrieve it from the source. Enabling caching can dramatically reduce the loading times of your website.
By following these simple tips, you can ensure that your website loads quickly and provides a better experience for your users.
Not providing enough white space
White space, also known as negative space, is a key element of design. It provides breathing room for the eye to rest, making your design more visually appealing and easier to digest. Without enough white space, designs can become cluttered and overwhelming.
For example, if there’s too much text or too many elements in close proximity, it can be hard for the eye to focus and comprehend the information. Additionally, if there’s too much white space, it can make the design look sparse and disorganized.
A good rule of thumb is to make sure there are adequate amounts of white space surrounding elements. This will provide clarity and visual hierarchy, helping the reader to understand the content better.
In website design, white space is especially important. It can be used to separate blocks of content, helping to create a sense of structure. It can also be used to create visual cues that lead the reader’s eye to important information or elements.
When it comes to mobile design, white space is equally important. It’s crucial to create plenty of space between elements to ensure the design is readable and easy to navigate.
Overall, white space is an essential tool in any designer’s toolbox. It’s important to create enough white space to provide clarity and focus, while also avoiding too much white space that can make the design look disorganized.
Not testing for broken links and errors
Testing for broken links and errors is an important part of the design process that is often overlooked. Failing to do so can lead to a poor user experience, which can ultimately lead to a decrease in conversions and customer satisfaction.
Broken links are links that take a user to a page that doesn’t exist. This can occur when an old page has been removed, the URL has been changed, or the link is simply incorrect. When a user clicks on a broken link, they may be presented with a 404 error page or a blank page. This can be incredibly frustrating for a user, as they cannot access the information they were looking for.
Errors can occur when a page does not load properly or when a form does not submit correctly. This can be caused by a variety of factors, including coding errors, incorrect file paths, and incorrect syntax. If a user encounters an error when trying to access a page or complete a form, they may be discouraged from continuing.
In order to avoid broken links and errors, it is important to thoroughly test all of your website’s links and forms. You should use automated tools to test for broken links, such as the Broken Link Checker. Additionally, you should manually test all of your forms to make sure they are working correctly. This will help ensure that your users are able to access the information they need and complete tasks without any issues.
Not making the website easy to navigate
When it comes to website design, making sure the website is easy to navigate should be one of the first priorities. After all, if visitors can’t find what they’re looking for, they’ll likely leave your website and go somewhere else.
If a website isn’t easy to navigate, it could cause visitors to become frustrated and confused, leading to a high bounce rate. Here are a few tips to make sure your website navigation is intuitive and user-friendly:
- Make sure navigation is clearly visible: Navigation should be easy to spot and understand on your website. Include a navigation bar at the top or side of the page, and label the links clearly.
- Group related content: Group related content together in categories or subcategories, and make sure the hierarchy of the navigation is logical. This will help visitors find the information they’re looking for quickly and easily.
- Keep the navigation concise: Too many links in the navigation can be overwhelming and make it difficult for visitors to find what they need. Stick to the most important pages and avoid including unnecessary links.
- Use drop-down menus: Drop-down menus are a great way to organize related pages and keep the navigation concise. This will also help visitors find what they need without having to navigate to multiple pages.
- Include a search bar: If you have a lot of content on your website, adding a search bar can be a great way to help visitors find what they’re looking for quickly.
- Include a “Back to Top” link: If your website has a lot of content, adding a “Back to Top” link at the bottom of the page can help visitors quickly return to the top of the page.
By following these tips, you’ll be able to ensure that your website is easy to navigate, which will help keep visitors on your website longer and increase conversions.
Not considering accessibility for users with disabilities
Accessibility for users with disabilities is an often overlooked but highly important consideration for website and product design. Designing with accessibility in mind means creating an experience that is usable and understandable for all users, regardless of their physical or mental abilities. It can also be beneficial to wider audiences such as those using mobile devices, older browsers, and those with slow internet connections.
When designing with accessibility in mind, designers should consider the different kinds of disabilities that users may have. These range from physical disabilities, such as difficulty using a mouse or keyboard, to visual impairments, such as difficulty seeing certain colors or reading text. It’s also important to consider cognitive disabilities, such as difficulty understanding complex instructions or remembering information.
Designers should consider different kinds of assistive technology that users may use to overcome any disabilities they have. For example, screen readers can be used by users with visual impairments to read text aloud. Designers should also ensure that their designs are compatible with various types of assistive technology.
Designers should also pay attention to the usability of their designs. This means ensuring that all controls and navigation are easily understandable and that there are no unnecessary distractions. It’s also important to make sure that there are no barriers to access, such as long forms or complex procedures.
Finally, designers should consider the readability of their designs. This means using font sizes that are appropriate for all users, using high contrast between text and background colors, and making sure that all text is easily legible.
By considering accessibility for users with disabilities, designers can create designs that are usable and understandable for all users, regardless of their physical or mental abilities. This will help to ensure that all users have a positive and enjoyable experience.