Jump to content

Before and After - a major difference or not?


Recommended Posts

Well it's a lot better then the first one. You should make the tabs rolloevers of some sort. Also you should narrow your white content section to match the width of your navigation. Also make a footer so the page doesn't just hit the bottom.

Link to post
Share on other sites
Its good -> but you could do a lot more.

The Header Image at the top should be as wide as the white main page. The top seems open. It needs containment - a border or something.
Move the main content UP more to the top of the page.

For a real professional look -> the tabs (navigation) should have a gradient pattern with some shadow etc. Currently you only have images. Well if you stuck with this you could change them to a nice 3d effect.
If you knew a bit of css - you could use a 1px wide image and put it as a background in the x direction. This would let you have mouse over effects, e.g. a:hover { text-display:bold etc. etc. }

Link to post
Share on other sites
Is it better then before? Definitely. Is it good? Not as much. It isn't a very professional-looking site. Although maybe that's just because of my bad experiences with those two colours on a web page. Your content also lacks definition-I'd try to fix that. You've got a lot of images where you could probably just use styled heading tags. Not to mention your header-the vanishing-then-reappearing text is fairly obnoxious. And that header image is probably compressed a little bit too much.

Oh yeah, and why are there single-quotes around 'Very Patient'?
Link to post
Share on other sites
Above are good comments.

That said, let me just totally ignore them and give you a full review. Some issues might have already been noted.

The second design is definitely better than the first, but not professional by a long shot.

[b]What's good about it:[/b]
- The general feel of the elements. Rounded squares are a good choice for a site with this topic.
- The general look of the top logo.
- General layout of elements (with some exceptions)

[b]What's bad about it:[/b]
1) The colour scheme.
2) The alignment and placing of elements and text.
3) The use of tabs.

I don't think I have to explain the points I noted you did right. You probably know it, and are proud of it. You should be. You've got a good starting point here.

I'll explain the bad points: why I think they are bad points and what you could do about it.

[b]1) Colour scheme[/b]
Big spaces of bright blue are often too heavy on the eyes. It definitely doesn't match the orange. It curses.
Orange is a good choice however, since orange is a very positive colour. Orange is best matched with white and light gradients. Use outlines where necessary. This will give your site a very light and positive look and feel.

Look at www.orange.com to see a real life example of this.

[b]2) Alignment of elements and text.[/b]
Way off on all fronts.

[i]A) [/i] Top logo width should match content-container width.
[i]C) [/i] The right two columns of the front page need padding/spacing.
[i]D) [/i] The block of "text" showing phone numbers shouldn't be there. It makes the space between logo and content look messy. Try if you can fit it in the right side of the logo. Try to fit it elsewhere (move the top elements around) . Just move it from where it is. Leave out the "last minute call" part, it's not such a critical peace of info that it needs to be in a prominent position. Put the info elsewhere.
[i]E) [/i] Use a footer.
[i]F) [/i] Use the rounded corners theme more consequently. Round your content container to match your tabs and image containers.

[b]3) The use of tabs.[/b]The tabs should be made part of the content-container.
The best way to accomplish this: Use the same colour, or a gradient fading into the body for the tabs. Use an outline for the tabs, and use the same line to divide tab from body, except for the active tab.

Oh, and don't forget to DROP the moving text thingy. I have to agree it's very annoying and distracting.

Hope that helps.

Looking at http://tutor.populateme.com/2/, I really thing you should drop the tabs. Get back the middle contianer look, it's a lot better. The way the navbar is won't do ofcourse, but you can make it look really good with some simple gradients and vertical dividers. All other points still stand though.
Link to post
Share on other sites
Looking at the now apparently updated updated page, I've got to say that it is improving. However, there are three things that you may want to address.
First off, tables. This design could probably be recreated quite easily in CSS.
Second, your navigation is too spread-out. Bring it all into a more concentrated area, to make it more convenient.
Third, try validating your code. Not hideously important, but a good idea nonetheless.
Link to post
Share on other sites
Well, you never got rid of the moving text for that one; in addition, you've used tables in the header for some reason that I cannot fathom, though it looks better without that background image. This is definitely a better design, and I'd stick with it. However, you should combine the "Why Choose Us" block with the right block, with the testimonials last. Also for your "Be a Tutor" page, is it possible that you could add some more details to that page about the job?
Link to post
Share on other sites
Pick up a CSS book then, and/or look up some online tutorials-you might want to take a closer look at it before you dismiss it.

