One of the things that has kept me from doing freelance web work for a long time is graphics. I’ve had no training in graphic design, and very little natural talent to speak of in the artistic area. And let’s face it. In a public facing site, the look and feel is what gets a user’s attention and keeps it, and thus determines a large part of a site’s success. Your app could function perfectly and provide incredibly useful functionality, but if it looks like the web circa 1996, it’s going nowhere. So I thought I was stuck. I thought if I was ever going to be successful as a web developer, I would have to buy my graphics from a professional designer every time.
But a couple of weeks ago when the consulting company came in to demo some of their sites, I started to notice some patterns. I’m not sure what clicked in my head, but I started to see what design details made the sites look modern and professional. Now, don’t get me wrong, I’m not suddenly some master designer, but I figure if I can deconstruct what makes other sites look good, then I can try to apply some of those principles to sites of my own and start to grow my skills.
The one thing I saw almost everywhere was gradients. Seriously, take a look around your favorite site. Chances are there will be gradients all over the place. Everything from backgrounds to buttons to form borders use them. And they make a huge difference. For example, take a look at this button from the ASP.NET forums site:
Pretty basic, but still modern and attractive. Before I started really thinking about it, I probably would have settled for something flat and boring like this on a site I made:
Okay, but not great. But if we use a gradient instead of the flat blue color, and make the bottom right half of the border just a bit darker, we get this:
See how we get that “3D” effect? It’s a whole lot easier than I thought it would be. The trend right now seems to be toward what I think of as “chunky” graphics, especially on modern, “Web 2.0”-ish sites. Very simple shapes, but with a lot of depth and lighting to them. For example, take a look at Mint.com. The buttons, the leaf graphics, and the word balloons all use very simple techniques to give them a professional look. This is great for novice designers like myself. We can be trendy even while we’re still learning the basics.
One thing that helps out immensely is having a good graphics editor. As Jeff Atwood has said, every developer ought to learn to use one. And not MSPaint, you wimp. 😛 I’ve been playing around with Paint.NET, and I like it a lot. It has features that can produce some very nice looking grpahics, but it doesn’t feel crowded or cluttered with unneccessary tools. And, hey, the price is right! 😉 I’ve also heard some good things about The GIMP, if you’re feeling Linuxy.
So if you have only thought of yourself as a programmer, unfit to wear that black turtleneck, just give it a try. Download a graphics editor and try to duplicate a nice simple button or logo from a site you like. It’s easier than you think.