24 Jul 2017, Mariusz Sojka 24 Jul 2017, Mariusz Sojka Most Popular [Designer’s tips] 10 principles of modern UI design 1995 views Creating an app interface is a complex task which requires a cooperation of business analysts, programmers, and graphic designers. When it comes to designers, the terms such as UX and UI are often used interchangeably in the first phases of the development project. Let’s begin with bringing both these terms closer, as they constitute the key phase in the whole mobile app development process and give the app its final look. User Interface (UI) Design differs greatly from User Experience (UX) Design. The term User Experience is defined as “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service” and in case of apps, includes such aspects as the overall skeleton of an app, how it works, and how it can be used by the end-users. Once the app skeleton is ready and having set the information structure, the navigation, and the final flow, it’s time to create the visual concept of the app. UI Designer work is always based on wireframes created in the UX phase. At this stage, no significant changes to app’s operation are made. Instead, what matters now is how the app looks. In theory, UI phase seems easy but in fact, UI Designer faces a crucial problem of finding a visual concept that will fulfill both the numerous prerequisites of each project and the general rules of graphic design, which in case of UI, are quite distinctive and interrelated. In this article, I am going to describe 10 basic rules of UI Design, which are crucial for every project and constitute the core principles of creating an app interface. 1. Follow UI guidelines Each development project dedicated for mobile devices must follow the UI guidelines recommended by the platform for which it is created, the most popular being Android and iOS. Each available platform has a set of rules, guidelines, and recommendations which help a UI Designer to decide on the look, size, and location of each interface constituent. Such rules are important on every phase of UI Designer’s work because by following them, he makes the app intuitive to use by a certain target group. It also enables the UI Designer to suggest out of the box solutions that will be both useful and native. 2. Get to know the user Knowing for whom the design is created is crucial for each app development project. It determines not only how the app works but also what it looks like. Among the important target-group-connected factors that may affect app design, the following should be definitely taken into consideration: age and sex of users, situations in which they will use the app, goals they want to achieve using the app, and how often and in which time of the day they will use it. A good UI Designer should begin his work with an in-depth analysis of all these factors and then translate them into a design project. “Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs 3. Interface design is not an art Although it may seem that a beautiful design is just attractive and nice-looking, in fact, what makes it pleasing for users is how it fulfils their needs. A good design project cannot be only visually attractive – it has to be intuitive and useful, above all. These two factors are exactly what make an app pleasant and easy to use. In app design there is no place for intuition or designer’s own taste. Each decision in the project has a reason and is based on a rational, valid premises. Therefore, user tests are an inevitable part of each development project, being the best way to find out whether the project is not only pretty but also fulfils its goals. 4. Keep it simple Minimalism has become the main rule of designing for the internet and mobile devices in the recent years. The term ‘minimalism’ stands for a broad concept including numerous aspects which make the interface easy to use. Such aspects include, above all: transparency, simplicity, visual hierarchy, fulfilling each element’s goals, elimination of unnecessary details, adequate aspect ratio, careful choice of typography, and suitable layout of the white space (or negative space). Combining all these aspects is now easier thanks to the trend of ‘flat design’, which simplified the design of applications and introduced many important issues. “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” – Antoine de Saint-Exupery 5. Use grids To make the design process easier, UI Designers use grids which help them to place all the elements of a certain screen basing on the geometrical layout of vertical and horizontal lines. Grids changes from one project to another and UI Designers use them on each level of the design process while setting the location and size of the elements. 6. Stay consistent An app interface project is usually quite complex and it often includes working on many different screens of the app. Still, to make the app easy to use, a UI Designer has to remember of keeping the same style of all elements included in the project. Of course, it is good to break this rule from time to time – to direct users’ attention to a certain element and make them do something within an app. 7. Establish the hierarchy of elements Setting a certain path which will lead users through the app can be achieved by establishing a right hierarchy of interface elements. An adequate combination of colors, sizes, and distances helps to attract users’ attention and achieve the set goals. 8. Have multiple devices in mind The mobile market offers hundreds of different devices, varying in terms of parameters and screen sizes. A good app design project should be compatible with different screen sizes so that it can be accessible by the most possible number of users. Moving from one screen to another is now easier thanks to the introduction of the universal unit of measurement – ‘dp’, which measures the real size of each separate element depending on the DPI of a screen and its diagonal. 9. Make use of contrast & color Each of these elements plays an important role in graphic design, both being closely interrelated at the same time. While creating a color scheme, a UI Designer has to consider multiple factors, such as branding, users’ tastes, or places and situations in which the app will be used. There are many rules defining which colors should be used in which situations but in general two main shades of a color are used – the primary for the background and the secondary for accenting certain elements. Contrasting the elements is crucial when it comes to readability and helps to interact with the interface. The contrast ratio should be in line with the 4.5:1 principle, which helps to find the right shades for the main colors in the application. 10. Use metaphors Users learn faster when the elements of an app are recognized by them or refer to the experiences they are familiar with, both from the online and offline world. UI Designer can also base his project on the previous users’ experiences and use them in designing a new interface. Therefore, it is good to use the proven schemes or default styles of icons, buttons or navigation elements – thanks to them the interface seems familiar and intuitive. Key takeaway The above-mentioned issues are crucial in UI Designer’s work. However, it shouldn’t be forgotten that the final decision about how the app will look and work is made by its users. Therefore, it is worth to consult each phase of an app with coworkers and the client, as well as with end-users. Are you no planning to develop your own app? Choose the software house which graphic designers know how to create outstanding visual concepts. Check Ready4S portfolio. Mariusz Sojka UX/UI Designer you might also like 30 Mar 2017, Daniel Zięcina UX/UI UI Trends: Can Apple compete with the latest UI movements? UX/UI 30 Mar 2017, Daniel Zięcina UI Trends: Can Apple compete with the latest UI movements? Apple creates a new set of UI guidelines for iOS app design. Is it a step forward in Apple design? Check the opinion of our UI Designer, Daniel Zięcina. 24 Jul 2017, Mariusz Sojka Most Popular [Designer’s tips] 10 principles of modern UI design Most Popular 24 Jul 2017, Mariusz Sojka [Designer’s tips] 10 principles of modern UI design What are the basic rules of UI Design? Our UX/UI Designer, Mariusz Sojka, shares 10 closely guarded UI secrets. 04 Oct 2017, Project Management 10 most common question you ask your app developer Project Management 04 Oct 2017, 10 most common question you ask your app developer Your app developer speaks the language you don't fully understand? Feel lost among technical terms and complex definitions? We answer the most common questions you ask.