Grow your CSS skills. Land your dream job.

Feedback on a design

  • # December 15, 2012 at 12:58 pm

    Hi guys

    I have made [this static design](http://stevenwatson.co.uk/examples/spartans/ “Go to Spartans”) for my brother-in-law’s basketball team, and I’m just after a bit of critique.

    I will converting it into a WP website once I have finalised the design and made a few other pages.

    **Ps**. The page has only just been coded up tonight, so I may be changing a few things with it depending on how OCD’ish I get.

    Thanks =)

    # December 15, 2012 at 1:38 pm

    Looks pretty good.

    # December 15, 2012 at 1:58 pm

    I don’t think there’s anything I can say there, it’s spot on!

    # December 15, 2012 at 2:53 pm

    Very nice. Just one thing tho. I would increase font size in your hor. nav. or leave it as is and apply transform uppercase, whichever looks better.

    # December 15, 2012 at 3:11 pm

    Cheers guys!

    @jurotek – I have increased the font size in the navigation, I agree it was quite small, I liked uppercase too, but I prefer the increased font size more :)

    # December 15, 2012 at 3:44 pm

    One thing I just want to point out is that the logo doesn’t really go with the color palette.

    # December 15, 2012 at 3:49 pm

    That’s because the ball the spartan is leaning on is not right color. Otherwise it would be right on.

    # December 15, 2012 at 4:28 pm

    @Paulie_D – the logo was made by the client, I will look into making it more compatible with the colour scheme or I may even change the colour of the ball to a more realistic colour rather than the dark brown.

    Cheers :)

    # December 15, 2012 at 5:10 pm

    @Watson90

    Ha. I’m Chris, not Paulie.

    # December 15, 2012 at 5:39 pm

    Wow! I can’t believe I failed as much as that…apologies man.

    Looks like Paulie is going to get an unnecessary email :/

    # December 15, 2012 at 8:13 pm

    Haha. It’s not a problem.

    # December 15, 2012 at 11:25 pm

    Try adding a wrapper around everything but the header and then apply a box-shadow on it. Using

    box-shadow: 0 0 5px #000;
    or

    box-shadow: 0 0 15px #000;
    look the best.

    Also, try using jQuery for the animations as CSS3 isn’t supported in older browsers, unless you don’t really mind that.

    Other than that, you’ve got a great design there!

    # December 16, 2012 at 12:51 am

    Add this to your nav. I find this to be good for user experience.

    nav ul li a.active,
    nav ul li a.active:hover {
    background:#db672e;
    font-weight:bold;
    cursor:default;
    }

    # December 16, 2012 at 3:11 am

    @jurotek Out of curiosity, how is replacing the pointer with the default cursor good UX? Especially considering that browsers change the cursor to a pointer when hovering links, and that is what users are trained to expect.

    # December 16, 2012 at 3:17 am

    Looking pretty good @Watson90! Here is a list of my immediate thoughts:

    - Why does the banner image have an inset shadow? It doesn’t really fit in with the rest of the design. Perhaps removing it, or a solid border would work better?
    - The page title doesn’t match what is says in the logo.
    - I’m not a fan of the gradient in the header, but that is just my personal preference. I’m glad to see people slowly moving away from gradients used in that way!
    - There could be a little more vertical space. This is most noticeable immediately below the banner image.
    - Also, the large amount of white space immediately above the footer doesn’t balance very well as there isn’t that much space anywhere else.
    - Speaking of the footer, have you tried a more subdued color, or a grey? Does it need to stand out as much as the navigation does?

    I also agree with @chrisburton regarding the colours. Good luck with it!

    EDIT: @chriscoyier Would you mind fixing up the markdown styling please? The above list is disappearing :(

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".