Gallery
See what others have created
zarna
@zarna
Navigation and search
Design the navigation and search system for a content-heavy web app. The screen should help people move between top-level sections, jump to specific pages, and refine results without losing orientation.
Focus on the shell around the content: global nav, secondary nav, search field, and result filtering. Show how the system behaves when search is idle, active, and empty. Include a clear hierarchy for primary destinations versus utility actions like settings, help, or account.
The layout should scale down cleanly on smaller screens. Show how the nav collapses, where search lives on mobile, and how users get back to the current section after filtering or drilling into a result. Keep the pattern simple enough to scan, with one obvious path to navigation and one obvious path to search.
What to deliver
- Design a primary navigation bar with active, hover, and collapsed states.
- Design a search entry point with expanded, empty, loading, and no-results states.
- Design a filter or facet panel that works with search results.
- Design a mobile navigation pattern, including menu open and close states.
- Define the information hierarchy for top-level sections and secondary actions.
Inject personality into your design by customizing the visual elements of the search bar and navigation menus. This detail can make your mock stand out!