4 Image-less Web Design Tips For Developers and Engineers

By:

Andrew on 12/21/2010

Topic:

Startup Stuff.

One designer’s advice on how developers/engineers can make their sites and apps quickly look 100x better when they don’t have a designer around. These tips can be mind-bottling so be careful.

Can you whip up some crazy Rails app in a night? Do you argue with people about why you’re more of a CI/Cake/Zend person? Do you dream about ‘web scale?’ If so, then you’re a web developer and/or engineer… for sure.

Here at CarWoo! I’m the resident designer. Prior to CarWoo! I worked as a User Experience Designer and front-end web developer for 5 years. Photoshop, Illustrator, XHTML, CSS, JS… all that.

Since starting at CarWoo!, I’ve worked closely with the developers and engineers, and this got me thinking (again) about how differently designers and developers/engineers are geared.

I won’t go into a whole thing explaining the differences. We’re all aware. Designers are artsy and off in the clouds. Developers/Engineers are logical and process driven. Got it. Let’s keep this article moving, right?

As a developer/engineer, what happens when you don’t have a designer around to help you make your perfectly functioning app look fantastic? You have to do it on your own. Next time you run into this problem, remember these 4 tips that came straight from a designer’s brain.

**Super special bonus: None of these things require images… that should make all you ‘web scale,’ bandwidth wizards out there roll on the floor with joy . Seriously though, this is a great thing because it reduces the requests to the server and reduces load time which keeps people from bailing out.**

1. Use subtle gradients

Ever wonder why Apple’s desktop, web, or mobile apps look good?  Or, even why their 3rd party apps look great too? Well, one of the things they use a lot is subtle gradients.  Sometimes they are very hard to notice, but they’re there if you look closely.  For example, look at the web version of Apple’s iTunes…

Now, I’m not saying you have to take it to that extent… but using subtle gradients can definitely add some polish.  These gradients can easily be achieved via CSS.  Check out this CSS3 button generator if you want to mess around with gradients and get to know how the CSS works.

(I know some of you are going to being thinking about browser support here… just make sure you specify a fallback solid color.)

2. Use double lines

No, not double rainbows.  Double lines.  Yeah, stupid reference.   What I mean here is doubling up 1px lines.  For example, if you were going to use a 1px line to separate some content on your page or create some slick navigation…. use two 1px lines instead… one darker and one lighter.  See how Ballpark has used it on their site and app….

Using this technique can add depth and add a more realistic feel.  Just make sure to think about balance between the darker color, the lighter color, and the color behind the lines. You don’t want to make it too obtrusive or distracting.  This is definitely something to use subtly.

These lines can be created via CSS (of course).  Simply use border-bottom, top, left, right… or specify all at once.  More on CSS borders.

3. Use slight rounded corners

Like doubling 1px lines or subtle gradients, rounding corners slightly is not really detectable at first glance… but definitely add a level of polish.

You can easily do this by using border-radius.  Just remember to use -webkit and -moz.  If you don’t know what the h*ll I’m talking about, check this page out.

4. Use white space

Give your content/photos/etc. room to breathe! Your text does not need to squish up right next to photos.  Your columns don’t need to be 5px apart.  How about adding 10px, 20px or God forgive me… 40px margin/padding (CSS) to things?  See how well Checkout (the example below) uses white space.  Things feel easy to read and relaxing (minus all my hastily drawn red marks).  Your mind isn’t hunting for a focus area.  Things just flow.  You might want to check out their site to get a better feel.

Final thoughts: Dont’ use these techniques too heavily.  They can easily become visually overwhelming.  Put these ideas in your tool box for when you’re working on making your app look good.

tl;dr 1) Use subtle gradients, 2) Use double lines, 3) Use slight rounded corners, 4) Use white space = Kick ass.