Treehouse: Grow your CSS skills. Land your dream job.

Plumbing website design

# June 27, 2009 at 5:22 pm

Hi Eamonn

That is a fantastic help. Works alot better than before.

I’ll add the back to top anchors next.

Should I remove the section below the penguin and maybe use the icons and descriptions as larger buttons.

Really like to add a contact form also. Just a little unsure how to code that bit and have it send the responses to an email.

# June 27, 2009 at 5:56 pm

Aaarrrrghhhhh!! Forms! My Kryptonite! I shall bow to someone else’s knowledge there.

As for the section below the penguin – have a stab at this:

See how it looks to minimise the icons attached to the lower links and tie them into the top links in their smaller form. The larger icons I would intersperse throughout their respective sections lower down the page. (Try a lighter shade of grey behind those sections if you can – the Orange doesn’t contrast ideally as is. It’s fine, just not brilliant…) If those links do lead elsewhere, i.e. to ‘more info’, on those sections other than what is in the segments down the page, you can instead incorporate those links into the segment headers.

EDIT – I still think the penguin section can be improved if you drop the text a few pixels and beef up the font. Have you tried this?

# June 28, 2009 at 3:24 pm

Not managed to try your ideas yet. As doing another couple of sites.

If you want to put your opinion across on these would be grateful. Always nice to get a well balanced critique.

Also would I need to learn javascript much before taking a stab at jquery.

# June 28, 2009 at 6:24 pm

Those are good looking sites! Nice, clean and mod looking…

For the ppens site, I would look again at the #header div area. Nothing there seems to line up with anything else. The recylcledgifts header is much better by comparison, although I would maybe pull it in from the right border a little to line it up visually with the wishlist column below. The top links line up with the top of the logo lettering and with the base of the search box, this means there is no visual tension between these elements. The opposite is true of the ppens header. A clear declaration of what both sites are about (Promotional Printed Pens/Reclycled Gifts) also seems lacking and could add a nice visual punch to that area. It’s welcoming and assuring to visitors to know exactly where they are and that that place is the right place.

On both sites you use the same login/account links – which is fine – but as an added incentive to first time visitors I think a nice big ‘sign up’ button would be good. There seems to be special offers for registered users, so why not highlight the fact there also?

As a parting shot, see how the e-mail/subscribe/ok inputs on the ppens site look when aligned to the left; there are dropdown arrows on two of the horizontal nav bar links on the ppens site which have no dropdowns; and maybe try the reclycledgifts site with a white background, but with that nice green as a 20px or so shadow surrounding the central section – it would give the page depth and keep the colour while not being quite as strong…

Hope that was helpful! :)

P.S. As regards things lining up, have a look (if you haven’t already) at grid usage in web-design. I think Chris did an article or two on this, he’s certainly spoken of it before, and there are plenty of other resources out there to be googled.

EDIT – here we go

# June 29, 2009 at 5:09 am

I do see your point on the design.

And the client asked for something a little more catchy than a run of the mill business template site.

This way they were building a brand with the penguin in there merchandise etc.

As Eamonn discussed before it does need to be shuffled about a bit.

# July 15, 2009 at 12:30 pm

It’s really nice, but I would say you need more graphical content towards the bottom of the page, maybe some icons, it’s just that you have loads of imagery at the top, and none a the bottom.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.