It's better, I think, but the left side should be a logo, not just text. BTW, this stuff shouldn't be in the header:
[quote]Last minute calls O.K., Before Exams,
Note Taking, Problem Solving, etc.[/quote]
Link to post
Share on other sites
A few points:

1. its gud that you are willing to change stuff.
2. You missed some very valid points between version 2 and 3.
3. I take it Version 3 is the current one. If so, this needs to be done:

- Get RID of the Blue Background (behind the page)
- Try putting instead a Blue Border Around your page in white. 1-2px wide should do it.
- Your Top Header is HUGE! And white. No No - you need to change it. Put the background at the top a nice shade of blue - to match the blue border.
- Your TOP header is TOO TALL. CONTACT details DO not go into a Header Section!!
- Have a Contact Us tab with all the info.
- Cut the special promotion out of the Header. In fairness -> it doesnt go there!
- So put the Text you have on the left in the header with the image on teh right - cutting out the contact telelphone and the special offers. This should give a nice height for your header.
- Your Navigation sucks man. Especially in Version 3. Without even looking at the code -> I can see you are screwd by having to use Tables trying to get a professional look: It doesnt work.
- Bring back the tabs you had in Version 1, and align them to the left.
- Your find a tutor box is AWFUL WIDE.

If you fix your Header and your Navigation -> you'll be much more on teh way.
For an example of what I mentioned via - white background and border look at my last site: http://skycon.skynet.ie  Im not saying its v. professional looking - but its CLEAN.

Link to post
Share on other sites
The first one was dreadful. It had music play--ew. It interrupted "No children" by the Mountain Goats. Shameful Indeed.

Comments on your design:
- Not fond on the color scheme. Maybe try using more than two colors? And some that are actually similar and not so intense. And maybe add a pseudo-neautral tone in there, too. So it looks easier on the eyes.
- the Marquee looks unprofessional. There are better ways to draw attention to that text (but I see you took it out on the new version, thank you)
- I agree with steve, the "find a tutor" box is too wide.

Instead of the blue background, try a SOFTER color. Not necessarily pastels, but find a NICE color scheme. Something that looks clean-cut and professional. Perhaps a soft sage, taupe, and an accent of a darker sage.
Link to post
Share on other sites
Argh... I like the "why choose us" section (but not where it is), other than that: did you read my first post? I modestly believe you'll find the hints you need to produce a professional design in it.
Link to post
Share on other sites
My blunt comments:

It was only by the third version that I had any real idea what the site was about (it's maths tutoring, right? I'm still not sure).

In general, I think the design suffers from 'style over content'.

Presumably the client wants visitors to the site to achieve something, and the site's visitors have something in mind when they visit. I think the current design causes a number of obstacles to fulfilling either.

An example:


The page above appears to be blank to me until I scroll down (at 1024x768). I would expect some kind of prominent (I don't mean flashing text) message about the benefits of this service on this page. For every visitor who takes the time to scoll, there will be many more who just give up instead.

Getting the site to look better is one thing, but making the site [i]work[/i] better would give you a truly happy client :)
Link to post
Share on other sites
The only reason I have the moving text "We send..." and the blue background is that's what my client like. I took it off, and she wanted it on to be there. To her - it creates a sense of the site being "lively."

Well, here's a version with the blue-background remove and one that can be viewed on both 800 and 1024.

http://tutor.populateme.com/2b - steviewdr, I liked that clean design.  ;)
Link to post
Share on other sites
Much Better.
A few things tho -> your still not listening (forgive me if you have already justified them):

1. The Header/Top image is still WAY TOO TALL. Get your Resolution down to 1024 x 768 -> its most likely what your boss/customer has it set at. At that res. your Top banner takes up too much room.

2. Your Navigation is Mucked up. Have SHORT words for the items - not sentences. Instead of "Why Choose Us" - put "Our Offerring" or something. 2 words MAX IMO.

3. The extreme background. Whats them tiny grey squares etc? Its only allright - it takes away a bit IMO.

4. One last thing. Why do you have SOO many Sizes of TEXT?????????????/
On your front page - you have 8-9 different SIZES of text, not to mention fonts. ONLY HAVE 2-3 Different Text Sizes for headings MAX. The reason been - each piece of text with a different size draws the eye across and back abruptly - instead of having an even flow of text.

