Help, please! Critique Clarity's new look

hilary · May 1, 2007

Hi all,

onlineClarity's getting an overhaul, and a new design. No more left hand menu, no more hopelessly ambiguous navigation.

At this stage I could really use your wisdom and aesthetic sense to comment on the proposed new design. Here it is. Please have a look.

I know the links don't go anywhere, the text is lore ipsum, etc. This is purely for the look and feel of the thing: the colours, the logo, the layout. What do you think of it so far? How could we improve?

Comments, please!

Sparhawk · May 1, 2007

Hey! So far, so good.

Stupid question: what will be the location of the forum? Under Talk or Member's Area?

L

hilary · May 1, 2007

'Talk' will be a direct link. Members' area will have the downloads and stuff, like it does now, and a link over here.

Sparhawk · May 1, 2007

Nice. I like "Talk" for the forum link.

L

heylise · May 1, 2007

I like the way it looks. Open. Nice for the eyes. Inviting.

What I like a lot is "no left hand menu". Very often I have Clarity open and at the same time I have another window too, so I cannot use the entire width of my screen. Then I have to adjust every time so I can read the posts. Part disappears at right. Like this not anymore.

LiSe

Trojina · May 1, 2007

Looks good to me, as long as i can find all the archives and the hexagram index
I can't complain (the hexagram index is something I find incredibly useful).

I can't see what the squiggle behind the title Clarity is though ? I expect i ought to recognise it by now

Actually thats the only thing I'm unsure about, not sure i like that since it makes the word Clarity less clear - no pun intended.

Also no reference to hexagram 30 anymore as the reason for the name 'Clarity' ?

bruce_g · May 1, 2007

It's softer, more gentle, pretty and feminine, and less crisp and "businessy". I think the blending lemon yellow makes it over the top in these regards. I like the 3-D-ish or buttonized blue tabs. Perhaps if the lemon yellow (which I personally do not care for) was also in this type of 3-D blue, it might give a little more authority to the look, without making it appear too strict or linear.

hilary · May 1, 2007

It's Yi - as in the current logo. I'm not sure this new one is an improvement, but the old version can't just be stuck onto the new design - it looks like a postage stamp. Any artistic types here with suggestions?

I'll ensure you (and I) can find the hexagram index.

hilary · May 1, 2007

You know, I thought it looked more business-y rather than less. Just goes to show I've been looking at it too long.

Tab-wise: I need one colour to highlight the directory we're in - which in the example is 'learn' - and one for all the other tabs, to show that they're 'greyed out'. Some kind of yellow to highlight and some kind of blue for the rest seems good... or doesn't it?

bruce_g · May 1, 2007

Yes, everything "rests well"

. Maybe that is what I was trying to say. It's nice to look at. I just don't think it is very compelling.

bruce_g · May 1, 2007

I may have unusual taste, and I know diddley about how to make a website, but to hit home in me it would need some red or burgundy, something passionate. But maybe that's just me, so don't put too much stock in it.

hilary · May 1, 2007

I can always do the traditional thing, and use

"Enormous Bright Red Headlines In Meaningless Quotation Marks!"

Just kidding. Not sure red would 'go', but it could do with some more colour here and there, I agree. I could fiddle about with little bits of orange or something.

More comments? More criticism? That'd be even better. This is more or less the last moment to make major changes, so don't hide your brightness if you have ideas for improvement.

ewald · May 1, 2007

First impression: looks good, friendly, modest.
Second impression: the color gradations at the top sort of lock my gaze on them. I'm not happy with that, it makes it harder to scan the page. It looks a bit harsh, the contrast of the light yellow to the dark blue is too big. It's a bit like bad weather is above you (or going to be). Also, the gradations aren't really smooth, I can distinctly see a dark blue area at the top, two lighter bands of lighter blues below that, and a bright light yellow one below that. (The latter one is probably not really there, but the result of the contrast between yellow and blue.)
Third impression: especially the font looks a bit too modest, I like the font on your current site more. May have to do with the larger size on the new one.

