Jump to content


Photo

Before and After - a major difference or not?


  • This topic is locked This topic is locked
30 replies to this topic

#1 extrovertive

extrovertive
  • Members
  • PipPipPip
  • Advanced Member
  • 235 posts

Posted 18 July 2006 - 06:38 AM

...

#2 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 18 July 2006 - 12:22 PM

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.

-Chris

#3 steviewdr

steviewdr
  • Moderators
  • Advanced Member
  • 1,364 posts
  • LocationIreland

Posted 18 July 2006 - 02:53 PM

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. }

-steve

#4 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 18 July 2006 - 06:19 PM

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'?
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#5 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 18 July 2006 - 07:15 PM

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.

What's good about it:
- 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)

What's bad about it:
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.

1) Colour scheme
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.

2) Alignment of elements and text.
Way off on all fronts.

A) Top logo width should match content-container width.
C) The right two columns of the front page need padding/spacing.
D) 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.
E) Use a footer.
F) Use the rounded corners theme more consequently. Round your content container to match your tabs and image containers.

3) The use of tabs.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.

EDIT:
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.


#6 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 18 July 2006 - 10:17 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#7 extrovertive

extrovertive
  • Members
  • PipPipPip
  • Advanced Member
  • 235 posts

Posted 18 July 2006 - 11:40 PM

Ok, so that background color and moving text are a bit annoying right?

What about http://tutor.populateme.com/3


#8 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 19 July 2006 - 12:26 AM

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?
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#9 extrovertive

extrovertive
  • Members
  • PipPipPip
  • Advanced Member
  • 235 posts

Posted 19 July 2006 - 12:57 AM

What do you think about the header I have now?

I dont' wanna use CSS cuz you gotta use position - wouldn't it look different on a 800x600 and 1024?

#10 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 19 July 2006 - 02:35 AM

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:

Last minute calls O.K., Before Exams,
Note Taking, Problem Solving, etc.


Disclaimer: No matter how harsh I may be, I'm always IMO only.

#11 steviewdr

steviewdr
  • Moderators
  • Advanced Member
  • 1,364 posts
  • LocationIreland

Posted 19 July 2006 - 10:27 AM

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.

-steve

#12 pixy

pixy
  • Members
  • PipPipPip
  • Advanced Member
  • 295 posts

Posted 19 July 2006 - 03:35 PM

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.

This is a .44 Caliber Loveletter straight through my heart.

Tabulas + Threadless + Hire Me!


#13 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 19 July 2006 - 08:01 PM

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.

#14 number9dream

number9dream
  • Members
  • PipPip
  • Member
  • 16 posts

Posted 19 July 2006 - 10:26 PM

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:

http://tutor.populat...hp?choice=about

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 work better would give you a truly happy client :)

#15 extrovertive

extrovertive
  • Members
  • PipPipPip
  • Advanced Member
  • 235 posts

Posted 20 July 2006 - 03:51 AM

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.  ;)

#16 jcombs_31

jcombs_31
  • Staff Alumni
  • Advanced Member
  • 2,066 posts
  • LocationFL

Posted 20 July 2006 - 11:35 AM

I think it should be fixed width, it looks stupid when it stretches on 1280x1024.

#17 steviewdr

steviewdr
  • Moderators
  • Advanced Member
  • 1,364 posts
  • LocationIreland

Posted 20 July 2006 - 03:06 PM

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.

-steve

#18 extrovertive

extrovertive
  • Members
  • PipPipPip
  • Advanced Member
  • 235 posts

Posted 21 July 2006 - 09:36 AM

Thanks everyone for the replies.

From your suggestions

http://tutor.populateme.com/2b/

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.

#19 steviewdr

steviewdr
  • Moderators
  • Advanced Member
  • 1,364 posts
  • LocationIreland

Posted 21 July 2006 - 09:59 AM

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 © 2006 | Tutoring | Disclaimer


Rgds.
Steve


#20 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 21 July 2006 - 12:31 PM

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.

-Chris




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users