16 practices for good web design

Nowadays, everyone can be a designer. With the advancement of design tools, design systems, and AI tools, long gone are times when one had to spend hundreds of hours learning how to put things together.

But it doesn’t mean everyone can be a good designer. Design is more than just drawing rectangles and putting visual elements together.

It’s also about making decisions. Both small design decisions, such as the color of the button, and big ones, such as information architecture, have tremendous impact on both user experience and business effectiveness.

However, a set of well-established practices can guide you in making those decisions. Below, you’ll find 16 design practices I’m willing to bet my career on.

1. Optimize for both fast and slow thinkers

On a macro level, there are two groups of users we must take into consideration:

• System 1 thinkers, also called “fast thinkers,” are people who don’t read. They rely a lot on emotion and want to complete the flow as soon as possible
• System 2 thinkers, also called “slow thinkers,” are the more considerate audience. They want to be sure they’re making the right decisions and take their time

To maximize your chances of conversion, you need to win both groups.

You do that by optimizing the first impression for fast thinkers while offering an alternative flow for slow thinkers.

Let’s take an example of our approach when designing the checkout experience at Brainly. When you land in our purchase funnel, you first see a checkout with a minimal amount of information and an already preselected plan. If you are a system 1 thinker, you just need to click a button:

However, if that amount of information is not enough for you to decide (you are in system 2), there’s a “see all plans” option, which moves you to a more robust checkout experience with additional choices and information:

The order of operations is critical — always optimize for system 1 thinkers first.

If we showed a full checkout at first, we would scare fast thinkers off. Slow thinkers, on the other hand, tend to read line by line, so they’ll find the small “see all plans” button without an issue and won’t mind a few extra seconds spent in the flow.

How do I know that works? Well, introducing this particular experience improved our conversion rate by a freaking 30 percent.

2. Be clear, not clever

This one is more copy-related, but I know that designers are often responsible for suggesting or writing the copy.

There’s a tendency, especially among early-level UX writers, to write clever copy. That is:

• Use novel words
• Optimize for excitement
• Try to sound very human
• Add humor if possible

This often leads to a clever but unclear message, and clarity is the most important thing to optimize for. If your users don’t understand your message, no amount of humor or novelty will help.

Let’s take a look at Basecamp’s old homepage messaging:

“We’ve been expecting you” grabs most of the attention, but it tells me nothing. The problems listed are unclear (what does “hair on fire” mean, really?), so I don’t really know what “Basecamp solved them” means. I can’t even figure out what Basecamp is.

Unsurprisingly, they changed the approach entirely later on.

The messaging tells from the beginning that it’s project management, and it even clarifies that it’s optimized for small teams, which reconfirms whether it’s a tool for me.

Although I still don’t have all the details (it’s not a goal of a hero section, anyway), I have much more clarity on what Basecamp is all about and whether it’s for me.

Clarity over everything else.

3. One action per screen

Each screen on your website should be focused on a single call to action.

I know it’s often tempting to add more than one CTA, but the truth is, if with a single CTA it’s already hard to convert users, additional ones will only make your life harder.

Your conversion chances grow significantly if the whole page focuses on a singular action.

4. Ask at the right moment

Timing is everything.

If you ask users to do something too early, they will not be convinced enough to convert, and you’ll most likely scare them off.

If you ask too late, your system 1 thinkers might grow impatient and confused and bounce.

Take a look at old Wizzley’s website:

It starts with a header and then moves immediately to a registration call-to-action. Why would I even register, though? I don’t even understand what it is and how it works yet.

The new site gives you more time to explore before registering.

One of the ways to find the right timing is using the Psych! Framework. Assess what level of user psych is required to complete the action, and then, design a user journey that boosts the psych to the necessary level and immediately follows up with the ask.

5. Take form design seriously

I am genuinely surprised there are no dedicated “form designers” out there yet. Forms are one of the most crucial design challenges when improving funnel conversion.

Take a look at the form that’s needed to send a donation:

If I saw it, I would close the tab and never return. Giving away my hard-earned money is already a considerable effort, and if I also need to do additional heavy lifting to do so, I’d rather spend it elsewhere.

Of course, that example is rather drastic. Still, most forms on the internet could use some optimization.

As a starter, here’s a handful of best practices to live by:

