6 Principles of Using Drawers in Your UI UX Design

A well-designed web design should be eye-catching and intriguing but also easy to navigate. When we think about UI UX design, drawers do just that. Designs such as drawers can help us create an immersive user experience.

Drawers are UI design elements in the form of panels that slide out from the edge of the screen. They efficiently separate different types of content on the main page of a web design, generating more space without removing important information. This data is stored separately and can be easily accessed by users.

As UI UX designers, we must be familiar with the practices most suitable for designing a drawer. That way, we can decide on the size, content, iconography, layout, and other details so that our page is as attractive and practical as possible.

UI Navigation drawers are the most common type of this element. And every UI UX designer should be aware of what they are recommended for:

• Apps with five or more top-level destinations;
• Apps with two or more levels of navigational hierarchy;
• Quick navigation between unrelated destinations;

‍

1. Icon

As UI UX designers, we must take the necessary steps to make our drawers easily identifiable. The first principle of designing UI drawers is that whenever our users look at the drawer, they have to be able to easily deduce that it indicates a navigation menu. The hamburger shape is the most common, as it is widely associated with layers that make up a menu.

‍

2. Layout

Another design principle we should consider when creating drawers for our projects is how we organize them. Navigation menus have to resemble lists, and lists have entries ranging in priority. In this sense, we must anticipate which destinations will be more relevant for our users so that we can place them at the top. We should also group the related entries so that our hamburger drawer follows a logical order.

In the case of navigation drawers, the most logical position is on the left side of the page, sliding to the right when they are opened. This has become an unspoken convention between designers. A right-margin drawer, on the other hand, will cover additional types of content but not in the form of hamburger menus.  

‍

3. Content

The content of the design drawers has to be short, brief, and descriptive. Our users should figure out exactly what an entry refers to from the first reading. Understanding the main components of a UI drawer is quite simple, as in web design, they consist of a container that mainly includes headers and a body of text.

‍

4. Context

Context is another significant principle of design. Apps come with various layouts, which means the drawers that are incorporated into them should be either shown or hidden based on the context. 

‍

5. Number of Drawers

Only one drawer can be opened on a page at a time! A navigation drawer already takes up a significant amount of space when opened. Adding multiple to one page or web page would not only be visually unpleasant but also obstruct information. We want to ensure users understand everything, so this rule should always be followed. 

‍

6. Accessibility

One of the main traits of navigation drawers that every UI designer needs to know is that they block user access to other site elements when they are open. The most common way for users to close a drawer is to press an exit button. However, we can also design drawers to close whenever someone presses a click anywhere outside of it.

‍

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.

“You press the button, we do the rest.” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!