Best Ways to Learn Graphics Design for the Web?

ConceptDog asks: "I consider myself a fairly good web programmer. In fact, my job evolved from just fixing PC's to being lead designer for most of the new web applications for my company. I'm comfortable with formatting things using CSS, however the one thing that has always escaped me is designing custom graphics for my sites. I'd like to be able to create buttons and interesting backgrounds to punch up my designs and use in other media (Flash for example). I've always had a problem with art. I really can't draw a straight line with a ruler. What are some methods and resources others with more language oriented backgrounds have used to help make the step from just a web programmer to a real web designer?"

Comments

Core competencies.

[XanC]

Economics: do what you're good at, and trade for the rest.

I think it's rare for one guy to be really good at both graphics and code. Find a graphics guy, and create a partnership. You do the code for his projects, and have him do the design for yours. Or simply pay him. He'll charge a lot less than he would to create the whole site for you (which most of his clients might want), since you're only asking him to do the part he really likes and is really good at.

Re:Core competencies.

[Nik13]

That's the best advice! Others have said "check other good web pages and try to imitate them" or "read some tutorials", but that's coming from people that don't really know what web design encompasses. Web design - like design for any medium - is FAR more than that.

You'd have to learn about ALL KINDS of artsy stuff, things like using color palettes to your advantage, fairly advanced typography (most people have NO idea how much stuff there is to learn right there), how to make visually appealing stuff in general, how to use white space properly, and so much more.

Ideally you'd have to take art classes, perhaps specialized web-oriented courses, read a lot of books (many classics) and magazines (like Before & After or countless others), read hundreds of articles on countless web design oriented websites (like alistapart, 456bereastreet, etc)

And there's MANY other things one should look into, such as usability and accessibility.

Then you can worry about knowing how to use photoshop and other apps (flash, etc) to make things (and rounded button tutorials or such)

In short, too much stuff to learn, much like if a designer wanted to become a "real" programmer (gotta learn OOP, various languages, XML, databases, various libs and frameworks, etc). You usually don't want to spend that much time learning something that often seems not so important or not very interesting, and it's not usually worth it (being a *good* programmer is hard enough, and there's already WAY too much stuff to learn). And if you don't learn it in depth, you're just not going to produce very good results (e.g. another bland website that's much like all the others, and nothing like what you see on csszengarden).

Try designing some site logos and such (even just on paper). You'll see it's not as easy as it seems!

I stick to what I do best (programming), and let the designer guys take care of the rest (even though I can handle some basic design stuff just fine).

Take some art lessons...

[Fallen Kell]

