Good Design vs. Bad Design Decisions

How can you tell the difference between good design and bad design decisions? You can start by comparing and contrasting the differences. Design is a thought process, and it takes time to build an eye for it, just like any other craft. You can learn the fundamentals, but the best way to think like a designer is to practice. practice. practice. Let’s get right into it.

Good Design

A quote from Steve Jobs that I remember till this day is, “Design is not just what it looks like and feels like. Design is how it works.” A lot of people can become confused by the idea that good design simply means it looks pretty. Sure, beauty is one aspect of good design, and in general terms what you should aim for, but not all designs that are good are beautiful. Good design is both functional and beautiful, but can sometimes be ugly. Boldness = ugly & functional ; Beauty = pretty & functional.

Good design is:

• aesthetic
• useful
• unobtrusive
• honest
• understandable
• innovative
• thorough down to the last detail

Elements of Design

• Line
• Shape
• Direction
• Size
• Texture
• Color

Principles of Design

• Balance
• Alignment
• Contrast
• Proximity
• Repetition
• Space

Here’s an example of the Eventbrite mobile application home page. Eventbrite is a mobile application that makes it easy for users to search for and browse events in their local area all in one place:

What makes this good design?

• The visual hierarchy is clear. I know I am being guided to choose an event.
• The visual weight is aesthetically pleasing. The photos on the screen pull me in and compel me to find out more.
• It’s useful. The “share” button and the “like” button as well as the menu items at the bottom of the screen allows me to quickly choose what I’m looking for.
• It’s simple. Ever heard the phrase, “less is more” ? the key to good design is to be able to design as little as possible, yet still come across as functional, reliable, usable, proficient, and creative. In this screen I’m not confused on where to look, or what to press. Everything is easy understandable to me as the user.

Another example of good design is the Google Maps home screen for mobile. Google Maps allows users to quickly type in their location and destination, and quickly guide the user to their destination using different transit methods:

Why is this good design?

• There is visual direction. I know, by looking at this screen that the search bar will take me to my location. It is easily found at the top of the screen.
• There is balance, alignment, and contrast. Some elements dominate others on the screen such as the visual street map and the “Explore San Francisco” item list.
• Size. The list of suggestions at the bottom of the screen are proportional and spaced evenly, they also add a visual appeal.
• Color. The color scheme is not loud or obtrusive to the user interface.

So what makes design bad?

Bad Design

If good design is about primarily being functional, then how can we determine what bad design is?

I came across the Yale Art School website when I was browsing for bad design examples and found exactly what I was looking for. Yale is an Ivy League College. It is ranked number 3 in the nation. With that in mind, let’s take a look at how their art school website ranks:

What makes this bad design?

• No visual hierarchy. I can’t tell where to look. There is too much going on that is distracting and unclear. There are too many dominating elements.
• Not Aesthetic. This is the perfect example of a design that’s both unappealing and not functional. The background is loud and takes away from the functionality and the goal of the website which is to direct students to resources.
• Lacking Visual Direction. I am confused on where to direct my focus. Is it the flashing background? Is it the image that I cannot read? Is it the red address at the top of the screen? Or is it the Ad-like pop up boxes that appear at the very top?
• Space, Alignment, and Pattern. Space is important because it allows the user to clearly be able to navigate throughout the website. However, in this example, space and alignment are unbalanced. All of the information is clumped into a section, and there is no form pattern.

Now that we have an idea of what good design and bad design is, we can easily see how it can make for a bad user experience. The key to good design is functionality. However, without visual hierarchy, visual weight, and visual direction, the design loses its value. Design is important, but more specifically, GOOD design is important.