About design

5 things to keep in mind when designing a user interface

For the last two and a half years I’ve been, essentially, an application interface designer. I’ve done my fair bit in helping define a Jabber-based instant messenger, and I’ve been responsible for the interface design of version 3, version 4 and the now in development, version 5.

So here are some points I think are absolutely essential, if you’re about to design an application interface.

1. Be involved

Don’t remove yourself from the process of developing the application. Participate and voice you’re opinion, especially when it comes to how things will actually work in the end, because you’re going to be the one making the actual visual interaction bit.

You need to understand the application in depth but also to help define it from the beginning. Remember this: when left to their own devices, programmers came up with the “web-safe” 216 color palette and CSS – two of the most horribly conceived design tools ever. Shame they didn’t have a designer around to point a few things out.

2. Know what’s standard

Some people think it’s cool to re-invent the wheel.

It’s not.

Remember Kai’s power tools for Photoshop? Those were some evil interfaces: completely incomprehensible and ultimately, an obstacle to actually using the applications. If people are used to pushing a button to call an elevator, don’t give them a sensor pad they have to do the moonwalk on in order to achieve the same objective. Just… give them a button.

So, if you know what’s standard, you can get that out of the way and go solve whatever isn’t.

3. Keep it simple…

Try to keep the interface simple: people are not going to read the help files, the FAQ and much less, the f’ing manual, so get that idea off your head. “We’ll put that in the help section” is never a good solution.

As painful as it might be, if someone doesn’t understand how to use your windows after a couple of tries, then you have to go back to the drawing board.

You shouldn’t, however, over-simplify to the point where you omit functionality. If you have some stuff you think your average user isn’t going to touch but a power-user might like, leave it there, but make it smaller and out of the way: power-users – as the definition goes – will poke at everything anyway, so they’ll get it, and if it’s not big and shiny, your run-of-the-mill user won’t get drawn to it like moths to the moon.

4. …but keep it pretty

You want to make things nice and sleek, but if your application does what others do but looks like it was made by a monkey with Parkinson’s, then people are going to prefer the one that looks like Steve Jobs might have liked it.

Once things are in place and you think functionality and ease-of-use have been maximized: glaze it. Just add that extra coat of varnish that makes people’s eyes glint. Using reflections is in at the moment, as are projected shadows, translucency and a general glassy or plastic look. We can all thank Apple for that… or curse them, it’s up to each of us.

It’s a good idea not to ignore the trends though, because people are very conditioned to respond to familiarity and in today’s world, true originality is grossly over-rated.

5. Above all, keep it consistent

Whatever you do, if you took the initial effort not to re-invent the wheel… don’t re-invent your own wheel. Choose a style and go with it. Repeat your visual cues throughout the application, don’t change shapes or colours from one window to the next, define your language and use it throughout.

Keep your headers the same, your footers the same, your buttons in the same place in every window, your font use consistent, your colour use consistent and the same goes for icon use, types of separators and aggregators, frames and so on.

Having all these things defined will help you focus on the core design of each window, improving your chances of success. It’s not easy, but it can be a lot of fun.

In closing, these are simple tips and they are certainly not new, nor are they specific to a computer application interface design. They are actually things every designer should think about when going about the task of building any sort of communication model. But I think it’s never too much to remind myself even of the most basic or apparently obvious things.

After all, if nobody ever forgot about the basics, the world would be perfect, and we’d get bored.

Have fun.

About this website

WordPress 2.2 “Getz”

Design for life is now running WordPress 2.2 “Getz”

About design

M5 Clock font

I’ve been hard at work on the new graphical interface for the SAPO Messenger project. Since it’s being re-designed from the ground up, almost nothing (if anything, really…), is being used from the previous version.

In keeping with that philosophy, I decided to design a simple bitmap font for the call clock. The call clock is basically a time counter that shows you how long you’ve been in a call. This is important because some calls cost money (although most are free), and it’s in your best interest to keep an eye on the duration.

I designed a very simple square dot-based number set, from 0 to 9, plus a colon to act as a separator. The clock will be placed over a little imitation-LCD display I created in Photoshop and it will be possible to change the background color (more on that closer to launch date…).

I think the font will work well, although I haven’t yet seen it running. Here’s a sample:

M5 Clock Font



I’ve been working on a new application icon for SAPO Messenger and decided to take the chance to make something that could be used as a replacement for the company logo.

I think the current logo illustration of the frog’s head has some basic problems and that it could be improved. So, as an exercise, I incorporated the creation of a new logo illustration into the creation of the new application icon.

Here’s what I have, so far:

SAPO logo illustration


Some recent work

Here are some of the icons I’ve been creating lately. Most of them were already done in FreeHand and I decided to dust them off and give them a new life with some Photoshop magic. Enjoy.



I took it…



Save icon


My new “save” icon. I’m not sure I’ll actually use it in the application, but… it’s done.



Megaphone icon

This is one of the oldest icons I’ve made at SAPO. It was originally drawn for the public forums and it appeared on the portal homepage in a monochromatic green-toned version.

Its second incarnation was in the instant messenger client, SAPO Messenger, as a bold, thick-outlined icon. I gave it a blue and gray palette and used the thick lines to improve readability at small sizes.

As I started to work on version 5.0 of the IM client, a new look was needed to add some visual novelty for the users, but without departing too much from the current look, so as not to create total confusion.

This is the current version: it doesn’t have outlines, just color and value, and it uses a stylized projected shadow to increase depth.

I’m still studying the possibilities with this kind of illustration for the application interface since there are still readability issues.


The trouble with icons

SAPO Messenger box iconIn my work I do a lot of icons. Not counting the countless emoticons I’ve created over the past two years, I’ve made about 160 different icons for an instant messaging application.

The application is SAPO Messenger, an XMPP client developed by a loyal team of a few dedicated people.

As we move on towards version 5.0 (and, hopefully, an English version), I am completely redesigning the user interface. Not only in what pertains to interaction logic and interface usability, but also at the graphic level. Colors are being revised, window styles redrawn, buttons improved. And then there are the icons.

I’ve been battling myself over which icon style to go for, and the fight is between an illustrative-style, strong stroked, linuxey, kind of thing or a cleaner, more realistic, stroke-less Mac-style thing.

The box above is a clear example of how good these mainly value based images look. But drawing without the help of a clear defined outline isn’t easy, and you really have to get the value changes down, in order for the forms to read well.

But with icons there’s always an extra obstacle: readability at small sizes. As with this box, most icons become unrecognizable at 16×16 pixels, and if it’s already a work of patience, attention and detail, to get the big icon to work, it becomes even more so, when you go so small.

And, of course, 16×16 is the most widely used size in the interface, due to its space-saving.

Several options are available to me right now: I can redesign the icon completely, so it reads at a small size; I can make a different version, that echoes the larger size, but is readable at smaller sizes; I can also study a way of integrating at least 24×24 pixel icons into the interface, thus eliminating the smallest size, which is really hard to draw for.

I love doing illustration, and that’s why creating icons is so much fun: you get to do a clearly defined illustration of one object, that has to convey a message. It’s illustration at its most concentrated form; just pour some cultural references and mix 😉

About this website

WordPress 2.1 “Ella”

Design for life has been upgraded to WordPress 2.1.