Topic: Building It Correctly From the Ground Up (I hope!) (Page 1 of 1)

This is my first time utilising the new principles of design that I have learned from this forum, so I am sure that there are plenty of things I am overlooking. However, I only have one page up, so I hope I am not too far off the mark yet! There isn't a whole lot to look at, but I want to be sure I am thinking with the new lexicon that I've been given from the Asylum. Here's the URL and a little info:

LHA

The design is mostly at the client's request (lots of white space, an intro page with links only, use the house image as much as possible, etc.). I am mostly interested in creating GOOD design, with regards to code and using css properly. So, my questions are:

1. Is there anything I can do with this spartan page differently that would reflect better code?
2. Are there elements that I could incorporate into an external style sheet that I haven't?
3. Any other suggestions?

I'd appreciate any honest criticism you could provide.
Thanks!

I think the design is lacking. I understand what you say about a 'spartan' or minimalist direction from your client, but there are ways to do both spartan and fulfilling. Maybe you could pull that red (from the logo) and make a 7 or 8 px wide stripe down the left side of the page. Or, maybe you could put a gigantic (35 px or more) brown (same as house) border on the bottom of the page, then repeat a similar, but much smaller brown border on your subsidiary pages. That being said, I wouldn't know good design if it bit me on the ass. You should probably listen to someone else's advice before mine. =)

Before I go on to code, though, I will say I like the houses, but the logo text is full of jaggies. Fix that pronto. It seems that is a jpg image. How did you get those kind of jaggies on a jpg image? Ugly.

Code:
There are easy easy easy ways to accomplish what you are trying to do, with meaningful code (probably a list is what I'd use) and no tables. Then you have good markup. You are presenting no more than a list of links, right?
You can stylize that list in most any way you can think of, and still have it be a list.
ALA is running an article right now called 'taming lists'. Check it out.

I've downloaded your style sheet. It looks like you've got the general idea, and then some. good work, especially for someone moving so quickly. One of the things validators always yell at me about is whereever you describe a background-color, you should also describe a color, and vice versa. I don't know why, Slime or Emps could probably answer that.
w3c css validator is a handy tool

Uh, you forgot your opening body tag. Bad news.

The 'align=center' in your divs should probably be moved to your stylesheet.

That's all for now. Not bad. Let's see when you have another page built.

Thanks for the critique. I fixed the body tag (I had forgotten to add it after deleting the automatic body bgcolor and text code that Dreamweaver puts in there).

I am looking at the ALA list article, thanks.
The logo was given to me in a PDF format, and the Louisiana part was already jagged when I inherited it from the previous designer. Is there a way to smooth those jaggies?

As for the border idea you have, I'll consider it. I know that it's too spartan right now, but I didn't want to add something just because it was lacking without a clear idea of what I want to add there.

Thanks again. I will post an update when I have more.
~N

lists, divs, whatever, textually is a much better way to present just a few link boxes like that. text is better for disabled viewers, search engines, text-browsers... what's more it's easier to change for you, and saves loading time...



[This message has been edited by quisja (edited 03-07-2003).]

Some thoughts offhand (I don't have a whole lot fo time at the moment) -

1) I like the house image

2) The logo, as has been metnioned, is terribly jagged. I think you basically have two options (ok 3) at this point -

*Find the font it was done with, and remake it
*Get permission from the client to remake it with a similar font
*Get out your pen tool and trace it out

3) The graphics for text on the boxes of links are not a good idea for a variety of reasons. Some have been mentioned already. The font used for those is also rather unattractive, and the drop shadow on mouseover cements it in as a certified 'bad thing'.

4) Spartan is fine and dandy, and simplicity is always a good thing. But I think this is simply too bland in both appearance and structure. There is nothing to indicate visually where the important parts of the page are. There is nothing to make my eyes move through the page. Dragging some of the existing colors from the logo into the page is a good start. I would also drop the white background, and go with either a very pale grey or a pale beige version of the brown that is there.

Like I said, these are just some offhand thoughts, if I get a chance later I'll add some more conrete ideas.

aargh to much white..
ok here i go

first impression: very clean but a bit boring. I am not shure if i will look for more info.
the logo is ugly. On a 1024*798 screen it looks a bit crowded in the middle. Maybe a more liquid desing would help.

Now some advice, i took the freedom to play with the logo. So i could tell you how to fix it.
1) open logo in PS.
2) copy to layer1
3) working on background layer i selected the text (i used the magic wand to select the surounding white and then inverted it)
4) enlarge the selection 1 pixel
5) guassian blur at 1 pixel (maybe twice)
6) deselect
7) on layer1 put a selection box around the text
8) invert and delete. (leaving only the text)
9) invert again
10) g-blur first with 2pixels then with 1
11) deselect
12) since the blurring made the text a bit pale i put the layer blending mode on color dodge.
13) layer transparancy +/- at 70%
That should make your logo nice and clean. I can mail you the psd if you want.

Now about the rest. The space in the middle might be bigger on large screens. And on the right column of links it would be nicer if the housing logo was also on the right. So getting the logo on the 'outside' instead off the'leftside'.

Maybe the picture should be more liquid too and filing 75% of the screen.
As been said an background color would be nice.

Just a thought: some testimonials on the side in some sort off greyed-out font type. Just for filling the emptyspace abit but not to draw attention.

If you want the psd let me know, icq and mail are in my profile.

2c

"Freedom of speech is by no means freedom to insult others" from the Razorart goodbye letter.

As usual, very helpful advice, guys. Thanks. I recognised the Louisiana font from old La. car license plates, so I tracked down an image of one and pulled it off that. I think that the text is better without the black line around it.

I will work on the suggestions provided and post a new index page.

Thanks!

Hmm... is it just me, or is there nothing on that page but the logo and a red stripe?

suho she probably worked on it.. it looked different before

"Freedom of speech is by no means freedom to insult others" from the Razorart goodbye letter.

Yep, I took it all down. I am redesigning it the way I think it should look. That isn't what it will be (logo and red stripe). I'll post a new message when it's worth looking at again.

Thanks, anyway, for checking on it!
~N