A step by step guide for creating an awful UI
Before you start reading the article, I think it would be beneficial to put a trigger warning here:
Everything that I’m going to talk about is based purely on my own opinion on how websites and UI’s should look and behave.…
With that being said, here is a step by step guide on how to create an awful UI.
#1: Use Bold Colors
Despite what people may tell you, having a consistent color theme to stick to is not important. You are a UI designer, not an artist. Why bother so much about things as irrelevant as colors?
Furthermore, our society is becoming more and more accepting of a wider spectrum, and so should your UI. You should make your site colorful and full of contrasting colors to express your uniqueness and liberal design choices; the more random the better. Not only does this make elements on your UI easily identifiable, but it also gives them a special aesthetic that you can mold to your needs.
#2: (Over) Use GIFs
It’s probably fine to have static graphics on your UI if you live in 1984. But we’re in the 21st century, and our internet loves dynamic and moving content (Just look at how popular YouTube is!)
And while some people interpret this as the need for element animations or motion graphics in order to bring their UI to life, these design choices are bland, predictable and overused.
Instead, it’s better to use GIFs to liven up your UI; it’s creative, unexpected and unique. Its dynamic and fast moving nature will make your interface feel powerful and fast!
#3: Make pictures visible
Even though modern day monitors are flattered with features like 4K, HDR, mini-LED, etc… It’s important as a UI designer to consider backwards compatibility and how your site will appear on older monitors (including CRTs).
While there are several ways to do this, such as using appropriate graphics rendering methods, the easiest and most cost efficient is to simply stretch the image bigger, tiling it as necessary. This will ensure that your users see the image content, while providing a greater emphasis on the importance of whatever you are trying to show.
#4: Use bright font colors
There’s a reason why black ink is printed on white paper. It’s because these colors are highly contrasting, making the text more readable and distinguishable.
This feature is very important, as it may be difficult to read normal colored texts on colorful backgrounds (assuming you followed step 1 properly). Choose colors that contrast each other the most, as this will ensure that your text stands out. Some example color combinations are listed here:
- Red BG + blue text
- Green BG + red text
- Light blue BG + yellow text
- Beige BG + purple text
#5: Embrace Skeuomorphism
Skeuomorphism is the design concept of making digital elements resemble their real-world counterparts. While this style is considered archaic by many modern UI designers, there are many benefits of Skeuomorphism that you can incorporate into your UI.
Compared to the increasingly popular flat style design, Skeuomorphism adds depth to your UI. This allows you to differentiate foregrounds and backgrounds, letting your users know what can be interacted with and what can not.
#6: Don’t give interactive feedback
Interactive feedback is when an element reacts to user actions, such as when they hover over or click on the element.
For an optimally awful UI, do not use any interactive feedback as it wastes precious computing power. Instead of making the computer constantly check event listeners, these wasted compute potential can be instead used for more productive tasks, making the UI feel faster and snappier.
#8: Overuse popups
There are many nasty privacy laws that force you to put up warning signs for your users if you decide to collect their data. And as a privacy conscious developer, it is up to you to make sure that your users see the warning.
Therefore, it is in your best interest to use as many pop ups as possible to inform your users that they will need to accept cookies. And while you’re at it, why not also add in popups that ask your users to subscribe to your newsletter or claim some exclusive 1 out of 10,000,000,000 coupon?
#9: Blast music on load
You believe you have a great taste in music, so why not let everyone who goes on your website have a taste as well? This not only acts as a great ambiance, making your UI a pleasure to navigate, but will also show off your special personality. Bonus points if the music is loud and high pitched.
#10: Stick to traditional fonts
When designing a website with good UI, many designers will likely spend hours searching for an appropriate font to use. However, this is largely unnecessary as the shape of words and letters should not be a determining factor of the UI quality.
Instead, you should just use the classic trio: Arial, Times New Roman and Monospace. This will not only save you hours of time, but it will also lead to a faster page load time, as these fonts don’t have to be loaded from external sources.
Conclusion
If you follow these 10 steps accurately in your next project, you should end up with a UI so horrible that you wouldn’t believe you’ve made it! Of course, this is by no means a comprehensive list of all the features that goes into making an eyesore; there are much more than just ten steps for getting a terrible UI.
Some honorable mentions:
- Misusing / Overusing box shadows
- Misusing / Overusing gradients
- No border radius on anything
- Non-adaptive font sizing
- Those “Under Construction” GIFs
- Flashing images
However, if you want to build a not awful looking UI, just do the opposite of each of these 10 steps, and that should get you started on the right path.
If you disagree with any of the things I said in this guide, please leave your raging disagreements in the response section.
— LemonOrange
