Lately, I’ve been thinking a lot about women and web design, as I’ve had the good fortune to be working with some incredible women on a project I can’t really talk about yet (I’ve been so wanting to say that— seems like you haven’t hit the big time until you can’t tell people about what you’re doing…).

As I mentioned here, most designs on the web today scream “male” to me— they seem to have been designed for men by men. There has been some discussion over the last year or so about where the women of web design are hiding. This is not the point of this post. There are women web designers everywhere, but for some reason the male aesthetic is taking over.

For the record, I have nothing against men, I don’t think there is a vast male conspiracy against female designers, and I don’t feel like I’m being held back by “the man”. I just think there is another point of view out there that doesn’t make it into the design discussion as often as it should.

Being the recovering scientist that I am, I decided to take a semi-scientific look at the designs of some sites that I visit often, to try to determine just what it is about them that make them seem male or female to me. I grabbed a bunch of sites from my feed reader, and I will be looking at specific design aspects of these sites in a series of posts here, to see if I can discover patterns.

For the first “analysis”, I decided to focus on what my eye sees while I am reading the site’s content. I thought it would be interesting to look at the aspects of the design I usually don’t consciously focus on, but am always seeing. To do this, I grabbed a screenshot of a portion of each site that contained header type, usually corresponding to a post title, and included the whole horizontal aspect of the design. I cropped the header type roughly in half, because I didn’t want to be distracted by reading the same stuff over and over. This essentially gave me an indication of how horizontal sections are separated from each other, and a sense of the colors used for typography and backgrounds in the content area.

The screenshots are available here, as well as the list of sites that they correspond to. The first 17 are sites belonging to men, and the next 12 are sites belonging to women.

Analysis

On first glance, it doesn’t seem like there is much difference between sites owned by men and women in these screenshots. There is certainly not enough difference to determine gender if I were to mix the screenshots up randomly. However, once I grouped the screenshots by gender, a bit of a pattern emerged.

In this sample, males are more likely to use grey or black to delineate sections that were females. Looking at the top group of screenshots, there is an overall grey feel to many of them. Keep in mind that this is the content area only— there may be more colorful defining graphics on the site. But when I’m reading text on many of these sites, I am seeing grey or black. There are notable exceptions to this— numbers 14-17 are boys who don’t use grey, and number 20 is a girl who does.

By this same token, I am not suggesting that Zeldman’s lack of grey makes him a girl, or that Dori Smith’s nice use of grey makes her a boy (both of these folks should be included in my screenshots, but I ran out of gas before I got to them…). I am looking for patterns, and there is a bit of a pattern here, but I don’t think it’s enough to explain the male and female feelings I get from these designs.

So, next time I will explore other aspects of these same designs to see if I can find a stronger pattern. What do you see in these screenshots? What aspects of design would you look at to explore the gender question?