Guides

Web design mistakes: what makes a website look unprofessional in 2026

A website does not look amateur because it lacks a wow effect. It does when hierarchy, spacing, words, images and interactions stop helping people understand where they are, what matters and what they can do.

The short answer

Professional design is not a fashionable style. It makes content, priorities, navigation and actions recognisable on every device and in every interaction state. A mistake is demonstrable when it creates ambiguity, inconsistency, obstacles or lost information—not when someone simply prefers another colour.

Gian Luca Partengo
Web developer and designer since 1995 · Updated 18 September 2026

When does a website look unprofessional?

The impression often forms in seconds, but correcting it means translating that impression into observable elements.

01

Understand who is speaking and what they offer

02

Recognise headings, groups and priorities

03

Distinguish links, buttons and states

04

Read comfortably without forced zoom

05

Navigate and act on every device

06

Find consistency between promises and details

Credible design reduces the effort needed to interpret a page. It does not remove personality: it makes personality understandable.

How can you distinguish personal taste from a web design mistake?

“I do not like it” is an opinion. “I cannot understand, read or complete it” describes a problem that can be verified.

Preference

A choice can be disliked without being wrong

Minimalism, brutalism, illustration and photography can work when they support identity and the task. Style alone is not a diagnosis.

Use

A mistake obstructs a real task

If a person cannot find a service, recognise a link or retain data during an interaction, the problem goes beyond taste.

System

Inconsistency multiplies interpretation

The same element should not change shape, colour or behaviour without a reason. Every exception makes people learn the interface again.

Evidence

A judgment should identify the page, state and consequence

Viewport, contrast, focus order, wording, destination and behaviour make criticism repeatable. “It is old” or “not modern” is not enough.

The professional rule

First describe what happens, then assess its impact, and only then propose a solution. A redesign is not a remedy if it does not understand the problem.

How can you recognise a visual hierarchy that fails to guide visitors?

Size, position, contrast and space should create a readable order, not a permanent competition between elements.

01

A recognisable starting point

The opening area should explain the business, audience and offer without requiring people to piece together unrelated slogans, videos and badges.

02

An intentional type scale

Headings, subheadings, body text and metadata need perceptible differences. Ten nearly identical sizes create noise rather than hierarchy.

03

Contrast that provides direction

Contrast does more than make text readable: it separates levels, actions and states without turning every element into an accent.

04

Visual order and logical order

Composition should follow the sequence in which content is understood. A spectacular position does not justify a confusing order.

05

Groups that reveal relationships

Nearby elements appear to belong to the same subject. Spacing and containers should clarify that relationship rather than contradict it.

06

One dominant element at a time

Competing popups, tickers, chat controls, badges, videos and buttons take attention away from the main content and make the page feel restless.

When does typography make a website difficult to read?

A typeface can fit the brand and still become unreadable because of size, line length, line spacing or weight.

Scale

Flexible sizes with sensible limits

Text should adapt without becoming tiny on a phone or enormous on a wide monitor. Fluid sizing still needs a minimum and a maximum.

Measure

Text measure should follow its role

A short introduction and a long continuous text do not need the same line length. Width, type size and viewing distance should be designed together, without narrow columns stranded next to accidental empty space.

Rhythm

Line spacing and paragraphs should give ideas room

Cramped lines, paragraphs without pauses and headings detached from the correct content make even simple writing difficult to follow.

Loading

The font system should work while fonts arrive

Families, weights and fallbacks should be limited and tested. Typography should not create conspicuous shifts or invisible text during loading.

No universal measure suits every typeface and language. Test real text at real viewport sizes and with browser zoom.

How can spacing, density and rhythm avoid accidental gaps?

Space is not what remains after positioning components. It is one of the tools a page uses to explain structure and priority.

01

Distinguishable sections

Headings, text and the next block need consistent distances. Touching blocks look broken; arbitrary distances interrupt the narrative.

02

Complete grids

Rows of cards should finish intentionally. A single card stranded below three columns suggests an unresolved structure.

03

Safe margins

