8 Common Sense Tips for Creating Clean Designs

Here’s something most people don’t know about me: although I have been doing design work for the last 5 years, my first job was as Flash Developer, doing mostly programming in ActionScript. In fact, my entire educational background is about computer programming and I never took any design course whatsoever.

Still, at some point I decided that I like design much more, especially designing for the web. So I’m not a guru programmer and I’m not a great artist either. I’m just a guy with an eye for clean, professional looking design, who knows a thing or two about web programming.

I’m sure many people are wondering: can someone with no education in design still create good looking websites? Yes, I think they can. How? By using common sense! Here are my 8 common sense tips to creating clean designs:

1. Layout

If you want to be not only a good designer, but also an efficient one, you should learn how to make your life easy. No need to reinvent the wheel. Just use one of the common web layouts. Slicing and implementation will be so much easier.

2. Color Scheme

Don’t go head first into a design. An important step of creating a consistent design is to determine a color scheme. If you already have a set of brand guidelines (or at least a logo) to work with, then you’re almost good to go. Otherwise, use an online color schemer. Another cool place to look for color inspiration is Kuler, a project from Adobe Labs.

3. Transparency

Yes, that’s right! Transparency is your friend. Transparency can help you lighten or darken colors. I always like to place a solid square or trace a line, then play with Alpha to get the desired effect. Transparency is also a great way to add more colors to your color scheme. Just place a black or white square over one of your colors, then try various Alpha percentages. You can see the result in the image above.

4. Contrast

Not much to add here. Always make sure that your text is easy to read. Remember not everyone has 20/20 eye vision, so make it easy on those people to access your content. Otherwise, they will leave the next second. Of course, there are time when you have to make use of a lower contrast, but nobody can convince me black text on a red background is good for anything.

5. Typography

As with color, a set of brand guidelines can save you some time. The problem is when you don’t have any guidelines or you’re the one that has to set some standards. If you are not sure what font to use, don’t start using all kinds of wacky fonts. Typography is probably the most important aspect of a brand, so it can easily mess it up. A great resource is I Love Tipography, a blog devoted to all things typographical.

6. Gradient

Have you ever seen those very obvious gradients, from a very dark to very light? I hate those gradients! Well… of course there are some great designs that make good use of those gradients, but in most case they are plain ugly. If you want to use gradients, use two colors that are close to each other. Otherwise, it will be difficult to find the right color for the text. In fact, make good use of transparency and you have a winner! Just my 2 cents…

7. Images

With some many sources for high quality stock photos, it would be a shame to use poor quality images in your designs. My personal favorites are iStockphoto and flickr Creative Commons (read about licenses first). You should also carefully choose the file format when exporting images, so that you have the best quality possible, without making the file very large.

8. Web Bling

I left this one for last, because I hope most people have gotten past the whole “animated GIF’s, crappy cliparts and in your face drop shadows” madness of the ‘90. If not, I have two words for you: CSS gallery. Watch and learn!

9. Ok, so I lied!

I know all this is basic stuff for an experienced designer and I don’t expect eternal gratitude for sharing any wisdom. The article is for people just starting out with web design, in order to have some ground rules for designing clean, professional looking websites.

My last tip and probably the most important one: if you’re somewhere in the middle, not knowing whether to choose design or programming, choose whatever you love most. If you don’t truly love design, don’t choose design just because everyone is doing it. The web is full of crappy designs. It’s better to be a rockstar programmer than a mediocre designer.