Designing a user interface

Tiny bits
bitmaker
Published in
2 min readDec 14, 2012

Working on a new project is as exciting as it is frustrating. So I decided to write an article about my experience on the subject as a designer/front-end developer.

We start out by prototyping, wire-frames, sketches on the white board, sticking to the basics: What is our user trying to achieve?

This process takes some decision making: prioritize and organize information. People have to figure out how your application works. You need to keep your users oriented, they want to know where they are, how did they get here and where to go next.

Next step: HTML structure. We mainly develop heavy data applications, so we start designing from the epicenter, as the good folks at 37Signals preach. Once we’re satisfied, it’s time to go back to Photoshop.

With this kind of application we keep it simple design wise. No drop shadows, gradients or textures. We focus on typography, appealing iconography and color. We want the user to enjoy this experience but we also want to provide a useful tool.

Consistency is a major concern too. If the save button is blue and positioned on the right bottom corner on one form, the user is going to expect to find it there on the next form. Keeping design elements consistent makes users recognize them much faster and figure out “what does this button do” a lot faster. Besides that we also provide feedback. If the user does something wrong we tell him why, if he did something right we also highlight that fact, so that he is also aware of his actions. We aim to keep it intuitive, every feature should be naturally understood.

In conclusion, here at BITMAKER we put function before form, we value clarity and consistency, but we do not overlook some eye candy.

--

--