Occam’s Razor in Web Design, Simplicity Wins

You may have heard of the term “Occam’s Razor” before, but most likely, it was not about web design (or design in general). If not, take your moment to familiarize yourself with the concept, as it could alter how you design or craft interfaces from this point forward.

The concept was developed by William Ockham, a 14th-century English logician and Franciscan friar.

It is a simple concept – one of the “laws” we use frequently in our designs – yet it is so powerful, mainly when applied to the web.

Paraphrased, the concept states, “All other things being equal, the simplest solution is the best.”

What Does “Simplest Solution” Mean for Web Design?

When I first began designing, I tended to try and make my work interesting, exciting, and dynamic. That is not to say there are no reasons to design that fit those descriptions. Instead, it is rarely the best solution. Any element on a page or in a design changes the signal-to-noise ratio (something I will cover in later blog posts).

A design can be simple, exciting, well-crafted, and engaging. Simple doesn’t necessarily mean minimal (which is a specific design style). Given what you must have included, things should be laid out and designed most straightforwardly.

How to go about simplifying your designs

Following Occam’s Razor is more about careful planning and deliberate thought process rather than any art form. The first step is to figure out precisely what needs to be included in the design. Here is a typical example from a work that I had created long ago:

• Company logo
• Photography (to communicate subject matter)
• Descriptive text (communicate subject matter)
• Company messaging (marketing message)
• Newsletter subscription (site goal)
• Navigation
• Company address + contact information
• Parent company’s logo

After deciding what has to be on the page, you must rank them in importance.

1. Company logo (branding)
2. Navigation (usability)
3. Photography (quick communication of subject)
4. Messaging
5. Contact Information
6. Newsletter Subscription
7. Parent company (not as important)
8. Address (not as important)

From there, you can decide what elements should be seen in what order and assess if any design element you add is noise and competes with the essential pieces of the design.

Example: Real Estate Company

A few years ago, my first attempt at the example’s design resulted in this concept.

I did a fair amount of visual decoration that didn’t add any “signal” to the design and was nothing more than noise. Let’s break down what was unnecessary:

• The goofy break-out headlines
• The background color stripes
• The huge picture (it used way more visual real estate than needed)
• The different color zones and blocks
• The “stacked paper” look
• All of the extra information at the footer

Revisiting Today

Now that I have been away for a while, I decided to try and revisit this design and think about simplifying it. This included:

• Removing all decorative elements (goofy headlines, background, etc.)
• Rework the navigation so it is harder to miss and balance out the design rather than being an afterthought.
• Simplifying the content area to improve readability and comprehension
• Balancing the photo so it complements the design rather than dominates it
• Simplifying the footer information

The result is a much more robust and more visually attractive design. Even though I removed a lot of decorative elements, the design looks better. As designers, we must be careful not to “over-design” our work too hard. Ultimately, our job is to make complex information easy to understand, not to create digital art.