FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Criteria for a "Clean" Website Look?





Kenji_Kensuki
I've seen lots of examples of well designed websites, I've seen ways to improve your website, I've seen website posts praising wonderful examples of clean website.

But I am wondering: What makes a clean website? Are there specific criteria that have to be met? Is it just sort of a "gut instinct?" Is there a place that I can read this definitively?

Any responses would be appreciated.
Dialogist
Unfortunately there is a set formula which you can follow to achieve this kind of thing and I usually tend to suspect designs that can adhere to certain standards. They are in danger of aiming for "mediocre", at least in my eyes. Anyway, you don't want my opinion, you want to know how to do it.

Use a layout template.

http://960.gs/

All the big guns use 960.gs. I have no idea why, but eh.

Use clean and attractive sans serif fonts.

Helvetica, Lucida Grande, etc.

http://blog.cocoia.com/2008/swiss-interface-syndrome/

What these minimalist, avant guarde sites all do is emulate whatever Apple do (in my opinion). That seems to be the standard. That is achieved by using fonts that they use. Like the two above.

Use a lot of whitespace.

Most of these sites have large spaces of...nothing. That's how they achieve the minimalistic effect (duh). But this is good in some respects, as does make the typography look a lot better.

Don't utilize too many colours.

It's basically going to be black and white. Black, white and grey (I'm snoring typing this). This is the standard. Most will throw in a subtle complementary colour, like red or blue, but it won't be used too often. This can be effective for balance and also accentuate links within small type (the headings are usually quite large these days and the body of the text usually rather small).

Use hushed colour images only.

The idea is to keep the whole look of the page subtle. If you have a glaring, garish image on the page, it's going to ruin that pretty quickly. So lower the saturation on all of your images using photoshop or use black and white images - for that real artsy fartsy look. Also, instagram filters seem to be pretty trendy these days. Especially that vintage one that looks kinda sixties.

That's about it. Exciting stuff, huh?
deanhills
Dialogist wrote:
Use a lot of whitespace.

Most of these sites have large spaces of...nothing. That's how they achieve the minimalistic effect (duh). But this is good in some respects, as does make the typography look a lot better.
Agreed. I think this makes a great difference in getting a "clean" look.

Some of the 960.gs templates look busy however, or is it my imagination?

Anyway, this one was really attractive for me from a "clean look" point of view. Just wish all of it was perfect white, seems as though some of the sections have an off-white background. If it were perfect white, I'd have thought it a perfect template.

http://www.brandrichmedia.com/


This one too, but not very partial to black backgrounds. Looks good in this case as they're probably trying to cater for a "classy" clientele.

http://blackestate.co.nz/
medesignz
Dialogist wrote:
Use a lot of whitespace.

Most of these sites have large spaces of...nothing. That's how they achieve the minimalistic effect (duh). But this is good in some respects, as does make the typography look a lot better.
Is the term not "Dead Space"?

Just think Google
Dialogist
medesignz wrote:
Is the term not "Dead Space"?


http://en.wikipedia.org/wiki/White_space_%28visual_arts%29

But ignore the content in large parts because it gets a few things wrong. It says the term arose from graphic design and it has to be white but like the 2nd link Dean showed, it doesn't. It arose from typography, hence white space. They said negative space which is graphic design but it was actually from positive leading.

medesignz wrote:

Just think Google


Yeah, that would be dead space. They were approached to put up a missing sign for a high profile case of a missing girl not so long ago. They refused and said if we do it for you, we have to do it for everyone. They then went back to utilizing the most looked-at piece of real estate in the world with their all-important muppets animations and obscure artist's birthday nonsense.

deanhills wrote:
Some of the 960.gs templates look busy however, or is it my imagination?


They're all like that. Even the ones you posted, although a lot neater still look like all the rest to me. Formulaic, pre-set, unoriginal etc. Good for a small business, but a lot of these small businesses are web designers. I don't know, I don't get the appeal.
microkosm
I agree that copious amounts of white space does make a webpage look "cleaner." However, this is not necessarily the same as elegant web design. It can be no doubt, but a lot of times people seem to go for the Apple look because it is superficially easy to achieve. Just make sure to adjust the margins and padding to ensure enough space around objects and use a three-color design scheme.

However, for inspiration check out this page (CSS Zen Garden) which shows what can be done with CSS, and the examples are far from cookie cutter.

This being said, I personally like to use minimalist designs incorporating lots of spacing, bigger text, and simple color schemes. But if you don't do it right it looks like crap (personal experience).
Dialogist
microkosm wrote:
cookie cutter.


That's exactly the term I was reaching for, thanks. Yeah, the Zen Garden stuff defines the difference between pure css and templates merely tamed by css. That's important too, because while being particular about techniques could seem irrelevant to the layman viewer, the overall relevance of the design for the specific client in mind should speak for itself. Like so:

http://www.csszengarden.com/?cssfile=194/194.css

Most templates only provide one solution for all (and they manage this by aiming for generic). A little bit of css know how allows you take full control and put the right outfit on the right body. And it doesn't look formulaic because of that. And likewise, the one-size-fits all templates do look formulaic, also because of that. And there's always a multitude more of them, also because of that.

So I guess, just beware of making it so clean that it doesn't have any personality.
amagard
I second what has been said already: don't use too many different colors or fonts. And no blinking and flashing gadgets to confuse visitors.
And don't use 80 % ads and 20 % content to make visitor read all the ads before they find the content. If they are like me they never will come back to such a site.
Make sure essential user interface elements are always at the same place and not moving around while the page is loading. Like OK and Cancel buttons for forms should be always at the same place on a page.
Provide status indicators while the page or some part of it is loading. Really confusing always is if you don't know whether the entire page has finished loading or not.
medesignz
Some great follow up posts to this question... Go Everyone!!!
Related topics
Site Advertisement and How to get more traffic
Making Your Website Look Professional
Why You Should Never Use Flash
SMU:A signature makers union
Designing a website tips
Carl's Start-to-Finish Professional Website Tutorial
Hi there
Hey take a look!
Background colour tips
190+frih$ up for grabs
What does A FRIH host website look like?
What do you prefer? Myspace or Facebook?
The IDEAL Website... of the future
is this is cool???
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.