How to Design Navigation for Large and Small Screens
Through 8 video lessons (50 minutes total), User Experience Designer Donna Spencer will teach you everything you need to know about the most essential navigation elements.
You’ll learn how and when to use: horizontal and vertical menu bars, tabs, dropdowns, buttons, mega-menus, links, carousels, cards, footers, and breadcrumbs for both websites and mobile applications, plus the basics of Information Architecture and sitemaps.
Watch the course preview
1. Information Architecture and Sitemaps
This lesson will show you tips about broad and deep hierarchies, classification schemes, and how to come up with your Information Architecture and Sitemaps.
2. Navigation Design Fundamentals
Navigation refers to all the elements that help people move between screens, on websites and mobile apps. It also helps them understand what the content is about.
3. Horizontal Navigation for Large Screens
Navigation for a website can be dealt with bars, tabs, drop-down menus, mega-menus… Learn pros, cons, best practices, and how to organize your navigation elements.
4. Horizontal Navigation for Small Screens
This video lesson will teach you the differences between bottom bars and top bars for mobile navigation, and how and when you should use them.
1. Information Architecture and Sitemaps
This lesson will show you tips about broad and deep hierarchies, classification schemes, and how to come up with your Information Architecture and Sitemaps.
2. Navigation Design Fundamentals
Navigation refers to all the elements that help people move between screens, on websites and mobile apps. It also helps them understand what the content is about.
3. Horizontal Navigation for Large Screens
Navigation for a website can be dealt with bars, tabs, drop-down menus, mega-menus… Learn pros, cons, best practices, and how to organize your navigation elements.
4. Horizontal Navigation for Small Screens
This video lesson will teach you the differences between bottom bars and top bars for mobile navigation, and how and when you should use them.
5. Vertical Navigation for Large Screens
Bars, flyout and accordion menus, combined menus: everything you need to know about vertical navigation for large screens and websites packed in a short video.
6. Vertical Navigation for Small Screens
Vertical navigation for small screens is usually hidden behind the Hamburger menu. Watch this video for pros, cons, and a little trick that can help your users.
7. In-Page Navigation
A lot of navigation happens in the page itself. Carousels and cards are the 2 most common kinds of in-page navigation, but you can use hyperlinks, too.
8. Supporting Navigation
Breadcrumbs at the top and footers at the bottom of the page are elements that help support your other navigation. Watch this video for tips and best practices.