What Your Web Design Says About You (Infographic)

Nov 29 2010 by Dona Collins | 49 Comments

Font and color choices in a website say certain things about the owner of the site. Though colors and symbols may have different meanings in other cultures, this only reaffirms the notion that design choices do affect the perception of the user, which in turn affects the message attempting to be conveyed.

Here is an infographic that delves into the meanings of fonts and colors in the context of web design.

Click to enlarge.

Related Content

About the Author

Dona Collins is a part-time teacher and a part-time blogger. She is also an avid designer. She spends her free time creating infographics, videos, and music (with FL Studio). If you would like to know more about Dona or her team, check out CreditLoan or follow them on Twitter.

49 Comments

Joshua Chase

November 29th, 2010

Wow, I need to print this out and stick it ont he wall. Great poster image!

Young

November 29th, 2010

That’s a very interesting infographic, as much as it sugarcoats comic sans and impact. My description for those who use the fonts would’ve had a lot more sarcasm and definitely contained the word “imbecile.”

It intrigued me to see that both 19-24 and 36-50 like black. I’m guessing they like the color (or lack of) for different reasons, the former attributed to all the deathcore and emo band sites out there, and the latter probably for the elegance and composure. Either way, since I belong in the group sandwiched in between those two, I found it curious.

Neha

November 29th, 2010

So aptly informative….I too am going to print it and stick it on my wall!
Thanks a ton! :)

Saddam Azad

November 29th, 2010

Please make a framed print of this. Would definitely buy for my studio.

Scott Buchanan

November 29th, 2010

This would be great as Exhibit A of a new article, “Showcase of Bad Infographics,” if it hasn’t already been published:

http://www.smashingmagazine.com/2010/05/10/imagine-a-pie-chart-stomping-on-an-infographic-forever/

The “pie chart” shows two percentages that measure different data sets: the serif/sans-serif in headlines and body copy respectively. These two data cannot be compared in a pie chart! Bad designer, bad.

Gedit

November 29th, 2010

Amusing, what would goethe say? Chromatics ftw?

Curtis Scott

November 29th, 2010

Having seen many well done info graphs I can’t wait to get a chance to do one. I love how your post breaks down how certain design and typography is precieved in regards to info graphs. Great post!

Volker Schaefer

November 29th, 2010

I think it is the same like with dogs and owners.

Great poster!

justintime

November 29th, 2010

This article being your personal opinion or based on some studies?
I liked the fonts stats…colors..ehh pretty predictable.

Gelo

November 29th, 2010

Really nice, well done! :)

CalvinA

November 29th, 2010

60% use sans, 34% use serif…. what do the other 6% use?

Raphael Barzic

November 29th, 2010

This is a very useful!

After having learnt the CSS3 and read this article, I’m finally almost ready to make my website’s design by myself!

Thanks a lot!

Rob

November 29th, 2010

Who provided the statistics for this article? I find them to be lackluster at best though would give them more consideration if they were from a credible source.

You’ve compared five fonts in the top. 2 of them are used semi-often as far as I have seen. What about Trebuchet MS, Times New Roman, Georgia or any other fonts which are used more often in web design?

In the Second graphic portion, what the heck is going on on the right side? It’s the most confusing thing ever! On the left you’re saying this font split between serif and sans-serif is accurate? Based on what? Are these your own browsing habits or do you have a factual source to back this up?

As for the colors, I won’t even touch that. Colors are largely perceived based on their use/situation, what combination of other colors are used with them and the observer viewing the colors, making it VERY hard to predict the outcome because people will likely see things differently either way you combine the colors.

Nice effort, but like a lot of things on here recently, this post seems poorly thought out, poorly put together and at best it is questionable in terms of the “facts” being presented.

David Radovanovic

November 29th, 2010

All is fine in Pleasantville. I hate to be critical, though this chart seems more like a Horoscope than an objective analysis of Web design elements. As far as design is concerned, gray is usually used by folks that are risk adverse, bright red and medium blues with those unimaginative. Before you shoot back… I have used gray, red and blues for the same reasons I mentioned.

Lush Web

November 29th, 2010

Very interesting article.. I will definitely use this for future reference and to show clients.

Jason C. Levine

November 29th, 2010

I love infographics, but I wish this was based off a larger sample size.

Michael Tuck

November 29th, 2010

Hard for me to accept that only 4% of sites use TNR as their body font.

Ace Media

November 29th, 2010

@CalvinA The other 6% use web fonts like cufon and typekit

surendra

November 30th, 2010

thanks from describing about colors.

Monie

November 30th, 2010

what a great stuff! Quick but informative.

Jon

November 30th, 2010

The favorite color by age is fascinating… the font size by age is illuminating.

Michael Bolton

November 30th, 2010

It reminds me of The Principles of Beautiful Web Design book and saying that is a massive compliment.

M

dselva

November 30th, 2010

Great informations.. Thanks

Radim

November 30th, 2010

I saw a lot of interpretation of colours, but I think its far more complicated. For example gold + black = exclusivity, etc…

jt

November 30th, 2010

