• 0

Critique time!


Question

http://www.richardmccord.com

So I finally have the code working, just need to work on the asthetics a bit, now.

I'm a wolf fanatic, so I'm seriously in lust with my background. It doesn't seem

to be going over very well with folks that visit the site, however. Arg.

What I'm looking for is some serious critique on how to improve the look of the

site while keeping the same design structure. (If possible) The frame sucks...

this is a fact. I'm having a lot of difficulty finding something that works with my

(awesome!) wolf background, though.

The purpose of the site is, in the end, personal use to post my writing. So I need

to be able to display my stories legibly. Maybe just use a white background with

black lettering? Anyhow, ignore the My Game section... it hasn't been converted yet.

Link to comment
Share on other sites

Recommended Posts

  • 0

1. I think I'm keeping this one. No matter what background I use, SOMEONE claims it's distracting.

Hell with it. I like this one, and it's a nice, neutral color/pattern. The fact that it's a bit "off", I think,

helps focus the visitor on the content in the center. So yea, I'll be sticking with it unless someone

can show me a better option.

2. I changed the font alignment back to Left... it seemed to make the page look better when it was

Justified due to the straight lines. Is it that much easier to read now that it's set to left?

3. I dropped with Width down to 980. It certainly doesn't leave a lot of room for the menu, but we'll

see if I need more later on.

4. Navigation is down at the moment. I only had a link to the Stories section to test its drop-down

menu.

5. I like the metal-border hover for the menu. Not sure what to do with the Blue, though. Like I

said, my color coordination sucks. I let my wife dress me in the morning.

Link to comment
Share on other sites

  • 0

One thing that is hurting your legibility is line length. Reading speed an comprehension drop

off as line length increases past a certain point. On the web a rough rule of thumb is that each

line should be around 32em ? 10%. The goal is for roughly 12 words per line no matter what

the typeface you're using.

The lines on your site are substantially longer so you might want to consider the following:

  • Keep your colums the same width but increase the size of type you're using.
  • Keep the text and column size but increase the size of margins around your text
  • reduce the size of your columns.

From a "what is correct" point: indents or gaps between paragraphs: pick one, using less than

one full line between paragraphs is typically very distracting so you'll want to drop that to 0

or increase it to be at least equal to your line height for body copy and then drop the indents at

the start of each paragraph. Consider reading the following:

20100413-m1tr3nfsnjxq3ramfd6rwd4cyc.jpg

It's just a gross hack (edited values of padding/width/margins in the browser's inspector) but

I think it gives you an idea of what sort of white-space and line sizes to shoot for.

When preparing text layout: use lorem ipsum. It'll help you spot awkward layouts, rivers,

etc. If your text editor/design tools don't have a built-in lorem-ipsum generator then use

the website to crank some out for you.

With respect to your most recent post:

  • I think I'm keeping this one. No matter what background I use, SOMEONE
    claims it's distracting. Hell with it. I like this one, and it's a nice, neutral color/pattern.
    I didn't see any of your earlier attempts but the one you have now looks fine.
  • Is it that much easier to read now that it's set to left?
    Not only does ragged-right text avoid ugly gaps in your body copy, it has also been shown to
    increase reading speed (or rather, justified text is read more slowly). The uneven spacing
    between letters and words breaks up eye movement.
  • I dropped with Width down to 980. It certainly doesn't leave a lot of room for the menu,
    but we'll see if I need more later on.
    Placing navigation under your name is an acceptable alternative. You can also make some room
    by dropping the "home" link. It's universally accepted that clicking on a logo/header takes you
    to the front page of a site.

Link to comment
Share on other sites

  • 0

Background should be one colour or a subtle gradient, an actual texture looks terrible and very 1995'ish. Have the main box take up a bit less space and try to match the colours, like black / brown / orange and other colours that nicely go together.

Also try an incorporate some subtle effects like shadows, emboss ( VERY subtle ).

Link to comment
Share on other sites

  • 0

I liked the blue on the menu buttons you had previously.

this site can help you colour co-ordinate:

http://www.colourlovers.com/palettes/most-loved/all-time/grid

it can suggest themes of colours or suggest colours that match and provide contrast to any colour you like/pick.

I think the idea with the latin stuff is that it contains lots of words at different length ( like a regular 'real' post would) unlike an english phrase that is repeated over and over that would just look like a literal square block of text, instead of the natural looking posts with lines of different lengths. it'll give you a slight idea of how the layout reacts to different line sizes, although you can mostly tell with english text anyways..

Link to comment
Share on other sites

  • 0

I have to ask... why is Latin any better than English for checking webpages?

Lorem ipsum isn't really latin (in the same way that randomly pulling chunks of sentences from War & Peace isn't english).

