close menu button
👋

Hello there!
Log into the academy:

In order to log into your academy profile, please provide your email and password

Forgot password?

Did you previously use

Don’t have an account yet?

Ugly websites sell better.

Web design is getting out of hand again.

I’ve been in the web design business since 1998. It has gone through some phases, but the place it's at right now feels the weirdest in a long time.

For years UX designers battled the “dribbblization” of the industry. What it means, is creating eye-candy projects and posing them as serious work.

Beautiful at first glance, but either impossible to code or completely dysfunctional.

Form is taking over function. Again.

With animation tools and tutorials easily available, we get them animated too now. Here’s an example.

ugly-1

The problems with this design are high loading time (most people will click away), very vague and unconvincing copy, and vertical animations that distract you from the main action.

It may look good, but it won’t work well. Or at all.

Understanding design

Let’s take a step back.

What is the role of a website? 99% of the time it’s to sell something. To get you to click a button.

ugly-img2

Beautiful background with mountains and a person gazing into the distance doesn’t sell. Sure, it tickles your sense of aesthetics. I’ll give you that.

But on its own, that’s only a piece of artwork. Nothing more.

ugly-img3

The newest design trend

Currently, we see a trend of pretty images merged with mediocre UI exploding on social media.

Designs like this gets hundreds of reshares and millions of views.

Let’s dissect this one:

ugly-img4

The main issues

In the image above I outlined the main issues. Let’s dive a little more into them now.

  • Most of the copy is vague and does not match the product. It’s basically not convincing — just random words that are there to fill space.

  • The image in the background has the sole purpose of being eye-catching. Sunsets, mountains, gazing into the distance — there is also no connection to the product here. It’s pointless.

  • If there are forms (and there usually are to fill more “visual space”) some of the fields are forced and plain pointless. Forms should always be as short as possible. Just an email field would do here.

  • Buttons usually have very small typography to hide the fact the text is also vague, repetitive, or both. Barely visible text on the button makes it a lot harder to convert.

  • If there’s navigation, it’s often just an excuse to show a glassmorphic panel underneath. It often has meaningless elements just to fill the space.

ugly-img5

A plague of cooks

Don’t get me wrong. There is nothing wrong with creating artwork like that. It’s also fine to animate it nicely. Do some shooting stars. Some clouds moving. Knock yourself out!

There is an artistic element in web design and we can and should embrace it.

The problem starts when this gets passed around as a real project.

They’re not. A few years ago we used to call them “unrealistic dribbble shots”, now they moved from Dribbble to social media.

Algo-gaming with bad consequences

The popularity of these posts is of course abused by people who want to grow their networks. The problem starts when most junior designers start believing that this is how a design should look like.

If it’s popular, it must be good, right?
ugly-img6

What customers want?

When making websites for clients, we may think they want to get as many sales as possible. After 25 years of doing that, I can assure you it’s mostly not the case.

Regular people treat design as close to art. They want a pretty painting on their domain most of the time.

Is it all good then? Should we continue doing fancy, animated websites to keep those clients happy?

If you want them to go out of business, go ahead!

When working at Squareblack we learned that the customer is only sometimes right. Our role, as designers, is to guide them through towards the most performing outcome possible.

If they earn lots of money with our work, they’ll be more likely to come back for more.

If they love the website because the sunset reminds the CEO of that one bike ride he took when he was a kid, but conversions are at 0% you won’t get that call again.

Unless they like burning money.

ugly-7

Another example

Let’s quickly look at another example — this one’s also animated. It’s a job searching website that “launches your career”. Or it’s supposed to do it, but nobody has an idea what it really does.

What we have here is a parallax animation, moving clouds, and a button that only shows up after 8 seconds. The whole thing also takes 31 seconds to load.

This will get you clicks on social media, but it won’t get people to register.

Let’s fix it!

ugly-img8

Step one: Analyze

The first thing to do is to analyze and annotate the design. It doesn’t matter if you’ve done it, or you came in to redesign the mess some other designer made.

Annotate all the potential issues and be ready to explain to the client what went wrong here — and why!

ugly-img9

Once you get all the annotations in, the first step is redoing the copy. Chances are (even if low) that the visuals might still fit, or require only a few tweaks.

Step two: improve

Here’s a quick fix of the copy-pasted right into the main layout (ignore the fonts) and an explanation of how it shapes the user's decision (on the right).

ugly-img10

At this stage, we also annotate (both physical and digital) and show our proposal to the client that way. Leave no stone unturned. They may not instantly get why something is done that way.

Your role here is to show it’s not random. That there is a plan. Reason.

Design.

If you want to see a full breakdown of the steps and some examples from my real client work, I made a video that’s part of my free design course.

ugly-img11

When improving the website, the copy, or the marketing message is the most important part. But there are also other factors like loading speed, cognitive overload (too many animations), and low-level aesthetics.

What it means, is that the website doesn’t have to be ugly to perform. It needs to start with a proper focus on conversion and then on aesthetics. Not just the looks and skipping the function like most of those shared designs do.

Step three: Test, test, test

Design work is not done when the design is done. That’s because design is never truly done. What many designers forget is that after you complete your project you still have developer handoff, quality assurance, and most of all testing and improving to perform.

When working with clients you need to stress that part out. If they’re forward-thinking it may get you a long-term job, and them more sales.

It’s a win-win situation.

ugly-img12

What can you test?

The easiest thing to test is copy. You can tweak and create multiple versions of the main text on the site and see which one performs best.

You can also test different visuals, backgrounds, colors, and icons.

In some cases, a different person used in the header can also increase the conversion. Just remember it all has to make sense. It has to be tracked, analysed, and improved.

And that is your job as a designer. It’s not about cooking a pretty art piece.

Do that in your free time.


Liked the article? Share it!

twitter iconlinked in iconfacebook icon

Similar articles

Violet umbrella between black umbrellas

The Future of Web - Craft Unique User Experience With CSS Only

Read article
web I 1 cover

14 Web Design Inspiration Styles

Read article