Truthfully, go take some art lessons. You will be surprised that it just might help you out. Even just a few weeks of lessons might be enough to train your "eye" so that you can better understand what looks good and how to go about accomplishing that task. I had several classes when I was in 6-10th grade at the University of the Arts in Philadelphia. They had summer programs as well as weekend programs for people interested in learning. Those courses really helped me out a lot when I was younger (I'm graduated from college now and have been working several full time for several years). I do not personally get to do a lot of graphics anymore, but from time to time, I do get the chance. It helps that I also took classes in computer graphics programming in college and know a lot of the theory of what to do (i.e. color spaces to use, proper techniques to scale images and points, etc., all of which have come in handy as I have written programs to do things like re-scale and shift click-maps for images (long story, but basically the application that made the image click maps would always generate the html code so that it was shifted several pixels in both the x and y planes as well as scaled .6 smaller in the x plane, and .63 in the y plane, so I wrote a program to read in the html page and correct all the image map coordinates by appropriate amounts)). So long story short, some local colleges and local art schools will have several classes that they offer which will give you some basic idea of how to start. As for flash and animation, well, I highly suggest leaving that up to people who have spent several years of their lives taking training in the subject. It can be very difficult to work with. Especially dealing with the different versions of flash in existance and coding/drawing the frame movements. You would be surprised how bad some flash can look and how poorly it will perform if you do not do it correctly (there are always many ways to skin a cat, but in flash only 2 or them will run nicely).

Re:Take some art lessons...

[rlanctot]

Good idea, actually. I think places like Drawspace (http://www.drawspace.com/) are very useful.

Re:re

[MrWGW]

As a graphics designer (among other things), I vehemently reject the notion that graphics design is some magic art that only a circle of "gifted creatives" can practice. This, I cannot help but believe, is sheer balderdash, created by designers to reinforce the illusion that they are indispensible wizards. Though I was interested in art from day one, and cannot speak from personal experience, I believe that it is possible for anyone to develop the creative skills neccessary to become a good artist or graphics designer, and the fact that the poster has shown an interest is probably the single greatest hurdle. With that said, I would reccommend the following course of action: 1. Go to a bookstore and take a look at the various books they might have on graphics design, perhaps picking up one or two of interest. Visit the galleries on aiga.org. Learn to appreciate graphic design as an art, study the works of the great figures in the discipline (Paul Rand, William Golden, Saul Bass, Massimo Vignelli, et cetera), and get an understanding of the differences in style and the subtleties of different types of graphics. 2. Before deciding whether or not to commit to graphics design, download an open source app and play around with it. Try various typographic treatments, try creating web buttons, and do other practice work. See if it's a process you find enjoyable. Keep experimenting until you start to really like what you see. 3. If you have trouble coming up with design ideas, you might try playing a computer game that requires or stimulates creativity regarding design - building houses in The Sims would probably be the best example of that. If you like what you see in your studies of design, then I would encourage you to pursue it further. If you find typography, color management, and the other aspects of the discipline to be exceedingly dull after studying them for a bit, then you should probably avoid wasting your time (and your clients money) going after it, but don't come to that conclusion until you've played around with it. Remember, though, it's a serious discipline, and you won't achieve good results unless you respect it.

Depends on what you're trying for...

[gbulmash]

Graphic design is a much different beast than illustration.

Graphic design is the understanding of how colors, shapes, text, empty space, and images all work together in conveying a message (not just the substance of it, but the gist of it, the emotion of it, etc.), and applying that knowledge to the message you have to convey. It's like layout on steroids. And while some graphic designers draw all the parts of their designs, some primarily use clipart, photos, and text without doing any drawing at all.

Road signs use graphic design. The side of a cereal box uses graphic design. The tray liners at McDonalds use graphic design. Graphic design is communicating visually, not just textually.

If you're looking for ways to make buttons, there are lots of books and web sites full of Photoshop tips for doing that. Anyone can make a button. A graphic designer makes a button that is the right color and size to fit into the larger concept so it feels like a part of the whole rather than a random element slapped in.

The best way to learn graphic design, IMO, is to look at things with a critical eye. What makes other designs work for you or not work for you? When something looks amateurish, try to isolate the elements that make you feel that way. When something looks really slick, try to isolate the elements that make you like it. Over time, you'll get a better feel for what makes a design look slick or look sick, and that will be your greatest aid in better design.

- Greg

Re:Tutorials.

[aywwts4]

Just throwing him to a wild pack of unfocused tutorials wont help him at all. While he will certainly be able to make embossed buttons and glossy pages, without a firm grasp of art color theory or design his pages wont look much better than a glossy myspace. I really recommend starting with color theory, reading some books about user interfaces, and studying what differentiates a good design from a bad one, and the answer certainly isn't glossy buttons.

RESTRAINT AND CONSISTENCY

[gtada]

You can always find somebody else to do the graphics, but it doesn't sound like this guy is looking to do cutting edge, avantgarde graphics.

Speaking as both a coder (10 years) and an artist (Art Center grad), I know it's not that hard for a coder to do tasteful graphics. Practice RESTRAINT AND CONSISTENCY. Use 2-3 fonts max per page. Borrow or steal nice layouts and color schemes. Simplicity will usually get you further than overloading your work with elaborate graphics.

It really isn't difficult to do tasteful graphics- just don't go overboard.