UI design pattern tips: slideouts, sidebars and drawers

Thus, designing effective navigation in your web application is crucial. Since the slideout is in a separate layer from the main content in the application, there’s a lot of flexibility in terms of how content can be laid out inside the drawer – icons, text, and even simple controls are viable options to provide quick access to important actions here. The problem
The user needs a way to navigate between different sections of the app without being distracted in each individual section. Asana, Spotify (search box), and Facebook (chat boxes). In this series for Creative Bloq, Chris Bank of UXPin, the UX design app, discusses the importance of navigation design patterns and details examples from some of the hottest websites and web apps today. – is tucked away in a collapsible panel hidden under the main section when it is not needed. If they can’t navigate through your your application easily, you’ll quickly lose them. Meanwhile, for more examples of web design patterns, download UXPin’s free e-book, Web UI Design Patterns 2014. It’s an easy way to hide all the less important things in a «side drawer» so that you only have to focus on how to distill the most important information in each view. The New York Times sidebar acts like a contents pageExamples can be found everywhere. Some more specific examples include Houzz, which has a sub-navigation drawer that disappears as you scroll down and reappears back at the top; and the New York Times, which hides a side drawer that appears on the left when the user clicks the ‘sections’ button at the top left side of the page. The solution
Spotify’s search box slides out on the left when neededA secondary section of the application – such as navigation, chat, settings, user profiles, etc. There’s a wealth of info in Medium’s side barOften times, the drawer can be hidden under a «hamburger menu» or a simple arrow that indicates there’s more content there.