April 22, 2004 | View Comments (23) | Category: Design
Summary: I attempt to explain the "tightness" of a professional looking site and fail miserably.
Every once in a while I get an email from someone asking me what criteria I use for choosing sites for the Vault. It might be the same criteria that Shea uses for selecting entries into the CSS Zen Garden. Problem is I have never been able to qualify what those requirements are. I always just tell myself that the sites I select have a professional "tightness" about them that separates them from the rest.
There are always some sites that come close, but there are a couple of things missing that keep it from possessing that "tightness" that I am looking for. So I thought it would be interesting if I actually gave it a shot and try to qualify what elements are needed for that professional look.
For some reason this kills most of the sites I look at whether they are Vault submissions or just random sites I come across. It is easy to tell when typography is an afterthought of the design. The words are what people have to read and if the appearance of those words isn't appealing then you have to figure the design of the site is going to fall apart.
I am not even talking about the font itself that is selected because I think you can make any of the "default" web fonts look good whether it is Arial, Times New Roman, or Georgia (yes I know there are more). Many people seem to neglect the line-height property in their CSS file and either the sentences are crammed together or so far apart that each line looks like a paragraph.
Andy does type right in my opinion.
Like fonts, the choice of colors isn't really as important as how well you use them and combine them. Throughout the Vault there are sites with crazy color combinations, but they pull it off and that helps to make the site click.
I have a problem finding that perfect color combinatione. I am very picky about the choices I need to make and I have spent hours looking for a color that goes with another color. Hence you get the grays and reds here because I lose all patience.
A site that defies all laws of colors (if there are any), but pulls it off magically is Keith's site. I always tell myself that if I tried that color combination it would last for about 3 seconds and would be quickly discarded. Keith made it work.
You have to see each element of your page as a living creature that needs space to breathe. Text that extends to the end of the site where it is touching your borders looks like it is suffocating. Too much white space (like on this page) causes the person to get lost and wonder off into the emptiness of the site.
Greg gets white space right on his site (critique comng next month...).
Everyone knows about these 3 elements of design so I haven't explained that "tightness" that I spoke of earlier. I still can't do it. I guess "tightness" is achieved when all the elements of the page blend together into one seamless entity. That's the only way I can figure. Can you figure it out?
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/216
Big ass squares which overwhelm the navigation area always kills the experience for me.
Mark Fusco (http://www.lightpierce.com/ltshdw)
Yeah I think so many designs are close to coming to the perfect point, but the designer either do finish it off right there or just don't see it. This is where interaction with other designers can come in a lot. Unfortunately that "perfect" point would be different for everyone so what looks good to one person doesn't look so good to everyone else.
Mark, examples?
Scrivs (http://www.9rules.com/whitespace/)
"Big ass squares which overwhelm the navigation area..."
Gotta love those new Google default Public Service Announcment ads...
In any case I think maybe what makes the design click is that you can tell when a designer focuses on the small details of the design, right down to carefully crafting little icons to place around the site or coming up with an original border to separate sections.
I think that is why I appreciate Coudal so much because you can see the work put into the details.
Scrivs (http://www.9rules.com/whitespace/)
Well...I guess I would suggest you scroll to the top of this page to see what I'm referring to.
Whenever I visit this site, and I do mostly visit the page, all my focuses on is the thick lined square which is the logo. It totally pulls my eye away from the navigation and I feel as though I have to force my eyes down to read the content. The same occurs somewhat with the big bold titles as well.
My suggestion would be to place the logo within the space to the left of "home" within the navigation area and consider decreasing the size of the squares next to the titles on the main page, and possibly adding a couple of horizontal lines within them so they have a notepad icon type feel.
Is that a helpful example?
Mark Fusco (http://www.lightpierce.com/ltshdw)
for most of the site listed in the vault, they seem very "polished". the details are there, but they're not details for details' sake. every element has a purpose. thats the one unifying thing that i could find.
time and money are fairly large issues when it comes to getting a "perfect" design. especially if there's a deadline for a project, you dont have enough time to continually tweak a design until it reaches the potential you know it can. not all clients have time for that or want to spend money on it. this was a huge factor in my own redesign (which, i'm still iffy about it being vault-worthy): tweaking it and playing around with it doesnt make money. it took time away from my clients sites. and that meant i had to push it to the last project on my list, which continually pushed the time frame further.
eris (http://www.erisfree.com)
Hey Mark thanks for the suggestions. Things aren't really gonna change that much here, but I will take your suggestions into considerations.
Eris: Time is always the beast that we are fighting against. Unless you talk to Didier who thinks that there is no such thing as time (sorry, inside joke). I am wondering if the really good designers have to do less tweaking to get their designs more right? I would think so.
Scrivs (http://www.9rules.com/whitespace/)
Hey Mark, the day you leave a positive/happy/constructive comment on this site is the day I drop a load in my pants.
Mike
"... am wondering if the really good designers have to do less tweaking to get their designs more right?...
Not really. Good designers put their pants on one leg at a time just like gurus, bloggers and normal folk do.
I think you have two different types of tweeking - you either don't know how to go about something technically correct, or you are unsure about the design.
Eris hit it on the head w/time and money. That's pretty much what it boils down to most of the time. However, I would also add that personality fits / clashes work into the equation as well.
I've done work for folks whom I really meshed well with and creative ideas come easily - the more we talk, the more "on the same page" we become with each other, and great ideas flow freely. On the other had, however, I've worked with some folks who I wouldn't ordinarily have anything to do with outside the project - those are MUCH more difficult to get any kind of creative energy / motivation from.
Doing personal projects is the worst. You are your own worst critic as they say.
Mark Fusco (http://www.lightpierce.com/ltshdw)
I love what you're doing Paul.
Hey Mike, drop away - and don't forget to send me a photo.
Mark Fusco (http://www.lightpierce.com/ltshdw)
Let's look at traffic analyzation. It's an extremely complicated job, but done right it can lead to a more efficient transportation system.
What makes a design have that tightness? There is a definite answer, but it's many times more complicated than traffic will ever be. As AI becomes a more knowledgeable and concrete field, the answer will be closer. Until then, some of us know how to create that look, even though we don't know what makes it what it is.
I personally don't want to know. Art and creativity would lose so much of its value if it were made objective.
Chris Vincent (http://dris.dyndns.org:8080/)
Mike, Mark has often left positive remarks, and contributed a great deal to conversations here. Not much the past couple of weeks, maybe, but we all have our moments, I suppose. :-)
JC (http://thelionsweb.com/weblog)
So ummm yeah anyways, Chris you bring up an excellent point. I wonder if there was a formula if I would be interested. To be honest at this moment I would take that formula in a heartbeat. Quality design and quality clients would hopefully equal quality money.
Of course when it comes to web design and its diverse subject areas I think it would be quite hard to find some formula. I mean how would a gaming site and this site follow the same formula?
Scrivs (http://www.9rules.com/whitespace/)
As far as any kind of "formulas" are concerned, couldn't you consider being true to the personality of the project a formula?
For example, there is an interesting thread going on at 37svn on the topic of copywriting. The best being those sites that really communicate an idea to their audience, not just spitting words at them.
An excellent example (in my opinion) is the Method site.
It's visually and communicatively(?) beautiful - more than suitably presenting their product (purpose). This is what I would describe as "tight" design, as you'd describe it Paul.
Mark Fusco (http://www.lightpierce.com/ltshdw)
Whoa! I went to the Method site and all I saw was a naked guy! Hold on, lemme go check out the design without being blinded.
Ahhh, I find some problems with the navigation on the subpages, but it is a nice site.
I don't think the site does their kickass products justice though.
Scrivs (http://9rules.com/whitespace/)
I thought I would add that my last comment only goes to show the differences between what us designer's like. I do like the copywriting on the site though.
Scrivs (http://9rules.com/whitespace/)
Yeh, I guess you've got a point - the first thing I saw was the tease of a naked girl. ;)
Mark (http://www.lightpierce.com/ltshdw)
I echo Chris. I think the Method site is VERY well done. It has beautiful graphics and photography which speaks to the specific subject matter and shows the product off in a very good light. The copy also lends to the overall feel of the site and is appropriate to the imagery - in my opinion.
It's a given that art is subjective, but just for the sake of continuing this subject of the "professional look", and to provide an insight to how different people view the same thing, I'd be very interested to read what specifically about the Method site you don't think does the product justice in terms of professional looks only.
We'll assume everyone knows it's not a standards compliant site.
Mark (http://www.lightpierce.com/ltshdw)
Mark (and others) I will do you one better and write a whole critique on the site for next week (after my finals). Would that be cool? I just know that once I get started talking about it I will have a lot to say and no use trying to explain everything in these comments because I will certainly miss some points.
But I do think it is a nice site. There are just some things that bother me about (overlooking the naked guy).
Scrivs (http://www.9rules.com/whitespace/)
In what sense? He uses a garrish yellow, but it is only prevalent in the header. Keith uses a combination that goes throughout the site. Kottke's two color combination (yellow/white) is not rule-defying at all.
Scrivs (http://www.9rules.com/whitespace/)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
It's hard to say exactly why a site (or sites) looks good. I think attention to detail is a big thing, for me, as it's always obvious when the designer went that one extra step, or added the one extra flourish. We've probably all seen sites that are bordering on greatness, but the designer quit just a bit to soon and there are a few things that just seem to bother you about the design.
I think you hit two of the more important issues with color and typography. It's important to choose colors that compliment each other, or the visual chaos will detract from an otherwise nice site. Even in small amounts, a certain shade of a certain color can make or break a design.
Ryan Brill (http://www.ryanbrill.com/)