6 years ago

Designing a user interface in 5 steps.

A step by step guide to designing a beautiful interface for any application. Covering everything from the color pallet to the layout to create an engaging user experience.

This article, or rather this tutorial is just a simple step-by-step guide to designing a consistent, practical and beautiful looking user interface for any web project you’re working on. It’s important that you follow through these steps in their given order to make this concept work.

1. Color Scheme

As I see it, the first thing you need to do is — pick a color pallet, and then stick to it!

You can do this with ease using a website like www.colourlovers.com, but the fact is picking the right color scheme is more than just clicking ‘generate’ or moving a few sliders around; there are a lot of questions to ask yourself— is it psychologically appealing and appropriate for your product? Does it reflect on the personality you want to create for your application? And mind you, answering these questions right is very important to its success.

Read up on the psychology of colors and make an informed decision based on your target audience.

You could also use the popular 60–30–10 rule — where 60% would be the dominant color, 30% being the secondary color and 10% as an accent color. Although this is mostly popular as an interior decorating rule, it is also known to work particularly well with user interfaces.


2. Layout

This includes everything from the number of columns to where the navigation goes. You should take care when creating a layout since it certainly affects how people interact with your application, making it an essential component of a good user experience.

Plan it so that it could be adopted to any part of the application with ease.

I’m going to go out on a limb and say that you shouldn’t try too hard to re-invent the wheel here; look at sites like Medium and DeviantART, the former is an example of a very minimal layout while the latter has a more complex layout which most certainly is very successful in its environment. And both these layouts are quite common around the web — mainly because they work, and that’s why you shouldn’t stray too far from the norm. People tend to be put off when they feel unfamiliar.

Medium.com Layout

DeviantART.com Layout

Want a free App UI Kit?

Download for free at DeviantART!

3. Style

Once you’ve completed the two steps above — half your UI work is done. Now you just need to create all the elements based on a common style.

Within this tutorial by style I mean just the common structural and certain design components of all the elements in your user interface. For example — you can say it’s the border-radius of 4 pixels common to almost all the elements or even just minimal or flat!

Create a common style for your elements by putting together a few effects such as a border or border-radius, drop shadow or inset shadow or just a use of transparency. Then like the color, stick to it throughout the user interface.

Once you’ve covered the steps above you’ve basically got yourself a strong user interface. But there is more to making it work.

The UI is only half the story. Lets talk about UX.

In this next section I will cover the steps to creating a successful user experience.

4. Flow

It’s important to note that the user interface and the user experience are not the same thing. Designing the user interface is sticking every element on to the window beautifully, the user experience is about making it easy for the user to achieve a certain goal within your application. You can say that agood UI enables a good UX.

One of the best ways to create a better user experience is to maintain a flow of content. Your user interface should speak a story, in other words make sense to the user and make things as simple as possible.

It is a known fact that 1 in 4 apps downloaded are never used again, and one of the main reason is a bad user experience.

To avoid bad user experiences, think like a typical user. Plot out the various scenarios that a user might get into on your application and then try to make them as simple as possible. It is also important that you show your interface to a typical user and get some direct feedback — a new set of eyes can give you a difference perspective; which always helps.

5. Responsiveness

These days people own multiple devices with various screen resolutions and as web designers it is our duty to make sure that our applications can be accessed with ease from all these difference devices.

Create your layouts and user interfaces in a way that they can be easily adopted to difference screen sizes. Think of Medium on mobile — this (current) online layout can easily be adapted onto mobile devices.

To Conclude

Following the steps above is one of the easiest and fastest methods to create an all-rounded user interface, and is something I use all the time to draw up user interfaces for my projects. Not only does it take into aspect the design and identity of the product, but also the user experience; which is just as important.

Want to know more about my Web UI / UX design work? Meet me on Behance.

Featured Photo source – blog.avanade.com