Good design sites?

[Els]

http://www.qantas.com.au/

<g>

 

[Amos E Wolfe]

Nope. I don't want pages of advice with no graphics. I want *lots* of
graphics and suggestions of what works and what doesn't. Graphically.
To look at.

*lots* of Graphics is what Doesn't Work! (not capitals!)

As a general rule, the graphics should make up 30% or less of the physical
area (X x Y co-ordinates) of any page - and less than 60% of the byte size
of the site. (1/3 and 2/3 approx in imperial)

CONTENT is KING! Visitors spend 10 times longer on average reading the text
than they do looking at the pictures (porn excluded).

A well-designed graphic will more than likely be a .gif, with large areas of
colour which allow good compression. A .gif which uses more than 32 colours
is a waste of space (as a general rule). If the file size in bytes is more
than the (width x the height in pixels divided by 100) the file is too
big. - As I say these are general rules, which are meant to broken, but not
very often, not more than once on a website, and certainly not on one page!

As another general rule, don't use more than three fonts on your ENTIRE
website - and always use serif fonts for body text, (you may use sans serif
for titles and short paragraphs). Always have a GOOD contrast between
foreground text and background colours, and if your text would not show up
well in a white background (less than 75% density - black being 100%) always
provide an alternative for printing. The exception to this is white text
where the browser offers the option to invert text for printing.

As another general rule, any documents that are primarily intended to be
printed will have a WYSIWYG option - usually in PDF because the reader and
printer application can be downloaded as FREEWARE and will run on even the
most basic of systems. - Try printing your document yourself using a b/w
printer and read it with one eye half open. If you can't read EVERY word
CLEARLY - don't even upload it to your server.

If you are using more than three separate colours on a page which are not
paler or darker variations of existing colours you are using too many. You
could use Dark blue, light blue, cyan, yellow, goldenrod, pale orange,
white, light grey and dark grey on a page which is OK. Green, blue, pink,
burnt ochre, black, white, magenta, orange, red, and violent violet is NOT
OK!

Animated .gifs should be limited to a maximum of ONE per page, if strictly
and absolutely necessary! Not every page needs them, in fact most DON'T! If
people want to send you an e-mail they will, if they don't - they won't -
the content of your site will decide this, not a "cute" animated .gif of a
mailbox "eating" a letter 300 times a minute with jagged edges. Anti-alias
each graphic specificaly to the background colour of your page. If the
graphic was not specifiaclly created for your page - don't use it at all -
clip-art is for church bazaars and christmas cards not professional
websites. If it's not a professional wesbite, go ahead, and host it on
Yahoo! complete with adverts, (why are you posting on alt.html if this is
the case?)

As you don't like Dont's here are some DO's

DO register your own domain name, without numbers or hyphens unless they are
NEEDED; www.myguitarshop69inmilton-keynes.net.uk is about as professional as
www.geocities.mycommunity/thisbithere/164828756/mypage.htm which is none at
all.

DO pay for your own hosting - it's not exensive - banner ads are for
cheapskates, and the webmasters of multi-level-marketing scams.

DO follow the rules in the body of the above message - I did not just make
them up, I learnt them from people who have been in this game far longer
than my 9 years in html. They did not make them up either.

Do use stylesheets - it saves typing font tags in every page of your site
each time you change the colour or text size, as well as many other
advantages.

DO learn the meanings of the following terms: anti-alias, kerning,
optimisation. Learn to use them, in fact don't consider NOT using them.

DO test your website using at least two browsers. Microsoft Internet
Explorer has the largest number of users. Also consider Mozilla Firefox,
Netscape, Opera and AOL.

DO use notepad to check the html code of all your pages, even if you use
another program to create the pages. Delete any code which you don't FULLY
understand. If it looks different, don't use that code.

Do check your spelling, at least twice, and have someone else check it too.
If you find mistakes in this message it is because I didn't follow that tip.

DO share your projects with others and share your experience and
constructive criticism with them.

DO have fun and make websites that other people will enjoy and find useful.

-=# Amos E Wolfe #=-

 

[Karl Groves]

CONTENT is KING! Visitors spend 10 times longer on average reading the text
than they do looking at the pictures (porn excluded).

There are websites out there that don't have porn on them?
I thought that's what the web was for!

-Karl

 

[Neal]

always use serif fonts for body text

Hmm? Cite reasons?

 

