I’ve been considering a redesign for my art league’s website for a long time and finally got started. The goals include 1) making it more colorful, 2) adding some visually interesting hover effects to the items in the Quick Links sidebar, 3) finding a better way to spotlight our “artist of the Month”, and 4) laying the groundwork to make it into a responsive layout. If/when I roll out the new design, it’ll also include a badly needed cleanup of the markup and CSS, which have both gotten very disorganized as I’ve made additions/changes over the years. I’ll use HTML5 and various CSS3 goodies, not worrying too much that the less capable browsers won’t be able to display some of these.
For now, I’ve concentrated on the first three of those goals.
The two test pages (HOME and DEMONSTRATOR) are at hbartleague.com/hidden/redesign_2012-summer/002-A. Haven’t started on other pages yet.
For comparison, the current design is at hbartleague.com.
Couple of comments for the design:
The drop shadow on the top is just so overbearing. I’d reduce the opacity quite a bit and make it more subtle.
On the sidebar items, it seems like you are using CSS3 for the transitions. Maybe use an animation for the return (it’s pretty abrupt to transition and then snap back instantly).
The links on the top seem disproportionate from the rest of the text and I kind of find it hard to read with their current sizes. I would make those shift sizes using media queries so they would be that size when the browser collapses all the way down.
The footer is a shade of what I might call “painful” blue. It just hurts to look at while trying to read the text. I’d say either increase the font size or make it a either much darker with lighter text or much lighter with darker text.
I feel like the header just needs to artistic love. It just feels kind of blank up there. Even a texture of some kind would be helpful.
The second is much better, but some things to consider that i would consider high priority:
1. Improve the Nav a little, it is kind of small and not very easy to identify…
2. footer font-size is nearly illegible, consider making that a little larger, 12px should be the minimum size in my opinion.
Sorry for the belated reply – been away from the computer for a couple of days.
I appreciate the suggestions – very helpful and exactly the sort of feedback I was hoping for.
I’ll see if subtle a texture or gradient adds some visual interest to the header. I am bound to use that logo and font, so can’t change much there.
Will address the drop shadow.
Regarding the top nav, I think reducing the number of links is a good idea. Maybe move “Join” and “History” to the footer, and possibly “Shows” to the sidebar. That’ll give me room enough to increase the text size of the top nav. And with a reduced number of top links, I could use the same colors seen when hovering in the sidebar. That’ll be a more consistent look.
And yes, I’m using CSS3 transitions for the sidebar hover effect. I’m not sure I want to go with animation; first I’ll experiment with different times for the start and end of the transitions to smooth things a little. One odd thing I’ve noticed is that the transitions move the distances I want them to in Firefox and Opera, but in Safari and Chrome the second and fourth ones move different distances.
Yeah, the footer text is too small. I’ll work on a different arrangement of the footer items – maybe move the actual email links below their descriptions, and indent them a little. Could also replace the text “email” with an icon. I’ll reserve smaller text for small screen devices if I have to.
I feel somewhat bound to use that blue you see in the footer, because it’s one of the 2 blues used in the “official” logo.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".