The main advantage is that lorem ipsum has letter frequency and word lengths similar to english but isn't actually "readable" so you'll never be distracted by the content. The secondary advantages come into play in your case (it's not like you have clients reading over your shoulder asking you to update content). For example, Varying word lengths allow you to spot flaws with different margins, word/letter spacing, and justifications that aren't obvious with "cut & paste one sentence over and over again.

Consider this block:


  • This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.
    This is a test of the emergency broadcast system. This is only a test.

Note the artificial clean right edge. The river between sentences forming a vertical line.

The text itself is a poor representation of the type-face (difficult to spot interactions between letters like fl, ti, ae, and the other common ligatures)

doesn't show interaction of ascenders and decenders. (a line contains the phrase "happily ending?" immediately above the fragment "So Ed Jones thanked?" where the capital letters of line 2 can interfere with line 1)

Changes in type face sizes will show akward breaks leading to a saw-tooth right edge rather than a more typical ragged right side (the visual interaction may cause you to perceive shapes that aren't really there).

You'll never really have to deal with varied paragraph lengths, punctuation, or hyphenation, widows, etc.

Consider the alternative:


  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac gravida
    quam. Sed dignissim laoreet accumsan. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Curabitur fringilla, velit vel facilisis sagittis,
    risus dolor aliquam diam, a condimentum nisi tellus non tortor. Duis
    pretium nunc ut diam commodo fermentum. Aliquam massa sapien,
    egestas vel pharetra eu, volutpat et enim. Fusce vestibulum viverra
    augue, et suscipit tellus tempus in. Aliquam quis metus nunc. Nullam
    ac arcu mauris. Duis sit amet elit sed sapien ultricies tristique. Aliquam
    ut leo mauris, vehicula ultrices quam. Donec molestie mattis leo
    eget iaculis.
    Vivamus rutrum pellentesque metus. Nunc ac nulla enim, vitae blandit
    nibh. Nulla facilisi. Suspendisse quam ante, feugiat id dapibus sit amet,
    commodo at velit. Suspendisse libero libero, rhoncus id dapibus eget,
    blandit eu arcu. Mauris ullamcorper sollicitudin justo, vitae adipiscing
    mauris bibendum nec. Sed pretium tellus vel erat suscipit vehicula
    pharetra sapien varius. Morbi turpis felis, interdum at feugiat dignissim,
    tincidunt quis enim.

in the last paragraph you see ascender-descender interaction, a couple of common ligatures,

a fairly ragged right edge, and a reasonably good distribution of letters: both upper and lower

case.

If legibility is at all important then it makes sense to carefully consider your type face

choices, even on the web.

Link to comment
Share on other sites

  • 0

Ok, so trying these changes:

1. Changed the text to Latin. (Meh)

2. Changed the button background color to match the Content area.

3. Changed the main background to a gray-color. (Meh) I guess I just hate that empty feeling.

4. My Font is currently set as Verdana, sans-serif. The line height is equal to one line of text. Thus,

Font= 12, line-height=24.

And Sethos:

What exactly did you mean by:

Also try an incorporate some subtle effects like shadows, emboss ( VERY subtle ).

Link to comment
Share on other sites

  • 0

It is easy to read (and take this from a guy who has very bad eye sight in one eye and is blind in the other) So that is a great start.

I'd say, tone down the graphic images a bit. Reduce the opacity as they tend to drag the eye away from the words.

Link to comment
Share on other sites

  • 0

Kewl, readability is first and foremost.

What do you mean by the graphics... the header is turned down to 60% at the moment.

Does the main background need some opacity as well?

Jordan-

I had some folks tell me the old colors didn't offer enough contrast to make reading

easy. Some of them have the same eye issues that Mike has so I'm trying to take

that into account. Don't get me wrong, it's not that I don't appreciate the feedback,

but that I've found you can't please everyone and so I'm just aiming for more of a

general accessability.

Link to comment
Share on other sites

  • 0

Do I need a graphic in my header? And if so, what would be in-character

for a writer's website? As I'm not a graphics guy, I'm just not 'seeing' what

would fit the site.

Link to comment
Share on other sites

  • 0

No comments on the new color scheme?

I am jumping in late, so sorry if I am just saying things others have already said, but here are my suggestions...

Actually give me like 5 minutes, just easier if I photoshop them and say them...

Link to comment
Share on other sites

  • 0

post-34384-12726647747309.jpg

Okay I know I am late to the party, and hate to be a pain in the ass, but here are my suggestions...

  1. Make the header font (with your name) much smaller. You can maybe even right justify it like the image I provided to provide some balance. Just so big it looked overwhelming.
  2. Lighten up and or change the color for the content area. Since you are a writer, the content is MOST IMPORTANT. I just think the blue there now does not work. I provided a color I think does.
  3. Get rid of the texture in the header. A simple gradient like I have shown, or even a flat color, would look a bit more up to date than the texture, the texture is and older web look for sure.
  4. Make the header area smaller vertically. No need for it to be so large since it is only your name. Why use up the space if it is not needed you know?
  5. I also brightened up the orange for the roll over state, and I centered the text on the menu more vertically.
  6. A subtle pattern in the background, which I did not even finish just provided a quick example of on the top left, could help.

Take all of this for what you will, and it looks like you have already made a lot of changes, but I believe those 5 things I provide above can really help.

Link to comment
Share on other sites

  • 0

Ok, so I slimmed down the header and went with a gradient look to try it out, although I went abit darker than the one you show.

I also added a different pattern to the background.

I'm still not sure how I feel about the color scheme. Maybe I went too dark?

Link to comment
Share on other sites

  • 0

Ok, so I slimmed down the header and went with a gradient look to try it out, although I went abit darker than the one you show.

I also added a different pattern to the background.

I'm still not sure how I feel about the color scheme. Maybe I went too dark?

Definitely looks much better now in my opinion.

As I said most important thing for you is content, and your content is now EASILY read on this lighter background, so I think it is definitely a major improvement over when I originally viewed it.

Just curious, why the change of the header font with your name? I did not mind the other font you used at all, and I think it matched everything else a tad better. But that is just a minor nitpick.

Also actually, go with an even darker richer blue for the header gradient, think it will pop a bit more with a darker blue. (Y) Also I would maybe suggest a dark blue to a lighter blue. See below the tile graphic.

I am still not a huge fan of the textured background, but if you like it, honestly that is all that should matter. :yes:

With all that said, I whipped up this very quick background tile for you to try out. It definitely lightens everything up, and I think eliminates any feelings that it may be to dark.

post-34384-12729424396423.gif

post-34384-12729428972557.jpg

Definitely now just really offering very minor detailed nitpicks. It can be left alone, just wanted to provide one last bit of feedback.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.