[Noozer]

always use serif fonts for body text

[/QUOTE]

Didn't your mother tell you never to run with a serif font?

 

[Toby A Inkster]

As another general rule, don't use more than three fonts on your ENTIRE
website - and always use serif fonts for body text, (you may use sans serif
for titles and short paragraphs).

This is a good principle on paper, but a lousy one online. Studies
generally show that for on-screen legibility a sans serif font is
preferred. Why do you think that most programs come preconfigured to use
sans serif fonts for their menus and dialogue boxes?

 

[Frogleg]

What *works* and what *doesn't work* depends a great deal on the
content of your site and what appeals to your prospective visitors.

Here are a few of my "do's":

<snip a bunch of words>

(and deliberately shouting)

I DON'T WANT ADVICE. I WANT PICTURES, or URLS of SITES WITH ATTRACTIVE
VISUAL PRESENTATION!!

I Googled further using terms like "good design" and got precisely
what posters here are offering -- "the essence of good design is
avoiding bad design." More words and words and words. The words I
want to see are something like

"use stripes -- here are images of sites that use stripes cleverly"

image A image B image C

"use blocks of color -- here are pictures of sites with attractive
color blocks"

picture A picture B picture C

"use photo collages -- here are links to sites with simple but
effective photo collages"

link A link B link C link D

Do you catch my drift? I checked the Webby awards. Most interesting
and lovely, mostly Flash, presentations, but waay beyond my
capabilities and resources. And not what I'm looking for. I want to
SEE examples of GOOD DESIGN. I don't need text to tell me not to use
blue lettering on black background. I want to SEE 'before' and 'after'
pics of a page for "My Dog Spike" done poorly and done well.

Thank you for your attention.

 

[Els]

(and deliberately shouting)

I DON'T WANT ADVICE. I WANT PICTURES, or URLS of SITES WITH
ATTRACTIVE VISUAL PRESENTATION!!

I Googled further using terms like "good design" and got
precisely what posters here are offering -- "the essence of
good design is avoiding bad design." More words and words
and words. The words I want to see are something like

"use stripes -- here are images of sites that use stripes
cleverly"

image A image B image C

"use blocks of color -- here are pictures of sites with
attractive color blocks"

picture A picture B picture C

"use photo collages -- here are links to sites with simple
but effective photo collages"

link A link B link C link D

Do you catch my drift?

I most certainly do. I would like to find exactly what you're
looking for too.

I checked the Webby awards. Most
interesting and lovely, mostly Flash, presentations, but
waay beyond my capabilities and resources. And not what I'm
looking for. I want to SEE examples of GOOD DESIGN. I don't
need text to tell me not to use blue lettering on black
background. I want to SEE 'before' and 'after' pics of a
page for "My Dog Spike" done poorly and done well.

Yup, that would be good.

Thank you for your attention.

You're welcome.


P.S. All I can do is keep an eye out for sites like that, and
I'll let you know if I find any.

 

[Andy Dingley]

Hmm? Cite reasons?

You'll have to find your own cites, but here's the hand-waving
explanation.

It's related to Fourier wave theory. At this point, the electronics
engineers will say "Aha!" and realise exactly why, and everyone else
will probably switch off.

Consider a simple letter "I", in both serif and sans-serif fonts. The
sans-serif version is a simple rectangular block, the serif version
has a "spike" at the ends (the serifs).

Now Fourier's work on waves tells us that a square wave can be
represented as the sum of an series of harmonics of a single-frequency
sine wave. It also tells us that a perfect square wave, with sharp
"corners", requires an _infinite_ series of such waves, increasing to
infinite frequencies. Obviously this is impossible / impractical, to
a real-world example is frequency limited and thus shows some
"ringing" (i.e. spikiness) to the waveform.

Now transforming from the time and frequency domains to the axial
length and spatial resolution domains, we can apply Fourier's same
principles to the shape of a letter's limb. For an eye to resolve that
squared-off sans-serif character requires infinite (or at least high)
resolution. Resolving the sans-serif character is easier, because the
serifs are analogous to the ringing of a frequency-limited wave (and
the spatial frequency of our eyes is limited).

In typesetting, this effect is quite noticeable in any multi-line
blocks of text, especially the smaller and denser. It simply takes
less resolution to resolve the seriffed characters, compared to the
sans-serif. Try it !

