@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 :)
@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.
@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.
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 :(
@TheInfection - thanks, I think I will add a subtle box shadow at some stage of development, I will also be using jQuery for the transitions on the links for the extended browser support, although if a user who has a non-supported browser then it's not like they're going to experience something totally different, it's just going to go to the solid colour on hover a bit quicker.
@jurotek - thanks for the input but i think I'll leave my nav as it is now :)
@joshuanhibbert - thanks for the detailed feedback. I was using the inset box-shadow on the navigation hover also on the previous design so the picture would flow nicely but now it doesn't I can see what you mean :) it will be a jQuery slider using a plugin for wp anyway, I just left it there for some structure.
I know about the page title that will be getting changed, haha, +1 for noticing though ;)
Regarding the gradient, it's the first time I've used it in this way, I kind of like it but maybe it's just a preference thing :)
Yeah I should add some more padding here and there to balance out the page. I'll get to that definitly.
No the footer doesn't need to be as 'in your face' like the navigation. I will look into seeing what colour goes good :) and thanks!
@joshuanhibbert, why wouldn't you want to differentiate between navigation tab of active (viewed page) such as changing background color and bold font and change cursor to default and tell user, hey you are already on the page this tab belongs to so there's no point to be clicking on that tab and treat this tab as other tab which takes you to another page. I'have seen it done and find it very helpful to user such as myself. There are tons of websites out there which don't do neither and it frustrates the hell out of me.
@stevencrader, whether you use closing tags or not is entirely up to you if your doctype is HTML5. So both versions are correct. You can even leave it out if you set it in .htaccess
@joshuanhibbert, no need to apologize bro, your knowledge of stuff is miles and miles ahead of what I know. Maybe with the cursor I went little too far. But my thinking about it is this. If the tab is already active, why make user believe that it's clickable.
I've only got one comment on this design: if you remove the logo of the website, this design can be used on every other website. If I were you, I would rethink the whole design. Sorry too say this, but despite the logo nothing is about basketball: no real basketball colors (too soft), too fancy picture borders etc. These guys are suppose to be the "tuff" guys, so the world they're!
After seeing your capabilities (because the design looks quite nice) I'm sure you can make a fabulous website for your brother-in-law's basketball team! Keep on the good work!
Sorry too say this, but despite the logo nothing is about basketball: no real basketball colors (too soft)
I don't really know how this is true because I have used many different shades of Orange, I can't just throw in the only colour of a Basketball, I need to use quite a varied colour palette.
A logo shouldn't be the only brand identity on a website. It's true that there're a lot of website out there without a real identity, but that doesn't say you have to follow them.
Can you replace the logo of MailChimp or Treehouse and completely remove their identity with that action? The one thing I try to say is: make it look like basketball.
About the colors: I don't know. The colors doesn't make me think about the basketball team, who's gonna kick my ass next week. Basketball is a tuff sport, I would use hard colors.
Maybe it's just a feeling, but think about it. I see you can deliver a really nice looking design, so it wouldn't be a problem for a designer like you.
The one thing I try to say is: make it look like basketball.
I wouldn't really want to go down the road of adding little basketball images for bullet points and buttons, I just prefer to keep it clean and simple. I don't know if that makes me less of an adventurous designer, but it's just how I get things done.
If someone wanted to take my code and use it for another website, yeah I'd be pi*sed, but I'd also be like "At least they think my design is good enough to steal"
I see you can deliver a really nice looking design, so it wouldn't be a problem for a designer like you.
Hi guys
I have made this static design 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 =)
Looks pretty good.
I don't think there's anything I can say there, it's spot on!
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.
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 :)
One thing I just want to point out is that the logo doesn't really go with the color palette.
That's because the ball the spartan is leaning on is not right color. Otherwise it would be right on.
@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 :)
@Watson90
Ha. I'm Chris, not Paulie.
Wow! I can't believe I failed as much as that...apologies man.
Looks like Paulie is going to get an unnecessary email :/
Haha. It's not a problem.
Try adding a wrapper around everything but the header and then apply a box-shadow on it. Using
or
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!
Add this to your nav. I find this to be good for user experience.
@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.
Looking pretty good @Watson90! Here is a list of my immediate thoughts:
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 :(
@TheInfection - thanks, I think I will add a subtle box shadow at some stage of development, I will also be using jQuery for the transitions on the links for the extended browser support, although if a user who has a non-supported browser then it's not like they're going to experience something totally different, it's just going to go to the solid colour on hover a bit quicker.
@jurotek - thanks for the input but i think I'll leave my nav as it is now :)
@joshuanhibbert - thanks for the detailed feedback. I was using the inset box-shadow on the navigation hover also on the previous design so the picture would flow nicely but now it doesn't I can see what you mean :) it will be a jQuery slider using a plugin for wp anyway, I just left it there for some structure.
I know about the page title that will be getting changed, haha, +1 for noticing though ;)
Regarding the gradient, it's the first time I've used it in this way, I kind of like it but maybe it's just a preference thing :)
Yeah I should add some more padding here and there to balance out the page. I'll get to that definitly.
No the footer doesn't need to be as 'in your face' like the navigation. I will look into seeing what colour goes good :) and thanks!
@Watson90 Yeah, the gradient is 100% preference. And you know how the saying goes; you can't please everyone!
@joshuanhibbert, why wouldn't you want to differentiate between navigation tab of active (viewed page) such as changing background color and bold font and change cursor to default and tell user, hey you are already on the page this tab belongs to so there's no point to be clicking on that tab and treat this tab as other tab which takes you to another page. I'have seen it done and find it very helpful to user such as myself. There are tons of websites out there which don't do neither and it frustrates the hell out of me.
I will be adding current page styling to the tabs, but I'll just be using the
.current-page-itemclass to do it in WordPress :)@jurotek My apologies! Yes, you are right; I completely missed the fact that you were talking about the current page. Doh!
I know this isn't design related but your charset tag is incorrect. You have
<meta-charset="utf-8" />when it should be<meta charset="utf-8">@stevencrader, whether you use closing tags or not is entirely up to you if your doctype is HTML5. So both versions are correct. You can even leave it out if you set it in .htaccess
@jurotek It isn't the closing that I was pointing out. It is the dash. There is no
meta-charsettag. Guess I should have explained a bit more.@joshuanhibbert, no need to apologize bro, your knowledge of stuff is miles and miles ahead of what I know. Maybe with the cursor I went little too far. But my thinking about it is this. If the tab is already active, why make user believe that it's clickable.
@stevencrader, right, I completely overlooked it :(
@jurotek No, I don't think you went to far at all; I agree with you regarding the cursor.
Looks awesome.
Hi @Watson90,
I think the design is pretty nice.
I've only got one comment on this design: if you remove the logo of the website, this design can be used on every other website. If I were you, I would rethink the whole design. Sorry too say this, but despite the logo nothing is about basketball: no real basketball colors (too soft), too fancy picture borders etc. These guys are suppose to be the "tuff" guys, so the world they're!
After seeing your capabilities (because the design looks quite nice) I'm sure you can make a fabulous website for your brother-in-law's basketball team! Keep on the good work!
Hi guys
I just want to thank you all for the feedback!
@stevencrader - thanks for that! I don't know why I put the
-in there, but that's been sorted now :)@joshuanhibbert - I have added a bit of spacing within the content of the page and also removed the 20px of padding I had at the bottom, also.
Regarding the footer, I have changed it to a more subtle colour, I think it looks better than being so bright like the navigation bar.
I also changed the font-weight of the heading tags from the default bold to
normal.Thanks everyone, hopefully I will start converting this to a WordPress theme soon so i will keep ya'll updated :)
@Vermass
Thanks for your feedback.
I don't really know how this is true because I have used many different shades of Orange, I can't just throw in the only colour of a Basketball, I need to use quite a varied colour palette.
A logo shouldn't be the only brand identity on a website. It's true that there're a lot of website out there without a real identity, but that doesn't say you have to follow them.
Can you replace the logo of MailChimp or Treehouse and completely remove their identity with that action? The one thing I try to say is: make it look like basketball.
About the colors: I don't know. The colors doesn't make me think about the basketball team, who's gonna kick my ass next week. Basketball is a tuff sport, I would use hard colors.
Maybe it's just a feeling, but think about it. I see you can deliver a really nice looking design, so it wouldn't be a problem for a designer like you.
Hi @Vermass
I understand what you're saying :)
I wouldn't really want to go down the road of adding little basketball images for bullet points and buttons, I just prefer to keep it clean and simple. I don't know if that makes me less of an adventurous designer, but it's just how I get things done.
If someone wanted to take my code and use it for another website, yeah I'd be pi*sed, but I'd also be like "At least they think my design is good enough to steal"
Thanks for the kind words, man.
Cool! And I please don't use basketballs as bullet points! :) Good luck!