Design+Code logo

Quick links

Suggested search

Organized

Structure the sidebar properly with correct titles, make sure every item is categorized to avoid confusion. For example, Mail omits the word Messages from the title of each mailbox, using more concise terms like Flagged and Drafts. Also, make use of the list view when the data hierarchy is deeper than two-levels.

The less you see, the more you can focus on a few things at once. list view gives breathing room. Don't overwhelm your screen with too much structure or unneeded visual elements.

Screenshot - 6

Customization

Most importantly provide users with the ability to customize the contents of a sidebar. Why? because what may feel important to some may not to others so provide shortcuts to the content they care about so that it is more accessible to them. The more freedom you can give the users to choose between the better.

Screenshot - 7

Clarity

Make things obvious. Buttons should be self-explanatory and typography should be big and readable at a comfortable distance. Your content should clearly indicate what your app is about. For example, if it's a email app, then you should be showing all the inboxes, groups and accouts to switch.

Having a Sidebar

Having a sidebar makes navigating your app a breeze as it contains all the necessary shortcuts and links. If your app has multiple levels of navigation and contents it is suggested to have a sidebar. If your app has not more than 5 section of content make sure of the Tab bar.

Screenshot - 8

Displaying the Sidebar

Allow users to hide and show the sidebar whenever needed. By hiding the sidebar users get more screen space and when needed they can simply show the sidebar using the built-in edge swipe gesture or using the icon at the top-left corner. Make sure that the sidebar is not hidden by default.

Gesture

Adding a gesture can be an extension to an already visible interaction. It makes it easier for power users. We're all becoming power users, that's why we require less visual cues and more useful functions. For example, you can use the swipe gesture to allows users to quickly show and hide the sidebar menu from the app.

Apple's Human Interface Guide on designing Sidebar

There are many exciting guides and videos in Apple's Human Interface Guidelines that explain the Sidebar's development and design process in detail. Also guide on using the "UICollectionLayoutListConfiguration.Appearance." in SwiftUI.

Screenshot 2020-12-21 at 6.57.00 PM

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Design for iPad

READ NEXT

Design Widgets

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

ios-design-handbook-design-the-sidebar

1

Intro to iOS 14 Design

A complete guide to designing for iOS 14 with videos, examples and design files

4:13

2

iOS Colors

Learn how to work with colors in iOS 14

5:28

3

Typography and Dynamic Type

Learn to make the content clear and readable

5:33

4

Background Blur and Gradients

Creating contrast between contents using blurs and apply gradients from analogous colors

4:19

5

Adaptive Layout

Learn to make your designs adaptive to different device screen sizes and orientation

4:19

6

Do's and Don'ts

Things to keep in mind while designing for iOS

6:52

7

Design for Touch

Keeping your content reachable using different touch techniques

7:46

8

iOS Native UI Elements

Learn and benefit from using Apple's UI resources

8:10

9

iOS Icons

Learn how to find great icons and customize them

3:44

10

Design for iPad

How bigger screens affect your design

8:11

11

Design the Sidebar

How to design a sidebar for iPad

7:16

12

Design Widgets

Displaying important and useful information using widgets for quick glances

6:31

13

Animations

Good animations enhance, bad animations distract

5:23

14

App Clips

Make use of a specific feature in your app through app clips

7:05

15

Design for Apple Watch

Designing for people on the go

6:16

16

Modals

Provide more focused experience by presenting your content in a temporary modal view

6:17

17

Onboarding

Learn to design meaningful experiences with clear onboarding flows and patterns

6:51

18

Launch Screen

Hint users about loading content through launch screens

5:35

19

Design for Accessibility

Basic rules and system to improve app accessibility

4:12

20

Design for macOS Big Sur

Designing an app with translucency and sidebar layout for macOS Big Sur

6:31

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.