I find one of my weaknesses in developing an application is the "visual" aspect to things. Most of the work I do is web work; and I tend to focus more on the functionality coding and leave the UI end to my more web design skilled co-workers. I really want to become less reliant on them for my applications; and wish to be able to produce clean; good looking pages on my own.

- I know how to use photoshop (not too well, but I know the basics)
- I know how to use CSS
- I know how to do HTML layouts

The issue really is bringing all these aspects together to form a good looking page.

I look online for tutorials and read up on this subject; but a lot of people do not really know good web design; so a lot of tutorials are useless. Despite not having the ability to create "good web design", I do have a good sense of what good web design looks like; so I tend to be picky about whos methods I try to learn/use. What sites and books have you read to improve yourself as a web designer? What exercises have you done to practice? I'm just looking for general guidance.

Any help is greatly appreciated

Thanks!

For CSS work I have relied heavily on W3Schools, they have some great stuff as far as CSS, and even JavaScript and HTML/XHTML. For design ideas I always go to Good-Tutorials for ideas. I don't follow or use the tutorials themselves, but Ive got some good design ideas from combining different aspects of things there. They even cover Flash, 3D Studio Max, Ruby and more.

Other than that I have used a lot of trial and error, and have accepted the fact that it takes time to learns some of this stuff, and that I also have a design team for a reason, and I had to learn to use them, thats what they're for.

Jason, you say you have a good idea of what good web design is. Really that is the most important part, the creative side is always much harder to teach , some are born with it, and some aren't.

psdtuts.com its a graphic design site, but have a couple of good tuts on aesthetics and such.

When I need to make a good design, unless I have a very specific theme/style I already know of, I tend to browse around and pick ideas that work. I check www.freecsstemplates.org for ideas and to get a good visual for what would match the data and controls I am trying to present.

If you don't have it already, you should definitely get the firefox addon Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) . You can tweak all sorts of css options directly on any site to see what it would look like.

And of course a web color chart - http://www.johncfish.com/bggallery/otherchart/index.htm
I like this one because it is laid out so you can see the colors shift without having the distraction of contrasting colors on either side or the background. The sliding bar controls is a nice touch too

A little reading up on color schemes is usually good idea. Choosing the correct colors seems to be a problem with a lot of web designers
http://www.colormatters.com/colortheory.html
I don't even know whats going on here but it looks useful
http://www.wellstyled.com/tools/colorscheme2/index-en.html

And of course the best test is to get a few people who have no idea what your site/app is supposed to do or be, come and click around.

mocker, that is some good links you have provided.
Try visiting CSS Zen Garden
to appreciate the power of CSS

This post has been edited by ajaymatrix: 7 May, 2008 - 01:34 AM

Thanks for all the resources and suggestions guys. Tonight I will take some time to go through them all.

Typically, I start a design with a sketch. Draw the layout on paper. It's (usually) much faster than using a paint program (that can still be used later). It can be horribly messy also since it's just a sketch.

It will give you ideas on functionality and since you already know the technology, you're less-likely to design things that aren't really possible/practical -- you can design within your and the browser's limits.

You'll be able to jot down notes on how things should animate or how the user should navigate throughout the page(s), and if you're artistically inept, it doesn't really matter so long as you can make sense of it yourself.

You'll be able to tell in an instant whether or not the layout really works or if it needs more thought (most likely, it will). Actually translating what you've sketched into what you have in mind can be tough though, and will definitely take some time.

If it's a very complex web site, this may not work so well but for the typical personal or small business web site, a simple sketch can do wonders for rapid development long before you even start writing any code.

IMHO.

Better design...it's a fun thing to talk about, and all of us will give different answers. Design is an artform, and most people develop their own personal style. Practical Web Design is a GREAT journal for web designing (and they have neat tutorials as well).

Personally, and I know some have reiterated this, sketching out your site. You want to know where you are going to place all of your elements. How it will be organized.

While I am setting up the layout, I'm at the same time thinking how I want the page to look. Are there any specific themes? Particular graphics that will be a cornerstone for the look of the site? How do I display a very professional, clean design? Some small general suggestions, white for business, other colors for specialty (while avoiding obnoxious colors) sites. Black is usually best for alternative websites (ranging from adult sites, to simply odd (and perhaps slightly deviant) hobbies). These color schemes are NOT rules...just some very basic guidelines. I've seen some awesome business sites in a black background.

Another thing to keep in mind...emphasis. If you emphasize everything, you emphasize nothing. Pick one or two parts of your design that you want to pull the attention of the reader. Keep in mind, most people will glance at a website for about 10-15 seconds before deciding if this site is for them...that's it...so draw their attention quickly to what you feel will "sell" your site (kind of a neat trick is close your eyes and then open them and see where your eyes land on a website naturally...and that is generally the strongest emphasis point).

My suggestion to work on your designing skills is make static websites. Doesn't take long, and you'd be surprised with what you can do with some pictures from the internet and a little gimp/photoshop/fireworks time. I usually just use fireworks.

Try to mimic sites. Some of my earliest ventures into web design (usually to learn CSS, but also design as well) was to copy other sites. I spent a lot of time in csszengarden.com. Also, David Shae (founder of css zen garden) has written a book...and it covers a lot of ground from css techniques, to design.

You might find this site frivolous, or really great, or neither, but it makes me laugh and has what I consider to be some really good design principles (not used on the site) - http://www.webpagesthatsuck.com
If you read through and get the basic ideas behind why web pages suck, it becomes easier to tell at a glance how your own designs are shaping up. Just my $0.02 though.

My general guidance is to basically go out in the world and not to worry about finding and using web design tutorials as much as signature and graphical design tutorials to get used to the programs, and I you trudge through enough tutorial you will pick up some interestign tricks and cool techniques. Then just apply them when you are making a website skin.

Additionally, I tend to start out with an idea for a website (liek what I am going to do on the website, or its functionality) then I go off and create a rough draft skin in a graphics program. After that it is just revising and coming up with a final product (though this can include redoing the skin up to 4 times for me). Finally, cut and code.



I tend to agree with that statement, sadly I am not the artistics one in my family, I have been practicing getting my web design to be 'good' for 3 years now, and I believe that I have finally found something that is getting there.