close
Shot by #<User:0x0000560d8e397b90>

Art by Meg Lewis

What is 'bad design'? 10 examples & how to avoid them

We’ve all seen websites or digital experiences that we immediately thought of as “bad designs.” But what actually makes a design “bad”? And how do we, as designers, learn to recognize and avoid those mistakes?

Understanding what makes a design bad is the first step in learning how to create good designs. Here are ten common examples of bad design and how to correct their shortcomings.

1. The design is too cluttered

Cluttered designs were commonly seen in the early days of the internet. Designers tried to cram as much as they could onto each page, often ignoring white space entirely. The results were pages that were hard to navigate, lacked structure, and made finding what you were looking for almost impossible.

While the cluttered UIs of 90s design and early 00s have (mostly) disappeared, cluttered designs still exist. While not every website needs to be minimalist, with wide-open spaces between each element, be sure that you’re giving your design some breathing room. Remove unnecessary elements when possible to allow the important parts to stand out.

Briiief explainer animated mezzolab dribbble
Shot Link

No more clutter

by MezzoLab for MezzoLab

Full explainer video here: https://vimeo.com/205409243 Website Behance Facebook Don't forget to press L to give us a Whole Lot of Love

View on Dribbble

2. Inconsistencies in your UI

Inconsistent UI is one of the most annoying kinds of bad design. When color palettes change from page to page, navigation jumps around on each page to wherever the designer felt like putting it, fonts seem to be chosen at random, and there’s no unified visual style, users suffer. They have to constantly re-acclimate to each section or page of your site, requiring extra mental effort to achieve their goals. And even small inconsistencies can contribute to this.

One of the best ways to combat inconsistencies is to create a style guide for your designs.

One of the best ways to combat inconsistencies is to create a style guide for your designs. Define the way things should look, including where things like navigation should be placed on each page, what the color palette should be, the typography choices, and even things like the width of lines for icons and dividers.

This will help ensure that your UI remains consistent regardless of changes to the content or involvement from multiple designers.

Ninox Design System brand brand identity branding branding design color scheme design systems icon design icons marketing icon styleguide ui ui style guide user interface visual identity

Ninox Design System

by Ramotion for Ramotion

In terms of creating system designs, we develop the rules for each relevant component, while producing conditions for iconography and colour palettes. All of these rules are based on atomic design principles, founded by Brad Frost. These system settings...

View on Dribbble

3. Poor typographic hierarchy

Do people come to your website only to be presented with a wall of text? Text on the web is not the same as text in a book or magazine. A full page of text with no typographic hierarchy is intimidating to visitors and can bore them quickly.

A structured typographic hierarchy that makes it easy to pick out things like headlines and subheads as well as body copy and captions is vital for readability on the web. Good typographic hierarchy generally consists of one or two typefaces used at different sizes, weights, and styles to differentiate between heading levels, body copy, and other text elements.

To further increase readability in digital designs, make sure you use shorter paragraphs, sufficient line heights, and make important content more digestible through the use of things like bulleted lists.

Typography brand guidelines brandbook branding doc documentation guide hierarchy layout styleguide system template type typography unfold

Typography

by Benjamin Oberemok for unfold

Hi, guys! Here is typography system @Phil Goodwin and I designed for Paligo Follow us on Behance | Instagram | YouTube More about us on unfold.co

View on Dribbble

4. Confusing iconography

The entire point of icons is to give visitors a visual cue about the content they’re seeing. Icons are often used for things like navigation. The goal is for users to immediately recognize what an icon represents to make interacting with your site easier.

Universal icons exist for a reason. Namely, that they’re instantly recognizable to users. When you start to experiment with icons or icon sets that have more abstract or metaphorical meanings, all you’re doing is potentially confusing users. If you do stray from universally recognized icons, or need to use icons for something that doesn’t have a universal symbol attached, use labels to prevent confusion.

Universal Icon Set v2.0 | Preview 123done clean figma free freebie gluph icon icon design icon pack icon set icon system iconography icons iconset minimalism preview sample symbol universal icon set vector icons
Shot Link

