So you suck at design!?

Oh this is a topic all to familiar to me. I, my friends, am a developer. I am not artistic, I cannot match colors, and some may even say I can’t dress well. Well if it wasn’t for all those being somewhat true… I’d argue. The artistic and color matching part I can somewhat help, myself and others.

As many of your projects may start out you get a blank cursor and you are staring at the screen wondering what’s next!? Well here is where I can help. There are many wonderfull template sites out there and they all want to show you their work so that you buy the finished product. Many of them have super busy and rich content, some are flash and have music (which I detest and strongly recommend not doing[the music not the flash]), and some just seem so complex that you will never figure it out.

As a developer you will be discouraged by the templates and be tempted to just buy them because you have spent all this time telling yourself you stink at design, and what could someone with your artistic ability possibly do without that template. Let me tell you something, even if you buy the template you will still be a CSS / design noob and you won’t be helping matters by getting that template. Often you will be asked to make changes, and stray from the original design. This is when that all too familiar feeling comes back.

Well, guess what? It’s ok, most designers aren’t truly artistic. There are folks who can match colors using the naked eye, but if they by some off chance found themselves in the web design world …. they cost way too much for us simple folk. I talk to people all the time that say they can match colors and make things look pretty. Most of the time they are full of shit. ( pardon my french ) Not many are dedicated enought to learn Photoshop, HTML, CSS, standards, practices, browser quirks, etc. so that they can become those good high paid designers. As a developer I got sick of being lied to so I took it upon myself to figure out what these magical creatures that make things pretty do.

So where to start? First off you need to know CSS. “But I don’t have time!”, you say. Ok, fair enough. Here is a good resource for those of us that know how to code but don’t feel like reading a damn book.

http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/

just in case you are looking at this and that link is dead… google “CSS Cheat Sheet”. Another great resource is Smashing Magazine! This site is a virtual treasure chest of information. I hope they stay around for a long time because it’s gold.

http://www.smashingmagazine.com/

They have tips & tricks, tutorials and so on. Go there, read and learn. It is a designers dreamland! (ex: You want rounded corners? They have tutorials, and links on how to do that!)

Ok so now you have a CSS resource and a great resource for design ideas tips tricks and so on. This still leaves you un-armed, after all… how are you supposed to know where to put stuff on a page? How do you make a site look 2.0ish( I loathe the term Web 2.0 )? Anyway, personal opinions set aside there are a great deal of ways to get ideas! I for one have probably tried them all, I remember that at one point in life I tried to go to Barnes and Noble and buy a book on how to be creative… effing nerd !

At any rate, I suggest trolling template sites and getting ideas. Keep in mind that the focus of a website is to allow people a view into your business process. If you make your site too flashy, crowded, or complicated it will suck and people will not use it. I don’t want to have to read an instruction manual on your site. I will leave and troll the interwebs. So what do I mean by this? What’s an example of a good site vs. a bad site design ?

.:: Good ::. [ VS. ] .:: Bad ::.

The good template is not busy, the content is arranged well and it clearly displays its purpose. The second template is crowded, the header takes up way too much real-estate, and I feel like I am going to have a seizure when I look at it. Sooo… what are two sites you can browse for template ideas?

http://www.templatemonster.com/ and ..
http://thelogocompany.net/website-templates/

Once you understand CSS and how to position things with it and so on, recreating some of these works becomes easier. Now keep in mind I’m not saying copy these folks, I am telling you that you can take a template as a refference and create your own similar version… Think… Java vs. C# …. hehehe.

Anywho, those sites will give you ideas. But what about matching colors??? Well that exact question spawned this post. So you have an idea of a layout, you know your CSS well enough to be dangerous, but what about colors? You’re a geek afterall. Well the answer is simple! I will give it to you in some simple steps:

1. Pick a color you like (or one you found on the web you liked).
2. Get yourself Paint.NET, or if you have Photoshop hooray!
3. Print screen on the browser or whatever. ( Alt + Print Scrn in winders, or Apple Shift 3 )
4. So now you have a screen of the site, banner, whatever. Paste that into a new document in Photoshop or Paint.NET.
5. Use the Eyedropper tool to get a HEX representation of the color you want.
6. You can’t build a site on just one color so let’s go figure out what fits! http://www.colormatch5k.com/
7. Move the RGB Sliders until the first color out of the six matches the one you want( the right most color to the right of the sliders and the first color are the same ), and the HEX codes match.
8. Blamo… you now have a six color pallete to use on your site. If you think you need more think again! Six is plenty, add more and you will eff up the look.

Q: How do I match up the HEX ?
A: Simple! The color #877E01 is really a hex representation of RGB. So when you move the R slider you want to adjust it so that the first 2 numbers will be 87. When you move the second slider G, you want the middle two numbers to be 7E… and so on.

Q: What is HEX?
A: Makes me think of the t-shirt that says “practice safe hex”. Ahem, nerdarism aside, it’s hexadecimal. For our purposes you just need to know it means a color.

Q: I like to spend money! Is there a comercial color matching product?
A: Yep, http://www.genopal.com/index.htm.

So, now you are armed with CSS, a layout you like and a color pallete. Wahoo !! What’s next? Font ! Durrr ! Two things are important when you are looking for a font.

1. It is a common one that most people have, I happen to be a big fan of Verdana ( or you can use flash to solve that issue, although that is kind of an advanced technique… Google “sIFR”)
2. Font color, which this article can help with: http://designersmind.com/articles/choosing-the-right-font-for-the-job

So, now that you know what font you want as well… you may wonder how you will get the Photoshop skills!? Simple, go back to Smashing Magazine and poke around. Here are two links to go with that:

1.http://www.smashingmagazine.com/2007/01/12/hand-picked-photoshop-tutorials/
2.http://www.smashingmagazine.com/2007/04/04/adobe-dreamweaver-tutorials/

Well then, it looks as though you have the CSS skills, a layout, a color pallete, a good idea of what fonts you should pick, and some Photoshop tutorials. The best advice I can give you at this point is to just play around. Remember that you don’t have to stick to just the new raving DIV only layout. Don’t be afraid to use tables! Just use them sparingly. They can be a huge help!

So, as I said. Designers have a ton of help, tip & trick sites and so on. They’re not magic or mystical or smarter. They’ve just been involved with the work longer and have a strength you don’t. So while you won’t reach the level of a good artist, you can at least make stuff somewhat nice and visually pleasing.

That’s all I can think of for now, other than to say LOOK AT AJAX! It is making the Web suck a little less one site at a time! Warning!! Shamless plug …

Not my book so it’s not so shameless I guess. A great site for Ajax is http://ajax.asp.net. ( note: there are tons of ajax libraries out there, Ruby on Rails has a great implementation, you don’t have to stick to ASP.NET, but thats what I use and Visual Web Developer is free! [Note: If you are doing anything enterprise level please do yourself a favor and get Visual Studio 2005 Pro or higher.. If your boss won't fork the cash over, warn him, document it, and start looking for a new job. ] )

Anyway…. leave comments if you have questions. If you want to call me a design nub, spare your fingers the typing I already know it.

</rant>