/introduction/newsletter_archive/design/article.php/3473831/TITLEintroductionnewsletterarchivedesigndesign09Ahtml.htm TITLE:introduction/newsletter_archive/design/design09A.html


By Joe Burns

Concern #1: My first concern is the layout and design of the main page. The screen capture above was grabbed at an 800x600 screen size. It looks pretty good. All of the elements line up well. Now, here it is at 1024x768:

Design Image

Suggestion: Note how the text is beginning to drift to the right, leaving the page off-balance. You made a point of centering the lower section of text. It's a table, so it centered easily. In 800x600 it looks great. Any resolution above that and the text table centered to the middle of the screen starts messing up the design. Put a single table cell around the entire page. Set that cell to be just as wide as the widest point on the page. That appears to be the banner across the top. Then the text table will center itself within the main table cell, not the screen setting.P> Concern #2: You made a banner for the page in an ingenious way. It's a single cell with a stone background. Very clever. I like it, but it's way too big for the rest of the page.

Suggestion: I would suggest that only the text "Welcome to Our Math Site" sit within the cell. The remaining text can go underneath in the white space. I would also lose the underline.

Concern #3: The color of the banner text is not complementary. I have no doubt you chose the background first and then spent the day playing with colors until you found one that could be read over the image. The background is so busy and the text is so dark that it doesn't quite work.

Suggestion: Go brighter. Try to find a brighter color. I would pick a color out of the superhero's costume to help tie the banner to the rest of the page.

Concern #4: Every so often I make a statement that makes people go nuts because I'm not following my own advice. This is one of those times. Your white background wears on the eyes. It's very bright.

Suggestion: Try to find a light background that is slightly darker than the glaring white. I get letters all the time on Goodies that the pages are way too bright. Try this hex for the background: FFFFCC. See what you think.

Concern #5: The sub-pages (the pages under the home page) all have a similar design to the main page. Here's one:

Design Image

Notice how the banner sets a width, but then the text rolls outside it? In 800x600 it looks great, but not in a larger browser window.

Suggestion: Again, put the pages inside a single table cell set just a tad wider than the banner, so the text stays justified underneath it. The clean margins will look a lot better.

Overall: Fun site. I love the little Math Man image. I see you use him on the sub-pages as your back navigation. That's smart. It holds the site together. You might want to lose the blue border around the active image, though. Keep updating this site on a timely basis and you'll have a winner here. It'll only be a winner with a small audience of parents and students, but it'll be a winner nonetheless.

Oh, by the way--the answer to the question from the beginning of this article. Customer number 150 would win all three prizes. Why? Because 150 is is the smallest number divisble by three, 10, and 25 without a remainder.

That's that.

Joe Burns, Ph.D.

Always Remember: When it comes to designing your Web site, the most important person is not you but your user.

Would you like YOUR site to be reviewed?
Click here

Web Design Archive Home Page

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date