Have you ever come across a website design that made you laugh out loud? I don’t mean just something on the website is funny, but the design of the site itself is funny because of how terrible it is.
It takes a lot of time and effort to learn how to properly design a website. There are many sites out there where the designers just haven’t learned these principles at all. Bless their hearts.
In this article, we’ll take a look at a few websites that are hilariously terrible. First, let’s look at a few of the design principles by which I’m using to judge these sites.
I’m looking at these sites with several design principles in mind. They include:
- Easy to understand navigation
- Proper use of color
- Proper use of animation
- An easy to use layout
- Pleasing to the eye
- Appropriate to the topic
- The design elements don’t get in the way of the content
- Great content that’s easy to find, navigate, consume, and share
Before I Make Fun of Your Website, Let Me First Say This
First, if you’re the designer of one of the sites I’ve focused on here, please don’t take offense at my remarks. I don’t intend to cause you any trouble or pain and I’m not making fun of you. I’m only using these sites as examples and I’m showing what’s wrong and how to fix it. I mean no disrespect. Some of these sites are designed by beginning designers. We all had to start somewhere. And before you ask to see my first attempts… no.
Also, I’m not looking for sites that are just old. Sites that haven’t been updated in years look terrible to us now, but they were designed using the design elements of their time. If I included an old design, it wasn’t just because it’s old – it’s because there’s something in the design that’s just plain terrible. Of course many of these sites have been around for a while, but their design is just plain, well… you’ll see.
On To the Websites
I scoured the ‘net for sites that made me make a sour face then giggle. Yep. A sour giggle. Although the web is filled with many examples of how not to make a website, I couldn’t possible include even a small percentage of them. These are the sites that stood out to me.
This site sells things that blink or glow in the dark. To get that point across, the site is dark with all of the items blinking. The basic theme is everything’s in the dark and flashing at you.
There are several issues here. For one, the images are too small. The products should be the focus of the site. For another, everything is animated. A few animations here are there is okay, but when everything is animated the site is too busy. Another problem is the colors. I like colors, but take a look at the text and see how long you want to read it against that black background.
Another issue is the frames. There are two frames on this site. Why? I don’t know. The frame on the left contains the content and the frame on the right is empty. Another issue is how small everything is. I had to zoom to 200% to make it look what I thought was a natural size.
All of the categories are listed to the right. Sometimes it takes you to another screen that shows the item in more detail. Other times clicking on a picture takes you to another screen with all the items in that category. There isn’t a good menu structure for easy navigation.
An eCommerce site should make you want to stay and look around. The items for sale should be front and center. This site focuses too much on its flashing-in-the-dark gimmick. The purpose of the store is to sell the items, but this web design just makes me want to leave.
This snapshot is at 100% zoom. At that setting I can’t see all of the width on my screen. In order to see the full width of the site I had to go down to 67% zoom, and then all the text was too small to read. The color-combination hurts to look at. Never put dark red text over dark blue background. And then there’s blue text over the red.
Blocks of information are scattered all over the page and the page scrolls on and on while showing you almost nothing in the space except the score board. This layout just doesn’t work.
Here’s a zoomed-in look at the page:
First of all, each one of these blocks could be its own page. You don’t have to provide all of the information on the homepage. The content itself is good. The navigation menu at the top is good. But, clicking on one of the links takes you to another page with a similar layout that contains individual boxes of information placed onto the page. Some of the boxes are off to the side and I didn’t even know they were there until I zoomed out to take a screenshot. Here’s a look at Volleyball:
This site needs WordPress with a magazine theme. You would have to search hard for a WordPress theme that would let you have a layout this bad.
This bad design is not the complete website. The site itself does have a nice design. It has a nice clean layout with good navigation. It looks appropriate for the US House of Representatives. Within all of the pages of political jargon, there is a page that made me do a double-take.
I’m all for animation. I even use animated gifs on my own site. Animated gifs are cool, but the presence of Jenifer Lawrence asking “What?” on a page at the US House of Representatives Judiciary Committee made me ask “What?” Then I scrolled down to see Ariel bounding her chin in the palm of her hand, and several others with surprised looks, pointing, and bounding around. None of this animated gif craziness fits the topic on the page. And it only takes 20 seconds to go from annoying to beyond annoying. Try it out and you’ll agree.
The article is a 10-point numbered list. What’s it about? IDK. Something about legislation. I couldn’t read it. Maybe that was the point. In that case it worked. Designers design pages as well as layouts, and this goes to show that even a well-designed layout can be ruined by an inappropriately designed page. Nothing on this page fits the theme of the site. Looking at it make my eyes hurt.
They should have used a few gifs and even more jpegs. The text should be larger. That’s the content you want your visitors to read. It should stand out. As it is, it’s so small that it gets lost in the distracting gifs. The images should be further apart to give the text a little breathing room.
I love Suzanne Collins’ books (well, there is that ONE scene in the Hunger Games that makes me MAD. If you’ve read the books, you KNOW that scene! I’m not going to tell you what it is because, well, spoilers), but you can see why I don’t love her website. This site was designed for 200% zoom. Try it. At 200% zoom it looks like a blog. Zoom back at and you’ll see everything move to the outer edges of the screen. I like white space, but… ??
Clicking on the book cover does nothing. Missed opportunity right there. I clicked on Works and went to a similar screen with book covers, awards, and reviews, but no descriptions. I clicked on Mockingjay, but there was still no way to buy the book. I went back out and clicked on Gregor the Overlander: Book One. This took me to a page that did have a clickable book cover where I could buy the book. It also had a list of awards and reviews. There was a Word document that I could download called Children’s Choice Award Nominations. I completely understand why you would want the awards on your site, but why have it as a document for readers to download?
At the bottom of the page, in the right corner, is a list of online stores where you can buy her books. Instead of taking you to her author’s page, or a page with her books, or even including an affiliate link, the links just take you to the homepage of the store. Clicking Amazon goes to Amazon.com. That’s it. Another missed opportunity.
I almost didn’t include this one because at first it just seems like a jittery graphic is zooming in and out of the screen. Well there’s also words fading in and out, and then there’s the words above the menu are on fire. Well, that’s still not THAT bad. And then I saw the little musical note alerting me to the fact that there’s music on this site. I had my speakers muted so I hit the speaker button and immediately included this site on the list.
Any one of these by itself isn’t really that bad, but when you throw them all together, and then add that music… yeah, it’s THAT bad. Analyzing the design of the site really does raise a lot of questions. Why is the devil grilling himself in a floating BBQ? Why that music? Why? Seriously… why?
At least the navigation works fine. Well, except for the company’s logo, which does nothing but pulsate. Why have a pulsing logo that brings attention to itself, but then you can’t even click on it? And now I can’t get that tune out of my head! Thank you for that floating BBQ devil!
You would expect a college art school to have a nice website that reflected the kind of education you could expect to get from the college. In that regard, you would expect higher-level universities to look the best. This is Yale. Seriously. Yale University School of Art.
This website is programed with Ruby on Rails and is actually a wiki that students and faculty can change to some degree. It actually gets updated quit often. Faculty adds lecture times, maps to classes, etc., but how does it get this background? The ever repeating photo shouldn’t be a photo that is too obvious that it repeats. This one is kind of obvious a little bit. Also, the page could be expanded to use the rest of the screen, but instead we’re left with only having content on just under half of the screen.
Navigation actually works as expected. The color-choice and the haphazard layout make it difficult to follow. If you like manga, then just scroll on down.
Now we can see what the school of art is supposed to be about! But, is this covered in the class? I checked to see:
Clicking on Courses takes you to a screen with a weird animated background and a list of all the classes. Can somebody tell me what this is? I’m still not sure if they have classes in manga. Maybe it’s all an elaborate joke? The list of classes is quite extensive, but there isn’t a single class on web design. Hey, I have an idea…
What did this site do to my eyes? Ouch! And why is that Mercedes pulsating at me? And the music… I couldn’t stop watching! And, is that a chicken? Scrolling on down reveals the Titanic (why would you associate your site with a sinking Titanic?), a Dalek webcam (Daleks are cool), a missile, a Kentucky Fried Panda, and wow, just wow. There’s even an intro film that I admit I had to click on and watch more than once.
It has fake ads, fake news reports, karaoke, a car quiz, a game you can play online, and who knows what else. The purpose of the site is to lease a car, but I didn’t look at a single car. I couldn’t see them. I was too mesmerized by, well, all of that. And of course the purpose of all of that craziness is just to get your attention. The problem is the craziness gets in the way of the site itself. All of those distractions harm the usability of the site. One thing it’s not is boring. I think the word I’m looking for is random.
Penny Juice is a fruit juice concentrate that’s made specifically for childcare centers, preschools, etc. The first thing you have to do when you get to the website is choose which version you want between HTML and Flash. Choose wisely.
Of course they hope the cool kids choose Flash. Once you’ve chosen you get to go to the next page where you see a simple menu structure. You’ll see floating clouds behind the rainbow (floating outward, btw), spinning coins (?), and animated words. There’s a copyright notice of 2001-2002. Maybe that explains it.
All of this looks innocent enough until you click to visit a page on the site, then you monitor explodes.
Eye’s hurting… can’t read! The colors are actually a clever design element based on the flavors of Penny Juice:
I get the design element/Penny Juice thing (it’s a rainbow of exciting flavors), but don’t. Just don’t. There are better ways to use clever marketing points in your website design. For one, you can use the colors along the side, diffused into the background so they don’t make your eyes bleed. They could be used as buttons in the menu. Just don’t use them behind text. Ever. Especially all of them at once on the same screen.
Get rid of the Flash/HTML homepage selection screen. Give your users a single HTML homepage. Nobody needs to see spinning pennies on the screen. Old design styles and copyright dates make readers wonder if the site has been updated. They question the prices and the information about the product. Visitors shouldn’t have concerns about your product just from looking at your website’s desgin. That’s the opposite of the effect you want.
Well, that was fun. Taking a quick look at hilariously terrible websites is a great, and fun, way to learn what not to do. Every now and then it’s a good idea to look around the ‘net and see what you find annoying, and then find ways to improve on it. Learning what you like and don’t like will give you insights on what visitors want and on what your clients need.
Your turn! Do you know of a hilariously terrible website that should be on this list? Did I miss your favorite? Do you disagree with my assessment of a site? Do you have something to add? I’d like to hear about it in the comments below!
Article thumbnail image by Kakigori Studio / shutterstock.com