I’m a developer, and I find that I have a hard time dealing with graphic and visual design. It’s as though the part of my brain devoted to abstract reasoning swallowed up the visual part.
There are a pile of awesome introductions to various programming languages that assume a certain level of sophistication with programming. Are there any such tutorials for HTML and CSS? As in tutorials that approach HTML and CSS in a similar way?
Failing that, what good web design tutorials might you guys recommend?
HTML and CSS are just means to an end. 20 years from now we may have something different, but design fundamentals stay the same. From your question, I think you want to develop a sense of what is visually pleasing and usable and have the understanding to implement such designs.
Along those lines, look at magazine layouts; look at professional advertising; look at logo design and try to pick out the things which make them distinctive. Look at websites which are popular, easy to browse, easy to read.
Take the things you see and like and try to incorporate a little of that into each design you build. Some of the tools (like Photoshop) can be daunting at first, so don’t try to conquer the world. Just make each design better than the last.
Here’s a real, doable example that starts with only minimal knowledge:
Read some tabular data from a database; as a programmer, I’m sure you know how to do that.
Read a tutorial anywhere on HTML tables. Their structure involves only 3 major tags and a handful of supporting ones. [See footnote #1]
Put the data in the table with no styling. Looks terrible, right? Now identify why it looks terrible. What is not pleasing to the eye? Compare it to a clean layout on another site that you like.
Examine small details like padding and margins and learn the basic CSS rules to implement those things. In doing so, you will begin to develop a sense of fundamental usability and aesthetic guidelines (such as the importance of well-placed whitespace).
Now take one of those “daunting” tools like Photoshop and accomplish a really simple task. Maybe it will be something as simple as cropping an icon or creating a simple gradient for your table heading. Pick a task, and find a tutorial if you need to.
This all sounds extremely simple, but you would be surprised how many developers never bother to even try.
Another Example
Fonts make a huge difference in the aesthetics and usability of a visual design. Start by perusing a few major sites and looking at commonly used fonts. Do a little reading on what fonts are commonly used in print, and why.
Now take a technical approach. What fonts can we safely use on the web? What tools are available to us as developers to embed custom fonts?
Armed with this knowledge, create a plain page and try styling a small news article (cut and paste the raw text from somewhere; it doesn’t matter).
Choosing a good font will improve the design. But what about headings? Special styles like drop-caps? It’s all there in HTML and CSS; start reading best practices on semantically structuring documents and how to implement different styles.
At the end of this exercise, will you be an expert? Of course not. But you will have discovered a whole set of new technical avenues that you should pursue further like semantic structures, the HTML document model, and CSS text-styling directives.
You may even come across multi-device/accessibility topics, such as how to accommodate screen readers.
As a designer, you will begin to understand the level of effort which goes into something as “simple” as styling text and you will start to develop that intangible sense of what “feels” right. The better you get, the more your audience will share that feeling.
My Opinion
It’s a common misconception that developers can’t/shouldn’t be visual designers. I disagree; engineers should understand end user experience, heuristics, and aesthetics. Not everyone can be a great visual designer, but I have taught many people the basics and their designs are always a cut above the rest (even if they aren’t perfect). I have also built my career upon being comfortable with the most technical and the most user-facing aspects and frankly, it’s a lot of fun. Nothing is off-limits.
Links
A List Apart – Code Articles – Great articles on specific technologies, but make sure to not miss out on other general design articles.
Color Theory
Color Palettes
Printed Text Guidelines – Extremely applicable for certain types of websites.
CSS Basics – straight from the W3.
[Footnote #1] – to any HTML/CSS developers: I am not suggesting that the OP build table-based layouts; just suggesting that they take a familiar data structure and get a sense for the tasks involved in styling it.