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, 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.
- Company logo (branding)
- Navigation (usability)
- Photography (quick communication of subject)
- Messaging
- Contact Information
- Newsletter Subscription
- Parent company (not as important)
- 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.
Did You Like This Post?
- Author: Ross Johnson
- Date: Saturday, January 24, 2009
- Comments: 19 Comments
- Categories:
About This BLOG
Since inception, this blog has covered a plethora of topics. Excited by all things design, I spent six years with out a focus. A year ago I discovered my true passion... designing with psychology (primarily as it related to the web). Many thanks to my Web Design Agency, 3.7 DESIGNS that gifts me time to publish my findings.
The Latest Buzz
You should follow us on twitter here.
Popular Posts
We recommend
Would love to see what you have. Can you send the PSD to me?
Sent it over to ya! Look forward to seeing what you come up with
Yeah send over the PSD please. This is a constant struggle in designing.
[...] found this great blog post about simplicity in web design. The author states that you need to step back and remove everything [...]
Sorry, i dont think the deesign you made is very pretty..
the footer on the one you made is much more elegant, but the image and the content is imo too rectangular ish..
@Moulde – That is because you are looking at the design from a “beauty” standpoint, the use of the word “pretty” and “too rectangular-ish” give it away.
Remember design is not art. It is functional and communicative. Art is expressive and decorative.
This is exactly why you should look at simplifying vs decorating.
I can’t see the jpg’s in your post…
@Ross Johnson
Il remember that, but still, why not combine beautiful and funcional?
though i do agree, the starting point was a little too pretty, but with some minor changes id say it was good to go..
@Moulde — Beauty is self serving, it boosts the ego’s of the designer and of the client. It doesn’t achieve goals and objectives.
Now that isn’t to say that it doesn’t matter of a design is aesthetically pleasing or not. Rather that the design should be well balanced, have a logical flow, and communicate the message it is designed to communicate with as few elements as possible. Any more “beauty” is simply decoration and provides no value to the user.
For a lot of reasons there is too much focus on the beauty of web sites with out so much attention to the function/usability. After all it is easier to quantify “I like how this looks” over “This website does what I need it to, how I need it to.”
However the “This website does what I need it to, how I need it to” is actually much more effective from a business objective standpoint.
Think about what decoration/adding “beauty” does that is negative:
- Creates more elements on a site that distract the user, rather than lead them through their goals and objectives
- Increases page load time
- Increases the difficulty in updating content or the site
- Will cause a design to break in more situations (or will require more code bloat to prevent this)
I really agree with you, i just think a balance between beauty and functional should be found,
The replies have been really helpful and instructive
Thank you
I have to wonder, if a functional page is the primary goal, why does the page have nearly red text on a red background (“CONNECTED”, “SIGN UP FOR OUR NEWSLETTER”)? From what I understand, uppercase text is harder to read than mixed case text anyway; when you add such minimal contrast to the mix, it makes simply reading two sentences a chore. Even the “THE TEH GROUP IS” bit isn’t very legible; it’s still better than the other two I mentioned, though. Similar problems can be seen in the bottom right section, where “The Teh Group” and the address are both barely legible due to contrast problems.
In fact, from that angle, your previous design was better since it had, e.g. white text on red background; it glares a bit, but at least you can read it without straining your eyes. The “THE TEH GROUP IS CONNECTED” bit was hard to read in that case too, however, since it was white on a rather light colour.
All in all, I did find your writeup to be useful, and in my (rather inexperienced) eyes, the second version is a better design in terms of both aesthetics and usability. I just think these small things could do with a tad more attention to bring it closer to perfection.
@Aankhen – One of the most valuable tools any designer has is the use of contrast. Now contrast can be used in two ways, it can be used to give MORE emphasis to any given element / piece on the page. It can also be used to give LESS emphasis to any element on the page.
In this case there are areas where a balance of size, location, and importance requires the use of contrast to to ensure that the proper visual hierarchy is archived. The contrast of course is not to make elements stand out more, but less.
If you read back in the article you will see that the headlines and newsletter sign-up are half way down the list of what is “most important” on the page.
If someone skips over the “CONNECTED” headline they can still use the site, they can still get the information they need, etc…
However if you were to make everything equally visually dominating it would be hard to interpret the design due to everything screaming at you. You would likely go to the page, feel that it was overly cluttered/difficult and leave.
If you think that doing these things would make it a better design I more than encourage you to contact me for a copy of the PSD file and see how it looks when you try giving more contrast to these elements.
@Ross: It might not be as important in the list of priorities, but it still ends up being given prominence in the design. It’s sort of like hearing people whisper while you’re trying to sleep, with their volume lying in between the point where you could understand what they’re saying and the point where you couldn’t hear them at all.
Perhaps other people’s eyes slide over things like the “CONNECTED” there. My eyes, at any rate, didn’t. On the other hand, I guess it’s also possible that real users would just see the navigation and hit a promising link there, with the content area receiving only a cursory glance.
Anyway, I’m not inclined to put up, so I’ll shut up.
I liked the content on this site. Would like to visit again. http://www.mumbaiflowerplaza.com
I just recently discovered your Blog and appreciate you sharing your bout with Web Design with the world. but this site also search best knowledge
Web Design.
[...] to users, and a method of updating profiles which is not as easy as Facebook. Simply speaking, Occam’s razor is the key to many things – including social networking web [...]
[...] Un exemple pratique sur un site web (en anglais). [...]
Hi
Thanks for your sharing, web design is important for websites because it can catch the customer eyes and to increasing traffics.
[...] Wikipedia, Webdesigner Depot, 3.7 Designs, Webdesign from [...]