Back

Golden Principles and Rules of Good UI Design

Share:

Animation, interaction, and immersion are the main principles of user interface design in 2022. The new year brings numerous trends in web design with it and further develops individual areas. It is already clear - in terms of web design trends, 2022 has a lot to offer.

Given that more than half a million new sites are created daily on the network, you need to be able to stand out from your competitors properly. Attractive design and user-friendly intuitive interface are the keys to success. Based on the example of UI design theory, you can evaluate the level of customer service. A recent analysis of Forrester Research shows that well-thought-out and flawless UI design can potentially increase customer conversion rates by up to 200%.

The '80s and 90's are coming back, typography is taking the lead, and live animation is reaching popularity. Looking at the visual, high tech, as well as quirky-designed websites, will be leading the way. Overall, 2022 will be diverse and experimental. Let’s look at these principle and rules in more details.

Simplification and Intuitive Design

Simplification and Intuitive Design

In 2022, many brands will focus on implementing interactive trends. The main principle of user interface design is to simplify the process of interaction with the user's site and follow minimalism and simplicity. The easier it is to get information, the better. Users no longer want to spend a lot of time exploring content. That is why clarity and intuitiveness are in demand this year.

The simplification of the UI design includes:

  • White space. The strategic use of white space (or negative space) will be one of this trend's manifestations. By using white space wisely, designers can keep the page layout simple, help users focus on essential pieces of content (or call to action), and make their site more suitable for dynamic scrolling. Besides, white space doesn't have to be white only - it can be of any color. The main thing here is emptiness with no contextual meaning.
  • Thumb design. Over 50% of the world's website traffic is now generated via mobile devices. Therefore, designers will continue to make their websites mobile-friendly, for example, optimized for "thumb scrolling." In this regard, a simple and intuitive basic UI design is critical.
  • Dynamic scrolling. Dynamic scrolling (also known as single-page scrolling) means that all of your content is contained on one page. This trend works hand in hand with the previous one. It is opposed to sites where users have to click to go to another page. 
  • Split-screen design. The screen is conventionally divided into two content panels and collapses into a vertical block in the user interface on a small device. It allows you to create content that works well on different gadgets and looks good. In addition, the information in such an image is easier to read and find faster.

Thus, we see that the main trends will include all ideas that will simplify basic UI design and user comfort. Moreover, in 2022, companies will offer several design options. The user will be able to choose the most pleasant interface for him, corresponding to their preferences.

Consistency

Consistency

Make the design consistent. Consistency is a fundamental principle of user interface design. It clears the confusion. Maintaining an overall consistent look and feel throughout the application is essential. Concerning the mobile application, the sequence means the following.

Visual Consistency

Functional sequence

External Consistency

Fonts, buttons, and labels should be consistent throughout the application.

Interactive elements should work in the same way in all parts of your application.

GUI design must be consistent across multiple products. Thus, the user can apply previously acquired knowledge when using another product.

Here are some UI design best practices for creating a consistent layout:

  1. Comply with platform standards. Every mobile OS has standard interface design guidelines: Apple's Human Interface Guidelines and Google's Material Design Guidelines. Follow the design guidelines of the OS to ensure the best possible experience when designing for native platforms. The reason it's crucial to follow design guidelines is simple: users become familiar with the interaction patterns of each OS, and anything that goes against the guidelines causes problems.
  2. Don't take UI elements from other platforms. When creating an app for Android or iOS, don't port UI elements from other platforms. Icons, functional elements, and fonts should look natural. Make the most of native components so people can trust your app.
  3. Make sure the mobile app matches the website. This is an example of external consistency. If you have a web service and a mobile app, make sure they both have similar characteristics. This will allow users to make seamless transitions between the mobile app and the site. Inconsistency in design (such as a different navigation scheme or a different color scheme) can lead to confusion.

Minimum Actions (The Three-Click Rule)

Minimum Actions

What is the user interface design principle? Make navigation simple. Helping users navigate should be a top priority for any application. Cool features and compelling content don't matter if people can't find them. Also, you'll just lose users if it takes too much time or effort to figure out how to navigate your product. Users should be able to explore the application intuitively and complete all basic tasks without any explanation.

The main help here is the rule of three clicks. The 3-click rule is a persistent, unofficial heuristic that states that you should never take more than three clicks on any page to access the information you want. This is a simple way to evaluate the ease of interaction when searching for information.

The following UI design best practices are most important for good navigation:

  • Make sure menu items are specific, understandable, and avoid vague or unfamiliar terms.
  • Set a clear location on the site (e.g., breadcrumbs, local sub-navigation) so users know where they are.
  • Avoid multi-level hierarchical dropdown menus in favor of mega menus. Mega menus typically display multiple levels of information hierarchy and allow users to compare multiple solutions  at once to understand which "neighborhood" they should be exploring. They also support simple error correction. Hierarchical (or cascading) dropdown menus are often buggy, require precise mouse movements, and only show one piece of an IA site at a time.

