A huge part of User Interface Design is on how your software looks. The look is important, it’s not just a nice gimmick it controls what your users feels about your application. A professional graphics design is hard to create and requires a lot of creativity, experience and knowledge.

As most of us indie developers don’t have such a designer at hands, we need to help ourselves. Indeed a simple design that is eye pleasing and carries a message isn’t that hard to create. It just takes some time and research. Wanna know how? I will tell you!

Five simple steps

Step One: Determine your Style

What is your application about? Do you make some kind of retro-game-remake, a web 2.0 application, a developers tool or maybe games for kids?

Write down what you product should feel like and what people you want to reach! Extract some keywords that would describe that style. Just like “Retro”, “Elegant”, “security”, “warm”, “scifi” or something like that.

Step Two: Pick a Main Color

Every colors carries a message, and you need matching ones to create a pleasing overall look. So which one should you choose? Sometimes it is not a hard decision, but if you have problems finding a direction you may want to have a look at this model from The Nature Of Emotions by psychologist Plutchik. In step one you determined what your product should feel like, try to find it in the model:

But I think you should not take it too serious, just use it as inspiration! You want your retro-pong game to have the retro-green-on-black look? That’s fine!

Step three: Get a color scheme

Got a direction? Now head to Adobe Kuler! It is a webpage that features tons of rated and tagged color schemes. Enter some of your keywords or search directly for your main color

I am sure you will be able find something nice!

Step Four: Pick a Font

The web provides an enormous selection of free fonts. My favorite site is dafont. Just enter your product title into the “Custom Preview” box and start searching for some of your keywords. You may also want to browse the categories. Get yourself a small selection of possible fonts.

Step five: Experiment

Fire up your favorite image editing application (If you don’t have one give Paint.NET a try. Now start experimenting. Try out your fonts, select different colors from your scheme for background and foreground. Start with just placing your products name and maybe some subtitle as centered text onto a plain background.

Here are some tips:

• Don’t use too much color on big surfaces. (including the background)
• If your title consists of multiple words: Try using 2 colors to get a highlight
• Try using a line as a separator
• Try using filled rectangles for separation
• Got some images that match your color scheme to use as a background? Great! Give it a try!
• Keep it simple! It’ll be great!

Two small Examples

A Retro Pong Game

This is a small example for a game menu. The style should remind of tech from past times, green on black terminals and such stuff.

I found the following nice color scheme on Kuler:

On dafont I looked through the LCD category and found these two

After some experiments I got this one. Well it’s nothing fancy, but I think it’s good!

A poetry website

Now to something completely different this one shall be a small framework for a poetry website. Let us search for heaven, clouds or nature on Kuler. I chose this one:

Searching the calligraphy category on dafont I stumbled over this nice font:

Let us make a small banner from this:

Conclusion

I think I have shown you a simple and quick way to develop a style and design direction for your application or website. It does not need much talent, but you can achieve a lot.

I really would like to hear what you think about this article. And tell me if it was useful to you. I would also be glad to see some results of this!

Regards,

Dennis