• Ask only for information you truly need. Don’t collect extra data such as gender or second name if that’s not required to provide the service. Each field is an extra effort that harms conversion
• Use an inbuilt screener. The exception to the above rule is if you want to screen candidates beforehand and filter out vaguely interested leads. Use with caution!
• Use a single-column layout. It beats multi-columns in all scenarios. Not convinced? Here’s single-column layout research specifically on this topic
• Order fields from easiest to hardest. People are likelier to answer a hard question if they have done most of the work
• Use intelligent, automated suggestions. If you already have some data about the user, use them to pre-fill forms for them. You can also automatically suggest answers based on the previous answers. For example, if they already filled in their street address and city, you can easily fill in the ZIP code for them (which brings the question of whether you genuinely need to ask about the ZIP code?)
• Use in-line validation. Let users know what the error is right after they’re done filling a specific field. Nothing scares users more than ten errors that appear simultaneously after clicking “next”
• Don’t use the “clear fields” button. I don’t even understand why any user would like to clear everything as a last step. And god forbid they click it accidentally

6. Focus on contrast, not colors

There’s an endless debate as to what color should a call-to-action have. There are even hundreds of A/B tests seemingly proving that one color is better than the other.

But the color doesn’t matter. The only thing that matters is contrast.

Yes, in one test, red CTA performed 21 percent better than green CTA. The catch? The dominant color on the whole page was green, and that’s the entire story:

Always make sure your CTAs contrast with the rest of the page; this way, they grab more attention.

7. Optimize for scrolling

One of the biggest surprises I’ve had when working on conversion rate optimization (CRO) is how big of an impact scroll optimization can be.

Scroll optimization is about maximizing both:

• How many people scroll
• How far they scroll

Improving these two metrics leads to better conversions in general.

But does it mean you must shout “scroll down” on your hero section or arrows pointing down? Not necessarily.

Sometimes, it’s about small visual cues that show people there’s something interesting below. Sparking curiosity is key.

Let’s take a look at ClickUp’s homepage:

On the most common viewport, people can see a snippet for the section below. Showing just a part of the picture below, combined with playful colors, creates a strong pull to scroll just to see what’s there.

And when people scroll more, they usually read more, and the more they read, the higher the chance they’ll convert.

8. Keep key information above the fold

No matter how much you optimize for scrolling, there’ll always be hardcore system 1 thinkers who’ll never scroll. They usually decide whether to move to the next step within a few seconds.

Thus, no matter how long and detailed your page is, ensure the hero section alone fulfills the page’s objective. Anything below the fold should just be reinforcement and extra details that system 2 thinkers need:

For example, although Buffer has quite a robust landing page, the hero section (in red) already:

• Showcases the value proposition (header)
• Explains how the product works (subheader and picture)
• Gives credibility (testimonials)
• Has a clear call to action

The rest of the page might not exist, and the hero already does all the heavy lifting.

9. Design mobile-first

With an estimated 56 percent of global internet traffic originating from mobile devices and only 39 percent from desktops, it should be only natural to optimize the design process for mobile.

However, that’s often not the case. Many companies first design on desktop and then try to make the design work on mobile.

Not only does optimizing for a smaller audience, but it also tends to make mobile designs cluttered. Expanding from mobile to desktop is easier than the other way around since you are getting more space, not less.

Although there are exceptions (e.g., if your audience users are primarily desktop users), mobile-first will become an increasingly significant rule in the design process.

10. Ensure accessibility and inclusivity

A bad designer focuses only on usability.

A good designer understands that accessibility is crucial.

A great designer knows that inclusivity is the future.

The fact that the website must be usable is a no-brainer. I hope I don’t have to explain it to anyone.

Accessibility adds to that by making life easier. This is not only for impaired users but often also for casual audiences. I’m not vision-impaired, yet I prefer properly contrasting and clear fonts.

Inclusivity helps create the feeling of belonging to everyone. It’s especially helpful for winning the loyalty of underserved minorities.

You create accessible designs by:

• Allowing font and contrast adjustment
• Following WCAG accessibility standards
• Supporting screen readers with structure and alt text
• Ensuring one can use the website without a mouse
• Making the product usable even with one hand

You achieve inclusivity by:

• Including diverse people in photos and illustrations
• Allowing for various demographic identities (e.g., more than two gender selections during registration; “other” is better than nothing)
• Letting people express their identity (e.g., adding preferred pronouns to the profile section)
• Catering for different age groups within your target audience

11. Don’t reinvent the wheel

Airbnb is truly an innovator in its space, and it has changed the way we travel and plan holidays.

But you know which area they don’t innovate in? The way they approach design.

Let’s take a look at their calendar picker:

