2 Dec 2011

Simple design tips for non designers

A friend of mine recently mentioned to me that he is not able to look at his own applications, and wished that he had better “design skills”. I have heard similar statements from other programmers and business folks. It’s a common misconception that you need to be gifted, or as they say, have “an eye for design” to be able to produce elegant applications. For those of us who can’t stand looking at what we develop, I have put together some simple rules. These rules won’t make you a rockstar designer overnight, but they can help you avoid eye sore!

Good design is not about aesthetics
Let’s first start off with what good design is not. It’s not about rounded corners, glossy buttons, text shadows or gradient backgrounds. These are called aesthetics, and the presence of these do not necessarily equate to a good design. Good design is about structure, order and clarity. Ultimately, you want your applications to be intuitive. Your design should be the vehicle that drives home this intuitiveness. So, if all you know is good old HTML and CSS, don’t despair. Much can be done with just those two.

Colors come last
Sometimes we are just too eager to jump in and start coding. When you are designing an interface, it will be worth to start off with a pencil and paper. Visualize what you want to build as a simple sketch first. If things already look broken in black and white, the chances of them looking any better with some colors thrown in are remote. As I said earlier, design is more about structure and order than decoration.

Keep it white
Ever seen fluorescent text on a black background? I have seen lots of those! Black is a difficult color to work with, and it’s not too difficult to end up with something that’s either jarring or simply unreadable. If you want to play it safe – a simple rule of thumb is to always go for a whitish background.

Use lots of white space
Packing your screen with more and elements contributes to visual clutter. Ample use of white space gives importance to the elements on the page. Using whitespace you can group or separate blocks of content on the page elegantly, instead of relying on decorative borders or boxes with rounded corners! If there is just too much to fit into one screen, consider using tabs or moving them below the fold (in the case of web applications).

Meaningful words, and legible typography
Words are a powerful element of design. Avoid using clich├ęs like “Simplest way to do X”. Instead, use short, simple sentences that convey what you are trying to say without resorting to a flowery marketing speak. Make sure you use legible fonts.

Cut down on the variations
Use minimum number of fonts, colors and styles. With just two fonts and three colors, you should be able to design clean and uncluttered interfaces. Be consistent in whatever you do. For instance, don’t have your headers using a different font and color in every other page.

Stick to the Grid
One way to an impose order on the elements on your page is by using a grid to break down your layout into finite blocks. There are even some grid systems available, like 960, which help you do this. Often just splitting up your layout into a 3×3 area is enough to get a rough grid going. Although using grids can be restrictive, it’s a safe bet against chaos.

Use icons sparingly
Using icon finder, you can find simple icons that can complement your headings and actions. However, always use icons along with meaningful text. Also, if you are planning to use icons – make sure all the icons come from the same icon set or theme!

Imitate, but don’t steal
Stumble on something that you find stunning? Try to ask questions as to why you find it that way. It could very well boil down to using one or more of the above things effectively. Take a mental (or physical) note of it so that you can bring in such elements into your own work. However, remember that there is a fine line between imitating and stealing.

When all else fails
If, for some reason, you are still against a dead wall and still end up producing eye sore – consider using Twitter bootstrap.

If you have any other suggestions or tips, please share them in the comments.

You can follow me on Twitter right here.

Tagged with:

4 people have responded to this post.

Leave a Reply