Very good links, I especially loved the smashing magazine article. But I always love their articles. Nice advice too. While I know the philosophy "If it ain't broke don't fix it" I dont want to just follow and copy the intuitive designs that work well for others. I feel my work should be unique, it should feel like me. It should stand out on its own and when someone sees it they say I know who made that. Kinda like when others look at the way you code they can sometimes tell who wrote it.
I share this sentiment... But I think you're getting me wrong here. Guidelines to a good UI are things that I definitely recommend you to try to apply. But even if you follow those, it really doesn't limit your own creative abilities or coding style. Granted it can mean more work for you if you wish to stay within a particular set of stylistic choices within your code, but these rough edges are often a sharpening block for you to develop a more defined and efficient coding style.
It may be a lot of work depending on your style to make tweaks and modifications to your layouts though. Sometimes it's actually easier to try to work out your interfaces in something like Photoshop, then building it in HTML. That way you can see how elements can be positioned, and what they will look like with minimal effort. (Presuming you utilize layers heavily of course.)
I understand its not gonna happen over night, I am willing to put in the time and effort but I dont really know where to start I guess. The links you've provided are a good start and they have been informative. So thanks.
No problem..! There are quite a number of UI design articles and blogs out there, the things I linked you to are a good start, granted, but reading up on practices and then applying them is the best practice you can get. And I mean
literally going through blogs and articles, point by point, and trying to utilize everything they suggest on something at least a few times in a few different ways.
The next time you hack up a little test project or want to try out some new JavaScript code, try making a good interface around it. Wonder how to use a new API? Test it out
and give it a good interface. Do this with everything.
If you are dedicated, you will become good at it in no time..!
About the Id's and the naming conventions I use, I don't like the idea of a name being allowed to be used twice, I feel it's sloppy. I understand the risks with using Id's instead of classes but I still plan to use Id's. If I make a mistake in my code, its because I got lazy or sloppy.
Classes and IDs are used for very different things. Classes are things that you can use anywhere for style or code functionality purposes, whereas IDs are definite anchors to particular elements. How you separate your CSS between the two is a large part of making modular CSS. For example, I commonly have highly general CSS classes that I can add to things, like an "error" class that will turn text red, or if it is a particular type of element, to draw a little warning sign next to it. Another common one is "loading" which will change the background with a pulser animation to indicate something is in progress.
That way if there is an error in validation, the only thing I have to do is get a handle on the element and add the class "error". Also if I am waiting for an AJAX call to return I can set the "loading" class when it starts, and remove it when it's done.
You can automate an awful lot with CSS classes, because you can use them to reference hierarchies too, so you can have a selector for "div.someclass div.content" to act on anything that was below that element with the class. This means you can make huge graphical changes with a simple adding or removing of a single class from an element.
Don't neglect tools if they prove useful. :P