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

Plumbing website design

  • # June 26, 2009 at 6:13 am

    Hey everyone.

    Be grateful for your thoughts on this design at http://www.pplumb.co.uk

    If anyone would like the penguin let me know I’ll happily let you have the vector file I designed.

    # June 27, 2009 at 2:12 am

    Not too bad, bud some fundamental problems.

    1. If you’re only going to have one page for a website with anchor links, you MUST have "back to top" links after each section.

    2. I’m not sure if you did the logo or they did, but it needs to change! You could get so creative with that name!

    3. I love me some orange, don’t get me wrong, but the content portion of the page is lacking. I’m not sure what it is. Is it too much orange? Maybe. Could just be the lack of depth. Everything just looks like on big block, no real division.

    Keep on working at it, I think you could be close to finished.

    Also, if it’s only going to be one page, considering throwing in some pretty jquery transitions between elements.

    # June 27, 2009 at 7:16 am

    To add to theDoc’s response, back-to-top links are badly needed, and a jOuery scroll-to would really add some pazzazz.

    Everything on the page renders beautifully except for the badges on the top right. Consider getting hold of these logos in a suitable resolution and listing them separately rather than in a basic white box.

    Did you create the graphics for this site? I’m curious because there is such a disparity between the (non)logo and the cute penguin (and to be honest, I don’t get the connection there either). If you did, you certainly have the skills to improve the logo.

    Try different layouts with the checked list items (i.e. ‘fast and reliable’, etc.) they are trying to fill that space and just not quite managing it. I would either go smaller and vertical or as-is but with a fourth item. Their font is also not exactly suited to the chunky check mark.

    You have also put more effort into the nav links (gas and heating, etc) below the fold than you have on the same links on the top of the page – this is strange to me as the closer to the top of the page the more valuable the real estate. Those icons are too nice not to be front and center I think…

    The only other gripe (and I’m feeling particularly gripey today! ;) ) is the drop shadow behind the quote button – it clearly has angular edges in comparison to the button itself which has sweet rounded ones.

    Otherwise looks great! :D (Hope this reads as being helpful…!)

    # June 27, 2009 at 8:54 am

    Thank you very much for your input.

    It was only a quick site for a friend for gratis. I totally see where your coming from on improvements though.

    I would say everything under the banner needs some design pizazz as its really lacking. The top association logos also need to be lower as suggested.

    I also wanted to do more of a play on the penguin and branch out over a few pages. But as its a quicky for now i’ll have to come back and improve this.

    As i do like to make things totally the way it should be money or no money.

    And I did design the penguin et al. Including the logo. As much as it kills me I did what they asked instead of designed it to my skills.

    So from now on I shall go with my feelings and not succumb to non designers ideas.

    # June 27, 2009 at 10:16 am

    The customer is always right! :D

    Be careful you don’t come accross wrong – just do up and show them a better alternative. If they still want to stick with their own ideas, that’s their look out. At least they can’t complain about it later on!

    # June 27, 2009 at 3:13 pm

    Well I agree they are right to a degree.

    Just when I do paid work they need to trust in your skills and experience.

    As this site was a friend freebie I could do the site up more as and when my jquery, css skills improve.

    Changing there logo would be a little harder to do as its a new start up moving already. (on vans etc)

    How would I implement the jquery animation you suggested though. That does interest me.

    And if you ever need any vector based artwork I’d be happy to draw some up free for ya.

    # June 27, 2009 at 4:45 pm

    Thanks for the offer – you’d never know!

    Anyhooo copy this bit and save as an external js file. Now that I look at it, it’s not the JOuery scroll-to, but I’ve used it before…

    Code:
    /* Smooth scrolling
    Changes links that link to other parts of this page to scroll
    smoothly to those links rather than jump to them directly, which
    can be a little disorienting.

    sil, http://www.kryogenix.org/

    v1.0 2003-11-11
    v1.1 2005-06-16 wrap it up in an object
    */

    var ss = {
    fixAllLinks: function() {
    // Get a list of all links in the page
    var allLinks = document.getElementsByTagName(‘a’);
    // Walk through the list
    for (var i=0;i tag corresponding to this href
    // First strip off the hash (first character)
    anchor = target.hash.substr(1);
    // Now loop all A tags until we find one with that name
    var allLinks = document.getElementsByTagName(‘a’);
    var destinationLink = null;
    for (var i=0;i

    This will pick up all the internal links (a href="#linkone" / a name="linkone") in your page and initiate smooth scrolling between them.

    EDIT – I’ve a feeling I’ve forgotten something – let me know how you get on…

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

    http://www.ppens.co.uk
    http://www.myrecycledgifts.co.uk

    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 http://css-tricks.com/gridcontrol-a-grid-overlay-system-for-design-development/.

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