It seems that the wider your browser is, the wider the text becomes. And the harder to read. I would impose some limit on the width of the text, especially as big LCD monitors are quite common nowadays. (There's a good reason newspapers use columns for text! Text is tiring if wide!)

I noticed that the page is in XHTML 1 Transitional. While XHTML has been announced as the "next version of HTML," that everyone should move to, it hasn't worked out that way, and I would suggest you not to use XHTML, but stick with HTML 4.

Why?

Because with the "Content-Type: text/html" header it has, it will be treated by all browsers as HTML 4 anyway.
Because the dominant browsers MS Internet Explorer 6, as well as the latest, 7, are NOT CAPABLE of reading XHTML as XML ! This is the reason for point 1.
XHTML is quite restrictive (well, if pages are really XML). Documents MUST validate, for instance, so the little coding errors you got away with until now, are theoretically a problem.
Anything you can do with XHTML, you can do with HTML 4 Strict.
See further this great thread on WebmasterWorld "Why most of us should NOT use XHTML".

In short: XHTML is not worth the effort. Change it while you can.

kevin · May 1, 2007

Hi Hillary

I like it a lot… Simple easy to use and attractive.

I am totally not artistic and bring no special skills to the discussion… But I hope my preferences might serve!

Echoing 'BG' - Would a more translucent buff colour be better than the Yellow? I also prefer a more translucent blue band at the top - Same colour as it is now but fading more.

I would make the logo clearer with the Yi symbol coming through more - I like the lack of borders - it feels freer. It is a lovely logo - but right now the Yi symbol gets lost in the top blue band.

The tabs look great and are an eye catcher - I would put the major areas you are promoting up there (eg products).

The top right menu works well too - perfect.

The second and third tier menus could do with a little clarifying? How would having them on one line dropped down a little look? Two lines up tight under the tabs is a little messy perhaps.

The font size is great for me - I use a high definition screen (1680 X 1050) and font size can be a problem at that setting. I have always like the font you use and the spacing - It works well for reading.

Bottom menu is good... And very sensible to put Help down there too

Finally - Some books have top designers doing their covers... Browsing a bookstore and looking at the colours used on the covers is a cheap way of picking up colour schemes which work well.

All the very best with this

“Kevin”

Trojina · May 1, 2007

Final thoughts on looking again i think that the Clarity name is way too small, and yes the squiggle distracts hiding behind it. Um also like i said earlier seems a shame the link with hex 30 is missing as thats why its called Clarity, yes ?

Don't like sites that use light colours for text cos I can't see them.

I guess the whole thing does not seem far, colour scheme wise, to what is was before hence no objections, people like what they know - heh heh but throw in a few red/black dragons there'd probably be an outcry.

RindaR · May 1, 2007

It looks easier to get around the whole site. I sometimes forget how much is here because I spend most of my time here reading posts.

I agree, the logo looks less clear, I thought that before I read trojan's note, and then looked in the corner here and see it's very similar. more outlining though in the new one, and a different use of the dark and light values, ...the halo effect doesn't really help a lot, though I think that's there to try to help one separate the two images..

I wonder if the "y" at the end of Clarity could be blended into the symbol behind the word - the way it's curved suggests either the belly of the sun-symbol or the back of it....

pro: it would disengage the confuzzled overlap;
con: it could be confusing in a different way to have the y and the symbol's outline/profile changed by the blending together...

With permission, I could play with ideas (including just re-working the new one a bit) and send them to you privately for review, if you think that might be helpful.

Rinda

bruce_g · May 1, 2007

hilary said:
I can always do the traditional thing, and use

"Enormous Bright Red Headlines In Meaningless Quotation Marks!"

Just kidding. Not sure red would 'go', but it could do with some more colour here and there, I agree. I could fiddle about with little bits of orange or something.

More comments? More criticism? That'd be even better. This is more or less the last moment to make major changes, so don't hide your brightness if you have ideas for improvement.

No, I just meant an accent or two to make it pop a little. Not saying this, but a defining line somewhere. For me, the design floats too much. Needs a bold or definitive graphic statement of some kind. This is probably too strong. Maybe something more subtle, but still with either something grounding it or defining it.

View attachment 255

RindaR · May 1, 2007

nice!

bruce_g · May 1, 2007

Also something to warm it up.

And, Chinese art often includes red of some kind. I think the association couldn't hurt the positioning.

Anyway, that'll cost ya 2 cents, which is what it's worth.

bruce_g · May 1, 2007

In over 6 years, she's never listened to a word I've said anyway.

lindsay · May 1, 2007

Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt? Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? O tempora, o mores! Senatus haec intellegit. Consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos [omnes iam diu] machinaris.

Yes, I like the Latin. Perhaps a Latin translation and commentary would be helpful. So far English hasn't helped much.

The look of the design seems fine to me with one exception. Your logo - Clarity! - is seriously unclear. Trojan is right to observe the background character lacks definition and looks a little like a squiggle. The name "Clarity" itself (poor thing!) almost lurks on the border, reluctant to show itself. Way, way too much Hex 15 here. Let's have a little more 30, please! They don't call it "branding" for nothin'.

Lindsay

hilary · May 1, 2007

No fair, Lindsay. I no longer have a handy parent to ask for a translation. (Hasn't some helpful Jesuit already done a Latin Yi?)

Bruce, I'm afraid that if I suddenly started taking notice of you, the shock could endanger your health.

Trojan, Lindsay, whoever else mentioned it, I'm not happy with the logo either, and nor is Dawud. We just can't seem to think of how to make it better.

Rinda - yes, please!!

Ewald - I'll ask Dawud (the Designer) about xhtml. Does it make a difference that it's going to have a php extension? And I'll keep bugging him about making the gradient smoother. D'you think it starts out too dark?

Everyone... I'm only just back from orchestra and must go feed the husband. Thank you ever so much - this is terrific, exactly what I needed. I'll read and respond in more detail later.

martin · May 1, 2007

Feeding the husband? Don't forget to nourish the cow too, Clarity, hex 30, right?
Ah, you don't have a cow?

Joking apart, I like the new look. Only that blue on top (same as here?) is a bit dark perhaps. Gloomy, kind of.
Is it possible to make it a bit more Cote d'Azur or does it become too bright then?

imbue · May 2, 2007

Hilary, all is well with tabs and the lay out has not changed enough to create any problems in finding what one is looking for. Font is good for me but I have poor eyesight so it is actually an improvement I believe. Thumbs up on this track. /Imbue

ewald · May 2, 2007

hilary said:
Ewald - I'll ask Dawud (the Designer) about xhtml. Does it make a difference that it's going to have a php extension? And I'll keep bugging him about making the gradient smoother. D'you think it starts out too dark?

The php extension doesn't make a difference. Whether it's HTML or XHTML is defined by the lines at the top of the code, the DTD.

Yes, I think the gradient starts out too dark, which makes it gloomy and sets it too much appart from the rest.

pargenton · May 2, 2007

uh..

Hello to everybody here and Hilary,
maybe I'm the "black sheep" or maybe I do not like going back to work after holidays, but I was not so impressed with the new design, I mean, what was wrong with the old one ?

And so here I place two remarks and suggestions, of course it is only my personal taste.

- the logo is a bit weird in the new site, I can't see it clearly now.

- I personally would put something which recalls the Chinese origin of Yi, why not put a Ding somewhere or some chinese bronze art?
for me now it seems too much a business oriented site.

Bashir

hilary · May 2, 2007

What's wrong with the old one?

I knew someone would ask that

No control over text block width, so the lines are too long. (The new design does have a maximum width.)
Left-hand menus are going (/have gone) out of style, which means a) new visitors are less likely to see options there b) the site doesn't look very 'maintained'.
Only space for four main site sections at the top. Two of those are ambiguous, and a whole lot's missing.
Nowhere to put a third tier of navigation when needed
Old-fashioned coding behind the scenes: might be partly responsible for Clarity being increasingly out of favour with Google. Also, not screen-reader friendly, which it should be.