It’s no different from any other calendar picker on the internet, and that’s good. People intuitively know how to use it, and it just looks natural.

Don’t reinvent the wheel in areas that don’t need the innovation. It’s a wasted effort that only harms the user experience.

12. Audit for clarity

It must be crystal clear what’s going on at any point of the user journey. Getting users confused is the fastest way to increase bounce.

What I like to do is to visit every page on the website I’m working on and ask the following questions:

• What this site is about?
• What can I do here?
• Why should I do it?
• Is it what I am looking for?

A page that answers these four questions within a couple of seconds passes my clarity audit. Otherwise, improvements are needed.

13. Use photos of people, but avoid stock and AI-generated work

Using people’s photos to establish trust and credibility is one of the oldest marketing tactics.

Seeing happy faces on the website invokes positive emotions, which makes buying easier, and seeing photos of relevant specialists builds extra trust. We all know that the “dentist recommend” is an overused marketing tactic, yet it still works.

You don’t need to forcefully put these photos in your designs, but if you see an opportunity to add this human touch while maintaining a clear layout, go for it.

However, make sure to use original photos.

Stock photos tend to have 1 percent of photos that sell the most, which leads to repetitiveness, which actually reduces trust.

Look at the photo below. I’ve seen that lady on four websites already. If I see it on yours, I’ll only scream, “cheap fake”:

Although AI-generated pictures are not that repetitive, many people will be able to spot that these are not actual photos, and this can damage credibility. Why would I trust you if you can’t even get a photo of a happy customer and must use AI to fake that?

14. Explain complex concepts with visuals

Sometimes, the only way to improve the website’s clarity is to use the right visuals.

Our brain processes visuals fifty times faster than text. Use it to your advantage.

In the old days, Square offered physical plugins that you put into your phone’s jack and swipe credit cards to collect payment.

Let’s take a look at how their website looked back then:

The picture perfectly showcases how the product works. How many words would you have to use to describe the image? Too many.

15. Ensure a solid visual hierarchy

Visual hierarchy is what guides users through the website experience. It dictates where users look first, which in turn dictates what thoughts and feelings the website provokes.

Let’s take a look at the website of a grill producer.

The very first thing that catches attention is the big picture of freshly grilled meat. I’m not sure about you, but it already makes me drool. It makes the vision of buying a grill even more compelling.

The second thing is the hierarchy, which is the header, which, in this case, clearly explains what the page is all about — an essential goal of any website.

Then, the attention goes to the CTA; if you are a system 1 (fast) thinker, that’s your next step. But if you need more convincing, there’s an extra explanation (4) and a promo banner (5) to seal the deal.

If buying is not what you are looking for, you can always use the navigation (6).

There’s nothing random on this page. Using a smaller picture, you’d lose that hunger-invoking first impression. A more prominent navbar would steal the attention from elements that matter.

Take visual hierarchy seriously. If you want to learn more about the topic, take a look at our deep dive into visual hierarchy.

16. Anticipate inner dialogue

At each step of the user journey, people ask themselves various questions. Anticipate them and focus your designs on answering these doubts.

Say you are designing a checkout experience for a footwear store. What are the questions people might ask themselves before clicking pay?

Since the size might not fit, they might be worried about returns, so make sure the page clearly states your (hopefully favorable) return policy to address this doubt.

Whenever you think about what you should put on a page, think about what doubts people might have at that particular step and focus your design on addressing them.

Summary

Good design is a result of good design principles. These principles are what distinguishes exceptional designers from pixel-pushers after a boot camp.

The list is by no means exhaustive. There are hundreds of practices, and various designers hold different beliefs about which are most important. Since my area of expertise lies in product monetization, the practices I’m a proponent of are, naturally, biased towards optimizing conversion rates.

However, optimizing for conversion is very similar to optimizing for user experience – you don’t have one without the other — so these principles are pretty universal. To recap, these are:

1. Optimize for both fast and slow thinkers
2. Be clear, not clever
3. One action per screen
4. Ask at the right moment
5. Take form design seriously
6. Focus on contrast, not colors
7. Optimize for scrolling
8. Keep key information above the fold
9. Design mobile-first
10. Ensure accessibility and inclusivity
11. Don’t reinvent the wheel
12. Audit for clarity
13. Use photos of people, but avoid stock and AI-generated work
14. Explain complex concepts with visuals
15. Ensure a solid visual hierarchy
16. Anticipate inner dialogue

Meet all the checkboxes, and you’ll have a truly well-designed website.

Header image source: IconScout