How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

Question

I'm a developer ... not so much "the" UI guru type. I can get by with my photoshop skills to some extent but often find myself underestimating my time here and thinking that I'm probably not as efficient as I could be in this respect.

Anyhow, I know I can't be the only developer on earth being tasked also with the design as well so ...

Looking for some how-tos, examples, steps, etc... I can take in designing websites from the ground up and then properly "cut up" to take full advantage of CSS and as many Javascript goodies (using a framework like JQuery, mootools, etc...) as possible. A few other questions:

1. What if any pre-manufactured templates (starters) are folks using that might eliminate a lot of redundant coding?

2. What if any initial CSS stylesheets are you using by default?

3. Is photoshop still the choice of UI designers? If so, what settings should I start with in mocking up my site? And ... what is the best way to cut things up so as to take full advantage of CSS and Javascript frameworks like JQuery?

Thanks - wg

Answer 1

As a one-man army myself, I can understand your frustration. Fortunately for me, I started more as a designer and then became a developer. I've not got over a decade of experience with design, and about 7 years experience with development. Here's a few tips.

Get familiar with a good CSS Framework. Don't focus too much on being graphically-excelled at the beginning. I would suggest the 960 Grid System. It will allow you to quickly layout an entire page with very little effort, and very simple markup. Experiment with a few different layouts. You can visit the framework website for information, or watch this short demonstration video to get familiarized. This framework comes with the Eric Meyer CSS Reset - use it!

The next step for me is to plug my layout into a MVC project. Once I have that done, I tie in jQuery via the google-api's link, and begin coding my dynamic behaviors.

Answer 2

I have similar issues. One thing I always do is purchase a css template from theme forrest or one of the other css template sites. They can be picked up for as little as $10 and you can normally find a good scheme to suit the desired look and feel. This saves me countless hours and hundreds in man hour costs. I do not try to design and cut in photoshop as I really do not have enough skill to make it look good enough. I have accepted that and mvoed on. I can make a bigger difference with the enhanced ui through jQuery/ajax/services etc.