Universal Icon Set v2.0 | Preview

by Dima Groshev | 123done

Check out 60 free icons and a full preview of Universal Icon Set v2.0 Visit website PRODUCT FEATURES — 16 categories — 24 x 24 px grid size — 2px line stroke — All shapes are vector based — Smooth and rounded corners — Easy to change style (Support F...

View on Dribbble

5. Poor form design

If you’re creating a website to do anything other than provide information, forms are likely part of your UI design— whether they’re forms for users to subscribe, make a purchase, or some other function. Unfortunately, poor form design abounds on the web. And if your forms aren’t user-friendly, you’ll see a much lower submission rate.

There are a few basic things to keep in mind when designing forms:

  • Keep your forms as short as possible to achieve the necessary goal. For example, subscription forms should ideally only include a field for the email address, and possibly the subscriber’s name.
  • Make submit buttons highly visible and labeled descriptively. For example, use “subscribe” instead of “submit.”
  • Make sure your error messages are helpful. Ideally, they should be triggered as the form is filled rather than after submission.
  • Break up long forms into smaller pages. A checkout form, for example, might be split into pages for shipping information, billing information, and reviewing the purchase before submitting. Don’t forget to indicate progress to users as they work through these pages.
Multi Step Form 03 dark design form form design form field forms green input input box input field input fields inputs interface multi form multi step form typography ui user experience user interface ux
Shot Link

Multi Step Form 03

by Erşad Başbağ for Flowbase

Hello to everyone! I'm excited to share with you the Multi Step Form design I've made for Flowbase It has multiple versions. I will share it with you in the coming days. Please state your opinion! Thank you <3 https://www.instagram.com/ersadwork/

View on Dribbble

6. Poor alignment

Bad alignment of elements can make a page feel unpolished even if users don’t immediately recognize why. But fixing your alignment is generally pretty simple. Using a grid to place elements within your design is a simple, established way to maintain alignment. Don’t forget to use a baseline grid, too.

7. Irrelevant imagery

Images and photos should be included in a design to support the content being presented. They should reinforce the ideas and concepts on the page, not distract from them. Make sure that every image you include is directly tied to the page’s content. Cute kitten pics are great, but only if your content is about cats!

📌 Check out 7 best practices for using photography in UI design for more expert tips.

“You should select images that have a strong relationship with your product goals and ensure that they are context-relevant.” — Anastasia Marinicheva, UI/UX Designer

489e5802b7e0de9bf5a7557f8e7a6727


8. Lack of contrast

Bad contrast is more than just visually unappealing. It can also harm the accessibility of your designs. Be sure that the contrast between important elements — including text — on your pages meets accessibility standards. This will ensure that users don’t miss the important parts, as well as make any text content more readable.

9. Poor user research

Not understanding the needs of your audience can lead to terrible design. After all, good design isn’t just about the way a site looks; it’s primarily about how well your design works for your users.

Take time at the beginning of the design process to learn about what your users want and need from your site. Then test different design ideas and iterations to come up with a solution that solves user problems. A design that’s visually mediocre but meets user needs and wants will always be a “better” design than one that looks beautiful but is hard for people to use.

Design Tip - UX Research application design bazen agency branding design design agency design process design tip design tips graphic design ui ui design uiux user experience user experience research user research ux ux process ux research web design
Shot Link

Design Tip - UX Research

by bazen.talks

Why is user experience research so important? 🤔 _ Tip by: @jelena.jankovic91 _ Since designer's job is aimed at solving user's challenges and finding solutions, the only logical thing to do is to explore and do a research on user's perspective. Her...

View on Dribbble

10. Lack of accessibility

Accessibility is too often thought of as an inconvenience. But accessible designs are more usable for all users. Learn the basics of accessibility to create digital products that work better for everyone.

Apply WCAG accessibility standards to all of your designs to improve user experience across the board. Don’t think of them as an inconvenience or a restriction, but instead as a way to make your designs better for all.



Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next