I think we're agreed the logo is not a success, and the gradient is kind of ominous. This last is my fault - Dawud had created something lighter, and I asked him to change it. I'll recover his previous version and put it online for comparison in a moment.

The character yi is in the logo, and that's about as 'Chinese' as I want to go. It'd be an advance if it could actually be seen there, though, wouldn't it? Back to the drawing board with that.

Imbue - if you hit 'control' and '+' on your keyboard, the font size is increased. This works best if you're using Firefox - IE magnifies the whole page, Firefox magnifies just the text.

hilary · May 2, 2007

Here's the earlier design, with the lighter gradient. I didn't like the 'Clarity' over the top of the tabs, and asked for a slightly deeper gradient so the dark area would extend past the top right-hand menu. But on reflection I like this earlier version better. Still got to think up a solution for that logo, though.

gahan · May 2, 2007

Hi Hilary,

You asked my opinion, I sincerely hope you don't drown in all these suggestions from me and others.

I like the tabbed style on top. I like the yellow and blue (stands out from all the white sites around us (google's sites, etc). The logo could be larger and be more visually prominent. The submenu under the tabs (I'm a sucker for symmetry), to the right it is not aligned with the last tab, the last entry comes after the last tab and on the next line. Maybe it can be centered under the tabs. Because there are many entries.

About the fonts, I like it when in a site (or for any other readable medium), that there's a choice for only one font. What I see is that the headings are a different font than the body text. The headings are more like a times roman, the body more like an arial. My advise would be to keep it to one or the other (times roman lookalike's are less modern than the arial lookalike's.

What I'm curious about is how buttons (if any going to be used) are going to look like. Are they going to be in the same style as the tabs?

Cheers,

Gahan

hilary · May 2, 2007

Thank you, Gahan. I'll try not to drown... - also I'll try not to drown Dawud. Actually the advice and opinions coming in here aren't as diverse as I feared they might be.

Colours OK, except the gradient's gloomy (any thoughts on the two versions?), someone or other would like some burgundy in it (I'll ignore that, though), the yellow of the tabs is excessive (I want to shade it towards red and away from green), and things need warming up a bit. (A colour shift for the highlighted tab should do the job.)