Text and controls should not sit against the edges of the screen or container. Margins protect reading, touch interaction and perceived quality.

04

Shared alignment

Headings, images and actions that start on different axes without a reason create instability. A coherent grid makes even dense pages readable.

05

Density suited to the task

An operational dashboard can be compact; a commercial page needs clearer pauses and priorities. The same density does not suit every context.

06

No accidental empty space

Generous space can create emphasis. When it comes from unbalanced columns, overly narrow text or missing media, it looks like absent content.

How do you make links and calls to action recognisable?

Colour, shape, position, wording and state should show what is actionable before someone tries it.

Recognition

Colour alone is not enough

In body text, an underline or another persistent signal helps distinguish links. In menus and buttons, context can provide the same information.

Wording

A label should anticipate the destination

“Explore the service” is more useful than “click here”. The title attribute does not replace clear visible wording and is not mandatory on every link.

Priority

Primary and secondary actions should look different

Two equally prominent actions leave the visitor to infer the priority. Composition should identify the main step and its alternative.

States

Hover, focus, active and disabled states are design

Hover does not exist on touchscreens, and focus cannot be removed. Every important state needs to remain perceptible on the device that produces it.

A CTA cannot repair a confusing page

Enlarging a button does not clarify an incomprehensible offer. Establish context, evidence and priority first; then make the appropriate action obvious.

When do navigation and menus become difficult to use?

The number of items should be judged alongside labels, architecture, priorities and behaviour across devices.

01

Items ordered by usefulness

The main menu should expose the journeys that matter most to visitors, not reproduce the company’s internal organisation chart.

02

Names that do not require interpretation

Creative labels can be memorable, but should not obscure essential destinations such as services, projects, prices or contact information.

03

Controlled depth

Submenus help only when they genuinely group information. Chains of levels, oversized panels and duplicate items increase the effort of finding a way around.

04

The mobile menu is a design task of its own

Compressing the desktop menu behind an icon is not enough. Opening, closing, returning, scrolling and touch areas need testing on a phone.

05

Keyboard navigation and focus remain visible

Every item, toggle and submenu should be reachable and operable in a logical order without relying on a pointer.

06

A recognisable current location

Active states, breadcrumbs and consistent headings help people understand where they are. A menu identical in every state loses a wayfinding function.

How should you check palettes, contrast, light and dark mode?

Starting with brand identity is appropriate. Simply copying logo colours into every component is not.

Roles

Each colour needs a stable purpose

Background, surface, text, border, accent, error and success need defined roles. Arbitrary values multiplied across pages dissolve identity.

Readability

Check contrast in real combinations

Approving two colours in isolation is not enough. Text, buttons, borders, focus, overlays and background images need checking in their actual displayed states.

Meaning

Information and actions do not depend on colour alone

Text, icons, shape or position should support meaning. People who cannot distinguish a hue must still understand the state and action.

Themes

Light and dark mode need two complete checks

Reversing background and text is not enough. Images, logos, shadows, native controls, charts and focus must remain readable in both themes and respect the initial preference.

For requirements, obligations and complete testing, also read the website accessibility guide.

How do you choose images that are useful, sharp and lightweight?

There is no universal kilobyte limit or single correct size. There is a resource suited to its role, delivered as efficiently as possible.

01

A recognisable purpose

A photograph can demonstrate work, explain a product or establish atmosphere. If it serves no purpose, reconsider its visual and technical cost.

02

A crop designed for its container

The subject should not disappear when the aspect ratio changes. Heroes, cards and social previews may need different crops from the same source.

03

Responsive sources

The srcset and sizes attributes, or a picture element, let the browser choose a resource appropriate to viewport, density and supported format.

04

Format and compression chosen for the case

AVIF, WebP, JPEG, PNG and SVG serve different needs. Check quality against the actual subject instead of applying the same threshold to every image.

05

Declared dimensions and stable layout

Width, height or aspect-ratio help the browser reserve space. An image that suddenly shifts text and buttons makes the page feel fragile.

06

Contextual alternative text

An informative image needs useful alt text for its context. A decorative image needs empty alt: describing every ornament adds noise rather than accessibility.

