This step-by-step guide will help you deign beautiful interfaces for any application. It’ll cover everything from the colour palette, the layout, and how to create an engaging user experience. By following these steps you’ll learn how to design a consistent, practical, and beautiful looking user interface for any project.
1. Colour Scheme
As I see it, the first thing you need to do is pick a colour pallet – and stick to it!
Selecting a colour scheme is easy (you can just use a site like colourlovers.com), but the truth is that picking the right colour scheme is more than just clicking ‘generate’, or moving a few sliders around. You need to ask yourself a few questions:
• Is it psychologically appealing and appropriate for your product?
• Does it reflect on the personality you want to create for your application?
You could use the popular 60–30–10 rule, where 60% is the dominant colour, 30% for the secondary colour, and use 10% as an accent colour. This rule is popular as an interior decorating guide, but it is also known to work particularly well with user interfaces.
This includes everything from the number of columns to where the navigation goes. You should take care when creating a layout since it affects how people interact with your application, making it an essential component of a good user experience.
By all means, be innovative when it comes to your layout, but don’t re-invent the wheel. Look at sites like Medium and DeviantART; Medium is an example of a very minimalist layout, with very clean colours, whereas DeviantART has a more complex layout which is very successful in its environment.
These two layouts are popular around the web because they work. They’re familiar, and follow a pattern which users feel comfortable with (for example, navigation along the top, or left). If you want to stray from this path and create something unique and innovative, just remember to maintain a foundation based on what you know works – else your users may be put off the unfamiliarity of it.
Once you’ve completed the two steps above, half of your work on the user interface is done. Now you just need to create the elements based on a common style.
Your common style could be anything from a border-radius of 4 pixels, to a uniform flat theme. The style you choose doesn’t have to be applied to every element, but to enough to help tie it all together.
Once you’ve covered the steps above you’ve basically got yourself a strong user interface; but there is more to making it work. You need to consider the user experience.
The UI is only half of the story. Let’s talk about UX.
In this next section I will cover the steps to creating a successful user experience.
It’s important to note that the user interface and the user experience are not the same thing. Designing the user interface involves 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 could even say that a good user interface enables a good user experience.
One of the best ways to create a better user experience is to maintain a flow of content. Your interface should:
• Tell a story.
• Have logical menu and sub-menu items.
• Be clear to the user.
For example, in a form situation (such as a registration form) the fields should be clearly labelled, and any “next” or “back” buttons distinctly visible. Simplicity is key to a good user experience.
Massachusetts-based application analytics form, Localytics, recently completed a study in which it was discovered that 1 in 5 apps downloaded are only used once. http://info.localytics.com/blog/app-retention-improves One of the main reasons for this could simply be down to bad user experience.
To avoid bad user experiences you need to think like a typical user. Plot out the various scenarios that a user might follow within 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.
These days, most 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 of these difference gadgets.
Create your layouts and user interfaces in a way that they can easily be adopted to difference screen sizes. Just take a look at the website, Medium, on a mobile. Their current layout easily adapts to any mobile screen size.
Following the steps above is one of the easiest and fastest methods to create a well-rounded user interface. It’s something I personally use all of 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.