I hate infographics.

And thats mainly because there’s more emphasis on the graphics than the info.

@clementyeung

November 30th, 2010

Don’t mean to be a party pooper but where’s the proof that Verdana is best for online texts?

I once heard from a successful internet marketer that landing page split tests using arial at 11pt had the best conversion rate.

nunya

November 30th, 2010

i just use the colors and the font size ..usually a 14-16 bold,that can be read by older people,since that is who i write for.

Bryan

November 30th, 2010

I find this really interesting. This is even a great guide to making designs to actually get what a particular project should look like and what color to use. Thanks! This is great!

Beth Neibert

November 30th, 2010

Just in time! (I stumbled upon your post via another’s tweet; am now following you directly.) Just redid all of my business photos and was preparing to modify my website color scheme, too. Will use this to influence my choices and love the way you have captured the ideas visually. A nice change of pace. I’m going to give you credit in my own blog; watch for it soon. Thank you!

Rob

November 30th, 2010

@Ace Media: Web fonts include serif and sans-serif variants. I believe the remaining 6% (as per the article) would be using different font styles such as Monospaced, Script, Hand-drawn, etc.

Also, read the graph with caution as it states that 60% use sans-serif for HEADLINES while 34% use serif for BODY copy. As another commenter stated the pie-chart is comparing two completely different data sets.

Coronado Cookie

November 30th, 2010

I love this analysis! I am going to print it out and post it on my “information wall”. It certainly makes me look at my sites with new eyes. If you follow these results, the choices you make depend on your target market and what you are trying to accomplish.

topmaps

November 30th, 2010

[insert random bland phrase of praise that disregards both the content and quality of the post here]

Vivek Parmar

November 30th, 2010

really informative post. just write down it on my diary

xcubelabs

December 1st, 2010

Very interesting article in fact. As a symbolism geek I do believe that our choice of design will project who we actually are.

Nick Thomas

December 1st, 2010

Nice one….it would work like a catalyst while playing with CSS….:)

BradJG

December 1st, 2010

Err, actually, fellow posters, I think you will find that you are all wrong, that all it does is state the bloody obvious, and that it is really about as useful as a paper ipad.

The colours bit reminds me of a ‘what sort of psychoses do YOU have?’ Facebook app. Or something.

Andrei

December 1st, 2010

Such a great infographic with so much good information. Might get this printed as well. Maybe you should consider printing it?
Thanks for a good post!

CMBurns

December 2nd, 2010

It’s a cool graphic but I don’t think it really covers what it says it does. Beyond color psychology and the weak font descriptions [which sound more like your personal opinions] you don’t really cover what MY site says about me. That being said, here’s why your graphic doesn’t work… for me at least:

There are a bunch of percentages [some that don't even add up ie. web font usage]and such… it’s more of a broad-view of the web rather than what a site says about an individual. And to be honest, if you are in the business, you should already know color theory and how to choose appropriate fonts.

This knowledge ultimately drives the design online. Because of this, it doesn’t even make sense to try and delineate any actual demographics. If you are doing your job right you are designing to the target market and the client rather than yourself. So finding what MY site says about ME is a moot topic because my site(s) don’t say anything about me, they speak about my client and their target market… get me?

Also, any web designer that would choose to use “comic sans” or “gigi” as a font in ANY capacity should go back to print… hell, these aren’t even standard web fonts!

Note: I wouldn’t recommend either of those fonts for print either… just sayin.

Jenny

December 3rd, 2010

Great infographic. Very useful. Thanks.

Bryan

December 3rd, 2010

This is awesome!! Thanks for Sharing!

Marc

December 6th, 2010

Makes you think twice about the colors you use :-)

JoĆ£o Pedro Pereira

December 27th, 2010

Good stuff but I don’t agree with you in some points like age and colors and some colors and feelings…

Thomas

January 31st, 2011

I hate to say but I agree with the skeptics here. I think Comic Sans is at a point now where almost no-one should use it on their site, there are so many great lesser known fonts that do the same thing, whereas Comic Sans has become so recognisable that it defeats the object of being a handwritten font, not to mention one that has serious Geocities connotations.

Srinivas J

February 11th, 2011

Really a good one.

Edward Franklin

April 15th, 2011

Great work. The color science part is most interesting and should prove valuable to my web design team. Waiting for some more quality stuff from you!!

Matt

April 20th, 2011

This is a nicely put together and fairly informative graphic, but… save Comic Sans for web graphics? Save it for the shredder, or posters you print out for your kid’s birthday party so it doesn’t clog up the tubes!

nini

May 8th, 2011

very useful stuff, thx for sharing that!

Steve

July 20th, 2011

Nice article. Did you know that Magenta (or pink) is not a colour? That is, it is not present in the spectrum of light. It is the brain’s interpretation of the combination of two other colours.

See: http://tinyurl.com/3kjlucg

dave

September 2nd, 2012

Nice one and definitely an interesting idea and concept on the relationship between design and colour. I have actually read the article twice now – very interesting!

Leave a Comment

Subscribe to the comments on this article.