Good Design VS Bad Design: Five Examples to Learn From

Looking at good design vs. bad design is the best way to learn from others' mistakes so that you can avoid them in future. The website design must be easy to use.

The website design must be such that it is both easy to use and contains visual cues that will lead visitors to areas of interest. There are metrics used to determine exactly how a user is interacting with a website. Looking at good design vs. bad design is the best way to learn from the mistakes made by others so that we can avoid making mistakes.

Good Web Design Will Improve Your Business and Boost Sales

As we all know, businesses that make an excellent first impression are going to pull in more customers. This impression is usually the one that sticks. It’s tough to recover from a bad first impression. A great creative design company will use colors, themes, and proper spacing to develop a landing page that makes the best first impression possible.

Additionally, there are other ways that good web design will help increase your sales. Here are a few examples:

1. Solid web design makes a business stand out. Consumers gravitate towards professional, sleek designs.
2. It establishes the foundation for building lasting customer relationships due to the first impressions made.
3. Well-designed websites are more comfortable to navigate, so the customer journey becomes easy.
4. A sense of brand consistency will be a massive benefit from outstanding web design. Look at Google as an example. Whenever you see that color pattern, you automatically think of their brand.
5. Good design unlocks the true potential of social media. Businesses that take the extra step of designing a fantastic website are likely going to focus on their social media design too.

Good Design VS Bad Design: Five Examples to Learn From

Example #1 (Bad and Good): Too Much Information

We’ll start by looking at parking sign designs as an example. Look at how confusing this design is. How is an individual supposed to understand exactly where they can park by looking at this? It takes a couple of readings to comprehend precisely what is being described. It’s amazing how many websites make this same mistake. They present too much information, so it makes it difficult for visitors to understand the next step.

The trick is to find a way to provide all of that information or to provide small doses in specific areas. Using parking signs as an example, here is an innovative example of how to display all of the data from the previous image in an easily understandable format.

Don’t put so much information on a landing page that it confuses visitors. Instead, make sure that you identify the action that you want visitors to take next.

Example #2 (Good): MyFitnessPal Calorie Counting System

Okay, so this app has one of the most amazing graphic designs I’ve ever experienced. Calorie counting has always been considered the most challenging aspect of dieting. Thus this design addressed that huge pain point by creating a secure method of tracking calories.

For starters, it tracks your daily calorie count, so every time you enter a new meal, the calories are automatically tracked. This can easily be set up by putting in the meal. It helps avoid having to count individual calorie labels by offering a wide range of programmed recipes and meal planners. You select that as your meal, and the calories are calculated automatically.

Here’s the best part. If you are making a dish that is not in the database, you can use the app to scan the barcode for each food item. It will then show the calories per serving for that item!

When designing a website, app, or social media page, consider the pain points of your target market and try to address those pain points.

Example #3 (Good): Google Maps

Another good design (and logo design) comes from Google Maps, as shown below. This app will quickly provide directions to help guide the user to wherever it is that they want to go. Plus, it will show different transit methods for reaching that location.

What makes this such a good design is that it doesn’t provide too much information. It also uses a friendly color scheme that does not distract from the subject at hand. So it takes a pain point of the target market that uses map apps, which is navigating a new area. It then creates a solution to that pain point.

Example #4 (Bad): Yale Art School

This is a distracting mess of a landing page that has no clear action shown. There is just so much going on that it’s impossible to figure out the next step. It’s also quite aesthetically unappealing, which is a significant blow to an art school. The navigation menu is small and difficult to read.

When you are designing your website, remember that functionality is the most important part. Its main purpose is to help people solve their problems. You can’t do this with a distracting website.

Example #5 (Good): Slack’s Chat App

When designing a communication app, it’s essential that the interface be clear and well-organized. The presumption is that users are going to receive a lot of messages so it must be done in a way that’s easily organized. Leave it up to Slacks to come up with such a brilliant design.

One area where I see companies struggle with website design is their customer service areas. There are often too many options that are laid out in an unorganized format that it becomes quite confusing for someone who is having issues. Treat your customer service areas like they are a messaging app. Lay them out in an organized manner and make them easy to navigate.

Final Thoughts

Use these examples of good design vs. bad design to help avoid the common pitfalls that we see so often. Remember that navigation and functionality are the two most important factors. Everything else is secondary to those two important elements.