Limiting the amount of effort required to access key information or complete a task is important. Therefore, take care of good site navigation to make the content clear and understandable.

Design For Feedback

Design For Feedback

Just adding a block with comments to the site is not enough. You also need to adapt its design and make it convenient for visitors. The following UI design principles will help additional features of the programs for comments on the site.

1. Reviews for the site

Google automatically indexes review services for the site. They have an adaptive basic UI design and look good both on a computer and on mobile devices. It is better to choose a font and colors for reviews either in the site's subject or as easy to read as possible. Create a nice contrast. You can also optionally connect to the mailing list, which contains an invitation to leave a review.

2. Online consultant

Online chat supports the social authorization of users. If this option does not suit you, then you can start a conversation anonymously. After the user is authorized in the chat, the moderator receives their data: name, photo, email address, and links to social networks. This will allow you to target customers and offers more accurately. When choosing a GUI design for an online consultant, the main thing is to make it noticeable but not annoying. Modern users are increasingly annoyed by full-screen pop-ups. Therefore, it is better to choose a small widget in the brightest color of the site.

Offline messages are also a good choice. If the moderators are not online, the consultant will simply receive messages and then send them to the moderators' mail.

For small projects with a small budget, free review widgets for the site are best suited. But they have little or no additional features. So, pay attention to take the best option for your business. 

Dark mode

Dark mode

The dark theme interface has broken all records in terms of popularity. It has numerous fans who are firmly adhered precisely in this GUI design option. The choice of design in dark contrasting tones contributes to the relaxation of vision, relieving the eyes of unnecessary stress. The display of highlights is more successful with a dark background when you can carefully consider every detail. This contrast allows you to create a modern and practical interface.

The dark graphical user interface design principle can offer a bright, refreshing alternative to more traditional color templates. It promotes easy falling asleep and does not affect the quality of sleep. Many users note that they activate the dark theme in everyday life. In fact, even Google Chrome is optimized for "dark mode" browsing. Also, it is recommended to turn on a dark background if you use the device before going to bed.

Dark mode combined with OLED (organic light-emitting diode) can extend battery life. Many large companies have already implemented dark UI / UX design themes in their own digital developments. It has become a classic that will always remain in fashion.

Minimalistic Design

Minimalistic Design

There are more and more characters accompanying users on the websites. They help to navigate the structure and, at the same time, demonstrate the products. For example, they offer to look into the next tab or pick up a bonus. No need to bother with drawing shadows, realism, and anatomy. Trends favor wrong proportions.

Minimalism and line art. These UI design principles allow you to save time on drawing faces, folds of clothes, and other nuances. The first is characterized by simple lines, neutral colors, and clean textures. Line art will appeal to lovers of neat patterns. Such pictures do not need to be painted over. It is enough to leave thin contours.

Minimalism lovers decided to experiment with effects. Moving objects may change the color or size of the font. 3D models or animations complement website typography.

Minimalism and statistics. Brand development data can be represented using statistics. It should be understood that the study of complex tables, graphs, and charts on a small scale requires more time and is not always justified. For many years of work, thousands of operations have been performed. The most interesting ones should be placed on the site. To attract the attention of the visitor, choose rich colors and large elements.

Bottom Line 

How not lose yourself in the pursuit of trends? Most of the 2022 graphical user interface design principles were invented decades ago. There were no technologies that our contemporaries owned in those years. Canadian designer Bruce Mau believes that it is impossible to achieve complete similarity, but the differences can be truly outstanding. Perhaps, as a result of experiments, you will find your own unique style and start a new trend.

We are working on our online service so that you can use it to construct your portfolio website. Visit our site to see the best examples of online portfolios and our blog, where you can read interesting articles that provide useful and effective tips for creating your portfolio website.

FAQs 

What are the main UI design principles?

Simplicity and interaction are the main principles of UI design. The easier it is to interact with the site, the better the user experience will be. 

What means UI design?

UI design is the work on an application or website interface so that the user is intuitively understandable and visually pleasing to contact with it.

What's the difference between UX and UI?

UI and UX designers deal with different aspects of the same product. A UX designer focuses on how a product works, while a UI designer focuses on its appearance. A UX designer creates a system, organizes and structures information, and an interface designer gives the system shape and color - this is how the product is obtained.

Does UI design require coding? 

Great UX design doesn't require coding skills. While not required, there are many cases where learning to code can benefit your overall UX career.

An online portfolio made for Creatives

With all the tools a professional needs

  • Dynamic Grid
  • Even Rows
  • Golden Ratio
  • Square Ratio
  • Align Center
  • Puzzle
  • Random
  • Horizontal
  • Horizontal 2
  • Horizontal 3
  • Vertical
  • Two-One
  • Three-One

Get started for free

Create your online portfolio website now

Build your own portfolio