Occam’s Razor in Web Design, Simplicity Wins

You may have herd of the term “Occam’s Razor” before, but most likely it was not in relation to 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 a 14th-century English logician and Franciscan friar by the name of William Ockham.

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

Paraphrased the concept states that “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 had a tendency to try and make my work interesting, exciting, and dynamic. Now that is not to say there are not reasons to design work that fits those descriptions. Rather 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 and still exciting, well crafted, and interesting. Simple doesn’t necessarily mean minimal (which is a specific design style). It means that given what you need to have included things should be laid out and designed in the simplest manor possible.

How to go about simplifying your designs

Following Occam’s Razor is more about careful planning and deliberate thought process rather than any sort of art form. The first step is to figure out exactly 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 you have decided what absolutely has to be on the page you must then order them in terms of 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 their 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 important pieces of the design.

Example Real Estate Company

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

Clearly I did a fair amount of visual decoration that really didn’t add any “signal” to the design and was nothing more than noise. Let’s break down what really 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 awhile, I decided to try and revisit this design and really think about how I could simplify it. This included:

• Removing all decorative elements (goofy headlines, background, etc)
• Rework the navigation so it is harder to miss and balances 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 stronger and more visually attractive design. Even though I removed a lot of decorative elements, the design actually looks better. As designers we need to be careful of trying to hard to “over design” our work. Ultimately our job is to make difficult information easy to understand, not to create digital art.

Think you can do better?

Think you can do a better job simplifying the design? Let me know and I would be happy to send you the PSD of the file and post up your simplification.