Some design mistakes are easy to overlook — they don’t always look wrong at first glance. But over time, experienced designers develop a mental list of things they simply won’t do. Here are six of them.
Stop Putting Text Directly on an Image
Placing text on top of an image creates two problems: SEO and responsiveness.
Google cannot read text embedded in an image. If your headings or key content live inside an image file, search engines won’t crawl or index it — a significant SEO disadvantage.
The second issue is responsiveness. Standard text on a page can be scaled using clamp sizing across devices. Text baked into an image is static. The size you see on a large monitor is the same size on a phone, and you have no control over how it renders at different breakpoints.
If an image needs text on top of it, use real HTML text with a background overlay to ensure enough contrast for readability.
Stop Making Every Button the Same Color
Button hierarchy guides users toward the actions you want them to take. When every button on a page shares the same color and style, nothing stands out as the primary call to action — everything competes equally for attention, which leads to decision fatigue.
Using a secondary and tertiary button style pushes less important actions into the background and lets the primary calls to action stand out. A bold filled button for the main action, a lighter outlined button for secondary options, and a simple text link for low-priority actions creates a clear visual hierarchy that helps users navigate the page more naturally.
Stop Letting Body Copy Run Full Width
For optimal readability, body text should span no more than 60 to 80 characters per line. A max width of around 800 pixels is a reliable target.
When text stretches across a full-width container — sometimes over 1,200 pixels — the eye has to travel too far across each line. Readers tire quickly and abandon the content. Constraining the content container to 800 pixels max width significantly improves readability and keeps visitors engaged longer.
This doesn’t mean everything has to be centered in a narrow column. Image-and-text layouts naturally create narrower text widths without any extra effort.
Stop Mixing Icon Libraries
Every icon library has its own visual weight, stroke width, corner radius, and style. Mixing libraries — even subtly — creates visual inconsistency that makes a design feel unpolished.
Stick to one icon library throughout a project, and go a step further by keeping the style consistent within that library. All filled icons or all thin line icons — not a mix of both.
Icons should support and enhance a design, not draw attention to themselves. Cohesive icons blend in. Mismatched icons become a distraction.
Stop Using Drop Shadows on Everything
Drop shadows are a tool for adding depth selectively. When applied to every card, image, section, and element on a page, they stop creating depth and start becoming the design — and the result feels heavy and dated.
Before reaching for a drop shadow, consider whether white space, background color contrast, or layout changes can achieve the same effect. Used sparingly and subtly, shadows add dimension. Used everywhere, they undermine the design.
Stop Adding Hover Effects to Non-Clickable Elements
A hover effect signals interactivity. When a card lifts, changes color, or animates on hover, visitors assume they can click it. If that card has no link attached, the interaction creates confusion and erodes trust.
Only apply hover effects to elements that are actually clickable. If a card links to another page, a hover effect is appropriate and helpful. If the card is purely informational with no link, leave it alone.
This pattern shows up frequently in AI-generated designs — animated hover states on elements with no underlying interaction. It looks polished at first glance but frustrates visitors the moment they try to act on it.
