A masters’ guide on how to design a terrible website

I know what you are thinking – it must be easy, there are plenty of people doing it every day. The underlying truth is that some of us are born with this skill, while most develop it over time. For the second ones, there is a secret technique hidden from the mass society.

Just like Bruce Lee brought the art of Kung Fu to the U.S., I want to become your prophet and share with you the secrets of how You can become a weapon of mass destruction in the digital world.

By the end of the day, you will be able to transform any website into a terrible one. Practice your skills, and soon you will be able to create a terrible website from the scratch.

Now, ‘Captain Site’ is at your service – let’s begin!

With a blink of an eye

As a professional ‘terriblist’ you need to set out traps to trick visitors into your webs. A complete amateur would probably go with less disturbing methods, like green buttons on a red background. But we are not losers – we are users!

One of my favorite technique is to organize a massive attack at the very beginning. I call it ‘Blink! Blink!’ move, a jaw-dropping approach where you stuff your website like a turkey on the Thanksgiving Day with modern blink animations.

Ugly website design example
A website with incorporated ‘Blink! Blink!’ technique.

The idea is very simple, we want to have as much flash and blink as possible. Make your website glow in the dark and you are one step closer to shock everyone. To achieve best results you can use a black background, but for a Pro, I would highly recommend trying out other colors as well. A cherry on top of our masterpiece could be a marquee element (even envious people disabled it in the latest version of HTML.)

A common mistake is using this technique only on Xmas with snowflakes all over the place. In my opinion, every day can be Xmas so give your visitors a fascinating present.

As you got it right, you can proceed to the next level. No regrets!

I came here to lead, not to read

Who even read texts on the Internet? Of course, a random resource is the most trusted source of information – if it’s there, it’s legit! Yet, the path to discovering it must be hard enough to appreciate it.

Ok, get your MS Paint ready, we are about to start an adventure. Probably one of the most difficult skills to acquire is the capability to find two similar colors for your background and text. I have tried to apply Color Theory to this task several times with no success. The closest method I found was Monochromatic but it was still not good enough. So I came up with my own – Identicratic.

Identicratic method states that you must select two colors in a way that their HEX differs only by one number or letter. It can sound hard, and it really is. This is why I have a please to offer you one of my favorite color palette for a public use (GPL license applied.)

A terrible color palette to use on your website
A secret color palette to use on your website.

Image Chopstick

If you are a fan of Instagram – leave now, we don’t want to see you here!

Let’s talk about some serious photo editing. While web design bastards use Adobe Photoshop to convert their images into a fashion covers, we will save our time for an extra pint of beer.

A ‘Free Form’ selector is the only thing you need to create a stunning graphic for your website. Simply chop off the parts you don’t want to show and you are good to go. I try to spend less than a minute on an image, but this is not a limit. A Ph.D. level ‘terriblist’ can get things done in less than 10 seconds.

MS Paint for professional photo editing
MS Paint – the only tool you need to create professional photos.

Once you apply this technique, never forget to leave some white space to increase embarrassment for your visitors.

“An extra white space on your image can increase visitors' embarrassment up by 60%.” - Captain Site Click To Tweet

And never blame yourself for a poor image quality, people can always scale it by 200% and print it out.

Super(market) menu

In a menu with seven sections, you literally give users no choice at all. My personal research in the field of navigation gave completely different results. A menu of 30+ sections is way more helpful and useful for a mass audience.

For a skeptical reader, I feel that I owe you some brief explanation of my research. We all know that the digital world is often a mirror of the physical one. This is why I decided to compare the choices we are given on the web. The easiest example was to go after the shops. During the last few hours I visited multiple shops in my neighborhood to see how they set up the choice of their products. I compared small family shops with huge supermarkets and found a pattern that can be applied to the web.

Terrible website menu and design
A website with super(market) menu and clear navigation.

All small family shops were struggling to attract lots of visitors, while most (the only one in my neighborhood) supermarkets was full of people. A typical supermarket offers a bunch of different products and is able to attract a large audience. To me, it was a clear signal that more is better. Hope I have convinced you.

As we get back to the topic, it is crucial to mention that some of you may want to go after submenu. It is completely ok, just don’t forget that any submenu adds additional 10+ sections to the must-have list.

Internet Explorer always

I miss the good old times of Internet Explorer ruling the world. Now we have Chrome, Firefox, Safari, and even Vivaldi has come up with his own browser (it seems that four seasons wasn’t enough.) Even Microsoft made Edge, instead of supporting Internet Explorer 6.0.

To make your website compatible with all the major browsers is a bunch of money and if you don’t know how to spend it – find a donate link below to my personal bank account details.

The official website of Internet Explorer 6
The official website of Internet Explorer 6 – terribly beautiful itself.

So if you need to stick (yes, you need) to the one browser, let it be the good old Internet Explorer. If you are using Internet Explorer that means your customers use it as well, because you know your customers. And again, sticking to one browser will reduce any incompatibility problems and amount of HTML tags and CSS properties to operate with.

An interesting fact to consider, Microsoft Dynamics (and ERP system) is made to work with Internet Explorer. If a giant like Microsoft relies on one browser only why you should even consider an alternative?

Make my logo bigger

A bit shabby method which somehow made it to the public already but still worth mentioning. A plan to make your logo bigger should always be on your table.

As a visitor, I came to your site because it is Your site, not the site of your neighbors or friends. The best way to associate your website with your company is a massive logo so no one will ever miss it. The bigger your logo is, the more significant it will be, the more important and well-established your business will look.

I usually like my logo to completely overtake the header part of my site. After all, the menu and content is a secondary thing. Logo first!

This was a brief information about ‘Make my logo bigger’ method, but this is a just a tip of the iceberg. If you make something bigger, you will need to reduce something as well – now we are talking about physics of web design.

The easiest way to apply physics to your website is by reducing the size of your font. Remember we talked about the fact that no one is reading anything? Use this information to your competitive advantage and you will see brilliant results.

The perfect ratio for your paragraph font size is between 8 to 10 which is small enough to fit in the logo and remove the necessity for your visitors to dive into useless memoirs.

A bonus content: Comic Sans

Just like in any good course, I have prepared a bonus content for you completely FREE of charge. This is something you won’t find anywhere else, so please accept this humble present.

Font family is a hot topic because family is the most important part of our life. A Comic Sans font family is almost as important for your website. With a simple touch of Comic Sans, you can convert any website into a terrible one.

Comic Sans font for web design
Comic Sans – the last font you’ll ever need for a website.

The steps are simple:

  1. Download the Comic Sans;
  2. Add it to your website;
  3. Enjoy.

Afterwords

A pinch of inspiration and sparkle of creativity has already come upon you. Now you should be ready to go out for a good start. I encourage to forget all your doubts and trust your heart.
On the other hand, I feel a bit sad about not fitting all the experience I have (you probably did not read anything above anyway.) But if you really feel that there is something important missing, feel free to leave me your comments or share the masterpiece you have stumbled upon.

‘Captain Site’ is out!

P.S. Our webmaster is not familiar with the techniques described above and refused to add fancy snowflake effect to this post.