Examples of Good and Bad UX in Web design

The Golden Section in Web Design

The golden section is from the Fibonacci formula. It’s a perfectly pleasing grid. It’s found in leaves, seashells, flowers, and more. It’s used in many famous paintings like “The Creation of Adam” by Michelangelo. The mathematical dimensions create a perfect outline for all kinds of art. This formula can help web designers create more engaging content.

This grid formula is used for design projects and web layouts a lot. Designers use this knowledge is in architecture, painting, logo design, and more. It dates back to the beginning of time and is often found in nature’s DNA. In this example (below) I show this grid being used for a yoga website hero image.

Good Example of UX

This is a good example of UX design in web design because it’s visually pleasing. The female character is floating to the right side of the section. The information on the left is in alignment. They are within perfect reach of each other, just like the squares are in the golden section.

The golden grid is also applied here. I like how the designer included the three headers as well. The three grouping rule is also a popular design rule.

Bad Example of UX

This last example is a hero image I found a spa and medical website. Most likely the owner built her own website. She did several things wrong here. For instance the photo has a women centered right in the middle of the page. It’s suggested that even people in photos should not be perfectly centered.

This designer also used a shadow on the header styling. The business name gets lost on this layout. It’s hard to read, understand and even more it doesn’t make the image seem appealing.