The User Interface Design Process and Tips

The user interface design process is something that takes quite a decent skill to handle well. Along with a skill for interpreting complex data and processes into simple visual concepts, it also requires an artistic flair for color, font styles, a strong sense of space, and a healthy understanding of eye tracking and psychology or sociology.

Yeah, the user interface design process requires skill. But, even if you’re not the skilled individual who has had this task put upon you, if you’re designing SaaS, web sites, or software, you have to deal with this process in some form. If you can’t afford a skilled, experienced GUI designer for your project, and have to hope you can mimic the skill well enough yourself, well that’s kind of scary, right?

Even with IDEs making the implementation of the GUI very easy (versus procedurally generating it in code), that creative problem solving flair isn’t removed as a need. Well, there’s no accounting for an utter lack of competence, but understanding some simple steps, and considerations, for the process will give you a chance of at least launching a nice enough user interface for launch (but if you find you’re adequate at best with it, when you can afford a pro, get one). See some graphical user interface examples.

First, it varies when the user interface’s design is begun in a project. Sometimes, it’s after a lot of main functionality and mechanics which compose the software’s processes are already implemented. Other times, the interface is designed in parallel with building the underlying code. The latter is more common today, but both approaches happen.

Either way, you have at least a flow chart of what the software is intended to do, and how it will work internally. From here, you start working out what input and output are necessary for the program to genuinely do what is needed.

From here, tasks are compartmentalized, and with familiarity with the target platform, a general layout, such as a wireframes, paper prototypes and sketches, give a general view for where things will go, and what leads to what in what order.

Now, you work out the best sense of space for this, and at this point, you make basic mockups that show the sizes of buttons, placements of text boxes and layouts of menus.

If the mockups pass UX testing, and nobody has complaints or suggestions to change it, then you begin worrying about wording, fonts and colors. Don’t try to skin your design to be fancy, just use the nicer looking API-native controls, and a wise combination of fonts and complimentary colors.

A final note is that consistency in similar forms, naming themes and similar navigation patters is very important as well, so if you choose schemes, stick with them throughout. Otherwise, it’ll damage the UX badly.

The user interface design process is a lengthy one, even if it starts later in development, and it’s something that requires some definite talent. But, if you can’t get a pro, and you pay attention to what successful companies do, and follow the advice given above, then you’re in good shape. I recommend looking into some design books either way.

For further information please visit graphical user interface design examples page.

GUI design examples

Megan Wilson
Megan Wilson is user experience specialist & editor of UX Motel. She is also the Quality Assurance and UX Specialist at WalkMe Megan.w(at)walkme.com
Megan Wilson on sabtwitterMegan Wilson on sablinkedinMegan Wilson on sabgoogleMegan Wilson on sabfacebook