– Now you understand that UI design is actually graphic design, so start with graphic design fundamentals. They are: Drawing, Layout, Typography, Color, History.
– Drawing: understand how images are created on a canvas. Includes concepts of how to use line, shade, and color to create forms, volumes, depth, etc. Art historians talk about "color and line" in painting. Understand the distinction. Pick up a used copy of Janson's History of Art. Peruse some other books about drawing. Go to the museum. Whatever you come across. Have fun with it.
– Layout: I haven't found a great resource for this. You can have a look at Grid Systems by Josef Müller-Brockman, which set the tone for layout in the 20th century. Making and Breaking the Grid is a modern spin on grid-based layout. Read about book design since that's the oldest and most developed layout system. You can start with Wikipedia: http://en.wikipedia.org/wiki/Book_design. Generally pay attention to how websites are arranged. Is there a top-bar or a side-bar? How many sections of content are there? What is their relative proportion? How does the layout relate to the borders of the browser window? Take some time to investigate 'responsive design'. Understand what it means to design from the content out rather than from the edges in. Understand the fact that book design has a rich set of systems of proportion while web designers completely ignore this for the most part. Look up 'golden ratio typography'.
– Typography: there are a number of well-regarded classics on typography. The Elements of Typographic Style is great. But you should start with this: http://webtypography.net/. Then check out the Wikipedia entry and Google around for blog posts about typography. Once you understand the basics, then attempt an in-depth text. The most important thing to understand is that typography can be used to create structure. People who do not understand this use lines, planes, and volumes to create structure around content. A good place to learn about this is in Edward Tufte's The Visual Display of Quantitative Information (as well as its sequels). He vigorously recommends removing as much "non-data ink" as possible. Beyond structure, there is the issue of choosing typefaces. Let me just get this one out of the way: serif faces are not significantly easier to read than sans-serif faces. Beyond that, understand that typefaces are created by designers for different uses. Use typefaces according to what they're designed for. Understand how typefaces are used to create a stylistic feel, to evoke associations, nostalgia, emotion. Understand that some typefaces are expressive and some are not. The web so far has favored non-expressive typefaces. Now that we have @font-face and Google Fonts, people are going crazy using different type-faces will-nilly. Web design will evolve. Watch the documentary "Helvetica".
– Color: there are many resources on color, but the study of color is an endeavor that can last a lifetime. There are a few things to understand about color: what it is (light frequency / a sensation), how it is modelled (Newton vs. Goethe, HSL/RGB, color spaces, Pantone), how it is created, how colors are combined, the fundamental nature of each hue, and psychological meaning of color combinations. Start with the Wikipedia entry. For more scientific information, check out the IESNA handbook. Understand the difference between Newton's and Goethe's studies of color and how current theories descend from those. After them came Maxwell, Helmholtz, and others. Munsell's text is responsible for much of the exploration of color in early modernist painting (impressionism, etc.): http://www.gutenberg.org/files/26054/26054-h/26054-h.htm. Study color combining by way of texts from the early 20th century by Albers, Itten, etc. But, as others have mentioned, the only way to truly understand color is to use it. Try different combinations, see what they do. Ask questions like: why are most websites blue? Why aren't websites ever yellow? Beyond cultural associations, each color has a fundamentally different nature and use. It's not just a spectrum. Why is red so special? Notice that blue and yellow are, in Goethe's theory, the fundamental colors from which all colors are created. Does this have something to do with their neutrality? The sun is yellow, the sky is blue, the ocean is blue... what does it all mean? Why are the road signs green?
– History: web design didn't just come out of nowhere, though most web designers are uneducated and the tools have been very primitive up until the last few years, so it kind of seems that way. Find a copy of Meggs' History of Design. Understand what it is, where it comes from, how book design is the father of graphic design. Then, something crucial to understand: that web design is constrained by the concepts of the past, which were developed in a world with different constraints. Do you know how graphics were created before computers?
Unfortunately there is no good book that gives an overview of all of this material. You need to piece it together. Here's a screenshot of my library of design books: http://img823.imageshack.us/img823/7795/screenshot20120731at.... Plus you should have a library of design inspiration. I have mine spread out between LittleSnapper and ZooTool right now. Evernote is another good way if you can stand all the visual noise in their interface. Other people use Pinterest, etc.
What you should take away from this is that UI design is actually part of graphic design, which is a relatively old discipline (though still young compared to, say, architecture).
On the other hand it can be said that UI/UX rather encompasses graphic design since UX brings in the notion of user-centered design from HCI, which has its own history in psychology and the US military industrial complex. Two great historical reads here are MIL STD 1472F: http://www.hf.faa.gov/docs/508/docs/milstd14.pdf and The Ecological Approach to Visual Perception by J.J. Gibson (from whence the concept of "affordance" comes). The classic synthesis of these ideas can be found in The Design of Everyday Things by Donald Norman. Bill Buxton is another person to follow in this space. A modern synthesis of UX is About Face 3: The Essentials of Interaction Design.
— Now you understand that UX design is actually cognitive psychology + sociology. Of course, most cognitive psychology/sociology books will only be slightly relevant to UX design. Here's a short selection to get you started:
— Don Norman, Design of Everyday Objects
— Don Norman, Emotional Design
— Brenda Laurel, Computers as Theater
— Kim Goodwin, Designing for the Digital Age: How to Create Human-Centered Products and Servicesa
— Bill Moggridge, Designing Interactions
Bonus:
— Raph Koster, A Theory of Fun for Game Design (meant for video game design, but has a lot of lessons that can be applied to good UX)
For UI design, I'd also heavily recommend "Semiology of Graphics: Diagrams, Networks, Maps" by Jacques Bertin, and anything by Tufte. These titles are more about data visualization, but most UIs need a way to visualize data in some shape or form.
Thanks dude. Totally agree about Designing with the Mind in Mind. Another similar book is 100 Things Every Designer Needs to Know About People. Here's a little gem that summarizes some of that material: http://uxmag.com/articles/psychological-usability-heuristics
Excited to check out some of the stuff I haven't come across there.
– Start by reading "Magic Ink" by Bret Victor: http://worrydream.com/#!/MagicInk
– Now you understand that UI design is actually graphic design, so start with graphic design fundamentals. They are: Drawing, Layout, Typography, Color, History.
– Drawing: understand how images are created on a canvas. Includes concepts of how to use line, shade, and color to create forms, volumes, depth, etc. Art historians talk about "color and line" in painting. Understand the distinction. Pick up a used copy of Janson's History of Art. Peruse some other books about drawing. Go to the museum. Whatever you come across. Have fun with it.
– Layout: I haven't found a great resource for this. You can have a look at Grid Systems by Josef Müller-Brockman, which set the tone for layout in the 20th century. Making and Breaking the Grid is a modern spin on grid-based layout. Read about book design since that's the oldest and most developed layout system. You can start with Wikipedia: http://en.wikipedia.org/wiki/Book_design. Generally pay attention to how websites are arranged. Is there a top-bar or a side-bar? How many sections of content are there? What is their relative proportion? How does the layout relate to the borders of the browser window? Take some time to investigate 'responsive design'. Understand what it means to design from the content out rather than from the edges in. Understand the fact that book design has a rich set of systems of proportion while web designers completely ignore this for the most part. Look up 'golden ratio typography'.
– Typography: there are a number of well-regarded classics on typography. The Elements of Typographic Style is great. But you should start with this: http://webtypography.net/. Then check out the Wikipedia entry and Google around for blog posts about typography. Once you understand the basics, then attempt an in-depth text. The most important thing to understand is that typography can be used to create structure. People who do not understand this use lines, planes, and volumes to create structure around content. A good place to learn about this is in Edward Tufte's The Visual Display of Quantitative Information (as well as its sequels). He vigorously recommends removing as much "non-data ink" as possible. Beyond structure, there is the issue of choosing typefaces. Let me just get this one out of the way: serif faces are not significantly easier to read than sans-serif faces. Beyond that, understand that typefaces are created by designers for different uses. Use typefaces according to what they're designed for. Understand how typefaces are used to create a stylistic feel, to evoke associations, nostalgia, emotion. Understand that some typefaces are expressive and some are not. The web so far has favored non-expressive typefaces. Now that we have @font-face and Google Fonts, people are going crazy using different type-faces will-nilly. Web design will evolve. Watch the documentary "Helvetica".
– Color: there are many resources on color, but the study of color is an endeavor that can last a lifetime. There are a few things to understand about color: what it is (light frequency / a sensation), how it is modelled (Newton vs. Goethe, HSL/RGB, color spaces, Pantone), how it is created, how colors are combined, the fundamental nature of each hue, and psychological meaning of color combinations. Start with the Wikipedia entry. For more scientific information, check out the IESNA handbook. Understand the difference between Newton's and Goethe's studies of color and how current theories descend from those. After them came Maxwell, Helmholtz, and others. Munsell's text is responsible for much of the exploration of color in early modernist painting (impressionism, etc.): http://www.gutenberg.org/files/26054/26054-h/26054-h.htm. Study color combining by way of texts from the early 20th century by Albers, Itten, etc. But, as others have mentioned, the only way to truly understand color is to use it. Try different combinations, see what they do. Ask questions like: why are most websites blue? Why aren't websites ever yellow? Beyond cultural associations, each color has a fundamentally different nature and use. It's not just a spectrum. Why is red so special? Notice that blue and yellow are, in Goethe's theory, the fundamental colors from which all colors are created. Does this have something to do with their neutrality? The sun is yellow, the sky is blue, the ocean is blue... what does it all mean? Why are the road signs green?
– History: web design didn't just come out of nowhere, though most web designers are uneducated and the tools have been very primitive up until the last few years, so it kind of seems that way. Find a copy of Meggs' History of Design. Understand what it is, where it comes from, how book design is the father of graphic design. Then, something crucial to understand: that web design is constrained by the concepts of the past, which were developed in a world with different constraints. Do you know how graphics were created before computers?
Unfortunately there is no good book that gives an overview of all of this material. You need to piece it together. Here's a screenshot of my library of design books: http://img823.imageshack.us/img823/7795/screenshot20120731at.... Plus you should have a library of design inspiration. I have mine spread out between LittleSnapper and ZooTool right now. Evernote is another good way if you can stand all the visual noise in their interface. Other people use Pinterest, etc.
What you should take away from this is that UI design is actually part of graphic design, which is a relatively old discipline (though still young compared to, say, architecture).
On the other hand it can be said that UI/UX rather encompasses graphic design since UX brings in the notion of user-centered design from HCI, which has its own history in psychology and the US military industrial complex. Two great historical reads here are MIL STD 1472F: http://www.hf.faa.gov/docs/508/docs/milstd14.pdf and The Ecological Approach to Visual Perception by J.J. Gibson (from whence the concept of "affordance" comes). The classic synthesis of these ideas can be found in The Design of Everyday Things by Donald Norman. Bill Buxton is another person to follow in this space. A modern synthesis of UX is About Face 3: The Essentials of Interaction Design.
EDIT: fixed links