There's also a cognitive effect where people with adequate vision can
resolve either equally well - but the _effort_ of resolving the
sans-serif text is greater.

 

[Matthias Gutfeldt]

I DON'T WANT ADVICE. I WANT PICTURES, or URLS of SITES WITH ATTRACTIVE
VISUAL PRESENTATION!!

Please excuse our slip. The responsible Helpdesk clerk has been fired.
While we work diligently to fulfil your request, would you perhaps want
a complimentary coffee & donut?


Matthias

 

[Els]

Please excuse our slip. The responsible Helpdesk clerk has
been fired. While we work diligently to fulfil your
request, would you perhaps want a complimentary coffee &
donut?

I would. The donut that is, not the coffee.

 

[Matthias Gutfeldt]

Matthias Gutfeldt wrote:




I would. The donut that is, not the coffee.

We also serve a range of quality green and black tea.


Matthias

 

[Spartanicus]

Studies
generally show that for on-screen legibility a sans serif font is
preferred.

Personally I much prefer sans-serif over serif, and I used to claim the
above. But after having been challenged on that view I could find no
supporting evidence of better screen *legibility*, studies into
serif/sans-serif legibility pretty much averaged out at 50/50. Some of
the conducted studies I looked at did show a modest user *preference*
for sans-serif fonts for screen usage.

Why do you think that most programs come preconfigured to use
sans serif fonts for their menus and dialogue boxes?

But why is it that (all?) visual web browsers are preconfigured to use
serif fonts?

I suspect that this is because of the difference in x-height between
serif and sans-serif fonts (setting a UA's preferred font to sans-serif
results in encountering more micro font situations if no accompanying
counter measures are deployed).

 

[Els]

We also serve a range of quality green and black tea.

I'd prefer a herb tea though. Camomile or Rooibos will do, thank
you.
If you can't provide that, I'l have a strong Earl Grey with lots
of milk and sugar, please.

 

[Matthias Gutfeldt]

Matthias Gutfeldt wrote:




I'd prefer a herb tea though. Camomile or Rooibos will do, thank
you.
If you can't provide that, I'l have a strong Earl Grey with lots
of milk and sugar, please.

Dear former customer. When we offered "tea", we did mean "tea", not
foul-smelling coloured water.


Matthias

 

[Els]

Dear former customer. When we offered "tea", we did mean
"tea", not foul-smelling coloured water.

LOL!
Okay, forget about the herb water.
Or.. you weren't referring to the Earl Grey as water, were you?
(You might upset a lot of tea drinkers ;-) )

 

[Whitecrest]

As a general rule, the graphics should make up 30% or less of the physical
area (X x Y co-ordinates) of any page - and less than 60% of the byte size
of the site. (1/3 and 2/3 approx in imperial)

<snip the rest of the "general rules">

Who's rules? Yours?

 

[Whitecrest]

I want to
SEE examples of GOOD DESIGN.

Good design is in the eyes of the beholder.

Good design for cartoon network includes Javascript images flash and
very little text.

Good design for Google is no javascript dependance and lots of text.

 

[Karl Groves]

Neal <[email protected]> wrote in message

You'll have to find your own cites, but here's the hand-waving
explanation.

It's related to Fourier wave theory. At this point, the electronics
engineers will say "Aha!" and realise exactly why, and everyone else
will probably switch off.

You should get a job in fortune telling, because that is exactly when I
switched off!
Here's why:

A Comparison of Popular Online Fonts: Which Size and Type is Best?
http://psychology.wichita.edu/surl/usabilitynews/41/onlinetext.htm

A Comparison of Popular Online Fonts: Which is Best and When?
http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm

Which Fonts Do Children Prefer to Read Online?
http://psychology.wichita.edu/surl/usabilitynews/3W/fontJR.htm

Determining the Best Online Font for Older Adults
http://psychology.wichita.edu/surl/usabilitynews/3W/fontSR.htm

So, What Size and Type of Font Should I Use on My Website?
http://psychology.wichita.edu/surl/usabilitynews/2S/font.htm

Screen Fonts
http://www.humanfactors.com/downloads/feb992.htm

More About Fonts:
http://www.humanfactors.com/downloads/feb022.htm


-Karl

 

[Frogleg]

I would like to find exactly what you're
looking for too.

Actually, I was going to mention locusmeus.com as an example of what I
was looking for.