Analyzing the Design of Websites: Apple, Microsoft & 37 Signals
Posted by Dan Zambonini on 11th Jun 2009
As a precursor to a design checklist we will be publishing next week, we thought it would be interesting to try some different experiments on the home pages of popular websites, to see if it was possible to automatically (programmatically) calculate whether a design is good or not. We chose Apple, Microsoft, 37 Signals, YouTube and Myspace. Analysis was carried out on the afternoon of Wednesday 10 June 2009.
Note that all images (except the typography hierarchies in the final section) are clickable for larger versions of each image.
Balance
Although not a hard-and-fast rule, a good design should typically (unless the idea is to cause tension through imbalance) take the balance of the composition into consideration, where smaller dark areas can be balanced out by larger areas of lighter areas.
We brainstormed some mathematical approaches to this; eventually Ben and Carey opted for a vector-based center of mass algorithm, using a weighted luminosity measure of each pixel to determine the weight.
In the results below, the green dot represents the absolute middle of each screen, with the red dot identifying our calculated center of mass.
As can be seen, most home pages are fairly well balanced, with the two largest discrepancies (relative to the size of the page) being YouTube and Myspace. Coincidentally (or perhaps not), these could be considered the least professional of the designs, so this does begin to support the assertion that some aspects of good design can be calculated automatically.
Colors
The colors used in a design should be harmonious, or at the very least, not clash (again, unless that is the specific intention). The pie charts below show the distribution of colors on each home page.
Note: The chart on the left includes the background color of each page, the chart on the right does not include the background color.
Apple
Microsoft
37 Signals
YouTube
Myspace
We have not yet used color theory to analyze this data (e.g. to test for complementary colors), but even the rudimentary charts above highlight the simplicity of the Apple design.
Typography
The text on a design should ideally follow a pre-defined typographical hierarchy, where every step in the hierarchy should be clearly differentiated: by size (at least one pixel), weight, style (e.g. italics) and/or font family.
We created a Javascript application that loops through all text elements on the page, and stores the typographical information about each. The variations in typography on each home page is shown below, with the percentages representing how much text (by character count) uses each style.
Apple
Microsoft
37 Signals
YouTube
Myspace
As can be seen, the Apple typography is as close to perfect as you could image; at least 1 pixel and/or weight difference between a very restricted number of styles. Microsoft almost gets it right, but with the largest two styles having less than a pixel between them, the difference becomes a little blurred (these differences can be caused by inaccurate CSS inheritance rather than purposefully designed, but the net result is the same).
37 Signals, although opting for a much large set of styles, is actually extremely systematic about how the family, weight, style and size cascade down the styles, with a clear hierarchy established.
YouTube also performs well in this test. Unfortunately, possibly as expected, Myspace fails badly, not only with a lack of clear hierarchy, but also by committing the typographical sin of mixing similar typefaces (Arial and Verdana).
Summary
These prototype experiments were designed to assess the possibility that a tool could partially critique a design, based on long-established rules of good design. The results are promising, showing at least some relationship between what many people would consider the 'best' designs and the output of these algorithms.
This is just the beginning, though. What other tests could be run? How else could this data be used and visualized? Would tests like these, if popular, cause a fear of creativity? Let us know your thoughts in the comments.
Post Comment
About The Author
Dan Zambonini is the Technical Director of Box UK. He is the original architect of the Amaxus Content Management System, conceived clickdensity, has participated in industry-shaping think tanks, and has had articles featured in international websites and magazines. He is passionate about making use of the latest technologies in everyday life, and believes people and communities are key to innovation. For more, you can visit him on his personal website at www.danzambonini.com. 
-
User Experience Design
Content and functionality to layout and aesthetics; our IA and User Experience Design service ensures that nothing is left to chance.
Box UK Twitter Feed
- Thanks for the feedback! RT @13twelve: @boxuk the UX session was properly good, cheers @jamesdownes & @zambonini. Hope to see you again soon Posted on 1st Feb by Box UK
Dan Zambonini’s Twitter Feed
- I hoped "Is It Available In Canada" would answer questions about Monster Munch and Twirls, but no, its gadgets. http://availableincanada.com Posted on 8th Feb by Dan Zambonini
Comments
84 comments
David Locke said... 11th Jun 2009, 20:37
Those center of mass dots should be relative to various screen sizes, since a viewer would never see the page the way our analysis see it.
You would have to animate the dot location as the luminosity changes. It would not just be a matter of moving straight down.
Your anlaysis hints towards many more. Great!
Gregg Blanchard said... 12th Jun 2009, 02:01
Very interesting data. I especially love the data about the use of fonts and their density within the design. I love how 37 Signals has always been able to give plenty of information to make an informed decision as to the next course of action but never in a way that feels overwhelming. Great data and analysis.
Dan Zambonini said... 12th Jun 2009, 08:55
@David Yeah, we did consider also doing some dots relative to the various common 'viewports'. Luckily, most of the sites we analysed (except 37 Signals) were not too tall, so the 'viewport' typically contained the entire design. But that would be an interesting experiment.
@Gregg Thanks for the comments!
Ramsay Taplin said... 12th Jun 2009, 09:13
Epic post!
Really good points here. There is something very intangible about a good design though, don't you think? All the balance and measures can be in place and it still doesn't look right.
Gets me thinking. Thanks guys.
Ramsay
Killthedinosaur said... 12th Jun 2009, 09:14
Why don't you guys release these tools so we can use them for personal use.
Dan Zambonini said... 12th Jun 2009, 09:29
@Ramsay Thanks! Yes, there's definitely an intangible thing about good design, which is why it's such an 'artform' I suppose (speaking as someone who has studied the 'rules' but couldn't create a good-looking design if my life depended on it!).
I think I worded a question wrong in the post; rather than using rules/tools like these to assess 'good' design, I think they could instead be used to identify problems, i.e. they'll never be able to tell us what is 'great', but they may help us resolve common issues.
@Killthedinosaur Yes, we might. This data was collected using some really rough prototype code, and we wanted to get the results out ASAP to see if there was an interest in it. If there is (which there does seem to be), we will definitely think about making them a bit more robust, more comprehensive, and then making them available to people.
Carey Hiles said... 12th Jun 2009, 09:33
@David I found the search results test I ran particularly interesting in terms of viewport. On my 1200px vertical resolution monitor, the CoM for Google's search results was on the title of the fourth result. I found my eyes naturally drawn to the third result and scanning up, which I put down to the browser chrome, something else it would be good to allow/adjust for. Maybe the race for the #1 slot isn't all it's cracked up to be.
Ramsay Taplin said... 12th Jun 2009, 09:33
@Dan Zambonini
"I think I worded a question wrong in the post; rather than using rules/tools like these to assess 'good' design, I think they could instead be used to identify problems, i.e. they'll never be able to tell us what is 'great', but they may help us resolve common issues."
Well said. And so true. You just put an intangible factor into words. Props.
Ramsay
ster said... 12th Jun 2009, 13:16
excellent
Lucy said... 12th Jun 2009, 15:04
Cannot figure out how you calculated the center of mass. More details please?
Dan Gorgone said... 12th Jun 2009, 15:06
Very nice analysis!
However, it's important to note that Apple (for example) keeps their palette consistent after you leave their home page. MySpace, on the other hand, has allowed their user pages to be customized, most especially in terms of color. While the Apple site remains a pleasing and consistent experience no matter where you go on their site, MySpace is a nightmare of arbitrary color choices based on the user.
Related, I bet you'd find the color palette on the MySpace home page to be very similar to the Facebook home page. However, once you click through to user pages, the similarities end. I have to think this is one reason some people find Facebook preferable to MySpace.
madbirdy said... 29th Jun 2009, 20:03
wow! nice analysis! thanks!
Junagadh said... 1st Jul 2009, 06:35
After read this article,Just want to say that
"its really informative,also some valuable comments"
Read the replay of "David"(first from top),agree with him.
Thanks for sharing...
James said... 16th Jul 2009, 22:04
Dan, do you plan to run further tests? Would be very interesting to see this experiment for a larger list of websites with known good and bad designs and then have a user rating system to see what percentage of people agree with the test results.
Dan Zambonini said... 17th Jul 2009, 08:15
@James I'm not sure yet what our plans are. Ideally we'd release these tools as some kind of web app, so that others can run them and we could crowd-source the good/bad/rating.
I'm being a bit tentative as I'm not sure there are enough tests to create a web app yet; if we (anyone?) could think of some more interesting 'design' tests to include, it might be worth the effort.
prosolution said... 21st Jul 2009, 04:03
^^ Agree with you Helvetica is very beautiful font.
James said... 21st Jul 2009, 23:28
Thanks for responding Dan. I subscribed to your RSS feed so that I can get future updates.
Perhaps you could write a new blog post requesting test ideas and include a poll to see if people were interested or not.
Hamil said... 22nd Jul 2009, 06:34
I think VAG Round is a beautiful font.
Great blog post anyway.
progressive slot machines said... 23rd Jul 2009, 10:41
I used to hate macs simply because all of the zealotry behind it's users. When it became a UNIX OS I could argue any good reason not to switch. It ran all the apps I used and needed and was unix under the hood. I've become quite the hypocrite I guess, I now own only macs and my license plate is now USEMAC.
web designer said... 31st Jul 2009, 11:49
Very interesting analysis! No one before compares these sites. Being a fan of Apple, I vote for their website.
Latest Mobile Reviews said... 9th Aug 2009, 19:00
you definitely make some really good points. Its definitely all about design when people want to come back your site. I have been trying to work on this for a year trying to find the right design for a website. thanks for the great information.
webmaster directory said... 10th Aug 2009, 17:39
When analyzing Web design, it is easy to identify a large number of mistakes that reduce usability. It is much harder to say what good things to do since I have never seen a website that was truly stellar with respect to usability. The best major site was probably amazon.com as of late 1998, but during 1999 Amazon declined in usability due to the strategy of blurring the site's focus.
seo services said... 14th Aug 2009, 14:19
Wow...I thought my design was good until i read this. Now i gotta start looking at color variances!!!??
Armani Watches said... 14th Aug 2009, 21:58
i don't know my Design it was one of the best work design tell i read this article .
armani watches
Armani Watches said... 14th Aug 2009, 21:58
i don't know my Design it was one of the best work design tell i read this article .
armani watches
Guess Watches said... 14th Aug 2009, 22:00
Why don't you guys release these tools so we can use them for personal use.
CiggArest said... 17th Aug 2009, 03:17
Apple is definitely the benchmark to what a website design should be. Great comparison!
Manual Directory Submission said... 17th Aug 2009, 04:15
Apple is no matter amazing in many features but when it comes to user friendly it is always microsoft.
Cyber said... 17th Aug 2009, 12:22
Well said! I've enjoyed reading every single bit of your custom essay like post, I will be your regular subscriber
and will always visit your site to read more of your essay posts I will also tell all my friends about your blog
and I am sure most of them will like it to, I will resume my own blog as well promoting your site
Jameson said... 17th Aug 2009, 16:55
Microsoft in the coming years will give Apple a run for their money on the design front. Whether that transcends to the online world is a different story...knowing MS I doubt it.
bulk domains said... 17th Aug 2009, 17:15
these are some great points. Apple definitely has the best site out of all the them. You would think microsoft would but unsure what they are doing. They are suppose to be the king.
Online University said... 22nd Aug 2009, 10:53
The best major site was probably amazon.com as of late 1998, but during 1999 Amazon declined in usability due to the strategy of blurring the site's focus.
get rid of ants said... 24th Aug 2009, 15:25
Keep it up!
Technology Forum said... 25th Aug 2009, 04:43
kool article
Seo Blog said... 25th Aug 2009, 05:25
This is really awesome analyzing of the wen designing. I am however a new web developer so and this articles is going to be very useful for me. I will be checking this blog often now.
Texas Holdem said... 26th Aug 2009, 18:55
Dan, do you plan to run further tests? Would be very interesting to see this experiment for a larger list of websites with known good and bad designs and then have a user rating system to see what percentage of people agree with the test results.
John said... 27th Aug 2009, 08:06
No two eyes are the same. So someone like lighter color and background and others might like differently. So this is not a much needed analysis.
get rid of ants said... 28th Aug 2009, 04:43
Fantastic work MS and Apple! looking forward to this..
forex trading said... 28th Aug 2009, 04:55
Well done! This is what I have been waiting for..
Live Soccer scores said... 28th Aug 2009, 06:06
Great post.
inchirieri masini said... 29th Aug 2009, 14:39
nice article... you re right
Lukisan said... 29th Aug 2009, 20:18
these are some great points. Apple definitely has the best site out of all the them. You would think microsoft would but unsure what they are doing. They are suppose to be the king.
Jual Beli said... 29th Aug 2009, 20:19
Apple has always been a step ahead when it comes to desgin & typography. It's fun to see it proved with numbers. Well done
Sale Iphone said... 29th Aug 2009, 20:21
Great stuff man! Really guys you are experts! Love ya all!, Why don't you guys release these tools so we can use them for personal use.
Honda CBR said... 29th Aug 2009, 23:22
if it says microsoft im heading for the hills!!..
Social Bookmarking Sites said... 30th Aug 2009, 15:46
I think that Apple has the greatest design from the above mentioned sites,as above commentators i think Verdana is the greatest font.
PORNO, SikiÅ said... 31st Aug 2009, 12:20
Good on your
Hostgator Review said... 2nd Sep 2009, 07:02
these are some great points. Apple definitely has the best site out of all the them. You would think microsoft would but unsure what they are doing. They are suppose to be the king.
Internet flowers UK said... 2nd Sep 2009, 10:09
Dan, do you plan to run further tests? Would be very interesting to see this experiment for a larger list of websites with known good and bad designs and then have a user rating system to see what percentage of people agree with the test results.
Holdem said... 2nd Sep 2009, 20:22
Yes,
It is hard to design truly beautiful websites, and your presentation offers good pointers to reach this goal.
Peter08 said... 3rd Sep 2009, 13:04
Nice job dude...the analysis of web design in these great company's websites is really commendable. This type of anslysis will definitely educate other people who are not well versed in design.
Peter08 said... 3rd Sep 2009, 13:05
Nice job dude...the analysis of web design in these great company's websites is really commendable. This type of anslysis will definitely educate other people who are not well versed in design.
bijuterii said... 3rd Sep 2009, 15:34
myspace page looks like facebook hpage
Ryan said... 3rd Sep 2009, 17:13
Thanks for the great comparative study. Looks like a designer should also know a bit of physics!
Geschenke zur Geburt said... 3rd Sep 2009, 22:09
I am really hoping you do some further testing on other sites as well. This helped me a lot with the 3 sites I have created so far.
I am new to the designing game by the way. I have enjoyed learning the new things though!
Hundebett said... 4th Sep 2009, 09:10
Entspannter Schlaf foerdert die Gesundheit von Hunden
Das Unternehmen Amberdog praesentiert ein innovatives Hundbett.
Gefuellt ist das Bett mit Dinkelspelz und Bernsteingranulat, deren gesundheitsfoerdernde Wirkungen seit langem bekannt sind.
Das neue Hundebett von Amberdog heisst "Ambervital Wellness for Dogs". Das Bett ist gefuellt mit rein natuerlichem Dinkelspelz und 500 Gramm Bernsteingranulat. Fuer kleine und fuer grosse Hunde, für junge und fuer aeltere Hunde eignet sich das kuschelig-warme Hundebett.
Hunde said... 4th Sep 2009, 09:12
Bei uns geht es um die Gesundheit der Hunde. Vorallem wenn Hunde von Zecken geplagt sind, helfen unsere Bernsteinketten.
Bernstein said... 4th Sep 2009, 09:14
Bernstein und Bernsteinschmuck finden Sie bei uns in ungewohnt groÃer Auswahl
Meaning of Dreams said... 4th Sep 2009, 09:48
Great tips if this could be automated it would sell a bunch.
Stevenson said... 4th Sep 2009, 20:17
The color analysis shows that the mild colors are the ones most liked by the people.
dienstreiseversicherung said... 5th Sep 2009, 14:46
Great tips, THANKS and GREETINGS FROM GERMANY
Shade said... 6th Sep 2009, 15:42
yeah "Killthedinosaur" your´re right, they should release this tools for personal use!
@Dan Zambonini: YES - there is an interest, i hope you will release it soon =) really nice analysis!
myspace layouts said... 6th Sep 2009, 17:05
Great job.
Robinson said... 7th Sep 2009, 18:36
People like apple the most because of the pleasant combination of colors that are used in the operating system.
Change Management said... 7th Sep 2009, 19:01
Great information here. The design of websites are always changing it seems like. This is helpful information for many designers like ourselves.
Internet Marketing Consultant said... 9th Sep 2009, 06:03
This is very useful in fact, if it's OK, I would like to use to refer my outsourcers to for further training.
Invicta Watches said... 9th Sep 2009, 09:48
Got some great ideas for my redesign thank you.
Bernstein said... 10th Sep 2009, 12:58
Very userful. thank u very much
Ben said... 10th Sep 2009, 13:01
thinking about a redesign ;)
Web Hosting Reviews said... 10th Sep 2009, 17:06
Good analysis with the colors. I think I can apply your results in my websites while choosing the themes. Great job.. thanks..
Bee said... 17th Sep 2009, 19:35
Nice article, I like it very much.
Thanks.
Bankruptcy copies said... 18th Sep 2009, 04:00
Design has something to do with the traffic and length of time people spend on your website. Thank you. Your post is really interesting. This a rare topic of discussion.
Auctions said... 18th Sep 2009, 08:16
I like the colors of apple which looks fantastic.Expecting more topics like this..
Matrimony said... 18th Sep 2009, 08:23
Colors can be used as an expression as well as language. The background color of website, the color of header, the color of text, headlines and sub-headlines etc. can all have a psychological impact visitors.
Borsa Yorum said... 19th Sep 2009, 21:57
No two eyes are the same. So someone like lighter color and background and others might like differently. So this is not a much needed analysis.
Blog SEO said... 22nd Sep 2009, 14:47
Thanks for sharing this great article! That is very interesting Smile I love reading and I am always searching for informative information like this.
costume jewelry said... 22nd Sep 2009, 17:45
I define "Asian Americans" as the population living in the U.S. who self-identify as having Asian or Pacific Islander ancestry, in whole or in part, regardless of whether they're U.S.
peterpan13 said... 23rd Sep 2009, 09:37
It is may to opt for the perfect writing service, when students know relative to Thanks for sharing this great ar.
peterpan13 said... 23rd Sep 2009, 09:37
It is may to opt for the perfect writing service, when students know relative to Thanks for sharing this great ar.
"http://www.supremeessays.com
Kenali Dan Kunjungi Objek Wisata Di Pandeglang said... 29th Sep 2009, 18:27
I havent any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.
Xenon Bulbs said... 8th Oct 2009, 10:46
Very interesting read! Some very good points mentioned, thanks.
voucher codes said... 9th Oct 2009, 07:11
It is may to opt for the perfect writing service, when students know relative to Thanks for sharing this great ar.
goole said... 9th Oct 2009, 07:15
Good point!
ashford web design said... 8th Dec 2009, 14:42
Very interesting, some good points mentioned.