smithmr8 Posted December 7, 2009 Share Posted December 7, 2009 Hi, I'm in the process of re-designing my website. I've made a quick mock-up which I personally like, but want to get some more opinions before I splice ect.. Thanks, Luke [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 7, 2009 Author Share Posted December 7, 2009 Have made some amendments. This is the finished design. http://i48.tinypic.com/14m81nb.jpg Any thoughts / comments would be much appreciated. Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 7, 2009 Author Share Posted December 7, 2009 Its now online. http://www.bytefish.co.uk/ Although, cross browser viewing is rubbish. Tried it in an old version of IE and it doesn't display right. Tried in FF, works fine. Opera is fine, and Chrome it doesn't work properly. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 8, 2009 Share Posted December 8, 2009 Messy on Chrome though to be fair you're already aware of this. The grey font is a bit dull. Try using a stroke, drop-shadow or whatever it takes to create more contrast between the grey text and the grey block behind it. I think the titles should sit on the top of the boxes rather than inside it. I suggest using a mouse-over image swap for the link boxes on the right. Try adding a little gloss or shine to the panels behind the icons. Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 9, 2009 Author Share Posted December 9, 2009 I'll try some different things to make it contrast a tad more. I've already got image-over swaps in the works. Just working on the specifics of the them. Will try your suggestion of adding some gloss or shine. And I tried sitting the boxes on top, rather than inside, via PS and it looked surprisingly good so I'll give that a whirl as well. Will post when things have been changed. Cheers Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 9, 2009 Author Share Posted December 9, 2009 How's that looking now ? Moved the title boxes to outside of the main boxes. Changed the titles to a blue fore-colour with a grey stroke which has increased the contrast. In the process of doing the rollover's atm Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 10, 2009 Share Posted December 10, 2009 Hey, the contrast is better. I'd consider trying a white font with a grey stoke and gentle drop shadow. The layout is fine on Chrome. The text of the footer is right aligned. Not sure if it's meant to be centered or not. Have a look at these tutorials to learn how to render your link boxes with a little flair: http://www.ekhoury.com/2007/03/29/glossy-black-panel-with-photoshop/ http://www.zoomcities.com/forum/showthread.php?tid=6564 I use these sites for design inspiration a lot: http://siteinspire.net http://patterntap.com Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 10, 2009 Author Share Posted December 10, 2009 Cheers, I'll take a gander Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 10, 2009 Author Share Posted December 10, 2009 I've used one of those tut's to make a glossy" image. One of which is now live on the site. Just going to do so layout changes and will finish the others. I think it looks a fair bit better Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 11, 2009 Share Posted December 11, 2009 You glossed the panels like a pro, buddy. Well done. The reflections and the drop shadows are looking tasty too. Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 12, 2009 Author Share Posted December 12, 2009 Cheers ! Just got to start working on the additional pages. Trying to find a decent JS script for the rollovers which also preloads the images to make it more fluid. Quote Link to comment Share on other sites More sharing options...
cags Posted December 12, 2009 Share Posted December 12, 2009 Consider putting the `Contact Us` labels above the fields rather than next to them and make them a uniform width, it will look cleaner and is supposedly parsed easier by the user. Overall I quite like the design a fair bit but I do find the light grey a little hard to read against the blue background. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2009 Share Posted December 14, 2009 Not sure if you're leaving the form as it is but to be direct with you it's looking fairly dire and spoiling the rest of your layout. Here's over a dozen examples/tutorials of what a modern form should look like: http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ In terms of preloaded image swaps I'd go with this: http://www.dynamicdrive.com/dynamicindex15/domroll2.htm Not only does it give you a rollover effect, it also gives you a mousedown effect, all of which are preloaded. Have fun styling the forms! Quote Link to comment Share on other sites More sharing options...
smithmr8 Posted December 14, 2009 Author Share Posted December 14, 2009 Consider putting the `Contact Us` labels above the fields rather than next to them and make them a uniform width, it will look cleaner and is supposedly parsed easier by the user. Overall I quite like the design a fair bit but I do find the light grey a little hard to read against the blue background. Thanks for the input. I'll have a look at the form layout. And the text colour was something I considered changing. It works fine for me, and on all the other monitors I've viewed it on. But will take a look at some darker (more contrasting) colours. Not sure if you're leaving the form as it is but to be direct with you it's looking fairly dire and spoiling the rest of your layout. Here's over a dozen examples/tutorials of what a modern form should look like: http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ In terms of preloaded image swaps I'd go with this: http://www.dynamicdrive.com/dynamicindex15/domroll2.htm Not only does it give you a rollover effect, it also gives you a mousedown effect, all of which are preloaded. Have fun styling the forms! I wasn't finished with the form, no . It was just there to pad things out so I can get a feel of how it's looking. Planning to make the input boxes rounded, like some of the examples on that page. And cheers for that JS. It looks so much simpler than others I've been using. Will let you know when I've finished with these changes to get some more feedback. Thanks Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2009 Share Posted December 14, 2009 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.