For resource delivery, priority and weight, read why websites become slow.

How can you distinguish responsive design from a shrunken desktop?

A page should reorganise content and interactions around available space and the device without losing information or functionality.

Layout

Content reflows without clipping or sideways scrolling

Columns, tables, media and text should also be checked with zoom and enlarged type. Hiding what does not fit is not responsive design.

Order

Priority can change with context

On a narrow screen, secondary content can move, collapse or open on demand, provided the main journey stays clear.

Interaction

Touchable controls with sufficient spacing

Tiny icons and neighbouring actions increase mistakes. WCAG 2.2 defines minimum criteria for target dimensions or spacing.

Content

The message does not accidentally change between devices

Truncated text, missing CTAs and off-screen image subjects can turn the same page into two different commercial experiences.

When do animations help, and when do they distract?

A useful transition explains a relationship, state or continuity. An effect applied everywhere competes with content and can cause discomfort.

Purpose

Every movement answers a question

Where did the element go? Was the action received? What opened? If an animation clarifies nothing, it needs to justify its cost.

Control

Autoplay and persistent motion do not take over

Videos, sliders and tickers must allow pausing or stopping where required. Content should not move while a person is trying to read or use it.

Stability

Effects do not block or shift the interface

Heavy animations, delayed reveals and shifting layouts make a website feel less dependable, even when the visual is sophisticated.

Preference

Respect prefers-reduced-motion

People who request less motion should receive a reduced or static alternative. The preference is not a reason to remove essential feedback too.

A wow effect is not the same as effectiveness

A website can impress for five seconds and still be difficult to use. Quality emerges when the effect supports the message without becoming the message.

Why do templates, builders and AI not replace design?

These tools can accelerate composition and development. They do not automatically make the decisions that bring coherence to a real website.

01

Generic hierarchies

The same hero, sequence and cards are applied to businesses with different goals because those elements were already available in the model.

02

Components without shared rules

When buttons, spacing and headings are changed locally to make content fit, the design system dissolves page by page.

03

Content forced into the layout

Shortened headings, orphaned lines and omitted information often result from choosing a grid before understanding the content.

04

Breakpoints that work only in the demo

A component works with three words and a perfect image, but fails with translations, prices, long names, errors or real data.

05

Effects and dependencies left through inertia

Sliders, libraries, fonts and unused variants continue loading because removing them would require understanding the project.

06

No final design oversight

Generated output can look finished. Someone still needs to verify identity, content, states, responsiveness, accessibility and maintenance.

To compare platforms, DIY and professional projects, see the guide to Wix and low-cost websites.

Which design checks should you run on an existing website?

Checks should use real pages, content and actions. An empty demo or a single viewport width does not represent the published product.

01
Clarify the opening message
Show the homepage to someone unfamiliar with the business. Ask who you are, what you offer and what step they should take.
02
Observe the hierarchy without reading everything
Headings, groups, evidence and actions should emerge during a quick scan without every element demanding equal attention.
03
Try real text, zoom and longer translations
Check line spacing, measure, weights and clipping with actual content, browser zoom and the language version that takes the most space.
04
Check grids, margins and complete rows
Look for touching blocks, empty columns, isolated cards, inconsistent alignment and large gaps that resemble errors or missing content.
05
Recognise and use every action
Links, buttons, menus, dialogs and forms need understandable labels, priorities and states with mouse, touch and keyboard.
06
Check images and crops
Check quality, purpose, alt, declared dimensions, responsive sources and layout stability on a slow connection.
07
Explore viewport sizes and themes
Do not stop at one phone and one desktop. Try intermediate widths, orientation, light and dark mode and motion preferences.
08
Complete the journey without a pointer
Focus should follow a logical order, remain visible and not be obscured. Opening, closing, error and success states should be perceptible.

How do I design a visual identity that remains usable?

Graphics, content and code are decided together. Design is neither an image to imitate before development nor decoration added afterwards.

GLP method

The system should hold up beyond the perfect homepage

