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.

[MyDixieWrecked]

I think it's rare for one guy to be really good at both graphics and code.

Well, being a graphics guy AND a code guy, I'd say that you're right for the most part. Most people I know who are good in graphics are terrible at code (they just don't have the mind for it), and people who are good at code generally suck when it comes to design.

However, to simply learn how to achieve an effect or to take a piece of art and modify it in such a way that it can make a nice site.

the only real problem is that you wind up with these sites that have beautiful graphics when looked at individually (like, a great dropshadowed frame for something), but it doesnt' quite fit properly with the rest of the site or the spacing is all wrong.

you really need a designer, not just to make sure the site actually looks good, but also because doing the graphics AND the code for any kind of large-scale project is really too much work for one person to do.

and now a shameless plug for my site.

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).

Re:Core competencies.

[catwh0re]

I know this is going to sound a bit unusual, but here goes anyway.

Coding a website and designing a website occur in two different sides of the brain, one side of your brain is creative, the other is more analytical and methodical. Swapping sides of the brain through the day isn't a good idea for productivity. It's very difficult to be creative after a stint of coding, and it's very difficult to code after sitting and drawing from your imagination. (This is pretty easy to test, many graphic & web designers will volunteer that it's difficult to draw anything other than symmetrical geometric designs after having coded for a few hours) It's actually policy at a few web design companies I know of, that staff may not code and design on the same day. One or the other, but not both.

Another good example of this is why fabulous linux applications tend to have incredibly poorly designed interfaces/workflow. These short comings in design belie their coding genius.

There is also a trend to follow here... people who use one side of their brain more frequently than the other, such as coders using the left side of their brain all day, are more likely to be completely useless when it comes to using their creative side. Overtime a person can become a better coder or creative simply by having conditioned their body to using one side more than the other. The short of it is that if your job requires you to be technical, a coder, methodical or analytical.. then just hire a creative to do the creative work and set them a brief of the things the website must contain.. on their worst day they'll walk all over you. (As you too would walk all over their coding. Graphic designers are as likely to copy snippets of other websites code, as you are likely to copy clipart and graphics from other webpages.)

Re:Core competencies.

[Metasquares]

An easy strategy to avoid that is to devote some time to design using an application, like Photoshop, which requires no coding. Once the design is finished, put it away for a little while, return when feeling more productive, and code it up.

Some of my best creative work took place after coding, though, so I'm not quite sure this is true.

re