5. Sorry - one more thing. Fix up your footer a bit. Its too far below your Content div.

ya - on a last point - the text fonts are a tad on the big size.

Keep going.

Link to post
Share on other sites
Thanks everyone for the replies.

From your suggestions


1. I made it smaller now - so I had to take some text out. Moved the phones to the top right.

2. Navigation is better now.

3. Background is a bit darker now.

4. Font size are now more consistent.

5. I took the footer out.
Link to post
Share on other sites
Its getting there...albeit slowly.

Firstly - Id prefer if the Page started at the top, and you put the phone numbers somewhere else. BUT the TOP IMAGE is WAY better. However, the text "Math, Academic..." in Orange. Its a little hard to read. Put a v.v. small shadow on that text - to make it stand out, similar to $45 an Hour but way less of a shadow.

The Navigation is still screwed - with them long sentences. That "Math Tutors v's ..." is mucking it all up. Try putting it in a single line instead of using a <br>.

If you persist with the scrolling text - put some padding on the Right & Left sides where it scrolls out of and into.

There is WAY too much LEFT padding/spacing on Find A Tutor Box. Also make this Find a Tutor Box NOT AS WIDE.

Whats that Something.....something.....something text????????
Take it you. Your making a Professional Website remember.

Now, for your subjects on teh Right - you NEED BULLET POINTS. This will give it a Professional Look. Choose nice bullet points. I like small squares as bullets.

A 1 line Footer would be nice - it could contain information to a Disclaimer.
Something like:

Copyright (C) 2006 | Tutoring | Disclaimer

Link to post
Share on other sites
I agree with steviewdr with all of his points. Please get rid of the scrolling text, if you still want something like that make something in flash so it looks a little more professional.

The site is coming a long though.

Link to post
Share on other sites
I still stand by my first post. You did adopt some of it. Colourscheme has improved.

Some quick fixes:
1) space on the underside of your contenbox. Maybe use some text (copyright, disclaimer, webmaster-contact link etc) as footer.
2) Make the navinks' boxes equal in width. Reduce space between them.
3) Header: make blue fade just into white, not back into blue.
4) Lose moving text, dump the space that will leave. If your client insists on keeping it, at least make it a little smaller, so it takes up less vertical space. Also change the colour so it's not so intrusive.
5) Reintroduce rounded borders around images. Reintroduce dotted line vertical dividers.
6) Suggested layout:
top, left-right: resources / find a tutor
bottom, left-right: images-text / featured stories
7) Nobody reads welcome texts. Just check how many proffesional sites use welcome-texts.

Just trying to help.
Link to post
Share on other sites
Aside from all of the content/design comments pointed out, you really need to fix your Contact Form.

It's fairly obvious you are validating that something must be entered into each field, but you are not validating for a proper email address, which probably means you are not sanitizing other input. This will open your form up to use for spamming email. I was able to put "asd" as a email address and it was accepted.

The phphelp forum here on phpfreaks has numerous questions about this almost daily so you can get some direction there.
Link to post
Share on other sites
Looking Good. Still a few points:
Tweak the colours of the Navigation and also the a:hover colours. They are wrong currently.

Bullets for the subject listings.

Remove the <br> from the Footer. It doesnt matter if the two lines are close. Its only the footer.

Also - the FIND A TUTOR. Choose lighter oranges for the Drop down select menus.
The width of your site changes with different select options in the above menu. Make the FIND A TUTOR div a fixed width.

A last point: the navigation does not need to be soo tall. Shorten it a tad.

Link to post
Share on other sites
Alright, freak, I fixed the contact form.

Stevie, keep the critque coming.  ;D

I have added a flash animation on the front page. What do you guys think?

I'm still debating if I should remove the "Math Success/Academic Success Tutoring" box image on top and replace it with the contact phone numbers. Then the "Math Success/Academic Success Tutoring"  can go on top of the flash.

Link to post
Share on other sites
This looks a lot better. Background is a bit dark for my taste, but I definately like the way the header fades into the background. It's a good look.

The animation looks pretty good also. Not to fast. Good job.

Navlinks' boxes still need resizing though. I still don't agree with the layout of elements. Try switching the 'find a tutor' part with the animation part.

Text in footer needs to be the same size.

It's definately improving though. Thumbs up.

P.S. A bit more padding for the text underneath the animation wouldn't hurt. And yes, lose the "succes" thing. The phone numbers would look better there.
Link to post
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.