Logo = dog's dinner, and a small scrawny dog at that. Do something...

Second tier menu - that's the 'introduction, how to consult' lines: darker text for better contrast; shunt the text leftwards so it starts directly underneath 'learn'. It will still sometimes extend beyond the right-hand tab, and sometimes go to two lines. It just depends how many links there are in that particular section.

At the moment you're seeing two fonts and several sizes because this is just a sample page, with all the heading types packed in close together. Normally you'd just see one header and the text at first, and the fonts would look much the same as they do currently. (Here, for instance.)

Buttons... interesting question! We haven't got to those, yet. Of course there will be a few wherever there are forms - the forum, contact forms, order forms. Could be nice to have them look related to the tabs.

I'll watch this space for another day or so, and then sum up all the comments and suggestions and pass them on.

Help, please! Critique Clarity's new look

Administrator

One of those men your mother warned you about...

Administrator

One of those men your mother warned you about...

Supporter

Supporter

bruce_g

Guest

Administrator

Administrator

bruce_g

Guest

bruce_g

Guest

Administrator

visitor

Supporter

Supporter

visitor

bruce_g

Guest

visitor

bruce_g

Guest

bruce_g

Guest

visitor

Administrator

(deceased)

visitor

visitor

Guest

Administrator

Administrator

visitor

Administrator