UI — From research to product.

Creating an effective UI (User Interface) — especially for bigger systems — is a challenge. A lot of time and effort has to be put into such a system to make it easy and intuitive to use while still including a dash of brand identity.

If you're creating a UI for someone else it can also be quite hard to align the wishes of your customer with the requirements of good UI design.

So, how exactly do I go about dealing with new UI projects?

Research

Now, I know this may not sound like the most exciting to do but knowing who you're designing for truly does wonders. Knowing your users intentions and expectations allows you to build a UI specifically designed to let them do whatever they need or want to do.

A lot of time goes into researching, you could start by asking — or surveying — your target audience, asking them to use a similar product or asking your UX/UI design friends and colleagues how they would go about creating a product like this are all ways you could do your research.

Personally I don't make too many corporate user interfaces, meaning I usually get enough information to get going by asking my friends, family and colleagues.

Wireframes

Wireframes are an easy way to sketch a UI in a way that's understandable to everyone. Most of these wireframes consist of shapes and lines to indicate where different elements are supposed to go without having to go out of your way to create something functional.

There are many ways you can go about making wireframes. If you're looking for something simple, just grab a sheet of paper — I prefer to use a dot grid — and start drawing! If you're looking for something more complex however, you could look for an application that fits you to make your designs in. Many of these programs allow you to add animations and button events to your wireframe, so you can make something truly eye catching. I like using Figma for my wireframes — and other projects — because of its cloud based, easy to use editor.

Prototyping

Once you're sure that the wireframe you've made before — or not, no judgement here — is up to standard you'll want to start making prototypes of your design. Prototypes are basically a glorified wireframe and a very early version of your final product, they should be interactive and allow the user to do something.

Ask a few people from your target audience to test the prototype, write down what they have to say and see if there are any improvements you could make to your UI. Your target audience is who you're making your product for after all.

Product

After you think you're done prototyping and your target audience doesn't have any more suggestions for you, work the prototype into a product. Make sure everything works as intended and looks good. You now have a product you can deploy.

A few tips

KISS - Keep It Simple Stupid: It's important to keep your design as simple yet effective as possible. Keep styling the same everywhere and keep barely used options out of sight as this may overwhelm the user.

Consistency: You want to create a strategy for styling your elements so that they remain consistent throughout your UI. This makes sure your users feel familiar and comfortable using your interface.

Clarity: Make sure your text is easy to read and there's a sense of purpose in your use of text sizes. If done well, your typography can increase read- and scanability.