[D'Sphitz]

well if you suck at art you'll probably suck at graphic design. over the years i've become pretty proficient with photoshop and fireworks, but i still contract out for designs simply because i don't have the creativity to come up with new stuff for every website.

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.

Re:re

[MrNaz]

Agreed, and I'd mod you up if I had points. This is true of just about anything. Highly skilled professionals like doctors aside, just about any field can be learned with a degree of proficiency sufficient to be usable as long as the person first realizes that there is nothing mystical or magical about a field they know nothing about. It never ceases to amaze me how people look on simple jobs like unblocking a drain or changing a fuse as though it requires some mystical magical skill that only The Enlightened possess. The same goes for things like graphic design and programming. Many here will remember the day they first did a "Hello World!" program, and went on to acquire programming skills without formal instruction. I know that was the case with me. There is another post here on /. about learning electronics from scratch on your own, this idea applies there too. Whenever I discuss education with people, I try to get them to understand that one does not need to pay large sums of money for the privilege of sitting in a room with hundreds of other students to have a lecturer read to you out of a book. Just buy the book and read it yourself. So you don't have the paper proving you read it, but if the skill is for your own use in your own business or endeavor then what does it matter? Just learn as much as you need for the purpose you need it for, and if the level of skill required for your job is too high then find someone who has that level of skill. So learn how to make your 3d buttons, drop shadows and glossy headers but if you need complex animated widgets and a nice logo from scratch then perhaps hiring a professional graphics designer with lots of experience me be appropriate. Guage your needs with the time investment needed to bring yourself up to that level.

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:Take some art lessons...

[nizo]

I second the suggestion to take an art class. I recently took my first art class at the local community college, and realized that I am indeed capable of drawing more than stick figures! Since then I have taken a photoshop/illustrator course, and have dabbled with some 3D tools (see my deviant art page in my sig or my profile to see examples of things I have made). Don't let others (or more likely yourself) talk you out of seeing what kind of artistic talent you have. Now not only can I code php, but I am on my way to learning how to create icons and honest to goodness art (both traditional and 3D).

Web designer???????

[zappepcs]

First, start off by googling for examples of BAD web design. If you can avoid those, you're 15% of the way to your goal.

Second, Look for web design award sites. If you can absorb what they did right, you're 30% of the way there.

Third, ask yourself why there is a difference between losers and winners. If you can figure it out, you're 60% of the way there.

Now, actually get hold of a web graphics program. If you need me to tell you what the names of them are because you can't find it using Google or other search engines, then this advice is really not going to do you any good. Then painstakingly work your way through all the menus and what each option can do. Google for help if you need it. If by the time you have done this you have not acquired all the general knowledge you would get in a 2 year course, you have saved yourself the cost of 2 years worth of school, and can move quickly on to the 'do the stuff you know how and outsource the rest' method.

Fourth, I have explained to you what should be common sense. If this doesn't seem like common sense, you might want to consider a new vocation.

Re:Web designer???????

[DebateG]

I recently finished designing a website to be used heavily by several hundred graduate students each day. I initially thought that looking a websites that won awards would be a good way to brainstorm. I was really wrong. Nearly all award-winning websites are terrible designs. Sure, they looked pretty and used all sorts of fancy Web 2.0 designs, but in terms of usability, they were horrific.

Websites need to be functional and easy to use before they're pretty. I agree that art classes would really help you turn a boring website into a nice one, but you have to focus on usability first.

Instead, this is what I did:

Pick a company or large organization that you do business with (IBM, Microsoft, Red Hat, UPS, MIT, etc). Go to their websites and look for commonly used features. If you can't find them in 2-3 seconds, the website is bad and move on. If you can, study what they did.

Good luck.

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.

Re:Depends on what you are trying to acheive

[Magic5Ball]

Yes, reverse engineer, practice, but importantly since web design isn't just art for art's sake, remember your audience. Even the best tabloid print ad in the world is likely to suffer from usability issues if copied directly into a web page...

Just another good tutorial site.

[Durrill]

I'm a straight up software developer. I often develop server/client technologies and sometimes I'm asked to build web components for access/interactivity. Simple enough, but usually when I present an end product I'm asked to buff it up a little. Make it look smooth and professional, like millions of dollars was invested in to it.

I'm sure, like many others on /., its easy to imagine what you want to put together, but building it can be challenging. A friend of my in the industry introduced me to this http://www.pixel2life.com/ where I can find many tutorials and tips/tricks for web/graphic design. Its largely community driven, so it has a large variety of talent and techniques devoted to it.

I'd recommend it as a place to start.

What not to do.

[MikeFM]

The worst thing about most website design is that people have no idea how to make anything usable. People present way to many options on a single page. Or the opposite problem where you have twenty pages each with two links and a lot of artsy graphic crap. What's the worst though is when you have a PHB that thinks they know best how a site should be designed so you end up with something pretty lame.

Don't learn web design from either programmers or graphic artists because both typically do a shitty job and definately don't learn from PHBs.

The first thing to do is to read everything you shouldn't do. There are lots of books and online resources for this and while some of them will conflict they will at least give you a good idea what things don't work. Realize that not all websites have the same purpose so not all rules will apply to every site and some people just plain have different ideas about what is good and bad. Knowing your audience is very important. Then you should study some basics of art like how to proportion and layout graphics and what colors work well with each other and to learn some styles that might work for you. Figure out which parts you can do well and which you can't. I typically hire someone to do logos and major artwork for me but I do the page elements such as borders, backgrounds, buttons, menu options, etc and I do the HTML and stylesheets that make it all work. Ask the opinion of other people, that aren't all like you, from time to time to get an idea what works and what doesn't. Geeks like things very orderly usually and graphic artists like things with over-the-top flair but most users like something in between. Even simple things like removing the line under links can greatly confuse your average user even if it does look a lot better and if you mark the links in some other way.