UPDATED VERSION
---------------------------------- Preamble:
Michael has been gracious in lending to me space on his server. For that I am thankful.
That being said, it will soon be time for this little bird to get wings of his own and learn to fly. Consider this a practice run.
This isn't really a site. It is the next step toward me getting my own site. I'm starting to play with some ideas about layout and color and I was hoping to run this all by you before I went any further. I hope you don't mind.
Any thoughts, advice, critique, etc about layout, color, and the code behind the scenes are absolutely desired and appreciated.
Layout:
Is it clean and attractive?
Does it lead your eye to the relevant parts of the page?
Does it make you want to stick around and read or run like hell?
Color:
I've never been much of a color man before. This is my first exploration into really thinking about color and making something coherent and purposeful.
CSS/coding:
I've looked at this thing in IE 5.5 and NN 6.0, both on Windows machines. So far it works as expected. The results from any other devices, browsers or operating systems would be much appreciated. This is a fairly complicated CSS layout (at least it was for me!) but I think I pulled it off. Please tell me what you think and where it can be improved.
Ok, I don't have enough time for a full review but I'll throw in some long-winded comments and come back later.
Layout:
Solid! I like. However, if does leave something to be desired and it's a little overwhelming. I like that it's liquid but because you have text running from one edge of the browser screen to the other, it looks like your trying to say too much all at once. Although, this could be cleared up with some CSS magic.
First of all, the paragraphs of text look downright frighting. Too packed in, too numerous, too much work on my behalf (the user) to even bother to start reading it all. If you increase the line-height and margins but quite a lot, the whole site should begin to look more inviting to the casual passer by. Secondly, the fonts used look quite varied at the moment. I realise your only using 2 / 3 fonts max but you should try and apply a simple system to it all. Keep all headings as the serif font, all other text as sans-serif. The quote in the middle column look really out of place, as does the menu links. I realise the menu could be seen as a heading but you've put headings on the menu itself so to help reinforce that harmony in the type, try making the menu links sans-serif, and try to unify the type sizes as much a possible.
Colour: - Us aussies like our color with a U
Again, very solid, but some things seem a little off. Although, colour is a very personal thing so I'll try not to comment on the colours you've chosen on a personal level. So, personal afflictions aside, I'm glad you don't have any cool colours at all; not all colour schemes need cool colours but you also don't have any really bold colours and you don't have any crisp colours, which can cause problems. I use the term crisp to refer to any colour that is below/above a certain level of both brightness and saturation.
If you take a screen capture of your page and load that into Photoshop then desaturate it completely, you'll see that there's very little tonal contrast in there. Furthermore, their all pastels and you don't have much contrast between the saturation of each colour. Lastly, you have hardly any contrast between colour hues. All of this combined creates a rather muddied feel. The eye isn't drawn to any particular point as no colour stands out above any other in any overly contrasting way except the background, in which every colour contrasts against equally, give or take a little.
And that's about all I have time for; I?ll test it in other browser later if someone else doesn?t beat me to it
Without first reading Drac's comments (so there may be some overlap), here are mine:
Layout: Is it clean and attractive?
I've honestly got to say no to this one. First off, I would not consider this a "clean" layout--it is simply too cluttered. You've got text running way too close to the edges of your boxes, and your boxes have too little space between them. The layout has no room to breathe, and it leaves me with a stuffy, claustrophobic feeling. You need white space on the page so that the various elements can be put into their proper perspective.
Does it lead your eye to the relevant parts of the page?
As I alluded to above, it is very difficult to distinguish the elements from each other because of the lack of white space. My first impression upon seeing the page was one of being overwhelmed by the flood of text. It took me a few seconds to get a grip on the layout and figure out where I needed to start processing information. (I did not figure out what the 'featuredNav' div was supposed to be until I looked at the code--this may be because there was no content, though.)
Does it make you want to stick around and read or run like hell?
Unfortunately, I'm going to have to lean toward the latter. My heart rate actually increased when the page first loaded, due to the sensory overload I mentioned above. I most likely would have stuck around long enough to see what the content was like, and if it was your usual stuff I would have probably suffered with the design to read through it. But it would not have been a pleasant experience.
Color:
I've never been much of a color man before. This is my first exploration into really thinking about color and making something coherent and purposeful.
OK, I don't particularly like this color scheme, and I think it's the gray that's throwing me off. The yellow, peach and maroon (I'm generalizing here) don't seem to clash, but the gray seems to stick out. I'm very intuitive when it comes to color (ie, I can't really explain why it is that something works or does not work for me), so I'm not sure how much help I'm going to be here.
As for readability, everything is fine except for the peach--white is a bit difficult to read on it. Black would be easier on the eyes, but I'm not sure how it would fit with the design.
It has also just occured to me that the black background bothers me a bit, too. Perhaps it is having the soft colors on such a solid black that it throwing things off for me.
CSS/coding:
I've looked at this thing in IE 5.5 and NN 6.0, both on Windows machines. So far it works as expected. The results from any other devices, browsers or operating systems would be much appreciated. This is a fairly complicated CSS layout (at least it was for me!) but I think I pulled it off. Please tell me what you think and where it can be improved.
Well, I'm using IE6/Win, and everything seems to be working fine. The code itself (both HTML and CSS) looks pretty clean, so no complaints there.
There is one other area I would like to mention, though...
Typography
You seem to have set up a convention where title text is set in a serif font and body text is set in a sans serif font, but it ends up looking a bit arbitrary. I think this is because all of the text in the left-hand div is set in serif. Also, the line-spacing in the 'featuredNav' div really seems to throw everything off, especially since the div has absolutely no vertical padding (and very little horizontal padding). Your paragraphs are huge, monstrous blocks of text that are not in any way pleasant to look at.
Recommendations:
First off, whitespace. I'm looking at your old site, and I see that your paragraphs there are also huge, monstrous blocks of text. But they are far more readable because they have space around them. You definitely need more whitespace here, and in creating whitespace you will be forced to focus on certain elements of the site, which can only be a good thing.
Secondly, you might want to mess around with the color a bit. As it is now, things are a tad jarring. Definitely check for readability, especially with the peach.
I think the primary problem, though, is that the site is just too cluttered. Work on that first.
Sorry to give such a negative review. Hopefully it will help.
[Edit: And after reading Drac's comments: very good points on paragraph line height and color.]
- I think you're overusing large amounts of letter spacing. Use it in key places such as headers, but avoid using it for simpler things, like the sidebar links and the "est neque nonor et imper ned libidig met eit sakem eit vory gast te." For example.
- Keep an eye on your padding. I think the bottom of the horizontal yellow box could use a little more padding to separate the text from the bottom border more. Also, you need padding at the bottom of the page to separate the content box from the bottom of the viewing screen when one scrolls down all the way.
- Consider adding whitespace to the left of the left sidebar for consitency.
- When the words "Something Else" in the right sidebar wrap, I think you need more space between the wrapped lines. (Increase the line-height.)
But I agree with all of Slime's points--especially concerning padding in the upper yellow box.
Also, something you might want to try out: rather than skipping a line between each paragraph (which is standard behavior, I know), try indenting every paragraph after the first and eliminating the extra line in between. This is what I do on my site, and I like the way it looks. You may not like it, of course, and that's completely up to you, but you may want to at least give it a try to see how you like it.
And changed again. Added more padding to the bottom of the featuredNav box, added a bottom border to the sidebar, added some left margin to the navigation, got rid of the letter-spacing in the navigation, added some padding to the bottom of the page, played with the paragraphs a bit, increased line-height in the sidebar headings...I think that's all.
I tried playing with the idea of running the paragraphs together with an indention and did not like it much. Like most people, I guess, once upon a time that is how I wrote things -- school papers, work reports, e-mails, letters, etc. Paragraphs all running together, indented first line, left aligned.
Somewhere along the way I became enamored with the look of justified paragraphs with significant space between them. Now that is the way I write most things.
One thing I do want to try is playing with the look of the first letter of paragraphs. I know I can use p:first-letter. The problem is finding a style I like that will look nice and fit with the 'theme' of the page. Maybe no such style exists. Maybe it's a dumb idea. I don't know yet, but I'm searching.
I had this idea about that bg image in the header. I think I'm going to put my camera on a tripod and take a full 360 deg series of shots of a place (in b/w), stitch all the shots together in photoshop and then use that panaoramic as the bg. It could seamlessly repeat every 850 or so pixels.
Maybe I could take many of these types of photos and then randomly select one each time...I think I like that idea.
I'm really glad I've started this exercise...I've learned a lot and have certainly improved the quality of the design with all your help.
Please, please, please keep it coming.
The little changes do make it look better. I think it's coming along very nicely.
When you talk about doing something with the first letter of the paragraphs, are you talking about drop caps? I've never come up with anything CSS-wise that I've been satisfied with in that department, but maybe you'll have better luck. I'd be interested in seeing what you come up with.
I also like the idea of the panoramic photos. I think that would look nice.
I am talking about drop caps. The more I play, the less I am convinced I'm going to find something satisfactory. I'm gonna keep trying a bit longer, but I don't really see this going anywhere.
Drac, (for the sake of friendliness with Aussies, I've added a 'u' to all mentions of the word 'color')
In your first post way ^^ there, you said something about loading a screen shot into PS and desaturating. You said that there was little tonal contrast, little contrast of saturation and little contrast between hues.
I've gathered from the tone that this is a bad thing =) but I don't know why it is bad and I don't know what is good. Help? Where (online, book, whatever) can I learn about colour theory, 'rules' of colour design, etc? Last art class I had was in grammer school. I took some video and film aesthetics classes at the university, but that was mostly about lighting. Can you offer me some direction?
Also, I don't understand what you mean by 'crisp' colours. I understand (I think!) warm colors -- red, orange, yellow -- and cool colours -- blue, purple, green most of the time -- but I don't know 'crisp'. Please explain.
http://www.webwhirlers.com/colors/ has some good colour theory stuff. Doing that desaturation thing lets you see which areas of the page stand out, jump out at you, if you like. This is good if you want people to easily find where to navigate on your site, and where the title of the page is etc. It's quite a difficult thing to describe, but I'd say it makes the page more balanced as well. This is also good for picking some nice combinations of colours: http://www.colormatch.dk/
As for crisp (although I am reluctant to speak for Drac), my take on this is that it is the opposite of "muddied." At least, that's how I think about colors--crisp colors have definition, and contrast nicely with the colors around them, while muddied colors have little definition or contrast (the original peach color is a perfect example of what I would call a muddied color). Hopefully that makes a little sense.
[Edit: Saturation also comes into play here--crisp colors tend to be more saturated than muddied colors.]
As for books, "Interaction of color" by Josef Albers is a classic, and I found it an interesting read. You might find it useful in understanding how colors interact, and thus how to use color effectively in design.
[This message has been edited by Suho1004 (edited 06-14-2003).]
Quite nice all in all. I didn't see the original version(s) so I can't really agree or disagree with many of the comments above.
I will say that although I do like the colors in general, they *do* definately need a bit of tonal contrast.
The reason they need this (in part) is because even though we can *see* that they are different colors, and we can identify them as different colors, part of our brain still reads them as medium grey...so even though we visually distinguish color, we unconcsiously associate similar tones as the same thing.
THere some good resources linked already, and I'll just add this - take it into PS, as Drac suggested, and desaturated it. Play with the shades of grey until you get something satisfactory. Then, use a hue/sat layer to get the color back, and see the difference.
One other thing I'd like to see is a footer of some sort. Even if it is just a line of text stating copyright or ownership, or whatever. Something horizontal to hold the bottom of the page together.
[This message has been edited by DL-44 (edited 06-14-2003).]
More playing with color. I brought a screenshot into Photoshop, desaturated, adjusted grey levels. Then I started playing with gradient maps and HSL adjustment levels. I found a color combo that I think is better. The yellow is now fairly pale, the background is lighter and the red stands out. More contrast.
I also boosted the contrast in my header bg image and added a thick, black bottom border. I repeated that thick black border on the new footer too.
It is inspired by my original colors, though definately different. It has more contrast, but it also doesn't have the 'hot' feel of the original version.
Better? I think so, but I want to hear other opinions too.
Thank you for the color links. They are the newest members of my Favorites folder.
I forgot to mention in my earlier post, I've tested now on Mozilla and Opera (both on Windows still) and it works like a champ. Coding seems to be successful. =)
Any word from the Mac camp?
How about handhelds, cellular phones or web-enabled toasters?
DL, the bottom of the page is now firmly held together by none other than a strongly worded copyright message -- dark grey text on a pale yellow background. Good idea. Thank you.
Well, you certainly have contrast there now. I must admit that I'm not sure about the red--in that context it seems to overpower. I might personally go for something slightly less saturated, or maybe lighter (or both).
And I can tell you that the page displays fine on my LG web-enabled toilet--although the colors dim a bit whenever I flush.
Work is calling and I haven't yet completely digested those 4 web sites. This may go on hold for a few days but I'll be back to settle this contrast thing once and for all.
Thank you all for your input so far.
Oh wow, big improvments all round there. Yes indeed, I'm liking this a lot. =)
As for the red?... I like it. It's really strong but I think the site needs something strong to give it a bit of impact. The only thing is, now it seem to be causing a conflict with a few other elements. Like suho said, it's a little too strong, but I think it'd be better to change something else rather then tone doen the red. The main site header for example, it kind of sinks into the background now that you've got that nice bold red in there.
Maybe making the very top title White text on black (or dark brown) would bring it forward again, and maybe putting a little colour into the strip of images running along under the header would also look nice...
If you desaturate that image, you'll see the flow form black through greys to white in the order that you'd probably want the viewers eye to flow through.
Anyways, It's going really well, keep playing untill your happy with it.
I actually think a combination of the 2 styles, beginning and this end, would be nice. I'm a big fan of the unusual and the more usual something gets, the sadder I become, but I'll get over it.
I do recall there being problems I had with the first but didn't have a moment to say so, now it's not around anymore to see. I can compare that feeling, I remember that, and the "aaaawwww" of the status quo defeted the slight misgivings the original had for me. In fact I was quite excited about the origianlity and difference of the first.
for what it's worth and your mileage may vary, in my humble opinion
So let me get this straight...
You were a fan of the 'stand-up-and-poke-you-in-the-eyes' red and yellow?
You liked the 'wall-to-wall' text?
Drac and Suho have been leading me astray!!
I'm so lost.
Y'all ought to feel lucky you got a style sheet at all. From now on I'm not wasting any bandwidth on these silly stylesheets. You want one, write your own.
Dude, the advice people give here is just that, advice. Take it or leave it's still your website, and you should only make changes to it because the advice people give you here makes sense. I surely hope you wouldn't make the background bright pink if I said it would look better like that.
Although, I do see where JK's comming from, the colours of the first site you posted had a certain feal to them, but they still seems a little wrong to me. What you have now is different, but still good IMHO. Like I said, keep playing untill *you're* happy with it.
Thing is, though, I don't trust my own eyes. When I made that first version (which DOES still exist) I was sure it was great. After I made some of the changes being offered to me, I liked some of those ideas better. Now I'm not sure how much of what is left is actually mine and how much is somebody else's. Also, I don't have any idea how much of the changes are because I don't know the 'rules/guidelines' and how much is because Suho likes one color better than another.
if (you == American){
print("Color sucks.");
}
else{
print("Colour sucks.");
}
Mainly, I'm not confident yet and it's frustrating me. I'm still reading and playing.
Damn, that pink is sooo ugly. It just needs more fluro green and black for contrast! *glares at JK* -> I know what your thinking, just don't. Velvet Elvis was bad enough.
Just keep playing till you get something you like. If you find yourself stuck and don't like anything, then maybe you could spend some time putting content into it and come back to the design later. Hell, with CSS you can easily tweak the "colours/layout after you upload everything anyways.
The other option is to use multiple styles with a style switcher, then you can make a million and one colour schemes and hope someone will find somehting they like. =)
posted 06-10-2003 22:57
