- This topic is empty.
July 6, 2012 at 1:36 pm #38799snillorMember
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.
ThanksJuly 8, 2012 at 8:47 pm #105679snillorMember
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.
- The forum ‘Other’ is closed to new topics and replies.