The Formula: Web Design That Generates Results

As you get better at web design, there is a trap you fall into. You start optimizing for how things look instead of how things work.

A beautiful website that nobody can navigate is a missed investment. It looks great in the portfolio. It does nothing for the business. I have seen this happen on projects using Webflow, Framer, Wix Studio, platforms that make it easy to add scroll animations and section interactions. The team gets hypnotized by the effects and forgets to ask: is this the best approach for the people who will actually use this?

The answer is usually simpler than you think.

The Bias of “Good Web Design”

When someone says “good web design,” they usually mean contrast, color, typography, look and feel. Those things matter. But they are the minimum. Most companies stop there because it looks good to the client. Nothing appears broken. The brand feels right.

The hidden problem is in the UX and conversion layer. Bad integration of those elements confuses users, makes decisions harder, and reduces the actions a company could count as conversions.

As designers, we have real power here. We control the flow. We decide what information people see first, second, third. We choose where to ask for their attention. That is the difference between a website that looks good and a website that produces results.

What to Get Right

Keep Animations Intentional

I love animations in websites. I also know that more animation is rarely better. After years of building animated interfaces, I am more restrained now than when I started.

Two rules that have worked for me:

1. Animations should be subtle, guide attention where it is needed, and not drastically change colors or positions.
2. Read Apple’s Motion Guidelines. It is short. It applies to almost everything you are thinking about animating.

If an animation does not communicate state or guide attention, remove it.

Make Navigation Obvious

Designers love reinventing navbars. Full-screen navigation, bottom-positioned menus, hidden hamburgers on desktop. Get creative if you want, but always communicate two things: where the user is right now, and how to get back to the start.

Hiding the page title and all links behind a hidden menu makes users forget where they are going. Navigation should reduce friction, not add it.

Respect the User’s Attention

Providing incentive for action is part of conversion design. But there is a line between guiding and pressuring.

If you make a button shake, glow, and change colors all at once, users feel like they are being sold to. Pick one subtle signal. A well-placed CTA after compelling copy does more than a button that screams for attention.

Understand What the Website Is For

Every website has an objective. The design needs to support that objective specifically, not generically.

One of my clients, Hostal Juarez, needed to maximize bookings from the website. After thinking about how people browse hotel sites, reading content and suddenly feeling compelled to book, I added a “Book Now” button that follows you across the page. Simple implementation. The result: more bookings from the website than from any other platform.

Those hidden gems, small decisions rooted in understanding the user’s behavior, are what separate functional websites from high-performing ones.

Function Over Form

User Flow Questions

When designing any view, keep asking:

• When a user visits this page, what questions might they have? Are we answering all of them?
• Are the actions available effective for users to continue forward?

If the journey gets interrupted at any point, the website failed to provide what the person came looking for. That interruption is where you lose the conversion.

Strategic CTA Placement

Put calls to action after strong copy, before content ends, or right after providing the information that would make someone ready to act. Test placements with A/B testing when you can. When you cannot, default to placing them at decision points, the moments when someone has enough context to say yes.

Simplify Navigation (Again)

Have someone unrelated to the project try the website. Do not tell them anything first. Then ask: “If you wanted to find X, what would you do?” Watch without interrupting. If they go to the wrong page or have to search around, that is a navigation problem.

Watch Loading Times

Not just the initial load. Every interaction. If clicking a navigation link takes two seconds to respond, that delay compounds. Users stop trusting the interface. Images, JavaScript, and CSS are the usual suspects. Audit them regularly.

Mobile Is Its Own Platform

Mobile is over 50% of web traffic. Stop treating it as a shrunken desktop. The interactions are different. The context is different. Someone browsing on a phone in a coffee shop has different patience than someone at a desk with a large monitor.

Design for mobile as its own experience. Optimize touch targets. Rethink layouts. You will find opportunities that do not exist on desktop.

Balance Form and Function

The simplest interaction, even stripped of design polish, beats a complicated interaction with beautiful design. Get the interaction right first. Then make it look good. Not the other way around.

Accessibility Is Not Optional

Accessibility keeps getting treated as an afterthought. It should not be.

It goes beyond legible font sizes and sufficient contrast. Can users navigate with only a keyboard? Does prefers-reduced-motion disable your animations? Do form inputs have proper labels? Does the tab order make sense?

Each of these makes the experience better for everyone, not just users with disabilities. Good accessibility is good UX.

What Has Changed Since I First Wrote This

I published an earlier version of this in December 2024. Several things have shifted.

The European Accessibility Act takes effect June 2025. This is not a guideline. It is law. Websites serving EU customers must meet accessibility standards. Companies that treated accessibility as a “nice to have” are now scrambling to comply. The businesses that built accessible from the start are ahead.

AI-generated designs raised the floor and lowered the ceiling. Tools that generate website layouts from a prompt made it easier than ever to get something that looks acceptable. This means looking good is no longer a differentiator. What separates good websites now is the thinking underneath: the user flows, the conversion strategy, the performance budget, the accessibility. The craft that AI cannot automate.

Performance budgets became standard. More teams now set hard limits on bundle size, image weight, and JavaScript execution time before starting a project. This is a direct result of Core Web Vitals affecting search ranking and ad costs. If your design requires 3MB of JavaScript to function, it is not a good design regardless of how it looks.

Server-side rendering changed conversion optimization. Frameworks like Astro, Next.js, and Remix made it practical to serve fully rendered HTML that hydrates selectively. This means faster time-to-interactive, which means the CTA button works sooner, which means higher conversion rates. The architectural choice of how you render the page now directly affects business outcomes.

The formula has not changed. Aesthetics, accessibility, UX, and conversion, treated as one system instead of separate concerns. The tools and expectations evolved. The principle is the same: function first, form second, and never one without the other.