I start with the business, audience, content and actions, then build a visual grammar with verifiable roles, components and behaviours.

Quality does not depend on a single effect. It depends on consistency as pages, languages, devices, themes, states and content quantities change.

Hierarchy and priorities defined before details
Typography, spacing and palette governed by tokens
Semantic components with complete states
Images prepared for their role and viewport
Light and dark mode and preferences respected
Testing against actual published content and journeys

Goal

The website does not generate enquiries

When the issue concerns the message, evidence and commercial journey, the diagnosis needs to go beyond the interface.

Examine the journey

Compliance

Website accessibility

Contrast and focus are only part of the picture. Obligations and WCAG assessment require a defined scope.

Explore accessibility

Performance

Why the website is slow

Images, fonts and animations affect loading too. The dedicated guide separates causes, measurements and interventions.

Check speed

Project

A custom website and identity

Architecture, visual design, development and checks belong to one project with a declared scope and transparent prices.

Explore services and prices

Primary sources and verified documentation

Technical guidance comes from standards and official documentation, not universal thresholds or sales recipes.

W3C — Web Content Accessibility Guidelines 2.2
Verifiable criteria for contrast, reflow, focus, target dimensions, motion and interface use.

Open source
W3C WAI — Understanding Use of Color
Why colour cannot be the sole means of distinguishing information, an action or a state.

Open source
W3C WAI — Images Tutorial
The roles of informative and decorative images and the contextual choice of alternative text.

Open source
W3C WAI — Menus Tutorial
Structure, styling and keyboard behaviour for navigation and application menus.

Open source
Google Search Central — Image SEO best practices
Responsive images, supported formats, quality, speed and useful contextual alternative text.

Open source
web.dev — Typography
Size, measure, line spacing, fluid scales and preferences that make text genuinely readable.

Open source
web.dev — User interface patterns
Adapting components and navigation across form factors without treating mobile as a small desktop.

Open source
web.dev — prefers-reduced-motion
Using the system preference to provide an alternative with less animation and decorative motion.

Open source

Sources checked on 18 September 2026. Standards, browsers and documentation can evolve: verify the current version before an audit.

Frequently asked questions about web design mistakes

Direct answers that distinguish aesthetics, usability, accessibility and project quality.

How can you tell whether a website looks unprofessional?

Check whether the business, priorities, navigation and actions are understandable; whether typography, spacing and components are consistent; and whether the journey works on mobile, with a keyboard and in light and dark mode. Personal taste comes after these checks.

Does a professional website need minimalist design?

No. It can be rich, editorial, illustrated or restrained. It still needs to control hierarchy, density, contrast and interactions consistently with its identity, content and purpose.

Does every link need a title attribute?

No. A link needs a real destination and a meaningful accessible name. The title attribute helps only when it adds information and does not replace clear visible wording.

Should links always be underlined?

In body text, underlining is a highly effective signal. In menus, cards or buttons, context and shape can make a link recognisable without it. Colour or hover alone should not be the only clue.

How much should a web image weigh?

There is no universal threshold. It depends on displayed size, content, required quality, format, density and role. Deliver a proportionate source and check its effect on the actual page.

Does every image need a description in its alt?

Every img element needs an alt attribute, but not always a description. Informative images require contextual text; purely decorative ones should use empty alt so assistive technologies ignore them.

Are dark mode and light mode mandatory?

There is no general obligation to offer both themes. If offered, they should be complete, readable and consistent, and preferably respect the system setting without flashes or inconsistent intermediate states.

Does animation make a website more modern?

Not automatically. It helps when it explains a relationship, change or feedback. Continuous decorative motion, reveals that delay content and transitions that cannot be reduced can harm experience and credibility.

Can a template or AI produce good design?

They can create a useful foundation or accelerate stages. They do not replace oversight of identity, real content, responsiveness, states, accessibility and maintenance. Quality depends on how the output is controlled and checked.

When should you rebuild a homepage instead of correcting it?

When hierarchy, the message, components and responsiveness depend on a structure that makes every local fix inconsistent or fragile. Diagnose the existing website and its goals before deciding.